left-pointing arrow for navigating to previous page

HTML Tutorial: CSS Styles

right-pointing arrow for navigating to next page

Cascading Style Sheets, aka CSS, are a whole world past HTML. They're the art palette of sophisticated web designers.¹ They're a subject fit for a tutorial longer than this one. Here I'll introduce them so that you can go exploring on your own.

CSS Reference

You'll need a good CSS reference. I routinely keep one open in a tab in my browser. Google "CSS reference" and pick one. See how easy it is to locate the items that come next. If it's not easy, pick another one.

The Style Attribute

Almost every tag supports the style= attribute. Assign a text string defining styles in this form:

property:value

Or assign lots of property/value pairs, separated by semicolons:

prop:val; prop:val; ...

Look at the heading for this section ("The Style Attribute"). The lowercase letters are really smaller uppercase letters. How did that happen? Here's the line of HTML:

<h3 style='font-variant:small-caps'> The Style Attribute </h3>

By the way, using multiple styles of headings will really confuse people, so don't do it. (Don't do it unless you're trying to make a point about styles in headings.)

`Experiment with the Style (style=) Attribute`

Try style='font-variant:small-caps' in the title in your index.html. If you like it, keep it. If you don't like it, take a look at your CSS reference for some other ideas. Styles should be fun.

Styles in the Head Section

You can customize the style for any tag in the head section of your page. Since <h6> headings are completely useless (too small to read), I use them for a custom heading. The heading above is an <h6> heading. It's the heading definition used in the HTML poster. This is the addition I made to this page's head section:


    <style>

        h6 {
            color:#300060;
            font-size:20;
            font-variant:small-caps;
            margin-bottom:5;
            text-align:center
        }

    </style>

</head>

While styles in the style attribute effect just the tag where they appear, styles in the head section change every occurence of the tag in the page. There's also a broader option still.

`Experiment with Styles in the Head Section`

Pick any tag one of your pages uses more than once. Create a style for it in the head section of the page. I always start with:

tag { background-color:#ff0000; }

Why? It's to make sure that I'm really applying the style to the tag I think I'm trying to change. Once your table or heading changes to bright red, you'll know you're on the right track. Then you get to work on the styles you want.

Styles in a Stylesheet

This site uses a simple style sheet to keep every page on the same page. You probably want your site to have just one background color and you probably want to be able to change the color once in a while. For this, use a style sheet. This is the stylesheet for this site.²


/* html-tutorial.css
copyright 2008, Martin Rinehart */

    em      { color:#000080;
              font-family: 'Free Courier', Courier, 'Courier New', monospace;
              font-size: large
            }

    code    { color:#000080; }

    .banner { background-color:#f4f0ec; }

    .main   { background-color:#fcf8f0; }

    .navbar { background-color:#f4f0ec; }

    .nextbutton { background-color: #f8f4f0; }

    :link {
        color: #ff0000;
        text-decoration: none; }

    :visited { color: #0000ff; text-decoration: none; }

    :hover { background-color: #ffffff; text-decoration: none; }

/* end of html-tutorial.css */

Here are some comments re that stylesheet.

Notice in the comment that the file name ends ".css".
Notice that comments are enclosed C-style, in "/*" (start comment) and "*/" (end comment) pairs.
Way back in the "Text" topic I showed you all the inline text styles, such as <em>. Here's the definition for <em> that I use in this site to surround file names.
You've noticed that all the HTML is shown in blue, here, haven't you?
Tags are defined with their names. Classes are defined by creating a name, starting it with a period. ".main" is the class used for the body tag. (If I just redefined the <body> tag the banner and navbar wouldn't have come out the way I wanted.)
The items preceded by colons (:link, :visited and :hover) set colors and text decorations (I didn't want underlined links) for links not visited, visited and with the mouse over them, respectively.

Using the `class=` Attribute

The class= attribute is another that can be used with almost every tag. The code for the body tag used in almost every page here is:

<body class=main>

The banner and navbar pages use their respective classes, of course.

The Div ( `<div>` ) and Span ( `<span>` ) Tags

Div (<div>) and end div (</div>) tags create an HTML block. You can use their style= and/or class= attributes to define the style of the block.

The span (<span>) and end span (</span>) tags define an inline portion, just as div tags define a block. You can also use style= and/or class= attributes of a span.

You can use this knowledge to create wonderful effects. Or you can do horrible, garish web pages. Its up to you.

Linking to a Stylesheet

You link a page to a stylesheet with this addition in the head section:


    <link
        href="html-tutorial.css"
        rel=stylesheet
        type="text/css">

There is no choice about "rel=stylesheet type="text/css", except that you get to format it however you like. There is no "end link" tag.

`Your Choice`

All the headings in this website are variants of the <h3> as enhanced in the site's stylesheet. The words "Your Choice" in the heading above are enclosed teletype tags (<tt>) also as defined in the stylesheet. If your site is going to grow to many pages, a stylesheet will save you tons of trouble.

On the other hand, for a simple site with just a few pages, a stylesheet may be more trouble than it's worth. You decide whether to create one for your site. If you decide to create one, that trick about starting a tags style with background-color:#ff0000 will help you get started.

It's Getting Ugly

With the style sheet, I've got just one place to go to change colors for the entire site. If I got in a bad mood I could make the whole site quite ugly, with one simple change. Try one of your pages with the body's bgcolor='#ddccdd' .

It's Not Getting Ugly

But I'm in a good mood, since I'm nearing the final page and this site is almost complete. I won't make it ugly.

Finally, there's a whole language, JavaScript, to look at.

What's JavaScript?

¹A professional web designer would criticize my continued use of deprecated features ( <center> , for example) and use of tables as spacing elements. It's very 20^th century. My reply: I'm glad we have professional web designers but I'm not one and neither is my audience. We are strictly part-timers, happy not to need to learn another big subject in addition to HTML.

²Actually, the stylesheet shown in this page was the stylesheet when I wrote this page. There will probably be some changes before you get here. Check http://www.easyHTMLtutorial.com/html-tutorial.css to view the version you're using right now.

P.S. It's Saturday morning and rain has cancelled the hike my puppy and I had planned. He's curled up in the corner. I'm playing with the <h3> tag in the stylesheet.