CSS Syntax

The Language of Style

Think of HTML as the skeleton of a webpage—it provides the structure. CSS, on the other hand, is the clothing. It's how you add color, style, and personality. To do this, CSS uses a simple set of instructions called rules.

Every CSS rule follows the same basic grammar. It tells the browser two things: which HTML element to target, and what styling to apply to it. This grammar is made of a selector and a declaration block.

Let's break down these parts.

Selectors Target the Element

A selector is the first part of a CSS rule. It points to the HTML element you want to style. For now, we'll focus on the simplest kind: type selectors, which target elements by their tag name.

Want to style all paragraphs? Use the selector p. Want to style the main heading? Use h1.

The selector's job is to say, "Hey, browser! I want to change all of these things."

Properties and Values Change the Style

After the selector comes the declaration block, which is wrapped in curly braces {}. This block holds the actual style instructions, called declarations. Each declaration consists of a property and a value, separated by a colon.

property

noun

A style attribute to change, like font size or background color.

value

noun

The setting for a property, like 16px or blue.

A property is what you want to change, and the value is how you want to change it. You end each declaration with a semicolon ; to separate it from the next one.

h1 {
  color: navy;
  font-size: 32px;
}

This rule targets all <h1> elements. It sets their text color to navy and their font size to 32 pixels.

Applying CSS to HTML

So, where do you write these rules? For now, the easiest way is to place them directly inside your HTML document using the <style> tag. This tag goes inside the <head> section of your HTML file.

<!DOCTYPE html>
<html>
<head>
  <title>My Styled Page</title>
  <style>
    p {
      color: darkred;
      font-size: 18px;
    }

    body {
      background-color: beige;
    }
  </style>
</head>
<body>

  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>

</body>
</html>

When a browser reads this HTML file, it sees the rules inside the <style> tags and applies them to the corresponding elements in the <body>. The result is a webpage with a beige background and dark red text for all paragraphs.

Now that you understand the basic syntax, you have the building blocks to start styling any element on a webpage.

Mastering CSS for Web Design