CSS Syntax

CSS Syntax

CSS syntax defines how CSS rules are written to style HTML elements. A CSS rule consists of a selector and a declaration block. The declaration block contains one or more declarations, and each declaration includes a property and a value.

1. CSS Syntax Structure

A basic CSS rule looks like this:

selector {
    property: value;
}

Here is an example:

h1 {
    color: blue;
    font-size: 30px;
}

In this example:

• h1: The selector that selects HTML heading elements.
• color: The property that defines the text color.
• blue: The value assigned to the color property.
• font-size: The property that defines the text size.
• 30px: The value assigned to the font-size property.
• { } Curly braces contain the declaration block.
• : A colon separates the property and value.
• ; A semicolon ends each declaration.

2. CSS Selector

A CSS selector is used to select the HTML element that you want to style.

Example:

p {
    color: red;
}

This CSS rule selects all paragraph elements and changes their text color to red.

3. CSS Property

A CSS property specifies which aspect of an HTML element you want to change.

Examples of CSS properties include:

• color – Sets text color.
• background-color – Sets background color.
• font-size – Sets text size.
• text-align – Aligns text.
• margin – Creates space outside an element.
• padding – Creates space inside an element.
• border – Adds a border around an element.

4. CSS Value

A value specifies the setting for a CSS property.

Example:

h1 {
    color: green;
    font-size: 40px;
}

Here, green is the value of the color property, and 40px is the value of the font-size property.

5. Multiple CSS Declarations

You can apply multiple CSS declarations to a single HTML element by writing them inside the same declaration block.

Example:

p {
    color: blue;
    font-size: 18px;
    text-align: center;
    background-color: lightyellow;
}

This example changes the paragraph text color, font size, alignment, and background color.

6. CSS Comments

CSS comments are used to explain code or temporarily disable CSS declarations. Comments are ignored by the browser.

CSS comments begin with /* and end with */.

Example:

/* This is a CSS comment */

h1 {
    color: blue;
}

/* Change paragraph styling */
p {
    font-size: 18px;
}

7. CSS Grouping Selectors

You can apply the same CSS styles to multiple HTML elements by grouping selectors with commas.

Example:

h1, h2, p {
    color: green;
    font-family: Arial, sans-serif;
}

This example applies the same text color and font family to all h1, h2, and p elements.

8. CSS Case Sensitivity

CSS property names and most standard CSS keywords are generally case-insensitive. However, class names and IDs are case-sensitive in HTML and CSS selector matching.

Example:

.myClass {
    color: blue;
}

The selector .myClass does not match an element with the class myclass.

CSS Syntax Summary

Conclusion

CSS syntax is simple and easy to understand. Every CSS rule contains a selector and a declaration block. Inside the declaration block, properties and values are used to style HTML elements.

Practice Tasks

1. Create a CSS rule to make all h1 headings red.
2. Set the font size of all paragraphs to 20px.
3. Change the background color of the body to lightblue.
4. Apply the same color to h1, h2, and h3 using grouping selectors.
5. Add a CSS comment to explain your styling code.