Css Selector Tutorial And Reference

Published on: September 9, 2014   Last Updated on : December 7, 2014   Posted By : WebDesignReference

Css Selector : helps to select or find an element for manipulation in html document.

Some commonly used selector types are :

  • Element selector : To select an element using element name.

    Example : use of Css Element Selectors

    body {
    background-color: #bbb; text-align: left;
    }

    h1 {
    color: #eee; text-align: left;
    }

    p {
    font-family: “Arial”; font-size: 20px;
    }

    body, h1 and p are element selectors.

  • Id Selector : To select an element using specific Id.

    Example : use of Css ID Selectors

    #body-bg {
    background-color: #bbb; text-align: left;
    }

    #heading {
    color: #eee; text-align: left;
    }

    #content-paragraph {
    font-family: “Arial”; font-size: 20px;
    }

    #body-bg, #heading and #content-paragraph are ID selectors.

  • Class : To select an element using Class name of an element.

    Example : use of Css Class Selectors

    .body-bg {
    background-color: #bbb; text-align: left;
    }

    .heading {
    color: #eee; text-align: left;
    }

    .content-paragraph {
    font-family: “Arial”; font-size: 20px;
    }

    .body-bg, .heading and .content-paragraph are Class selectors.

  • Type : To select an element by type (like input type text or submit.)

    Example : use of Css Input Type Selectors

    input[type=”text”] {
    background-color: #bbb; text-align: left;
    }

    input[type=”submit”] {
    color: #eee; text-align: center;
    }

    input[type=”reset”] {
    font-family: “Arial”; font-size: 20px;
    }

    input[type=”text”], input[type=”submit”] and input[type=”reset”] are input type selectors.

  • Attribute Selector : To select an element by attributes.

    Example : use of Css Attribute Selectors

    a[target] {
    background-color: #bbb; text-align: left;
    }

    a[target] Attribute selectors.

 

Leave a Reply