CSS Classes, IDs, and Inline Styles

Posted in CSS | Posted on 16-06-2009-05-2008

There are three ways that you can use CSS technology in your web page. The style class, the style id, and inline styles can all be used simultaneously on the same web page.

Let’s see them in action. Open up a text editor and copy and paste the following:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<title>CSS Examples</title>
<style type=”text/css”>
body {
background: #e2e2e2;
color: #4a4a4a;
}


#container {
width: 400px;
border: 1px solid #000;
margin: 20px auto 20px auto;
padding: 10px;
}


h1.header {
font: bold 14px Verdana;
text-decoration: underline;
color: #c00;
}

.lines {
margin: 10px auto 10px 0;
width: 300px;
background: #fff;
font: 12px Verdana;
}

</style>
</head>

<body>

<div id=”container”>

<h1 class=”header”>CSS Examples</h1>

<p>This page has css style classes.</p>

<p>This page has css style ids.</p>

<p>This page has css <span style=”font-weight:bold”>inline</span> styles.</p>
</div>

</body>
</html>

You can save this file and name it anything you want. Now let’s go over what we have here.

The code in bold is where we will direct our attention. Within our <head> tag, we have a <style> tag. Within the  <style> tag is where we are going to declare styles for elements.

Let’s go through them one by one.

body {
background: #e2e2e2;
color: #4a4a4a;
}

These are the properties and values for the body of our page. In this example we have a background that is a gray color, and all of the text on the page will be a black color.

#container {
width: 400px;
border: 1px solid #000;
margin: 20px auto 20px auto;
padding: 10px;
}

Here we are introduced to an id element. IDs are meant to be unique, although some browsers may support multiples instances of the same id. Here we have named this id container. Notice how we name an id with a # symbol. Our container will be 400 pixels wide, have a black border, have a margin of 20 pixels on the right and left, and have a padding of 10 pixels. Don’t worry if you don’t understand all of this. Right now we are just learning the basics on how to use css.

h1.header {
font: bold 14px Verdana;
text-decoration: underline;
color: #c00;
}

Here we have a class. We are declaring a set of styles for <h1> tags that have a class name of header. All <h1> tags that comply with this rule will be bold, 14 pixels, Verdana, underlined, and red.

.lines {
margin: 10px auto 10px 0;
width: 300px;
background: #fff;
font: 12px Verdana;
}

Here we have another a class. This class is called lines. The difference between this class and the previous class, is this class can be used on multiple elements. You can use this class with <h1>, <h2>, <div>, <span>, etc… Where as with h1.header, the class can only be used with h1 tags.

A thing to note is that you can name your classes and ids whatever you’d like.

If we take a look at our html code, we can now see how these styles come into play. We give our <div> and <h1> tags their class and id attributes respectively.

One last thing to look at is the inline style we used with this line of code:

<span style=”font-weight:bold”>inline</span>

Here we have declared the font-weight of this particular span tag to be bold. This style will only work for this span tag.

Final Word

We have learned the basic fundamentals of css. It is recommended to use css for presentation as opposed to the deprecated font tag. With the example we just went over, play with it. Change the names around, change the values that are in the style tag. Experiment with the example.