CSS Examples – CSS Tutorial Examples, CSS Reference Examples

Published on: September 9, 2014   Last Updated on : June 6, 2018   Posted By : WebDesignReference

CSS Example 1 : CSS Box Model Tutorial and CSS Box Model Reference

CSS Box Model Tutorial And CSS Box Model Reference:- It consists of margins, borders, padding, and the content. The example below illustrates the CSS box model.

Margin
Border
Padding
Content
 
Explanation of the different parts of CSS Box Model:-

Content – The content part of the box, where text and images appear.
Padding – Clears an area around the content part. The padding is transparent.
Border – A border that goes around the padding and content part.
Margin – Clears an area outside the border. The margin is transparent.

The CSS box model allows us to add a border around elements, and to define space between elements.

 
Example 2 : Css Selector Example Tutorial and Css Selector Reference

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.

 

Also Related to CSS

 

Leave a Reply