# Unit 3: CSS (DS194) ## What is CSS - **CSS (Cascading Style Sheets)** is a stylesheet language that controls the **presentation** of HTML: colours, fonts, spacing, layout and responsiveness. - **Syntax**: `selector { property: value; }`, e.g. `p { color: blue; font-size: 16px; }`. - **Selectors**: **element** (`p`), **class** (`.box`), **id** (`#header`), **universal** (`*`), **attribute** (`[type="text"]`), **descendant** (`div p`), **group** (`h1, h2`), **pseudo-class** (`a:hover`), **pseudo-element** (`p::first-line`). - Benefits: separation of content and style, consistency across pages, smaller files, easier maintenance, device adaptation. - **Box model**: content, padding, border, margin. ## Different Ways of Applying CSS | Method | How | Example | Use | |---|---|---|---| | **Inline** | `style` attribute on an element | `

` | Quick single change | | **Internal (embedded)** | `` | One page | | **External** | Separate `.css` linked with `` | `` | Whole site (recommended) | - A fourth route is `@import` inside CSS to load another stylesheet. - **Advantages of external**: reuse, caching, single place to change the look. - **Disadvantages of inline**: hard to maintain, mixes content and style, high priority. ## Priority Chain of CSS (Cascade) - The **cascade** decides which rule applies when several rules target the same element, using **origin, specificity, and order**. - **Order of priority** (low to high): 1. **Browser default styles**. 2. **External stylesheet**. 3. **Internal stylesheet**. 4. **Inline style**. 5. **`!important`** declarations (override normal rules; avoid overuse). - If internal and external have equal specificity, the one **declared later** wins. - **Specificity** ranking (low to high): **element selectors < class/attribute/pseudo-class < id < inline style**. - Calculated as (inline, ids, classes, elements), e.g. `#nav .link a` = (0,1,1,1). - **Inheritance**: some properties (colour, font) pass to child elements; others (margin, border) do not. - **Example**: ``` p { color: blue; } /* element */ .note { color: green; } /* class wins over element */ #intro { color: red; } /* id wins over class */ ``` A `

` appears red; an inline `style="color:black"` would override all three. - Best practice: keep selectors simple, use classes, avoid `!important` and avoid inline styles. **[Figure: CSS priority ladder]** Steps rising from browser default through external, internal, inline to !important. ## Common CSS Properties - **Text**: `color`, `font-family`, `font-size`, `text-align`, `line-height`. - **Box**: `margin`, `padding`, `border`, `width`, `height`. - **Background**: `background-color`, `background-image`. - **Layout**: `display` (block, inline, flex, grid), `position`, `float`. - **Responsive**: media queries, `@media (max-width: 768px)`. ## Likely Exam Questions 1. Define CSS and write its syntax. (2 marks) 2. Explain the three ways of applying CSS with examples. (long answer) 3. What is specificity? Explain the priority chain of CSS. (long answer) 4. Differentiate class and id selectors. (2 marks) 5. Why is an external stylesheet preferred? (2 marks)