SINALSOFT 

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:

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> 
  1. In the Doc's Head, Link to a Css doc called "design.css"
  2. Create some body Div elements, or Tables or whatever you want
  3. Give them a different ID for each one of them
  4. 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:

html

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
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

  1. First create all the Css
      Classes
  2. Then the Css
      Ids
  3. After, give them some properties like size, color, border...etc

I explain:

Samples

 

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 results.

Final and expected results:

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

  1. 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:

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:

  1. Do not include the <link for the external CSS in the HEAD of the HTML document.
  2. 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>

Of course this is only the beginning of what you can make with Css, so keep reading my next articles about Css and easy learn how to do.
I keep links in the bottom of the page and i update them each time i finish a new article.

Go to the Next article >> CSS styles in the HTML body.

<< Return to the index of CSS Articles

author
Author: Paulo Portela : created between 2009 and 2013



SINALSOFT - 2003 - 2023