Style Sheets - Introduction

As you may know from reading our HTML Tutorial, many of the functions you will be learning in the following lessons were formerly accomplished with the <font></font> tags. But, the current HTML guidelines do not include the font tags. They have been eliminated and, in the future, so will all the formatting techniques you have learned thus far. This is being done so that designers like you and I, can focus more of our attention on coding a well-structured document.

Enter the style sheet. Style sheets are to HTML what your clothes are to you. Styles let you "dress up" your HTML "body" in any format you wish. You can do anything from casual to sleek and professional. These are some of the topics we will cover in this basic tutorial: text color, text size, text-align, font-family, background color and patterns. Before we get to that though, let's learn how to use a style sheet.

The two most common ways to "use" style sheets are: linking to an external style sheet (text file) and embedding a style sheet within your HTML document(s). Using external style sheets is probably the best way to go. By using external styles, you can include those same styles for multiple pages. This can allow you to make sure that all the pages in your Web site have the same general look and feel without having to write out all the styles in every HTML page.

Here is how you would embed a style sheet:

<head> <title>Your First Stylesheet</title> <style type="text/css">  </style> </head>

Here's how you would link to a style sheet:

<head> <title>Your First Stylesheet</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head>

Then, in a seperate text file saved as style.css or something similar (keep the .css part) you place the style coding just like this, without any other information in the file:

h1 { font-family: impact; font-weight: bold } p { font-family: arial, helevetica, sans-serif }

I personally prefer to use the link to method, but in order for you to use the "practice" sections within the following lessons, we'll need use the embed method. Let's now take a look at the syntax of a style.

h1 { font-family: impact; font-weight: bold }

The first item in this line of code is "h1", this tells the browser to display all content within <h1></h1> tags in the specified format. So, all the first item really does is to tell what tag(s) to apply formatting to. You can also format multiple tags by inserting commas like this:

h1, h2, h3 { font-family: impact; font-weight: bold }

This style rule would affect <h1></h1>, <h2></h2> and <h3></h3> tags. The next part of the style syntax (between the curly brackets) contains all the properties and their accompaning values that you want to specify. In the above example, "font-family" and "font-weight" are the two properties that will be modified. Also, "impact" and "bold" are the property values. Notice that after every property there is a colon ":" before listing the value(s) for that property. Futhermore, the different properties are always seperated by a semi-colon ";", this is also observed in the above example.

Now you might be asking yourself: "What if I want to apply a style to some paragraphs or other tags, but not to all of them?" That's easy, just replace the first item in the syntax (the tag identifier) with a "class".

A class can be by itself:

.underlined { text-decoration: underline }

Or bundled with a tag like this:

p.bolded { font-weight: bold }

As you may have noticed, to group a class with a tag you just put a period after the tag and then the name of your class. To define a class by itself, just put the period and the class name. When you define classes, you need a way for them to apply to your HTML code. That means you'll have to modify your HTML. You just include the attribute "class" within your HTML tag and the name of your class as the value. class="underlined" or class="bolded" Be careful when using classes that are grouped with a tag (p.bolded), you can only use that class within the tag you specified (p). If you have no idea what I'm talking about, maybe you should check out our HTML Tutorial.

Now that we've covered how to use styles, why don't you try embedding some of the properties I've used in this lesson into the HTML in the below pratice section? Try applying the styles to paragraphs or headings. It's really vital that you get the hang of the style syntax now, the rest of this tutorial really only introduces more properties to play with. Feel free to spend as much time trying things out as you want!

Practice

Now that you've got the syntax down, let's learn some more properties to use with Fonts!

Introduction | Fonts | Color/Backgrounds | Review and Link Effects

Featured Web Site

Internet Factoids