CSS Examples – CSS Reference Examples, CSS Code Examples

Last Updated on: April 16, 2020   Posted By: Web Design Reference

CSS Examples: In this page includes CSS Reference Examples, CSS Code Examples, CSS box model Example, CSS Selectors Examples, CSS Media Examples, etc. Follow and Like us on Facebook, Twitter, LinkedIn, Pinterest for the latest posts.

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

CSS Box Model Tutorial And CSS Box Model Reference- It consists of Content, Padding, Border, and Margin. The example below describe 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
  • 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.

 

Web Design Reference Guide Android App for Website Developers

Web Design Reference Guide Android App: Web Design Tutorial App is a tutorial and reference-based app. It provides Web Design Tutorial and Reference to Web Designers or Web Developers to grow their Web Development skills.

Also Related to This Page

 

Leave a Reply