Stylesheets for the Weary | Tech | TheBroadroom.Net | 100% owned and operated by women since 2002

Stylesheets for the Weary

Philosophy
What is a style sheet and why must I learn how to use it?
If I already know "old" HTML, should I learn style sheet formatting?
If I don't know "old" HTML, do I need to learn both?
Do I need to become a style sheet purist?

Practicality
What is cascading?
External style sheets and document-wide styles
Change your line breaks!
Now, get rid of those inline <font> tags

Setting up a style sheet
Now, let's set up a style sheet.
Working between the style sheet and the HTML page
I've got lots of classes, how do I use them?

Quick reference
Changing the background/foreground colors of a page
Using an image as a background
Setting the colors/effects of the links
Setting the font for the page
Changing the font (inline)
Setting colors and fonts for tables

What is a style sheet and why must I learn how to use it?

The "style sheet" concept is not new. When this site was first developed in 2002, there was already a push toward using style sheets rather than inline formatting.

At the time, browsers rendered style sheets very, very differently depending on which browser you were using.

In short, the idea was out there but the implementation of it, sucked. And that is why the first incarnation of thebroadroom.net did not use style sheets at all.

Fast forward to 2004. Browsers now render style sheets perfectly well and almost uniformly. So now I am stuck redoing the entire site.

Why redo it? It is probably not necessary to redo it right now. But the style sheet format makes too much sense to put off doing it.

A style sheet is just a single plain-text file, with the extension .css. You type all of the "cosmetic" HTML formatting for the site--background colors and images, foreground colors, link colors, fonts, font weights and styles, etc.--on this one page.

Sites can have more than one style sheet but you can often fit all of your site's formatting on a single sheet.

You upload the CSS file to your server in ASCII mode. You can put it anywhere but usually it goes inside a directory called "stylesheets."

Then, on each HTML page, you link to the style sheet, inside the <HEAD> tags. You format each element of the HTML page--body, tables, paragraphs, etc.--by calling the "styles" that you typed on your style sheet.

As you can imagine, you have much less code on the HTML pages themselves. You do not need to type out the font face, size and color each time the way you did with inline <FONT> tags.

You can specify not only the font color, but also the font face, weight (bold or normal), style (italic for example) and size for the entire body of every page in your site.

You can specify the same for every table and paragraph in your site.

Should you wish to make a global change of every background color and font in your site, you need change only the style sheet.

So now you can see why it makes sense for you to learn how to use the style sheet. It's easier and cleaner than inline formatting. It's also much, much easier to make global changes to the site. And, it's becoming the standard way of formatting Web pages.

[ top ]

If I already know "old" HTML, should I learn style sheet formatting?

Definitely. If you already know old-style HTML, you will find doing style sheets much, much easier than having to use inline formatting.

The logic itself is exactly the same as old-style HTML, and you will recognize the same attributes.

[ top ]

If I don't know "old" HTML, do I need to learn both?

In my opinion, no, you do not. You can familiarize yourself with the old-style HTML elements for reference purposes; since you will likely run into that kind of code, you should have some idea of what it is.

But you can go straight to using the style sheet type of formatting.

This section assumes that you already know how to make a basic HTML page and send it up to your server. If you don't know how to do that yet, check out HTML for the Clueless first, since it has instructions for starting from scratch.

[ top ]

Do I need to become a style sheet purist?

There is a certain rather religious fervor associated with making your website compliant with Web Standards.

However, as usual, there is still no real standard regarding Web browsers, operating systems, and so forth.

Why not? In theory, there is. Everyone should be using only the most recent, preferably IE, browser on the most recent, preferably Windows, operating system. Everyone should be on high-speed Internet and use the largest monitor available.

I just tried center-aligning everything on an HTML page using the Web Standards text-align: center attribute. It didn't work, in my browser.

Do I need to upgrade my browser? Of course I do. That also means buying a new computer, for me. The one I'm using now does not have the system requirements for the newest browsers.

Again--purism is good for Java, and C, and Perl. It is not good for HTML.

Try to find a balance between what is good about style sheets--the fact that you can globally change colors and fonts, and produce the same results with much less code--and what works over the majority of what people actually use.

Side note: I have visited websites now where I can't actually see the content. I'm sure these sites work on IE 6.x or whatever, but why not make them work over everything that's reasonably recent?

[ top ]

