Cascading Style Sheets (CSS)

CSS (Cascading Style Sheets) is a style sheet language used to control the presentation of HTML/XML documents: colours, fonts, spacing, layout and responsiveness. It separates content (HTML) from presentation (CSS). "Cascading" means that when several rules apply to an element, the browser resolves conflicts using a defined order of priority.

Syntax

selector {
  property: value;
}
h1 { color: blue; font-size: 24px; }

Ways of applying CSS

1. Inline: <p style="color:red">Text</p> (highest priority, affects one element).
2. Internal: rules inside a <style> element in <head>.
3. External: a separate .css file linked with <link rel="stylesheet" href="style.css"> (best for many pages).

Selectors

Element (p), class (.note), id (#header), group (h1, h2), descendant (div p), attribute and pseudo-class (a:hover).

Cascade order

Priority is decided by origin and importance (!important), then specificity (id > class > element), then the order of appearance (the last rule wins). Some properties are inherited from parent to child.

Advantages

• Same look across many pages from one file; easy site-wide changes.
• Smaller, cleaner HTML and faster loading (CSS is cached).
• Different styles for different media (screen, print, mobile) using media queries.
• Better accessibility and layout control (Flexbox, Grid, box model).