lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter3Title

webIntroCssChapter4Title

webIntroCssChapter5Title

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans"
      rel="stylesheet"
    />
    <title>Basic CSS Structure Example</title>
  </head>

  <body>
    <h1>Title: Learning the Basic Structure of CSS</h1>
    <p>This sentence is an example sentence to learn the basic structure of CSS.</p>
    <p class="highlight">Selectors, Properties, Values</p>
  </body>
</html>

# Basic Structure of CSS

## Basic Structure: Selectors, Properties, Values

CSS is structured as shown below.

```css title="Basic Structure of CSS"
selector {
  property: value;
}
```

Just like a printer prints colors at specified coordinates, CSS defines rules for `which HTML element (selector)` should be styled `in what way (property)` and `how (value)`.

- **Selector**: Chooses the HTML element to style

- **Property and Value**: Defines what property (e.g., color, font size) and how to apply it (e.g., red, 16px) to the chosen element

For instance, to apply red color to an h1 tag as defined above, you would write the CSS like this.

```css title="CSS"
h1 {
  color: red;
}
```

Here, h1 is the `selector`, color is the `property`, and red is the `value`.

Always end the **value** with a semicolon `(;).` This signifies the end of that line.

The basic structure of CSS consists of selectors, properties, and values. The selector specifies which HTML elements to style, the properties indicate what style is applied, and the values provide the specific settings for the style.

### How is the basic structure of CSS organized?