CSS: Class Selectors - learn CSS for free and fun

Class Selectors

Class selectors are used for defining different styles for the same type of HTML element.

If you want to add two different styles (say, two different font styles) to a particular type of
HTML element (say, ‘paragraphs’ appearing on a web page), you can do it with the class
selector.

The general syntax for a class selector is
tag.class attribute {Property:Value;}

Example: Consider the instructional website as given above. If you want to define two
different font colors for the alternate paragraphs, the style sheet will be written as:

p.question {color: #CC0000;}
p.answer {color: #339999;}

Class selectors apply to all the elements with the particular class attribute given in the
statement. With class selectors you can also add more than one class to a particular element.
Sometimes you will need to add different styles to a type of HTML element that appears in a
web page. With class selectors we can do it easily.

Class selectors are used for defining different styles for the same type of HTML element.
If you want to add two different styles (say, two different font styles) to a particular type of
HTML element (say, ‘paragraphs’ appearing on a web page), we can do it with the class
selector.

In an instructional website you may have paragraphs displayed in a webpage, with “Definitions”
and “Examples” in alternate paragraphs. With class selectors we have two different styles for
the alternate paragraphs.

Let us consider the example of the instructional website as given above. If we want to define
two different font colors for the alternate paragraphs, the style sheet will be written as shown
here.

Class selectors apply to all the elements with the particular class attribute given in the
statement.
The following things must be noted about class selectors.
The class attribute for which the style is defined in the style sheet must be included in the
HTML document.

If the tag name is not given in the selector, the style will be applied to all the HTML elements
with the particular class.

For example, the following style will apply to all the HTML elements with the “text” attribute.
If you need to add more than one style to an element, we can still do it with class selectors.
With class selectors you can also add more than one class to a particular element.