PAB - CSS - My first Css Doc

Css - Article 2

Programming a Baby series

PAB ( Programming a Baby ).
CSS.
My first CSS doc. This article belongs to one of my collections of articles with same reference.

Following the road:

This article is for people that:

already read my previous article ( Programming.a.baby - (CSS) Doc Including in Html).
Or
people that already knows how to make some CSS styling within HTML.

Asuuming that you did read my previous article ; ).

I did an effort to make it the simple as possible, so everyone can understand, practice and accomplish it.

So I wish you will find this article useful.

HTML doc

Step 1 - Create a Html doc

Build a simple Web Page with Html and:

<html>
<head>
your head code here...
</head>

<body>
your body code here...
</body>

</html>

In the Doc's Head, Link to a Css doc called "design.css"
Create some body Div elements, or Tables or whatever you want
Give them a different ID for each one of them
Give them the same Class, or if you wish, give it for some of them

Look the Sample 1 to see how i make, using:

Two Div elements
One Image
One Table

Sample 1 - the HTML code

<html>
<head>
 <title>My Title</title>
 <link href="design.css" rel="stylesheet" type="text/css" /> 
</head>

<body>
<div class="mc" id="d1">
 Div Text1 here...
</div>

<div class="mc" id="d2">
 Div Text1 here...
 <img id="i1" class="mc" alt="image" src="">
</div>

<table class="mc" id="t1">
 <tr>
  <td>Table TD Text1 here...</td>
  <td>Table TD Text2 here...</td>
 </tr>
</table>

</body>
</html>

CSS3

CSS - Cascading Style Sheets

Sample 2.1

.mc {
}

#d1 {
}

#d2 {
}

#i1 {
}

#t1 {
}

Step 2 - Create the Css document

Now with your notepad create a text document and rename it to "design.css"

Inside of it lets build the Class and the IDs that we gave in the Html document

First create all the Css
Then the Css
After, give them some properties like size, color, border...etc

I explain:

In Css a Class starts with a "."
An ID starts with a "#"
After the Class or ID name you must open the tag with "{", write the properties and close it with "}"

Samples

Check the Sample 2.1 were we only build the Class and IDs
Then see the Sample 2.2 were we also give them some properties

Sample 2.2 - the CSS code

	
//This is a CSS Class
.mc {
 border-width:1px;
 border-color:blue;
 font-size:14px;
 color:green;
}

//These are CSS IDs
#d1 {
 width:200px;
 height:100px
}

#d2 {
 width:300px;
 height:100px
 background-color:red;
}

#i1 {
 width:150px;
 height:100px
}

#t1 {
 width:400px;
 height:200px
}

Final and expected results:

Got it?
Since we gave the "mc" Class to all elements then:

the text of all these elements will be "green" and "14px". the border of all hem will be "1px" and "blue".

We also gave different IDs to each elements, so:

Each element will have different sizes.
one of them will have the background color "red".

Another way of accomplishment:

My advise if for you to always use 2 separate files (HML file and CSS file),
but if you prefer to have all the code into a single file (HTML + CSS), then you will need to do this instead:

Do not include the <link for the external CSS in the HEAD of the HTML document.
Instead open a <style element in the HTML Head and paste the CSS code inside.

This means that instead of doing this:

<html>
<head>
 <title>My Title</title>
 <link href="design.css" rel="stylesheet" type="text/css" /> 
</head>
...The rest of the HTML file with the body code from here

You would do this:

<html>
<head>
 <title>My Title</title>
<style href="design.css" type="text/css" >
/*...Put the CSS code here instead*/ 
</style>
  
</head>
	...The rest of the HTML file with the body code from here

Sample 3 - the full mix HTML + CSS code:

	
<head>
 <title>My Title</title>
 <style type="text/css">
 .mc {
 border-width:1px;
 border-color:blue;
 font-size:14px;
 color:green;
}

#d1 {
 width:200px;
 height:100px
}

#d2 {
 width:300px;
 height:100px
 background-color:red;
}

#i1 {
 width:150px;
 height:100px
}

#t1 {
 width:400px;
 height:200px
}
 </style> 
</head>

<body>

<div class="mc" id="d1">
 Div Text1
</div>

<div class="mc" id="d2">
 Div Text2 <br />
 <img id="i1" class="mc" alt="image" src="">
</div>

<table class="mc" id="t1">
 <tr>
  <td>Table Text1</td>
  <td>Table Text2</td>
 </tr>
</table>

</body>

</html>