I’m going to hopefully teach you the basics which will help you begin the transfer from HTML to CSS.
Validating your code
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Validating your code is important and everyone should do it. It’s a standard set by W3C and helps cut down on cross browser errors. This meaning that sometimes your website could look perfectly fine in Firefox but something could be out of place in IE and this seems to be very common.
Linking to the External CSS File
<link href=“style.css” rel=“stylesheet” type=“text/css”>
This will be placed inside the head tags of your html. Here I’m linking to a style sheet named ‘Style.css’, if you named it something else or have it in a separate folder then remember to link to it! Otherwise you’ll see no styling at all!
Creating your first external style
#box {
width: 300px;
height: 100px;
padding: 5px;
margin: 10px;
border: 1px solid #000000;
background-color: #f8ffc9;
}
Now you might be looking at this and thinking what the hell, but let me explain. At the beginning we start of with a ‘#’, this is to tell the Validator that this ’style’ will only be displayed once on the page. Now you’re thinking then there must be a different symbol we use if we want something displayed more than one, well there is and that’s using a ‘.’ infront of box.
Here’s an example of using the ‘.’ instead of the ‘#’
.box {
width: 300px;
height: 100px;
padding: 5px;
margin: 10px;
border: 1px solid #000000;
background-color: #f8ffc9;
}
What’s padding? Margin? Whah!
Here’s a little run down on what the code does. Height & Width are self explanatory, padding controls how close you want the text to appear inside the box. If you want text touching the border then leave it at ‘0′, however for presentation a few pixels would be better.
Margin works the same however it controls how close it is to objects outside the box. Moving onto border, this will add a 1px line around the box and this line will be colored black. Last but no least is the background color, this is a very common style used and is also self explanatory. This will fill our Box with the background color of ‘#f8ffc9′ which is a slight creamy color.
How do we get the style to display on my webpage?
<div id=”box”>Text</div>
This calls the style called ‘Box’ and at the start it uses ID to select the style, this is because we only want to display it once. Here’s how we display the same style many times.
<div class=”box”>Text</div>
Instead here we are using ‘Class’, you would generally find these being used on font styles.
Here’s the hardest part!… sike
That’s it! The basics and first lesson on understanding CSS. I hope that wasn’t to hard and hopefully you will all be CSS Gurus in a short time! If you have any problems or questions then please leave a comment!
