CSS in Web Design

[Dilbert]

Changes since original version:

Version 1.01 - Small proofreading done; clarifications added.
Version 1.02 - Added section on multiple external style sheets.
Version 1.03 - Added section on importing style sheets.
Version 1.04 - Added section on CSS comments.
Version 1.05 - Modified section on importing style sheets.
Version 1.06 - Added info on pseudo-classes; corrected terminology.

Note: This tutorial assumes you are familiar with at least basic knowledge of HTML.

Question
What is CSS?

Answer
CSS is short for "Cascading Style sheets". It is a method of formatting text when building HTML Web Pages. Using multiple style sheets will cause them to "cascade", hence the name.

Question
Why should I use CSS?

Answer
There are two very important reasons. The first is that it replaces deprecated tags. Deprecated tags are obsolete tags made obsolete either by newer HTML code or by CSS. Browser support for deprecated tags decreases with each new generation, so eventually to comply with newer versions you will need to learn CSS.

Another good reason is that if you use a "master" style sheet, it is possible to change one setting and have it apply to all documents that use that style sheet. Change the layout of 20 tables on 5 pages with one small edit! Impossible, you say? Not with CSS!

Question
How do I use CSS?

Answer
The main syntax of a CSS setting is:

Selector.Class { attribute: value; attribute: value; }

There are also pseudo-classes, such as:

:link - properties of unvisited links.
:hover - properties of links when the mouse is over them.
:active - properties of links when they are being visited.
:visited - properties of links users have visited.

Kudos to robpomeroy for name correction and pseudo-classes.

The key for this is as follows:

Selector: Where this class applies. (Each set of values is considered a "class") For example, p.fire would only work with the <p> tag, and td.fire would only work with the table cell. If you specify an asterisk (*.fire) then this class will work with whatever you assign it to.

Tip

So why would you ever use anything besides *.etc, anyway? Well, if you want the same name to mean different things to different tags, you can specify that and only need to use one name.

For example, let's say you wanted to create a fire theme for your web page. Let's also say that you want paragraphs to be red on a black background, and table cells to be black on a yellow background. You could use these CSS classes, even in the same style sheet:

Code: [Select]

p.fire { background-color: black; color: red; }
td.fire { background-color: yellow; color: black; }
Both will use the same class name, so when you call classes in HTML you can just specify "fire" across the board and it will effectively apply your theme.

Class: Whatever you want to call it. Ideally, you want it to be short while being descriptive at the same time. In other words, if "one" isn't significant to you, don't name your attribute that.

Attribute: The part of the element you want to modify. Valid attributes include background-color, text-indent, border-style, and more.

Value: What you set the attribute to. For example, a valid text-indent value would be "2%". A valid background-color value could be "black". Acceptable values vary from attribute to attribute.

NOTE: It is not necessary to include the spaces between the { and the code and the }; however, this makes your classes much more readable.

Tip

In order to keep track of what class does what in your style sheets, you will want to implement comments. Comments in CSS are very simple to put in, and they will help identify what your code is about. Comments are placed between /* and */. For example:

Code: [Select]

/* Background for the main site */
body { background-color: blue; }
Codes can also be multi-line, as in this example:

Code: [Select]

/* Background for the site.
Note to IT: Blue not a good color; blends with images */
body { background-color: blue; }
Use them when appropriate, but be careful of overdoing them. You don't need a paragraph on the table cell element; a sentence or two will do.


Now, you need a place to put all these classes, right? Well, there are several methods of doing this. They are:

[Dilbert]

• Create an external style sheet. Open Notepad and type in your classes. When done, go to "file" and "save". Under "File types", select "all files(*.*)". Save it in the same folder as your home page. Name it whatever you'd like, but make sure the name ends in .css.

From within your HTML document, make a new line between your <head> and </head> tags. In this new line, type the following:

Code: [Select]

<link rel="stylesheet" type="text/css" href="mystylesheet.css" />
replacing "mystylesheet.css" with the name of your .css file.

But those classes are not automatically applied. To apply them, when you make your tag, add 'class="myclass"' to the end. For example, if you had the following class:

Code: [Select]

p.fire { background-color: black; color: red; }
Then in your HTML, if you wanted a paragraph to have this style, you'd type this:

Code: [Select]

<p class="fire">This text uses a FIRE class!</p>
and you'd get nicely formatted text (assuming you declared the .css file in the <head></head> tags). This method is ideal for creating a "master" style sheet that applies to the entire site. For example, if you created a style sheet and linked to it in all of your pages, you essentially have applied a style to the entire site. This way, if you want to change the background color of all your pages, you don't have to modify the bgcolor attribute in every page - that attribute is deprecated anyway. Instead, just change the value in your style sheet, and bingo! the whole site changes.

• Create a style sheet inside your web page, called an internal style sheet. To do this, underneath your link to the .css file (if you use it) type the following:
  
  
  Code: [Select]
  <***style*** type="text/css">
<***/style***>
  ***PLEASE NOTE: Wherever I use a style tag, I am forced to put the *** in the tags. Do not use those ***'s in your actual tag!
  
  Between the two <style> tags, place all the classes you would normally put in a .css file.
  
  
  Tip
  You may be thinking: "Why would I use this method when I've got this nifty .css file?" And the answer is this: You use this method if you want one page to be the exception to the overall style. More detail on this later.
  
  
• Use inline styles within the tag. To do this requires no additional tags. Let's return to the p.fire example. You can do this within a <p> tag by typing this:

Code: [Select]

<p style="background-color: black; color: red">This paragraph uses a specially-defined FIRE style!</p>
And there you have it: Perfectly formatted text without even defining a style.

Tip

