CSS SYNTAX

CSS Syntax

CSS syntax is the set of rules used to style HTML elements. A CSS rule consists of a selector and a declaration block.

Basic Syntax

selector {
    property: value;
}

Parts of CSS Syntax

• Selector: Selects the HTML element you want to style.
• Property: Defines what aspect of the element you want to change (such as color or font-size).
• Value: Specifies the setting for the property.
• Declaration: A property and its value together (e.g., color: blue;).
• Declaration Block: One or more declarations enclosed within { }.

Example

HTML:

<h1>Welcome to CSS</h1>
<p>This is a paragraph.</p>

CSS:

h1 {
    color: blue;
    text-align: center;
}

p {
    color: green;
    font-size: 18px;
}

Explanation

• h1 is the selector.
• color is the property.
• blue is the value.
• color: blue; is a declaration.
• Everything inside { } is the declaration block.

Multiple Declarations

You can include multiple properties for the same selector.

p {
    color: red;
    font-size: 16px;
    font-family: Arial, sans-serif;
    text-align: justify;
}

CSS Comments

Comments help explain your code and are ignored by the browser.

/* This is a CSS comment */
h1 {
    color: purple;
}

Important Rules

• Every declaration ends with a semicolon (;).
• Properties and values are separated by a colon (:).
• Declarations are enclosed in curly braces ({ }).
• CSS is generally case-insensitive for property names and values, but selectors (such as class and ID names) may be case-sensitive depending on the document.

Summary

CSS Syntax Formula:

selector {
    property1: value1;
    property2: value2;
}

Example:

body {
    background-color: lightgray;
    font-family: Arial, sans-serif;
}

h1 {
    color: navy;
    text-align: center;
}

Using the correct CSS syntax ensures that styles are applied properly and makes your code clean, readable, and easy to maintain.