What CSS is, and why it exists
CSS, Cascading Style Sheets, controls how HTML looks, and keeping structure and appearance apart is the whole point.
- HTML is the structure; CSS is the colours, spacing, fonts, and layout
- Styles usually live in one external
.cssfile - Restyle an entire site by editing that single file
- That separation is why CSS "saves a lot of work"
Syntax and the three ways to attach it
A rule is a selector plus a declaration block, and you attach CSS three ways.
- A declaration is
property: value;, the colon splits them, the semicolon ends it - External, a
.cssfile linked with<link>; reusable and cacheable (best default) - Internal: a
<style>block in<head>, for a one-off page - Inline: a
styleattribute on one element; most specific, least maintainable
Selectors: choosing what to style
A selector points CSS at the elements you mean.
- element (
p): hits every matching tag - id (
#one): the single element with that id, which must be unique - class (
.center): every element with that class, the reusable workhorse - grouping (
h1, h2, p): several selectors share one rule - universal (
*): matches every element at once
Backgrounds, text, fonts, and links
Colour has three interchangeable forms, and links have four states you style in order.
- Colour: a name (
red), HEX (#ee3e80), orrgb(255, 0, 0) - Backgrounds:
background-image,background-repeat,background-attachment: fixed,background-position - Text:
color,text-align,direction(rtlfor Arabic),text-decoration,text-transform, spacing - Fonts:
font-family(end the list with a generic family),font-style,font-size - Links:
a:link,a:visited,a:hover,a:active: write them in that order or the later ones fail