Basic CSS Selector

As we see in previous page how to apply styles on tags by placing a tag and its attributes inside curly brackets { }. All the tags on which we apply Styles are called Selectors.
Basically Selectors are of following different types which all are explained below.

Types of Selectors.

1. Tag Selectors.

      You can take any HTML opening tag in style sheet as a Selector to apply styles. Examples of Tag selectors are:

        Paragraph Tag     P
        Hyperlink Tag      A
        Image Tag            img     ......etc

Syntax of Tag Selectors.

    P { color: #007700;}
    H3 { color: black ; }
   A {   color:blue ; }

By using Tag selectors the style is applied on whole page. (i.e. wherever the tag comes).

2. Class Selectors.

     Sometimes we have to apply different styles on a same html element. We can not use tag selector styles for this purpose. To do this job Classes are used to style up the same element with different styles on different locations in page.
Classes are made by using .(dot) followed by a class name. For example .myClass , .linkClass.... Spaces are not allowed in class Names.
To use these classes in html code we use a special attribute "class" and set its value to the class name in style sheet. Then that tag will style up according to class name.

Syntax of Class selector is As below:
   A Complete example of making class and using them is as below.

<html>
    <head> <title> Your Page Title </title>

    <style type="text/css">

            .class1 { color:red ; }

            .class2 { color:blue; }

        </style>
</head>
<body>

<p class="class1"> The style of Class1 will be Applied on this paragraph.</p>

<p class="class2"> this text will formatted as class2</p>

<h1 class="class2">Class2 Style Applied on Heading </h1>
</body>
</html>

As you see in above example we have created 2 classes with there different color values. Now we can use these classes on any tag in html code and we can also use a class as many time as we want.

3. Pseudo-class Selectors.

Pseudo-classes can be assigned to the A element to display links, visited links and active links differently. The anchor element can give the pseudo-classes link, visited, or active. A visited link could be defined to render in a different color and even a different font size and style. The sample style sheet might look like this:

   A:Link          { color :blue; }
   A:visited       { color :gray; }
   A:hover         { color:white; }

    A:active      {color:pink ; }

where link , visited , hover and active are some events of hyperlink.
A:Link      represent the simply formatting of link tag.
A:visted   represents the formatting of links those are previously visited and places in history.
A:hover    Occurs when user mouse over a link then style will applied.
A:active    Occurs when a link is currently focused by mouse.

4. ID Selectors.

ID Selectors are very simple and very much similar to classes, except these can only be one element with given ID in document. Just like classes which are created by using .(dot) the ID selectors are created by using "#" followed by Id Name.

Syntax of ID Selectors.

    #mylink {color:blue; }
    #Second {color:red; }