Sassy CSS

CSS!

Cascading Style Sheets help personalize and create a web page. It allows the style of a web page to be kept entirely separate from the content of a web page. This not only saves bandwidth, as when the DNS cache the data and location it also saves the CSS data and doesn't have to completely re-download the styles for every refreshed web page.

This also makes it a lot easier for editing.

Rather than editing each separate page of the HTML data (which could be hundreds of pages), you can simply edit one CSS file and change what is needed.

Firstly, ya need to link your CSS to your HTML file. 

This is just done by saving the CSS in the same location, then you simply <link href="whatever i called my folderdoodly"

I then need to repeat to the silly HTML that its a css file.

So after the folderdoodly" rel="stylesheet" type"text/css" />

Yay. Its linked. 

We then went on to basic syntax and structure
h1 {color:#FFFF;
font-size:14px;}

CSS uses the curly brackets instead of the <
ie. if i wanted to change the background colour of my main container i would type

#container {
background-color:#CC0000;
}
This will only change the background colour
Yes, I have spelt colour wrong, but the CSS only reads american english and so we are required to use their silly spelling.
The # in front of the ID is because the CSS also won't recognize the name I have given to the div.
I called my main body the container so the #container allows the CSS writer to identify the area that I want to change.

We also had to reset the basics, so the margin, border and padding (inside the box) are all reset to 0.

Setting the font-family is done by choosing a cascading selection of fonts
ie. tahoma, arial, sans serif
This means that if the web browser doesn't have tahoma installed, it can then use arial as a backup and if arial also isn't available, it will use whatever the default sans serif font is.

There are also three separate codes for identification;
ID is the #container
Class is the class that you want it in .orange
* is the universal CSS code and is used in things like the
 *{margin:0;
border:0;
padding:0;}

For adjusting width and height of divs, it is simply changed by typing
width:960px; within the { brackets in the area the change needs to be made.

Floats are how the divs are positioned on the page. So 3 containers that need to sit side by side horizontally on the page will automatically align vertically and to the left.
So to change this float tags are needed.

ie.
#boxone { float:left;
}
#boxtwo{ float:left;}

This will make the boxes change position, which can also mess around with the rest of the page.
So to stop anything below these boxes automatically floating up, the tag clear:both; is used.
So that pretty much sums up the CSS we have learnt this week.

=]