So why on Earth would you define this here instead of at the top of the page? You may have already guessed it, but I'll make it perfectly clear: If you want a particular paragraph or cell table to be different from all the rest on the page and site, this is the most efficient way to do it. Should your whole site be designed this way? Nope. Use the first method unless you need exceptions to the rules you specify.
[/list]

Question
Is it possible to use two classes in one element?

Answer
Yes! The fact that you can, I've found, is very freeing. It eliminates the need for an additional class that just combines two other classes. To do this is extremely easy.

Code: [Select]

<p class="fire brimstone"></p>
The above code will call the FIRE class and the BRIMSTONE class.

However, you should note that it is possible for two classes to conflict. For an example of this, let's say you have a .css file that includes

Code: [Select]

p.fire { background-color: black; color: red; }
and let's also say you have a one-page <style> that includes this line:

Code: [Select]

p.brimstone { color: yellow; }
and you call them both in a paragraph:

Code: [Select]

<p class="fire brimstone">This paragraph uses two classes!</p>
Then you will have a CSS conflict. Can you see where? That's right: The color attribute. Remember that browsers cannot display both classes; they must choose one or the other. But how is this done? Which one will it choose? The only reason the page doesn't crash when receiving this information is because CSS can save itself and provide a handy feature at the same time (another good reason to use CSS). CSS sets priorities for each type of style. The order is as follows:

• Inline styles in tags receive priority I. If you set a specific color in a physical definition, then the only thing that will make it display anything other that that is you changing the values.
• Styles defined in the page itself recieve priority II. They will change any values set by the external style sheet, but they themselves are overriden by inline styles.
• External style sheets (.css files) receive Priority III. They have the final word only if there are no other conflicting classes declared in a page or in a tag.
• Imported stylesheets get last priority. They have say only if no other styles conflict.

Note

You may notice that I have no lessons on importing style sheets so far. I will include them, but they are banished from the other methods because this method is a special case.

[Dilbert]

So in my example, what color would the text be? The master style sheet says red, but that is overriden by the one-page style sheet, which insists on yellow. So, the background color for that paragraph would be black, and the text would be yellow.

I can just HEAR you saying to yourself, "why not just change the master style?" The answer is the very reason you ever declare a style in a page. The rest of the site uses the red text; it's just the one page (or more) that use this exception. However, if you want to use two or more pages that use completely different styles, you might consider making a *second* .css file, and only linking to the second one. It should have all the info that you need to do these particular pages, just like the first one. You just don't link to the "master" .css file. I consider this a "secondary" .css file. It is very useful for creating sub-divisions of your site devoted to seperate topics.

Example:

You have a style sheet, master.css. You create about 10 pages that are linked to this master.css. However, you want three of these pages to have different color schemes. So, you create a secondary.css (you can call it whatever you want again, this is just an example) and in those three pages, you change the link to link to secondary.css instead. Then you change any class names you need to change in your HTML document to make them match up.

Importing style sheets

This device for gathering CSS information is available, but it is only mentioned because of this fact. As I'll explain in a bit, importing style sheets is truly pointless.

To import a style sheet in an external style sheet, include the following line:

Code: [Select]

@import "thirdstyle.css";
This code would include thirdstyle.css in the external style sheet.

From within a HTML document, include this (REMEMBER TO EXCLUDE THE ***'S!)

Code: [Select]

<***STYLE*** TYPE="text/css" MEDIA="screen, projection">
<!--
  @import "thirdstyle.css";
-->
<***/STYLE***>
You can also import from a web site.

In an external style sheet:

Code: [Select]

@include url(http://www.htmlhelp.com/style.css);
And in an internal style sheet (EXCLUDE THE ***'S!)

Code: [Select]

<***STYLE*** TYPE="text/css" MEDIA="screen, projection">
<!--
  @import url(http://www.htmlhelp.com/style.css);
-->
</***STYLE***>
Importing style sheets is fairly useful if you're using two external style sheets on your computer. If you have 15 pages with one style sheet and 5 pages that need exceptions, you can import them, and change any attributes you want in the style sheet. However, if you know the URL of the style sheet, why not download it, and use it as part of your own? After all, their style may change, and if it does, you're out one very nice style. Might as well keep it for your own purposes.

Question

Is it possible to use two external style sheets (two from .css files)?

Answer
Yes! It is possible. You can simply include two link lines in the <head></head> tags. However, unless there is an absolute need to, why bother? You can combine the two or define any additional ones in the HTML file.

Tip

A good time to use two external style sheets is when offering choices for the disabled. For example, you could create a style sheet with everything at normal size, and one with larger fonts. It could work like this:

Code: [Select]

<html>
<head>
<title></title>
<LINK rel="stylesheet" title="normal" href="master.css" type="text/css">
<LINK rel="alternate stylesheet" title="large" href="largefont.css" type="text/css">
You could provide a service that lets users choose what kind of stylesheet they want implemented. To do this requires JavaScripting.

NOTE: In the above example, I use several attributes I have not discussed. They are:

REL - Set to "stylesheet" for a master stylesheet; set to "alternate stylesheet" to be a secondary stylesheet.
TITLE - The name of the stylesheet. Useful in JavaScript.

Neither of these are needed unless you are using multiple style sheets.

Sources/useful links

The W3school's lessons on CSS
The complete list of CSS attributes
Information on multi-class tags
Note: The page in the above link uses single quotes in their examples. It's generally a good idea to use double quotes (" instead of ').
A complete color-code listing of colors and their hexadecimal values
(it's generally a good idea to use hexadecimal instead of arbitrary words like "blue" or "teal". With words, rendering changes from browser to browser; with hex, it's unmistakable.)
The W3C's info on CSS

And my favorite of all sources:
http://www.google.com
Whatever else you need to know you can usually find here.