Simplest Ever Cascading Style Sheets (CSS) Tutorial

emory @ clickfire — Sat, 24 Nov 2007 16:53:07 +0000

CSS Tutorial Requirements:

Beginners Only
Basic knowledge of HTML
No knowledge of CSS
5 – 10 minutes
2 brain cells of any size and color

Insultingly Easy

Efficient use of Cascading Style Sheets means faster page load times for visitors and easier administration for webmasters. CSS are a set of rules that determine how page elements look (or how they will be styled). Elements are the items between the HTML tags that markup the structure of a web page document. For example, the tag contains the body element.

There are 4 ways to use cascading style sheets: inline, embedded, imported and external. We’ll look at the one that’s the most powerful and widely used: external. With this method, an external CSS file is linked to the HTML document so that the CSS file can be easily changed to update the style of all HTML documents linking it.

Step 1 – Basic CSS Syntax

If you remember nothing else from this tutorial, make sure you embed the basic syntax for CSS deep into the crevasses of your brain:

selector {property: value}

If you become confused, just chant “selector, property, value” three times and that should help get you back on track. The above three components of a CSS rule can be defined as follows:

The selector is simply an HTML element such as h1, p, table, etc.
The property is the characteristic of the selector that you want to change such as color, font, width, height, etc.
A value is assigned to the property, such as a number defining the size of the font.

A real life CSS example using the above syntax would be:

h1 {color: black; }

The above rule tells a browser like Internet Explorer or Netscape to display all text between the heading tags

and

as black. A style sheet can set rules like this for any allowable HTML element. You will likely want to create style sheets with rules that make the heading, paragraph, link, and table text a certain color, font, and size. You’ll want the body background to be a certain color and maybe the tables to be a certain color.

Webmasters and developers might create a hundred or so rules in a given external style sheet. To get an idea of how this is done, expand the above example to include styling for font type, and size of the h1 selector:

h1 {color: black;
font-family: arial, helvetica;
font-size: 14pt}

Notice:

A colon, “:” separates the property and value declarations (as in color: black).
The “{” curly braces enclose all the property and value declarations.
A comma, “,” appears between alternate values (if the browser can’t find arial, it loads helvetica). A comma can also separate multiple selectors.
A semicolon, “;” follows all lines except the last one. That’s because the semicolon signifies that another rule is to follow.

What if you want to declare more rules? Go a bit further and add rules to style the paragraph tag (

) and throw in a background color for the body:

h1 {color: black;
font-family: arial, helvetica;
font-size: 14pt}p {color: gray;
font-family: verdana;
font-size: 12pt}body {background-color: white}

The above example should show the heading in black 14pt arial, paragraphs in gray 12pt verdana, and a white body background.

Tip: When declaring rules for fonts in your CSS file, remember to use a common font such as arial, verdana, helvetica, etc rather than an uncommon one. If your website’s visitors don’t have the font you reference, they will be welcomed by the unforgiving default font.

Step 2 – Open Notepad

From your Windows Start Menu, click Start > Programs > Accessories > Notepad

You have probably used Notepad if you are familiar with HTML, however, any text editor or HTML editor should work fine for this CSS tutorial.

Step 3 – Insert Code

Copy and paste the final code from Step 1 into the blank Notepad document as below:

This will be your external CSS file.

Step 4 – Save CSS File

In Notepad, go to File > Save As

Find your Desktop under “Save in:” and highlight it. Type the name “default.css” in the file name field.

Little known secret: an external CSS file is just a text file (.txt) saved with a “.css” extension.

Step 5 – Create an HTML File

Open Notepad again as in Step 2. Type in the following HTML code:

This will be your HTML document that links to the cascading style sheet file created in the previous steps. Notice that the above code appears as very basic HTML except for the line of code between the and tags which reads:

This is what links the external CSS file “default.css” to the HTML document and causes the HTML document to style itself accordingly.

Step 6 – Save as an HTML File

In Notepad, go to File > Save As

Save the file as in Step 4, except this time, save it on your Desktop as “mycsspage.htm.”

This is the HTML document file.

Step 7 – Open the HTML File

Look on your Desktop and double-click on the file you saved called “mycsspage.htm.” Your browser will open up and you should see this:

If the page in your browser doesn’t look something like the above, then the most likely reason is due to a typo somewhere in the CSS file or HTML document. A typo in the code linking your CSS document will prevent any styling from appearing.

Notice:

The heading text is larger than the paragraph.
The heading color is black.
The paragraph color is gray.
The background color is white.

Note:

It is very important to enter the file location or url correctly in the HTML document that links to the external cascading style sheet. Otherwise it will not display. In our example, both the external CSS file and the HTML document were in the same directory (your Desktop). In the real world, instead of linking to your desktop, you would link to the location of the external CSS file on your web server, in which case the path might look like this:

instead of this:

Experiment with changing the rules and adding new ones in the CSS file. Remember that you don’t have to use HTML tags like the font tag anymore, if you have defined fonts in an external cascading style sheet. By the way, you’ve just created a cascading style sheet.

There is much more to CSS than covered in this tutorial. There are also several versions of CSS: CSS1, CSS2, and CSS3 which become more powerful with each release. There are also advanced CSS features like class selectors that can greatly extend the webmaster’s control over the way web pages appear. Inheritance in CSS is another important concept that you may want to pursue.

Download a zip of the CSS Tutorial Files:

default.css
mycsspage.htm

Clickfire » CSS