Cascading Style Sheets Basics

This page has cascading style sheets basics; what they are and how to get the most out of them with the least effort.

Just the name Cascading Style Sheets (CSS) put me off using them for a while because they sound complicated, but they're really not that hard to use. I'm glad I did take the plunge because style sheets have a lot of advantages.

You get more control over style than with plain HTML
Your website is easier to update
They keep your entire site uniform
They simplify and save time coding your pages

What Are Cascading Style Sheets?

Style sheets are a separate file in your website or code in a web page that defines how different elements (such as headings) look on the web page. You can specify what fonts to use, font colors, size, weight, background colors, borders and a whole heap more.

The term cascading just means that there are a number of ways of defining style when you're building a web page, and they have a hierarchy that determines which one is used.

The default HTML styles are lowest in the hierarchy
External style sheets which can apply styles site-wide have priority over the default styles.
Internal style sheets that apply styles to a whole page come next.
Inline styles that apply a style to a single word, or a part of a page, have the highest priority.

That all makes a lot of sense, because you can have an external style sheet giving a site-wide style, but if you want to change a style on a page for some reason, you can do so.

How To Use Style Sheets

I'm going to concentrate on external style sheets because that's what you'll use site wide. They let you specify the styles for your entire website, and they let you change the style of any element on every page by making changes to just one page.

Here are the basics of using external style sheets.

First, you make a page with your styles on it and save it with a .css extension e.g. stylepage.css

Next, every page that uses that style sheet has to link to it with a special “link” tag as shown:

<link href="stylepage.css" rel="stylesheet" type="text/css">

“stylepage” of course is the filename I chose, and you need to put your own css page filename there.

The link goes in the header section of the source code on your web page. Put it in your template, and then every page you build will link to the style page.

Some web page editors will have an “attach style sheet” tool. Click on that, choose your style sheet, and the web page you're building will link to the style sheet without you having to edit the source code directly.

Making External Style Sheets

You don't have to hand code a style sheet. Most website editors have support for style sheets and it's just a matter of finding where. If it's not obvious where the CSS editor is, have a look at the Help.

In Nvu, click on Tools at the top of the page, then click on CSS Editor. You'll get a dialog box as shown but without the entries in the left hand pane.

Nvu CSS editor. I've already created an external stylesheet and modified four styles.

To make an external style sheet click on the Link elt button. The right hand pane will change so that you can enter a URL for the new CSS file. Just type in your filename with a .css extension e.g. stylepage.css.

If the file doesn't exist it will be created for you. There's a line for a title if you want to use one, and a line for a media list. If you don't fill that out it defaults to “all” when you create the style sheet by clicking the Create Stylesheet button.

After you've created the stylesheet you can create or modify styles. Click on the Rule button. The right hand pane changes again, and you can choose the type of style. I use the style applied to all elements of type option. You can use that to modify existing styles such as the h1 heading tag, or you can create an entirely new style.

Say you want to change the h1 tag. Type h1 in the space provided, and click the Create Style Rule button. The right hand pane changes to say Style Rule Selector h1.

Text options in the Nvu CSS editor.

At the top of the CSS editor is a row of tabs. Click the Text tab to get all the options to define how you want the text to look. You can change font, font size, weight and style and color, the case (upper, lower, capitalize, and no change, and alignment, plus underline, overline, line-through, and (if you've got really bad taste) blinking.

Other tabs let you change backgrounds, borders, and even more.

Do a bit of experimenting to see what happens with different style options.

You'll notice that you can do more and you have more control with cascading style sheets than if you just use the default HTML styles.

Making Your Own Style

You're not restricted to changing existing styles. I made up a style just before, using Nvu, that I called “bigred”. Guess what that one does! In case you're having trouble (joke) it makes the text big and red.

To use it I have to go into the source code and put <bigred> in front of the text I want to change, and </bigred> after the text.

Internal Style Sheets Basics

Internal style sheets specify the styles on one page only. The code is placed in between the <head> and </head> tags at the top of the HTML source code for the page.

Your web page editor should have a CSS editor that lets you do his too. In Nvu, instead of clicking on the Link elt button as above, click on the Style elt button. Then making the styles is similar to the external style sheets explained above.

Inline Styles

An inline style is one that styles a piece of text on one page, e.g. making a word bold. Highlight the word or words and use the status bar at the top of the page to make changes such as making it bold, underlined, change the font or font color etc.

You can also make changes in the source code directly if the status bar doesn't have the style you need.

Other Web Page Editors

Every web page editor does things differently, so you'll have to find out exactly how to use yours. I find the Help pages often leave a lot to be desired, but it's probably your only option unless you know someone who's good with your program.

The Site Build It web page builder doesn't give you the option of using Cascading Style Sheets because you don't need them. It's even easier. You choose one of their templates and then you get to modify it if you want to. I only made a very small mod with the template I'm using for this site. Of course, you don't have to use the built in web page editor if you don't want to, but I used it for about 95% of my last site because it's so easy.

Return from Style Sheets Basics to How To Build Web Pages

Return to Building A Website Home