Bare Bones, No Crap, CSS Text Control Primer

Wendy Peck

This is a down and dirty, only the facts ma'am, very quick tutorial. Please understand that this is just the barest of surface scratching, but I am hoping it will kick start you to the concept. Once you have that, all the other info on the Web makes sense. I'm assuming you know nothing, because someone reading this may know exactly that, so don't be insulted if I cover what you have known for months. This is also only designed to give you text control, not anything to do with positioning. In my view, those two ideas are best left separate, as it dramatically cuts the bulk of what you must learn for those who want to start with text ... most of us.

I am also only considering a separate CSS style sheet that is linked to the document. There are other ways to bring CSS into the doc, but the linked style sheet is by far the most common and useful for a beginner.

What is CSS? The Concept

CSS is designed to separate the text control from the text. When you are using font tags, every time you need a change, you must specify a new set of qualities for the text. Change back to the original, and you must redefine the text again.

CSS keeps the specifics of the text, like font, size, colour, in a separate place from the content text. Instead of:

<p><font color="#FF0000" size="2" face="Verdana, Arial, Helvetica, sans-serif">Simple content text ready for control.</font></p>

CSS content looks like this:

<p>Simple content text ready for control.</p>

Yet the two look similar when displayed, because the CSS file attached to the document is controlling the text. For the <p> tag it looks like this:

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FF0000;
}

For one paragraph, there is little difference. But when you use the p tag through a large site, the difference is dramatic. Suppose you have 15 pages, and decide that you made a mistake by using red text and want to change it back to black. Using HTML code, you would have a large job on your hands. If you are using CSS, you simply change the CSS file, and every page magically changes every single paragraph.

Now your css file looks like this:

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}

No matter how fancy CSS may get, this is the basic principle. The real power, other than reducing the amount of code in each page dramatically, is the ability to change your mind because the control for the text and the text are in totally different places.

Creating and Linking a CSS file

This is too, too easy. Most that I read about it is totally convoluted, offering options that you can't possibly understand as you create your first style sheet. So here is the 101 version. Once you have your feet under you, then tackle all the creative ways you can get CSS styles into your documents.

First, you must create a separate file. Use any text editor that you use for HTML to create this.

Create a new document and save it with name a name you will understand, like firststyle.css. The name doesn't matter at all, nor does the css extension in making it work. (I strongly recommend you always use a CSS extension on your CSS files ... it just makes sense so you will always know that file is a CSS stylesheet. I always store my CSS files in the main directory for a site, meaning the same place that my index.html file is found. Makes life much easier.)

Technically, you have just created your first style sheet. It's not much good yet, but it's there. Now you can link it. (Yes, I know what I am doing linking a blank style sheet ... trust me. <g>)

To tell the document where to find the CSS file, simply place the following code in the head of your document:

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

That's all you need to tell the doc where to find the text control before it loads the page. Use that same line of code on every page in your site.

Now the fun begins.

Defining styles in the style sheet

In my mind, there are two different types of CSS style for text control. You can redefine HTML tags, like p and h1, h2, etc, and you can create independent styles. Redefining HTML is easiest, and always necessary, so start there.

Defining styles for HTML tags

To define a p tag, in other words, your main content text, the syntax is as follows:

p {
whatever you want for specific font look
}

The curly brackets contain all the information you want to put in about the p tag. To define an h1 tag:

h1 {
whatever you want for specific font look
}

It's that easy. Really.

So ... to create a definition for a p tag, add the following code to your blank CSS file, and save the file:

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}

(There are many ways to simplify and shorten code, but don't worry about that at this point. That will come once you are comfortable with the whole process.)

Any code in your document that has a p tag, should now be Verdana, size 12, and black.

For your h1 tag, add the following to your style sheet and save.

h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}

Any text in your doc that has an h1 tag will be Arial, 14pt and blue.

This pattern is used no matter what tag you redefine, from the h's all the way through to li and ul tags. How's that for simple?

Margins

As an add on, one that most people look for is the ability to set the margins for the document. You can do that with the body tag. If you want the margins for the document to be 0, or to go from edge to edge, the following addition to your style sheet will do the trick:

body {
margin: 0px;
}

Defining Independent Styles

