SCHEMOX
- Sep 30, 2023
- 2 min read

Learning CSS: Understanding CSS Syntax

Introduction

Welcome back to our CSS series! In the previous post, we introduced you to the world of Cascading Style Sheets (CSS) and its significance in web development. Today, we'll take a closer look at CSS syntax, which forms the foundation of styling web pages. If you're ready to dive deeper into the world of CSS, let's get started.

CSS Rules and Syntax

CSS is built on a simple structure of rules that define how HTML elements should be styled. Each CSS rule consists of two main parts:

Selectors: These determine which HTML elements the style rule should be applied to. Selectors can target specific elements, classes, IDs, or even combinations of these.
Declaration Block: This block contains one or more declarations enclosed within curly braces {}. Each declaration consists of a property and its associated value. The property defines what aspect of the element you want to style, and the value specifies how you want to style it.

Anatomy of a CSS Rule

Here's a breakdown of a typical CSS rule:

/* Selector(s) */

selector {
    /* Declaration Block */
    property: value;
}

Selector(s): The selector(s) determine which HTML element(s) the rule applies to. It can be a tag selector (e.g., p for paragraphs), class selector (e.g., .highlight), ID selector (e.g., #header), or a combination of these.
Declaration Block: Enclosed within curly braces {}, this block contains one or more declarations.
Property: The property is what you want to style (e.g., color, font-size, background-color).
Value: The value is how you want to style the property (e.g., blue, 16px, #FF0000).

Example CSS Rule

Let's look at a practical example of a CSS rule:

/* Selector: Targeting all paragraphs with the class "highlight" */

p.highlight {
    /* Declaration Block */
    color: blue;
    font-size: 16px;
    background-color: yellow;
}

In this rule, we're selecting all <p> elements with the class "highlight" and applying three declarations: changing the text color to blue, setting the font size to 16 pixels, and giving the background a yellow color.

Comments in CSS

You might have noticed the /* ... */ notation in our examples. These are comments in CSS. Comments are not visible on the webpage and are used to add notes or explanations within your CSS code. They are a valuable tool for documentation and collaboration.

Conclusion

Understanding CSS syntax is the first step toward becoming proficient in web styling. In this post, we've explored the core structure of CSS rules, including selectors, declaration blocks, properties, and values. Armed with this knowledge, you're ready to start styling your web pages effectively.

In the next blog of our CSS series, we'll take a deep dive into CSS selectors, exploring the various ways you can target HTML elements for styling. Stay tuned for Part 3, where we'll unravel the power of CSS selectors!

SCHEMOX