About Selector in CSS ( con’t )

In addition to raw document elements, there are two other types of selectors: class selectors and ID selectors, which let you assign styles in a way that is independent of document elements. These selectors can be used on their own or in conjunction with element selectors. However, they work only if you've marked up your document appropriately, so using them generally involves a little forethought and planning.

Class Selectors

The most common way to apply styles without worrying about the elements involved is to use class selectors. Before we can use them, however, we need to modify your actual document markup so that the class selectors will work

example :

< class =" ‘error’"> This is a error message < /h1>

< class =" ‘error’"> Please enter your email correctly

Here, we’ve specified a class of error to both the h1 element and the p (paragraph) element. In CSS, class selectors are indicated by a class name preceded by a period (.).

Example : .error { color : red; font-weight:bold; }

This CSS will apply the styles noted in the declaration (a red, bold font) to all elements that have the class name error. In our markup, both the h1 and the p elements would become red and bold

Id Selectors

In some ways, ID selectors are similar to class selectors, but there are a few crucial differences. First, ID selectors are preceded by an octothorpe (#). The second difference is that instead of referencing values of the class attribute, ID selectors refer to values found in id attributes.

Example :

< id =" ‘error’"> This is a error message < /h1>

< id =" ‘error’"> Please enter your email correctly < /p>

then CSS

#error { color : red; font-weight:bold; }

This CSS will apply to all element that have id name error.