This is where CSS really kicks *ahem* ... I mean, is really terrific. <g>

As you know, you can only have one p tag per paragraph. Or only one headline tag per paragraph. That really gets in the way when you are trying to highlight just a few words in selected paragraphs. You might also want to define an entire area of a page with a style, so that borders go around an area, rather than a paragraph. That's easy with class styles. (You can add styles to div tags as well, but as divs are supposed to be unique on a page, it's generally better to use class styles when you are talking about controlling text.)

With class styles, you have total freedom. You can add them to any tag, including HTML tags, like the p or h1, or table tags like td or tr, or just all by themselves in a span tag. Bear with me. I'll sort it all out for you.

First, you need to create a class style. Instead of using an HTML tag, you will use .(dot)name. I bet that went right by you. OK, say you want to name a style "redtext" so you can turn the text in an area red with no other changes. (The style name is your choice.) To create this style, you enter the following into your style sheet file, and save the file.

.redtext {
color: #FF0000;
}

Now go to your document, create a paragraph of text. Change the p tag in that paragraph to the following:

<p class="redtext">

The paragraph text should turn red.

Now create a new paragraph, but instead of adding the redtext style to the whole paragraph, add it only to a few words with the span tag:

<p>Simple <span class="redtext">content text</span> ready for control.</p>

Simple content text ready for control.

In this case, only the words "content text" appear in red.

Pretty cool, huh?

Links in CSS

I'm going to skip all those terms like pseudo that make a beginner cross her eyes and just tell you what to do to control links, OK. Purists please forgive me. Once you understand how to do it, then the other stuff makes much more sense.

When you want to control links on a whole page, you define the a tag in a slightly different way than regular css syntax, because you want to specify the color, and what the rollover effect will be, and how the link will look when the visitor has already been to that page. Here's how the styles look:

Basic Page Link Styles

This is your basic link style. In this case, blue with an underline.

a:link {
color: #000099;
text-decoration: underline;
}

This style is how your link will look when the visitor has already been to that page. Here, dark grey text. This must be placed ahead of the mouseover style in your style sheet to work properly.

a:visited {
color: #666666;
}

This is how the mouseover will look. Here I have specified no underline, with a light grey background. When the visitor moves their mouse over the link, only the background and underline will change.

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

This is mostly useless, as it is what the visitor sees when they are actually clicking the link.

a:active {
text-decoration: none;
}

That set of styles changes the links on the whole page. Hang onto your seats, because this next bit should blow you away.

Specific Use Link Styles

What if you want the links in a certain section of your page to be different, like for menus? Well, you already know everything you need to know to do that. You can add link styles to your class style.

Create a class style called menu with the following specifics:

.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}

Then add the link controls to the class style by stating the class, which is .menu in this case, and adding the link controls you used in the previous examples.

.menu a:link {
color: #336600;
text-decoration: none;
}

.menu a:visited {
color: #666666;
text-decoration: none;
}

.menu a:hover {
color: #990000;
text-decoration: none;
}

.menu a:active {
color: #666666;
text-decoration: none;
}

Now create a menu with the following code:

<p class="menu"><a href="services.html">services</a> | <a href="products.html">products</a>
| <a href="company.html">company</a> | <a href="cotnact.html">contact</a></p>

Your results should be as follows. In this case, I applied the class style to the p tag, as the margins on this tutorial page are controlled by the p tag. The menu class style could be applied to your menu with a span tag ... that is how I usually create my menus. You should see green menu items, with black dividing bars (the link is just on the items, so the bars are controlled by the basic menu class style). When you mouseover, you should see a reddish brown on the menu items. If you click on any of these links, you will get a 404, but when you return, that link will be a grey color. But note that you still get the brown when you mouseover the visited link.

And that is the basics of CSS. Probably 90% of what I do with CSS for text is included in this primer. Create a site or two using these methods, and I guarantee that when you go back to learn more about CSS with in-depth tutorials, it will all make sense.

I have inlcuded the CSS file, cssprimer.css, used in all of the examples for your convenience. Please note: This is NOT the CSS file that is controlling the page you are reading.

One list of potential CSS controls can be found at W3CSchools.com. The entire site is a very good resource when you are ready to move on.