Cascading Style Sheets: Introduction
Cascading Style Sheets: Styling your web pages.
Also available in SPANISH
A quick introduction to Cascading Style Sheets, a key tool for web designers.
I was recently asked about CSS on the killersites web design forum and liking what I wrote, I decided to use the post to begin this article.
CSS is the acronym for: ‘Cascading Style Sheets’. CSS is an extension to basic HTML that allows you to style your web pages. An example of a style change would be to make words bold.
For example:
In 'old school' HTML, you would use the <b> tag like so:
<b>make me bold</b>
This works fine, except that now, if you wanted to change all your text that you initially made bold to underlined, you would have to go to every spot in your page(s) and change the tag to the 'underline' tag.
Another disadvantage of 'old school' HTML:
Let's say you wanted to make some text bold, change its font style Verdana and change its color to red - you would need a lot of code wrapped around the text:
<font color="#FF0000" face="Verdana,
Arial, Helvetica, sans-serif"><strong>This is text</strong></font>
This is verbose (too long) and contributes to making your HTML messy. With CSS, you can create a custom style elsewhere (thus separating the styling information from your HTML,) give it a unique name, and then ‘tag’ your HTML to apply the style properties.
This is the same text, now styled with CSS:
<p class="myNewStyle">This is text</p>
To complete this 'style operation', we need to insert this code in between the <head></head> tags at the top of your web page:
<style type="text/css">
<!--
.myNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
-->
</style>
This CSS code defines/creates the style we just applied to the text:
This is text
-
In the above example we include the CSS in the page itself. This is fine for smaller projects or in situations where the styles you’re defining will only be used in a single page.
There are many times though, when you will be applying your styles to many pages - it would be a hassle to have to copy and paste your CSS code into each page.
Besides the fact that you will be cluttering up your page with redundant CSS code, you'll also find yourself having to edit each of these pages if you ever want to make a style change.
Like with JavaScript, you can define/create your CSS style in a separate file that can be 'linked' to from within the page, where you want the CSS code to have effect.
Example:
<link href="myFirstStyleSheet.css" rel="stylesheet" type="text/css">
The above line of code links your external style sheet called: ‘myFirstStyleSheet.css’ to the HTML document. You place this code in between the <head> </head> tags of your web page.
CREATING AN EXTERNAL STYLE SHEET
To create an external style sheet, all you need to do is create a simple text document (on Windows you simply right-click and select new -> text document) and then change it from the file type '.txt' to '.css'.
For example:
style.txt becomes style.css
You change the file type by just changing the file names extension. The file name’s extension on Windows tells the computer what kind of file it is and allows the computer to determine how to handle the file when, for example, you try to open it.
You probably guessed it, CSS files are just specially formatted text files ... much in the same way HTML pages are.
There is nothing special or different in the file itself, rather it is the contents of the file that make an HTML document and a CSS page what they are.
When working with an external/separate CSS document, there are a couple of points to remember:
1. When you insert CSS code directly into the page itself, you need to wrap the CSS code in these tags:
<style type="text/css">
... (CSS code goes here)
</style>
2. When you place all your CSS code in a separate document, you should NOT include the above CSS wrapper tags in your CSS document - you just need to write out your CSS code.
You would just add your CSS code directly to the page like so:
.myNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
.my2ndNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
.my3rdNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #FF0000;
}
In the above example, I've created a series CSS classes that can be applied to any HTML tag like so:
<p class="myNewStyle">My CSS styled text</p>
or
<h2 class=”my3rdNewStyle”>My CSS styled text</h2>
You will notice that I applied a CSS style to a <h2> tag. Normally this tag sets the size of the text that it wraps, to a size that is preset in the browser (ex: 10 pixels).
When you apply a CSS class to it, the CSS code overrides the default size that you would normally get with an <h2> tag in favor of the size specified in the CSS class. So now you can see that CSS can override default HTML tag behavior!
In the above examples, I have CSS code where I define my CSS classes and then ‘apply’ them to various elements in the page. Another way to apply CSS is to globally redefine an HTML tag to look a certain way:
h1 { font-family: Garamond, "Times New Roman",
serif; font-size: 200%; }
What this CSS code does is set the font style and size of all <h1> tags in one shot. Now you don't have to apply a CSS class as we did before to any <h1> tags since they are automatically all affected by the CSS style rules.
Here is another example of where I give the whole page bigger margins:
body { margin-left: 15%; margin-right: 15%; }
As you can see, you can redefine any tag and change the way it looks! This can be very powerful:
div {
background: rgb(204,204,255);
padding: 0.5em;
border: 1px solid #000000;
}
Set in the above code, any <div></div> tag will now have a background color of ‘rgb(204,204,255)’ and have a padding of 0.5em and a thin 1 pixel border that is solid black.
Color in CSS can be expressed in a few ways:
- In Hex -> for example: #000000 – this is black and this: #FF0000 is red.
- In rgb -> rgb(204,204,255) is a light purple blue color.
- With named colors like: ‘red’ or ‘blue’
I typically use hex color since I am familiar with them, or I just use named colors. So the last example can be rewritten like so:
div {
background: green;
padding: 0.5em;
border: 1px solid #FF0000;
}
So instead of ‘rgb(204,204,255)’ , I just specified ‘green’.
By using RGB (RGB is the acronym for: ‘Red Green Blue’) and Hex color, you can really get the exact color you want when you know your codes. Luckily, many programs (like Dreamweaver) provide easy to use color pickers for you, so you don’t need to know the values for the code.
-
In this last example I will show you the ‘super cool’ CSS code that allows you to create link roll-over effects without images:
:link { color: rgb(0, 0, 153) } /* for unvisited
links */
:visited { color: rgb(153, 0, 153) } /* for visited links */
:hover { color: rgb(0, 96, 255) } /* when mouse is over link */
:active { color: rgb(255, 0, 102) } /* when link is clicked */
The above CSS will cause your links to change color when someone hovers their mouse pointer over it, instant rollovers with no images!
One important note with the above code: it is important that the style declarations/rules be in the right order: "link-visited-hover-active", otherwise it may break it in some browsers. A good way to remember this order is "LoVeHAte"
CSS is very powerful and allows you to do things that you can’t do with standard HTML. It is supported nicely now in all the modern browsers and is a must-learn tool for web designers. The above examples are just a small sample of what you can do with CSS, but it should be more than enough for you to start styling your pages nicely.
A MINOR WARNING:
Like with many technologies, CSS has a lot of capability that most people will not need to use often - so don’t get caught in the trap of thinking that if there is some functionality/feature available, that you have to use it.
BTW: The killersites forum has a great feature that allows you to do some pretty powerful searches against what was discussed. For example, if you type ‘CSS’ in the search box, you will get a list of all the post regarding CSS. This feature makes the forum archive a great source of information.
A FINAL COMMENT:
Now that you have the basics covered, why not try my CSS tutorial.
Stefan Mischook.
Top