Basic Syntax of CSS

CSS (Cascading Style Sheets) is a language used to describe the style of an HTML document. It defines how elements should be displayed on the screen, paper, or in other media. The basic syntax of CSS consists of a selector and a declaration block.

1. Selector

The selector targets the HTML element you want to style. It tells the browser which element(s) to apply the styles to. The selector can be an HTML tag, class, ID, or more complex combinations.

2. Declaration Block

The declaration block contains one or more declarations enclosed in curly braces { }. Each declaration is made up of a property and a value, separated by a colon (:). Declarations are separated by semicolons (;).

CSS Rule Structure

selector {
    property: value;
    property: value;
}

• Selector: Identifies the HTML element to style.
• Property: The aspect of the element you want to change (e.g., color, font-size, margin).
• Value: The setting for the property (e.g., blue, 16px, 10px).

Example

Here’s a basic example of CSS syntax:

p {
    color: blue;
    font-size: 16px;
    margin: 10px;
}

• Selector: p (This targets all <p> elements in the HTML document).
• Property: color, font-size, margin.
• Value: blue (for color), 16px (for font size), 10px (for margin).

Explanation:

• The color: blue; declaration sets the text color of all <p> elements to blue.
• The font-size: 16px; declaration sets the font size of all <p> elements to 16 pixels.
• The margin: 10px; declaration sets the margin around all <p> elements to 10 pixels on all sides.

Key Points:

• Selectors are used to select the HTML element(s) you want to style.
• Properties define what you want to change about the selected element(s).
• Values specify the new setting for the property.
• Curly Braces {} enclose the declaration block.
• Semicolons ; separate each declaration within the block.

By combining selectors, properties, and values, you can style web pages with precision and control, enhancing the user experience and visual appeal.