Class Styles

We have already learned in earlier tutorials how to define styles that are associated with a particular HTML tag. Quite often though you will want to define styles that apply to more than one tag but not to every tag of those types.

To resolve this we need to label the tags to which the particular style is to apply and the way that we do this is by defining a class attribute on those tags like this:

<p class="mystyle">

We can now define entries in our stylesheet (whether in the head of the page or in a separate stylesheet) that are specific to that class. The style definitions for a class are coded similarly to those for an HTML tag except that instead of specifying a tag identifier on the front of the definition we need to code a class identifier on the front instead. We identify that it is a class and not an HTML tag by preceding the class name with a period, for example:

.mystyle {color:red;}

We can also define styles that apply to a specific class that only apply when that class is attached to a specific HTML tag by preceding the class identifier with the tag identifier like this:

li.mystyle {color:red;}


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow