A Beginners Guide to CSS

Page 3

CSS Selectors

Although there are many methods to indicate the HTML elements to which your styles will apply, we're going to focus on the three most common ones...

  1. Type Selectors
  2. Class Selectors
  3. ID Selectors

For our examples, we'll use embedded styles and make the text red.

Type Selectors

Type selectors select a tag, such as p or body. Any tag may be selected thus, whether it be img, form, or even html.

In the following example, the contents of every p tag will be rendered in red.

<html>
<head>
<title>My Web Page</title>
<style type="text/css">
p {color:red}
</style>
</head>
<body>
<h1>Real Ultimate Power</h1>
<p>Hi, this site is about ninjas, REAL NINJAS. This site is awesome.</p>
<p>My name is Robert and I can't stop thinking about ninjas. These guys are cool, and by cool, I mean totally sweet.</p>
</body>
</html>

If we had wanted, we could also have overriden the font size of the h1 tag, or given the body tag a different background color. Getting the hang of things? Good. Let's look at class selectors.

Class Selectors

The problem with using nothing but type selectors is that you can't differentiate between tags. Class selectors allow you to do just that, by adding a class attribute to any tag. The attribute's value can be any name you like. You then reference them in the style block by prefixing them with a dot. Just for fun, we'll call our classes bob and joe.

<html>
<head>
<title>My Web Page</title>
<style type="text/css">
.joe {color:red}
.bob {color:blue}
</style>
</head>
<body>
<h1 class="joe">Real Ultimate Power</h1>
<p class="bob">Hi, this site is about ninjas, REAL NINJAS. This site is awesome.</p>
<p class="joe">My name is Robert and I can't stop thinking about ninjas. These guys are cool, and by cool, I mean totally sweet.</p>
</body>
</html>

As you can probably figure out, the h1 tag and the second paragraph display in red, and the first paragraph shows up in blue. Totally sweet. Now let's look at ID selectors.

ID Selectors

The biggest difference between class and ID selectors is that a given ID can only appear once on a page. You cannot give two separate elements an ID tag of "bob". You may find yourself questioning the need for ID selectors, but sometimes you want only one item, and ID selectors work quite well. An ID selector will select the element with that ID, and are prefixed with a #. Otherwise, they are the same as class selectors. In this example, we'll use all three selectors - just because we can.

<html>
<head>
<title>My Web Page</title>
<style type="text/css">
h1 {color:green}
.bob {color:blue}
#p1 {color:red}
</style>
</head>
<body>
<h1>Real Ultimate Power</h1>
<p id="p1">Hi, this site is about ninjas, REAL NINJAS. This site is awesome.</p>
<p class="bob">My name is Robert and I can't stop thinking about ninjas. These guys are cool, and by cool, I mean totally sweet.</p>
</body>
</html>

Of course, these examples aren't exactly using CSS to the fullest. They're also awesome stupid. Let's take a look at some other properties, so we can stop playing with text colors.