CSS

CSS (Cascading Style Sheets)

1. Definition

CSS is the W3C standard language that describes the presentation (layout, colours, fonts, spacing) of HTML/XML documents. It separates content (HTML) from style (CSS), so one style sheet can restyle an entire site.

Versions: CSS1 (1996), CSS2/CSS2.1, CSS3 (modular: selectors, box model, colours, backgrounds, transforms, animations, media queries, flexbox, grid).

2. Three Ways to Attach CSS (and the Cascade)

Method	Where	Priority
Inline style	style="..." attribute on the element	Highest
Internal style sheet	<style> block in <head>	Middle
External style sheet	separate .css file via <link>	Lowest (but most reusable)

Browser defaults sit below all of these; !important overrides.

<link rel="stylesheet" href="site.css">
<style> h1 { color: teal; } </style>
<h1 style="color:red">Inline wins</h1>

3. Syntax and Selectors

 selector { property: value; property: value; }

Selector	Matches	Example
Element	tag name	p { color: navy; }
Class	class="x" (many elements)	.note { background: yellow; }
ID	id="x" (one element)	#header { height: 80px; }
Group	several selectors	h1, h2 { font-weight: bold; }
Descendant	inside another	nav a { color: green; }
Attribute	by attribute	input[type="text"] { … }
Pseudo-class	state	a:hover, li:first-child
Pseudo-element	part of element	p::first-line

Cascading order: inline > id > class > element; later/equal-specificity rules override earlier ones; inheritance passes properties (font, colour) to children.

4. The Box Model

 +-----------------------------+
 |         margin               |
 |  +--- border -------------+  |
 |  |      padding            | |
 |  |   +----- content -----+ | |
 |  |   |  width x height    | | |
 |  |   +-------------------+ | |
 |  +------------------------+  |
 +-----------------------------+
 Total width = content + 2*padding + 2*border (+ margins outside)

5. Common Properties

• Text/font: color, font-family, font-size, font-weight, text-align, line-height, text-decoration
• Box: width, height, margin, padding, border, background, box-shadow
• Positioning: position: static|relative|absolute|fixed|sticky, float, display: block|inline|flex|grid|none, z-index
• CSS3 extras: border-radius, transform: rotate(...), transition, animation, @media (max-width: 768px) (responsive design), gradients, flexbox justify-content.

6. Small Worked Example

/* site.css */
body    { font-family: Arial; background: #f5f5f5; }
h1      { color: #004080; text-align: center; }
.card   { border: 1px solid #ccc; padding: 12px; border-radius: 8px; }
a:hover { color: red; }
@media (max-width: 600px) { .card { padding: 4px; } }

7. Advantages and Limitations

Advantages: separates content from presentation; consistency across many pages (one file); faster page loads (cached CSS); better accessibility/SEO; responsive design support.
Limitations: browser inconsistencies (older browsers); learning curve for complex layouts; cross-browser testing needed; specificity/cascade bugs are hard to debug.

8. Exam Points

• What is CSS? Explain inline/internal/external styles with the cascade order — 7 marks.
• Explain selectors and the box model with a diagram — 10 marks (very frequent).
• Write CSS to style a page (heading, class, hover, media query) — 5-10 marks.
• Advantages of separating style from content — 5 marks.