The CSS element Selector

The element selector selects HTML elements based on the element name.

Example

Here, all <p> elements on the page will be center-aligned, with a red text color

    html:

        <p>This is center-aligned, with a red text color</p>
                    

    CSS:

        p {
            text-align: center;
            color: red;
        }
                    

Result

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Example

The CSS rule below will be applied to the HTML element with id="para1"

    html:
    
        <p id="para1">This is center-aligned, with a red text color</p>
                    

    CSS:

        #para1 {
            text-align: center;
            color: blue;
        }
                    

Result

The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

Example

In this example all HTML elements with class="center" will be red and center-aligned: 

    html:
    
        <p class="para2">This is center-aligned, with a red text color</p>
                    

    CSS:
    
        .para2 {
            text-align: center;
            color: green;
        }
                    

Result

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

Example

The CSS rule below will affect every HTML element on the page: 

    * {
        text-align: center;
        color: red;
    }
                    

The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

    h1, h2, p {
        text-align: center;
        color: red;
    }
                    

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

CSS background-color

The background-color property specifies the background color of an element.

The background color of a page is set like this:

    body {
        background-color: lightblue;
    }
                     

You can set the background color for any HTML elements:
Here, the h1 , p, and div elements will have different background colors:

    h1 {
        background-color: green;
    }
    
    div {
        background-color: lightblue;
    }
    
    p {
        background-color: yellow;
    }

                     

Opacity / Transparency

The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent:

Example

    HTML:

        <div class="first">
            <h1>opacity 0.4</h1>
        </div>
        
        <div class="second">
            <h1>opacity 0.4</h1>
        </div>
        
        <div class="third">
            <h1>opacity 0.6</h1>
        </div>
                    

    CSS:

        div {
            background-color: green;
        }

        div.first {
            opacity: 0.2;
        }

        div.second {
            opacity: 0.4;
        }

        div.third {
            opacity: 0.6;
        }
                    

Result

CSS background-image

The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.

    body {
        background-image: url("pic.jpg");
    }
                        

CSS background-repeat

By default, the background-image property repeats an image both horizontally and vertically.

CSS background-position

The background-position property is used to specify the position of the background image.

Example

    body {
        background-image: url("pic.png");
        background-repeat: no-repeat;
        background-position: center;
    }
                    

Result

Font Family:

The font-family property is used to specify the font to be used to render the text.
This property can hold several comma-separated font names as a fallback system, so that if the first font is not available on the user's system, browser tries to use the second one, and so on.
Hence, list the font that you want first, then any fonts that might fill in for the first if it is not available. You should end the list with a generic font family which are five — serif, sans-serif,monospace,cursive and fantasy. A typical font family declaration might look like this:

Example

    html:

        <h1>Here the font-family is "monospace".</h1>
                    

    CSS:

        h1 {
            font-family:monospace;
        }
                    

Result

Font Style:

The font-style property is used to set the font face style for the text content of an element.
The font style can be normal, italic or oblique. The default value is normal.
Let's try out the following example to understand how it basically works:

Example

    html: 
    
        <p class="normal">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore,praesentium. </p>

        <p class="italic">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, recusandae? </p>

        <p class="oblique">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit, veniam! </p>
                    

    CSS:

        p.normal {
          font-style: normal;
        }

        p.italic {
          font-style: italic;
        }

        p.oblique {
          font-style: oblique;
        }
                    

Result

Font Size:

The font-size property is used to set the size of font for the text content of an element.
There are several ways to specify the font size values e.g. with keywords, percentage, pixels, ems, etc.

Setting Font Size with Pixels

Setting the font size in pixel values (e.g. 14px, 16px, etc.) is a good choice when you need the pixel accuracy. Pixel is an absolute unit of measurement which specifies a fixed length.
Let's try out the following example to understand how it basically works:

Example

    html:

        <h1 class="normal">Here the Font-size is 36px. </h1>

        <p class="italic">Here the Font-size is 20px. </p>
                     

    CSS:

        h1 {
            font-size: 36px;
        }

        p {
            font-size: 18px;
        }
                    

