What is CSS?

Cascading Style Sheets (CSS) — a style language used to describe the presentation of a document written in a markup language (HTML, XHTML, SVG, XML).

Main functions of CSS:

Separation of presentation from content: Allows changing the appearance of a web page without modifying its structure.
Styling elements: Managing colors, fonts, sizes, margins, borders, and other visual properties of elements.
Creating responsive design: Using media queries to apply different styles depending on device characteristics (screen resolution, orientation, etc.).
Animation and transitions: Creating visual effects for interactivity and enhancing user experience.
Layout management: Positioning elements on the page using various techniques (Flexbox, Grid, floats, etc.).

CSS rule structure:

/* Selector */
h1 {
  /* Declarations */
  color: blue; /* Property: value; */
  font-size: 24px;
}

Main ways to connect CSS to an HTML document:

External file (<link>): The most common and recommended method. Styles are stored in a separate .css file.
```
<link rel="stylesheet" href="styles.css">
```
Within <style> tag: Styles are defined directly in the HTML document, usually in the <head> section. Suitable for small styles or quick testing.
```
<style>
  p {
    line-height: 1.5;
  }
</style>
```
Inline styles (style attribute): Styles are applied to a specific HTML element via the style attribute. Has high priority but makes maintenance and scaling difficult.
```
<div style="border: 1px solid black;">
  This is a div with inline style.
</div>
```

Cascade determines how the browser applies styles when multiple rules compete for the same element. It considers:

Selector specificity: More specific selectors have higher priority.
Order of appearance: Rules declared later override earlier rules with the same priority.
Importance (!important): Declarations with !important have the highest priority (use cautiously).
Source of styles: Author styles have higher priority than user styles or browser default styles.