Understanding CSS syntax is fundamental to styling web pages effectively. This guide delves into the intricacies of CSS syntax, providing comprehensive explanations and practical code examples to illustrate each concept.

1. Structure of a CSS Rule

A CSS rule consists of a selector and a declaration block. The selector targets the HTML elements you want to style, while the declaration block contains one or more declarations separated by semicolons.

selector {
    property: value;
}
        

For example:

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

Back to Table of Contents

2. Selectors

Selectors are patterns used to select the elements you want to style. They are a fundamental part of CSS syntax.

a. Element Selector

The element selector targets all instances of a specific HTML tag.

h1 {
    color: darkgreen;
}
        

<h1>This is a dark green heading.</h1>
        

b. Class Selector

The class selector targets elements with a specific class attribute. Classes are reusable and can be applied to multiple elements.

.highlight {
    background-color: yellow;
    font-weight: bold;
}
        

<p class="highlight">This text is highlighted.</p>
<span class="highlight">This span is also highlighted.</span>
        

c. ID Selector

The ID selector targets a single element with a specific id attribute. IDs should be unique within a page.

#unique-element {
    border: 2px solid red;
    padding: 10px;
}
        

<div id="unique-element">This div has a unique ID.</div>
        

d. Attribute Selector

The attribute selector targets elements based on the presence or value of a specific attribute.

a[href^="https"] {
    color: green;
}
        

<a href="https://example.com">Secure Link</a>
<a href="http://example.com">Non-secure Link</a>
        

e. Pseudo-class Selector

The pseudo-class selector targets elements based on their state or position in the DOM.

a:hover {
    text-decoration: underline;
}
        

<a href="#">Hover over me</a>
        

f. Pseudo-element Selector

The pseudo-element selector targets a specific part of an element, such as the first letter or line.

p::first-letter {
    font-size: 2em;
    color: red;
}
        

<p>This paragraph has a styled first letter.</p>
        

g. Universal Selector

The universal selector targets all elements on the page.

* {
    box-sizing: border-box;
}
        

<div>Box sizing is border-box for all elements.</div>
        

h. Grouping Selectors

Grouping selectors allows you to apply the same styles to multiple selectors by separating them with commas.

h1, h2, h3 {
    color: navy;
    font-family: 'Arial', sans-serif;
}
        

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
        

i. Descendant Combinator

The descendant combinator targets elements that are descendants of a specified ancestor.

div p {
    color: purple;
}
        

<div>
    <p>This paragraph is inside a div and is purple.</p>
</div>
<p>This paragraph is not inside a div and has default color.</p>
        

j. Child Combinator

The child combinator targets elements that are direct children of a specified parent.

ul > li {
    list-style-type: square;
}
        

<ul>
    <li>Direct child list item</li>
    <li>
        <ul>
            <li>Nested list item</li>
        </ul>
    </li>
</ul>
        

Back to Table of Contents

3. Declarations

Declarations define how the selected elements should be styled. Each declaration includes a property and a value, separated by a colon and ended with a semicolon.

a. Property and Value

Each CSS declaration consists of a property and a corresponding value.

color: blue;
font-size: 16px;
background-color: #f0f0f0;
        

Example:

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

b. Shorthand Properties

Shorthand properties allow you to set multiple related properties in a single declaration.

margin: 10px 20px 30px 40px;
padding: 5px 10px;
border: 2px solid red;
        

Example:

.box {
    margin: 10px 20px 30px 40px; /* top, right, bottom, left */
    padding: 5px 10px; /* top/bottom, right/left */
    border: 2px solid red; /* width, style, color */
}
        

c. Important Declarations

The !important rule overrides any other declarations for a property, regardless of specificity.

p {
    color: blue !important;
}

p {
    color: red;
}
        

Back to Table of Contents

4. CSS Units

CSS units specify the measurement of property values. They can be categorized into absolute and relative units.

a. Absolute Units

Absolute units are fixed and do not change based on other factors. Common absolute units include:

px       /* Pixels */
pt       /* Points */
cm       /* Centimeters */
mm       /* Millimeters */
in       /* Inches */
        

Example:

.box {
    width: 200px;
    height: 5cm;
}
        

b. Relative Units

Relative units are scalable and depend on other values like font size or viewport dimensions. Common relative units include:

em       /* Relative to the font-size of the element */
rem      /* Relative to the font-size of the root element */
%        /* Percentage relative to parent element */
vw       /* 1% of the viewport's width */
vh       /* 1% of the viewport's height */
        

