And now, I'm going to show you CSS and what we can do with it. I don't want to just leave you with a bunch of random techniques, however, so later I'm also going to show you how to apply that knowledge and some of the different methods available for creating fully operational battle-stations... I mean, web-pages. So, my little minions... read on!
External Stylesheets
The best practice with CSS is to put our CSS into an external file, called a stylesheet. We do this by creating a file with the name of our choice, with a .css file extension, so that it's easy to tell what it is...
Then, to use that CSS file, we put a reference to that file in the <head> section of every web-page that needs those styles. Assuming we have named the file "stylesheet.css", that would look like this:
<html>
<head>
<title>Document Title</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
...document content here...
</body>
</html>
The link element when used in this way is for including external files into the header section. The rel attribute is used here to specify that the file we're including is a stylesheet. The type attribute is used to specify that the type of information is text-based, and is a Cascading Style Sheet (CSS). The href attribute functions in the same way as it would when putting a link into your web-page, and just points to the file in question.
In the stylesheet, we put all of our style information. Every one of your web-pages that uses the stylesheet in the said way will then take on an appearance based on the presentational information in that stylesheet. This gives you a lot of power, because it means that you can change the appearance of every one of these web-pages simply by altering the stylesheet! Your web-pages will also load more quickly overall, because once the visitor's browser has downloaded the stylesheet information, it will be "cached" or "stored" on their computer. This means that when they continue visiting the other pages on your website, they wont have to download the stylesheet again, meaning your website will load more quickly!
Internal Style Information
Another method is to put all of the CSS information directly into the <head> section of the document, which will generally look like this
<html>
<head>
<title>Document Title</title>
<style type="text/css">
...style information here
</style>
</head>
<body>
...document content here
</body>
</html>
If you want to you can use this method when you create your web-pages, it works perfectly well and there is no particular rule against it. The only drawbacks are that if you have several web-pages on your web-site, all with the same styles, you will need to change every single web-page's style information individually! Additionally this information is not cached by the browser, so all of that style information will be downloaded again each time the visitor moves to a different web-page on your website, which is slower and less efficient.
Inline Styles
Style information can also be put directly into the HTML. The entire point of having a separate stylesheet however, is that it allows you to separate the presentational information out from the web-page itself. It is however handy to be able to style elements directly like this. It comes in handy for one off styles, and helps when you are developing your website or just simply experimenting with an idea about changing the look of something. Anywelch, inline styling is done like so (using a paragraph element as en example).
<p style="...style information here">Our kangaroos are of top quality blah blah blah</p>
Okay, so that covers the overall ways you can use CSS, now let's actually get on and learn the different CSS techniques! I'm personally very excited and am waiting for you in the next chapter... but you've still gotta take the quiz first!