Result

Defining the font sizes in pixel is not considered very accessible, because the user cannot change the font size from the browser settings. For instance, users with limited or low vision may wish to set the font size much larger than the size specified by you.

Therefore, you should avoid using the pixels values and use the values that are relative to the user's default font size instead if you want to create an inclusive design.

Setting Font Size with EM

The em unit refers to the font size of the parent element. When defining the font-size property, 1em is equal to the size of the font that applies to the parent of the element.

So, if you set a font-size of 20px on the body element, then 1em = 20px and 2em = 40px.
However, if you haven't set the font size anywhere on the page, then it is the browser default, which is normally 16px.

Therefore, by default 1em = 16px, and 2em = 32px.
Let's take a look at the following example to understand how it basically works:

Example

    html:
    
        <h1 class="normal">Here the Font-size 3em. </h1>
    
        <p class="italic">Here the Font-size is 2em </p>

                    

    CSS:
    
        h1 {
            font-size: 3em;
        }

        p {
            font-size: 2em;
        }
                     

Result

Font Weight:

The font-weight property specifies the weight or boldness of the font.

This property can take one of the following values: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 and inherit.

• The numeric values 100-900 specify the font weights, where each number represents a weight greater than its predecessor. 400 is same as normal & 700 is same as bold.
• The bolder and lighter values are relative to the inherited font weight, while the other values such as normal and bold are absolute font weights.

Example

    html:
    
        <h2 style="font-weight: 800">Here the font-Weight is "800". </h2>

        <h3 style="font-weight: 400">Here the font-Weight is "400". </h3>
                
                    

    CSS:
    
        h2 {
            font-weight:800;
        }
        
        h3 {
            font-weight:400;
        }
                    

Result

Most of the fonts are only available in a limited number of weights; often they are available only in normal and bold. In case, if a font is not available in the specified weight, an alternate will be chosen that is the closest available weight.

CSS height and width

The height and width properties are used to set the height and width of an element.
The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.
CSS height and width Values The height and width properties may have the following values:

• auto - This is default. The browser calculates the height and width
• length - Defines the height/width in px, cm etc.
• % - Defines the height/width in percent of the containing block
• initial - Sets the height/width to its default value
• inherit - The height/width will be inherited from its parent value

Example

    div {
        height: 200px;
        width: 50%;
        background-color: aliceblue;
    }

                    

Result

Setting max-width

The max-width property is used to set the maximum width of an element. The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).
The problem with the div above occurs when the browser window is smaller than the width of the element. The browser then adds a horizontal scrollbar to the page.
Using max-width instead, in this situation, will improve the browser's handling of small windows.

    div {
        max-width: 400px;
        height: 150px;
        background-color: powderblue;
    }
                    

Result

The value of the max-width property overrides width.

CSS Padding

The CSS padding properties are used to generate space around an element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:

• padding-top
• padding-right
• padding-bottom
• padding-left

All the padding properties can have the following values:

• length - specifies a padding in px, pt, cm, etc.
• % - specifies a padding in % of the width of the containing element

Example

    div {
        padding-left:300px;
        padding-right:200px;
        padding-top:80px;
        padding-bottom:150px;
    }
                    

Result

CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined borders. With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

    p {
        margin-top: 150px;
        margin-bottom: 100px;
        margin-right: 150px;
        margin-left: 80px;
    }
                    

Result

CSS Comments

Comments are used to explain the code, and may help when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment is placed inside the style element, and starts with /* and ends with */

    /* This is a single-line comment */
    p {
        color: red;
    }

    p {
        color: red; /* Set text color to red */
    }

    /* This is
    a multi-line
    comment */
    
    p {
        color: red;
    }
                    

This < div> is an position: relative
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

An element with position: sticky; is positioned based on the user's scroll position. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

Note: The overflow property only works for block elements with a specified height.

Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though "overflow : scroll" is set).

Social Media: