CSS - Syntax

CSS stands for Cascade Style Sheet is popular stylesheet language used to design an interactive webpage. In this tutorial we will learn CSS syntax and usages of CSS along with HTML.

CSS Syntax

Following is the syntax of styling using CSS.

selector {
    property: value;
}

Selector: CSS selectors are used to select the HTML element or groups of elements you want to style on a web page.
Property: A CSS property is an aspect or characteristic of an HTML element that can be styled or modified using CSS, such as color, font-size, or margin.
Value: Values are assigned to properties. For example, color property can have value like red, green etc.

For Example:

Multiple Style Rules

If you want to define multiple rules for a single selectors you can specify those in single block separated by a semicolon (;).

Syntax

selector{
    property1: value1;
    property2: value2;
    property3: value3;
}

Now let us look an example for styling using CSS.

Example

<!DOCTYPE html> 
<html>

<head>
    <style>
        /* Style all the paragraphs */
        p {
            background-color: black;
            color: white; 
            padding: 5px;
        }

        /* Style all elements with class 'special' */
        .special {
            color: lightblue; /* Change text color */
        }
    </style>
</head>

<body>
    <p>
        This a normal paragraph...
    </p>
    <br>   

    <p class="special">
        This is a paragraph with class special...
    </p>
    <br> 

    <div class="special">
        This is a div with class special...
    </div>
</body>

</html>

Print Page