Skillversitas

CSS Syntax

Understanding CSS syntax is a fundamental step before you start writing stylesheets. CSS has a consistent rule structure that is easy to understand once you know its components.

The Structure of a CSS Rule

Every CSS rule consists of two main parts: the selector and the declaration block.

selector {
    property: value;
    property: value;
}
  • Selector: Determines which HTML element will be styled. It can be an element name, a class, an ID, or any other combination.
  • Declaration Block: The block enclosed in curly braces { } that contains one or more declarations.
  • Declaration: A single property-value pair terminated by a semicolon ;.
  • Property: The name of the styling attribute being changed (e.g., color, font-size, margin).
  • Value: The value assigned to that property.

Example of a CSS Rule

h1 {
    color: #2c3e50;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
    border-bottom: 2px solid #3498db;
}

Explanation:
- h1 is a selector that targets all <h1> elements
- { } is the declaration block
- color: #2c3e50; is one declaration (property: color, value: #2c3e50)
- The semicolon ; at the end of each declaration is required

Comments in CSS

Comments are used to explain code and are not read by the browser. CSS comments use the /* */ syntax.

/* This is a CSS comment */
/* Comments can
   span multiple lines */

h1 {
    /* Set the title color */
    color: blue;
    font-size: 24px; /* Title font size */
}

CSS comments cannot be nested. Here is an incorrect example:

/* Outer comment /* inner comment */ more outer comment */
/* The browser will misread this line */

Multi-Selector (Grouping)

Multiple selectors can be combined with commas to apply the same declarations.

/* Without grouping - repeated code */
h1 { color: blue; }
h2 { color: blue; }
h3 { color: blue; }

/* With grouping - more efficient */
h1, h2, h3 {
    color: blue;
}

Nested Selectors (CSS Nesting)

Modern CSS supports nesting inside a parent selector. This feature is available in the CSS Nesting Module (supported by modern browsers).

/* CSS Nesting (Modern) */
.card {
    background: white;
    border-radius: 8px;
    padding: 20px;

    & h2 {
        color: #333;
        margin-top: 0;
    }

    & p {
        color: #666;
        line-height: 1.6;
    }

    &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

Without nesting, the code above is written flat:

.card {
    background: white;
    border-radius: 8px;
    padding: 20px;
}

.card h2 {
    color: #333;
    margin-top: 0;
}

.card p {
    color: #666;
    line-height: 1.6;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Shorthand Properties

Many CSS properties support shorthand notation to write more compactly.

/* Longhand */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* Shorthand (clockwise: top, right, bottom, left) */
margin: 10px 20px 10px 20px;

/* Shorthand with 3 values (top, horizontal, bottom) */
margin: 10px 20px 10px;

/* Shorthand with 2 values (vertical, horizontal) */
margin: 10px 20px;

/* Shorthand with 1 value (all sides the same) */
margin: 10px;

Other shorthand examples:

/* Font shorthand */
/* font: style variant weight size/line-height family; */
font: italic bold 16px/1.5 'Arial', sans-serif;

/* Background shorthand */
/* background: color image repeat position size attachment; */
background: #fff url('bg.jpg') no-repeat center/cover fixed;

/* Border shorthand */
/* border: width style color; */
border: 2px solid #333;

/* Padding shorthand */
padding: 10px 20px;

Whitespace and Formatting

CSS is whitespace-insensitive (it does not care about extra spaces), but there are recommended writing conventions.

/* You can write it like this (valid) */
h1{color:blue;font-size:24px;}

/* But the recommended format is: */
h1 {
    color: blue;
    font-size: 24px;
}

/* Writing values with correct spacing */
margin: 10px 20px;       /* space between values */
padding: 10px 20px;     /* space after the colon */
font-family: Arial, sans-serif; /* space after the comma */

Specificity - Introduction

Specificity is the system that determines which CSS rule is applied when multiple selectors target the same element. The more specific a selector, the higher its priority.

Specificity order (from low to high):

  1. Element/Type selector (h1, p, div) → specificity: 0,0,1
  2. Class selector (.classname) → specificity: 0,1,0
  3. ID selector (#idname) → specificity: 1,0,0
  4. Inline style (style="...") → specificity: 1,0,0,0
  5. !important → overrides all specificity
/* Specificity: 0,0,1 - lowest */
p {
    color: gray;
}

/* Specificity: 0,1,0 - higher than element */
.text {
    color: blue;
}

/* Specificity: 1,0,0 - highest */
#main-text {
    color: red;
}

/* Result: the paragraph with id="main-text" is red
   because the ID selector has the highest specificity */

The Cascade - Introduction

"Cascading" in CSS refers to how the browser resolves conflicts between rules. The resolution order:

  1. Declaration order: The last-declared rule wins (if specificity is the same).
  2. Specificity: The selector with higher specificity wins.
  3. Origin: Inline style > internal style > external style (except !important).
  4. !important: Overrides all other rules (use with care).
/* Cascade example */
p {
    color: gray;         /* Overridden by the declaration below */
    color: blue;         /* Overridden by the ID selector */
}

#special {
    color: red;          /* Wins because of higher specificity */
}

/* !important - overrides everything (not recommended) */
p.urgent {
    color: green !important;
}

Complete Example

Here is an example that combines various CSS syntax concepts:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Syntax Example</title>
    <style>
        /* Basic reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
        }

        /* Grouped selectors */
        h1, h2, h3 {
            color: #2c3e50;
            margin-bottom: 10px;
        }

        /* Class selector */
        .container {
            max-width: 960px;
            margin: 0 auto;
            padding: 20px;
        }

        /* ID selector */
        #header {
            background-color: #3498db;
            color: white;
            padding: 30px;
            text-align: center;
        }

        /* Pseudo-class */
        .btn:hover {
            background-color: #2980b9;
        }

        /* Nesting (modern CSS) */
        .card {
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;

            & h3 {
                color: #2c3e50;
            }

            & p {
                color: #666;
                line-height: 1.8;
            }
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>Page Title</h1>
    </div>
    <div class="container">
        <div class="card">
            <h3>Card Title</h3>
            <p>Card content with a descriptive paragraph.</p>
        </div>
    </div>
</body>
</html>

Summary

CSS syntax consists of a selector and a declaration block. Each declaration is a property-value pair terminated by a semicolon. CSS supports comments, selector grouping, modern nesting, and shorthand notation, and it has a specificity and cascade system to resolve styling conflicts.