Example:

body {
    font-size: 16px;
}

p {
    font-size: 1.5em; /* 24px */
    width: 50%; /* 50% of parent element's width */
}

.container {
    width: 80vw; /* 80% of viewport's width */
    height: 50vh; /* 50% of viewport's height */
}
        

Back to Table of Contents

5. CSS Comments

Comments are used to leave notes within your CSS code. They are ignored by browsers and do not affect the styling.

/* This is a single-line comment */

/*
This is a multi-line comment.
It can span multiple lines.
*/
        

Example:

/* Style for the main heading */
h1 {
    color: navy;
    /* Set font size to 24 pixels */
    font-size: 24px;
}
        

Back to Table of Contents

6. Importing CSS

You can import external CSS files into your stylesheet using the @import rule.

@import url('styles/reset.css');
@import url('styles/layout.css') screen and (min-width: 768px);
        

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Importing CSS Example</title>
    <style>
        @import url('styles/reset.css');
        @import url('styles/layout.css') screen and (min-width: 768px);
        
        body {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <p>This page imports external CSS files.</p>
</body>
</html>
        

Back to Table of Contents

7. CSS Variables

CSS Variables, also known as custom properties, allow you to store values that can be reused throughout your stylesheet.

:root {
    --main-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size-large: 1.5em;
}

h1 {
    color: var(--main-color);
    font-size: var(--font-size-large);
}

p {
    color: var(--secondary-color);
}
        

<h1>CSS Variables Example</h1>
<p>This paragraph uses a secondary color defined by a CSS variable.</p>
        

a. Defining Variables

Variables are defined within a selector that defines their scope. The :root selector is commonly used to define global variables.

:root {
    --primary-font: 'Helvetica Neue', sans-serif;
    --padding: 20px;
}
        

b. Using Variables

Variables are used by referencing them with the var() function.

body {
    font-family: var(--primary-font);
    padding: var(--padding);
}
        

Back to Table of Contents

8. CSS Functions

CSS functions perform specific operations and return values that can be used within declarations.

a. calc()

The calc() function allows you to perform calculations to determine property values.

.container {
    width: calc(100% - 50px);
    height: calc(100vh - 100px);
}
        

<div class="container">This container uses calc() for its dimensions.</div>
        

b. var()

The var() function retrieves the value of a CSS variable.

:root {
    --button-bg: #e74c3c;
    --button-text: #fff;
}

button {
    background-color: var(--button-bg);
    color: var(--button-text);
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
}
        

<button>Click Me</button>
        

c. rgba()

The rgba() function defines colors with red, green, blue, and alpha (transparency) components.

.transparent-box {
    background-color: rgba(0, 0, 0, 0.5);
    width: 200px;
    height: 100px;
}
        

<div class="transparent-box">Semi-transparent Box</div>
        

Back to Table of Contents

9. CSS Specificity

Specificity determines which CSS rules are applied when multiple rules target the same element. It is calculated based on the types of selectors used.

The specificity hierarchy from lowest to highest:

/* 1. Element selectors and pseudo-elements */
p { color: blue; }

/* 2. Class selectors, attributes selectors, and pseudo-classes */
.highlight { color: red; }

/* 3. ID selectors */
#unique { color: green; }

/* 4. Inline styles */
<div style="color: purple;">Inline style</div>
        

Example:

/* Element selector */
p {
    color: blue;
}

/* Class selector */
.highlight {
    color: red;
}

/* ID selector */
#unique {
    color: green;
}
        

<p>This paragraph is blue.</p>
<p class="highlight">This paragraph is red.</p>
<p id="unique">This paragraph is green.</p>
<p class="highlight" id="unique">This paragraph is green due to higher specificity.</p>
<div style="color: purple;">This div has an inline style and is purple.</div>
        

In the last paragraph, even though both the class and ID selectors apply, the ID selector has higher specificity, so the color is green. Inline styles have the highest specificity, overriding all other selectors.

Back to Table of Contents

Conclusion

Mastering CSS syntax is essential for creating well-structured and maintainable stylesheets. This guide has covered the fundamental aspects of CSS syntax, including the structure of CSS rules, various selectors, declarations, units, comments, importing styles, variables, functions, and specificity.

By understanding and applying these concepts, you can write more efficient and effective CSS, leading to better-designed and more responsive web pages.

Continue exploring advanced CSS topics such as Flexbox, Grid Layout, animations, and responsive design to further enhance your styling capabilities.

Back to Table of Contents