CSS Syntax

Last Updated : 06 Jun, 2025

CSS is written as a rule set, which consists of a selector and a declaration block. The basic syntax of CSS is as follows:

The selector is a targeted HTML element or elements to which we have to apply styling.
The Declaration Block or " { } " is a block in which we write our CSS.

HTML

<!--Driver Code Starts-->
<html>

<head>
    <style>
        /* CSS Rule */
<!--Driver Code Ends-->

        h1 {
            color: blue;
            /* Property: value */
            font-size: 24px;
        }

        p {
            color: green;
            font-size: 16px;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <h1>Hello, World!</h1>
    <p>This is a simple paragraph.</p>
</body>

</html>
<!--Driver Code Ends-->

In above Example,

h1: This selector targets all <h1> elements on the page. The style applied to <h1> will set the text color to blue and the font size to 24px.
p: This selector targets all <p> elements. The text color will be green and the font size will be 16px.

Selectors in CSS

Selectors define which HTML elements are styled. CSS offers several types of selectors.

1. Universal Selector: Applies styles to all elements.

CSS

* {
    margin: 0;
    padding: 0;
}

2. Type Selector: Targets specific HTML elements.

CSS

h1 {
    font-family: Arial, sans-serif;
}

3. Class Selector: Styles elements with a specific class attribute.

CSS

.box {
    border: 1px solid black;
    padding: 10px;
}

4. ID Selector: Targets a single element with a specific ID.

CSS

#header {
    background-color: lightgray;
}

Declaration Block in CSS Syntax

Each declaration consists of a property and a value, separated by a colon, and each declaration is followed by a semicolon:

Properties: Properties are the aspects of the selected elements you want to style (like color, width, height, etc.).
1. color: Defines the text color.
2. background-color: Defines the background color of an element.
3. font-size: Sets the size of the font.
4. margin: Specifies the space around an element.
5. padding: Defines the space between the element's content and its border.
Values: Values define the specifics of the property you want to apply, such as a color name, a number (e.g., 16px), or percentages (e.g., 50%).

Grouping and Nesting of CSS Selectors

You can group selectors to apply the same styles or nest them for hierarchical targeting.

1. Grouping

CSS

h1, h2, h3 {
    color: darkblue;
}

2. Nesting

CSS

ul li {
    list-style-type: square;
}

Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements are used for styling specific states or parts of elements. Pseudo classes target's the elements based on a particular state and pseudo elements targets the elements on basis of a particular part of that element.

CSS

/*pseudo-class selector*/
a:hover {
    color: green;
}

/*pseudo-element selector*/
p::first-line {
    font-weight: bold;
}

CSS Selectors

chaitanyashah707

Improve

Article Tags :