Welcome to the essential guide to Cascading Style Sheets (CSS)! CSS is the language used to describe the presentation of a document written in HTML. It controls how HTML elements appear on screen, on paper, or in other media. With CSS, you can transform a plain HTML page into a visually stunning and user-friendly website.

What is CSS?

At its core, CSS is a set of rules that tell browsers how to display HTML content. These rules consist of selectors that target HTML elements and declarations that specify the styling properties and their values. For example, you can select all paragraphs (`

`) and change their color, font size, or spacing.

How CSS Works: Selectors, Properties, and Values

The basic syntax of a CSS rule is:

selector {
    property: value;
    property: value;
}

Common Selectors:

• Element Selectors: Target all elements of a specific type (e.g., `p`, `h1`, `div`).
• Class Selectors: Target elements with a specific class attribute (e.g., `.my-class`). Use classes for reusable styles.
• ID Selectors: Target a single element with a specific ID attribute (e.g., `#my-id`). IDs should be unique on a page.
• Attribute Selectors: Target elements based on their attributes (e.g., `[type="text"]`).
• Pseudo-classes: Target elements based on their state (e.g., `:hover`, `:active`, `:focus`).

Key Properties:

• Color & Typography: `color`, `font-family`, `font-size`, `font-weight`, `text-align`, `line-height`.
• Spacing & Box Model: `margin`, `padding`, `border`, `width`, `height`.
• Layout: `display` (e.g., `block`, `inline`, `flex`, `grid`), `position`, `float`.
• Backgrounds: `background-color`, `background-image`.

Applying CSS to Your HTML

There are three main ways to include CSS in your HTML document:

1. Inline Styles: Applied directly to an HTML element using the `style` attribute. (Generally discouraged for larger projects).

   <p style="color: blue; font-size: 16px;">This is blue text.</p>

2. Internal Stylesheet: Placed within the `` section of your HTML document using `