CSS MADE EASY Web Design for Beginners

ComboInk Free Shipping for Order over $50

Lesson 4
Making Selectors

In the previous lesson on mouseovers you learned that selectors determine which HTML tags will be affected by CSS commands and that a selector can be the name of any HTML tag. You also learned that properties and their values tell selectors how those tags are to display stuff. For example:

p {font-size:12px;}

That bit of CSS code told all p tags to display text that is 12 pixels in height (px stands for pixels). Selectors which take on the name of an HTML tag are called tag selectors or sometimes referred to as html selectors.

The mouseover tutorial also showed that by making classes you can control which link tags will be affected by CSS code. Classes can also be made for other HTML tags by naming a selector with a made up word:

p.mytext {font-family:courier;}

Notice there is a dot between the selector and the made up word. Any p tags that contain the attribute class="mytext" will be affected by the properties in the p selector named mytext but if put into any other HTML tag it will have no affect at all:

<p class="mytext">Text affected by code </p>

However by making classes and not specifying the selector, the class can then affect any kind of HTML tag:

.mytext {font-family:courier;}

Notice there is a dot preceding the made up word but no specified selector, this is what's called a class selector enabling class="mytext" to work in any HTML tag it's put in:

<p class="mytext">Text affected by code </p>
<h3 class="mytext">Text affected by code too! </h3>

Another type of selector that is similar to class selectors is an id selector. These kinds of selectors has a number sign preceding the made up word instead of a dot:

#content { width:450px;}

Now the id attribute goes into the HTML tag:

<p id="content">This paragraph will be 450 pixels wide </p>

You can make as many class and id selectors as you like but unlike classes in which the same class can be used in an unlimited amount of tags on the same page, each id selector should only be used once per webpage.

Now that you know about selectors let's have a closer look at properties.

Earn Money With Your Website!
Looking for a way to make money from your website? Do what thousands of sites are doing and join an affiliate program. It's free so you have nothing to lose. Click for more info.

© 2014 CSS Made Easy