What is cascading?

Not a big deal at all.

Cascading means the same thing as overriding. The style sheet overrides the browser's default settings. You can also override the style sheet by setting document-wide styles (below). You can override all of it by setting formatting within the HTML page itself.

So no, you are not doomed to having your entire site controlled by your style sheet. You can always override it.

[ top ]

External style sheets and document-wide styles

Before we get going doing style sheets, it's well to note that you can define the same formatting at the top of the HTML document itself, between the <head> tags.

This is for instances where you can't use a separate style sheet or where it simply makes more sense to define the formatting for that one page, at the top of the page.

A quick example would be a Blogger.com, "blogspot" template. Since you are publishing your blog to the Blogger.com webspace, rather than your own webspace, it may make more sense to define the formatting at the top of the page and leave it at that. You won't have to create a separate style sheet and then figure out where to host it.

Here is a quick example of how to set up document-wide style definition:

You can put exactly the same classes in there, and call them in exactly the same way, as you would using a separate style sheet.

[ top ]

Change your line breaks!

Yep. We no longer use the <br> tag. We now use the <br /> tag.

Why? I have no idea why. I'm sure there's a reason, but I don't care enough about it to find out. Just get used to adding that extra space and forward slash inside the tag.

[ top ]

Now, get rid of those inline <font> tags

Doing this will make much more sense once you set up your style sheet. But for quick reference, you will no longer need to use inline <font> tags at all.

The equivalent of <font> is <span>. i.e., if you need to set the font for a small amount of text, you can use <span>:

<span class="headermain">
Style Sheets for the Weary
</span>

What is "headermain"? That is the class I set up on my style sheet. If I were not using a style sheet, the code would look as follows:

<span style="font-size: 20pt; font-family: arial,helvetica,sans-serif; color: #000000; font-weight: bold;">
Style Sheets for the Weary
</span>

Style Sheets for the Weary

As you can see, using <span> without a style sheet or document-wide style definition, is not an improvement over <font>. But once you start defining your classes, you will need to use much less code inside the body tags of your pages.

[ top ]

Now, let's set up a style sheet.

First, make a directory called "stylesheets" wherever you've been keeping your Web files.

Next, open up whatever program you are using to do your Web pages. This can be any program that produces plain-text, ASCII files--WordPad, Word for Windows, Notepad, etc. I use an old Java compiler myself.

Open a new document and save it as a plain-text file called default.css. Save it inside the "stylesheets" directory.

Here are some ideas on how to start. Just start typing, or copy and paste code:

BODY {
font-size: 12pt;
font-family: arial,helvetica,sans-serif;
color: #000000;
}

Here you are setting everything inside the body of each page of the site, to have a black font, size 12pt, with the font face arial, helvetica or sans-serif. i.e. the browser tries to render the font in arial first. If there's no arial on the user's computer, it next tries helvetica. If that doesn't fly, it's sans-serif all the way.

I've seen font-size in both "pt" and "px" forms. Try either and see which one you like best.

The font color here is black. You may use either color names or hex codes.

This is how I did it for this site. I didn't set a background color for the body--which can be done as follows:

BODY {
background-color: #ffffff;
font-size: 12pt;
font-family: arial,helvetica,sans-serif;
color: #000000;
}

The pages in this site have different background colors. So I set up some classes for the background colors:

.bgblue {
background-color: #9966ff;
}
.bgred {
background-color: #990000;
}
.bgblack {
background-color: #000000;
}
.bgwhite {
background-color: #ffffff;
}

Just keep stacking your styles...start at the top of the page and put each new style at the bottom of the list. The order of the styles is not important, so you can arrange them in whatever way is most convenient for you.

.headermain {
font-size: 20pt;
font-family: arial,helvetica,sans-serif;
color: #000000;
font-weight: bold;
}
.header1 {
font-size: 16pt;
font-family: arial,helvetica,sans-serif;
color: #000000;
font-weight: bold;
}
.header2 {
font-size: 14pt;
font-family: arial,helvetica,sans-serif;
color: #000000;
font-weight: bold;
}
.header3 {
font-size: 13pt;
font-family: arial,helvetica,sans-serif;
color: #000000;
font-weight: bold;
}
.header4 {
font-size: 13pt;
font-family: arial,helvetica,sans-serif;
color: #000000;
font-weight: bold;
font-style: italic;
}

