Corrosive Online
- Web Design
- Graphic Design
- Articles
- Tutorials
- Downloads
Tutorials
CSS Explained
The Concept
The idea behind CSS or 'Cascading Stylesheets' is a fairly simple one once you understand it. It is all about separating style from content. Your HTML page holds the content of your website and you control the styles from a separate document called a stylesheet. If you haven't already, then read my tutorial on HTML Tags. Styles can include; where a Tag is positioned on a page, colours, background images, text sizes and so on. There are a few reasons for separating styles from content.
Search Engines
Search Engines such as Google or Yahoo want to find a document that is easy to read and make sense of. Those 'spiders' or 'bots' aren't all that clever but they also don't need to see all of the nice images or variable text sizes that you want a human visitor to see. So, it makes sense to separate the two. A human viewer's browser will download the stylesheet and display the styles. A Search Engine will just see the text.
Easy Updating
Once your page is constructed using CSS you can make site-wide changes using a single piece of code. See the image below. This indicates that a number of HTML pages have blue text controlled by the stylesheet;
If I want to change all of that text to red then all I will have to do is change the single piece of code in the stylesheet and the change will 'cascade' down through all the pages where the text style has been used.
Keeping up so far?
Faster Download Times
When you visit a web page for the first time your browser should 'cache' or 'store' some of the information so that subsequent visits to the page download more quickly. When you use an external stylesheet the browser 'caches' it. This means that, even if you are visiting new pages in the same website, it already has some of the required information stored, so CSS based websites download more quickly for visitors.
Web Standards
Using CSS is the standard amongst modern designers. If you want to do a professional job then there is no way other than CSS. Web standards are designed to make sure that browsers understand how pages should be displayed and also ensure that users with disabilities, such as blindness, get a good web experience.
Linking Your Stylesheet
In order for your stylesheet to work you must make a reference to it somewhere between the 'head' Tags of your page. The links can be either relative (based on your site structure)
<link href="css/main.css" rel="stylesheet" type="text/css">
or absolute (including the full website URL);
<link href="http://www.yourdomain/css/main.css" rel="stylesheet" type="text/css">
Examples of CSS
CSS styles are written using curly braces { } and start with a Tag name (in the case of pre-defined HTML Tags such as h1, h2, h3, p etc.), a . or a #. It is important to understand the difference between these;
- Pre-defined Tags: These are the Tags that hold constant throughout HTML. You cannot re-name these but you can alter their appearance using CSS and they can be used as many times as you like in a web page. An example of this would be;
h1 {font-size: 16px; color: #f00;}
Now any instance of h1 in your web page will have a font size of 16 pixels and be red.<h1>This is your page title</h1>
- Classes: You can name classes as anything you want and they can be used many times in a web page. Classes can be applied to all Tags. An example of a class might be;
.box {
You can apply this class to a div Tag like so;
border: 2px solid #f00;
width: 100px;
padding: 5px;
}<div class="box">Box Contents</div>
or to a pre-defined Tag, such as the 'paragraph' Tag;<p class="box">Paragraph Contents</p>
- IDs: You can name an ID as anything you want but you can only use one instance of it on a page. IDs are usually reserved for banners, columns and other parts of the main page structure. An example of an ID might be;
#banner {
This can then be referenced in your HTML web page by using;
background: #f00 url('banner_image.jpg') no-repeat top center scroll;
width: 800px;
height: 200px;
}<div id="banner"></div>
This is all that you really need to understand about the concept of CSS and how to apply it to HTML. The next tutorial I suggest you try is around the CSS Box Model as it explains how to use margins, padding, widths and heights to create a CSS based website page layout.
