CSS Syntax Overview

CSS syntax defines how you write styles to apply them to HTML elements. A CSS rule is made up of a selector and a declaration block that contains one or more property-value pairs.

1. Basic Structure


selector {
    property: value;
}

Selector: Targets the HTML element(s) you want to style.
Property: The aspect you want to change (like color, font-size, etc.).
Value: The setting for the property.

2. Example

Here’s a simple rule that styles all paragraphs:


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

This rule turns all <p> text blue and sets the font size to 16 pixels.

3. Multiple Properties

You can apply multiple properties in one rule by separating them with semicolons:


h1 {
    color: #1e3a8a;
    text-align: center;
    margin-top: 20px;
}

4. Comments in CSS

Use comments to explain your code. Comments are ignored by the browser.


/* This is a CSS comment */
p {
    color: gray;
}

5. Case Sensitivity

CSS is not case-sensitive for property names or values, but HTML element names and class/ID names are case-sensitive in some contexts (especially in XML or XHTML).

Conclusion

Understanding CSS syntax is the first step to mastering web design. Write clear, clean rules using the correct structure, and you'll be ready to dive into selectors, layouts, and responsive design.

← Previous: Setup Your First File Next: Basic Selectors →