[ top ]

Working between the style sheet and the HTML page

Once you have set up a few classes on your default.css style sheet, save it. Open up an existing HTML page. Let's connect the two together. Here is what you'll need at the top of the HTML page:

HTML page:

Use the URL of the default.css style sheet. (If you are not familiar with using relative URL's, check out absolute and relative links.) Here it is better to use a relative URL, since it's much easier for you to develop the style sheet offline.

Once you've linked to your style sheet, you should be able to remove all of the <font> tags on the HTML page.

Since you have defined a font for the body, your font should appear on your pages without your having to use any font formatting on the pages at all.

If, like me, you use different background colors for your HTML pages, you will need to call your background color class as follows:

HTML page:

Now let's add some more code to your style sheet. Let's define link colors for your website.

style sheet:

A:link, A:visited, A:active, A:hover {
text-decoration: none;
font-weight: bold;
}
A:link {
color: #104E8B;
}
A:visited {
color: #1E90FF;
}
A:active {
color: #CC0000;
}
A:hover {
color: #CC0000 ;
}

This can replace all of the link formatting on the HTML page. Just get rid of it.

Here my site links are all bolded. If you don't want them bolded, you need not specify font-weight at all.

I like my links without underlines, so text-decoration: none.

The other styles will be familiar to you if you know HTML. A:link formats an unvisited link; A:visited formats a visited link; A:active formats the link when you click it; A:hover formats what happens when you put the mouse over the link.

If you would like a "highlighting" effect for your text links, where the background of the link changes color when you hover your mouse over it (see the menu in the upper left-hand corner of this page), then you will need to create some extra classes for that.

Do not use the default a:hover for this effect since it also highlights image links--and that looks terrible.

Here are the classes that I used for the menu:

style sheet:

.menu a:link {
font-weight: normal;
}
.menu a:visited {
font-weight: normal;
}
.menu a:active {
font-weight: normal;
}
.menu a:hover {
font-weight: normal;
background-color: #CAE1FF;
}

Here I specified that I didn't want the links in the menu bolded at all.

When you hover your mouse over a menu link, it highlights the link with the color #CAE1FF (light blue).

I did not specify link colors here only because I didn't have to. The Javascript program I wrote to create the menu, formats the link color.

Otherwise, I could override the default link colors here.

You can do other fancy funky things such as having links turn italicized when you hover over them, etc. Just try to make the effects tasteful and easy to use.

[ top ]

I've got lots of classes, how do I use them?

The "class" attribute works for all of the old HTML tags.

Let's use some of the classes that I defined above.

style sheet:

.menu a:link {
font-weight: normal;
}
.menu a:visited {
font-weight: normal;
}
.menu a:active {
font-weight: normal;
}
.menu a:hover {
font-weight: normal;
background-color: #CAE1FF;
}
.header4 {
font-size: 13pt;
font-family: arial,helvetica,sans-serif;
color: #000000;
font-weight: bold;
font-style: italic;
}
.bgred {
background-color: #990000;
}

Here is how it's used:

HTML page:

Other containers that work:

HTML page:

[ top ]

Changing the background/foreground colors of a page

style sheet:

BODY {
background-color: #ffffff;
color: #000000;
}

document wide:

[ top ]

Using an image as a background

style sheet:

BODY {
background-image: url(../images/lp/bg_rose.jpg);
}

document wide:

[ top ]

Setting the colors/effects of the links

style sheet:

A:link, A:visited, A:active, A:hover {
text-decoration: none;
font-weight: bold;
}
A:link {
color: #104E8B;
}
A:visited {
color: #1E90FF;
}
A:active {
color: #CC0000;
background-color: #CAE1FF;
}
A:hover {
color: #CC0000;
font-style: italic;
font-weight: normal;
}

document wide:

[ top ]

Setting the font for the page

style sheet:

BODY {
background-color: #ffffff;
color: #003300;
font-size: 10pt;
font-family: arial,helvetica,sans-serif;
}

document wide:

[ top ]

Changing the font (inline)

HTML page:

[ top ]

Setting fonts and colors for tables

If you don't specify these, the fonts/colors of the body are used.

style sheet:

TABLE,TD,TR {
background-color: #ffffff;
color: #003300;
font-size: 10pt;
font-family: arial,helvetica,sans-serif;
}

document wide:

[ top ]