Declaration block syntax in CSS

 

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:

1. Properties: Properties are the aspects of the selected elements you want to style (like color, width, height, etc.).

• color: Defines the text color.
• background-color: Defines the background color of an element.
• font-size: Sets the size of the font.
• margin: Specifies the space around an element.
• padding: Defines the space between the element's content and its border.

2. 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

h1, h2, h3 {
    color: darkblue;
}

2. Nesting

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.

/*pseudo-class selector*/

a:hover {

    color: green;

}

​

/*pseudo-element selector*/

p::first-line {

    font-weight: bold;

}