Styling pages with CSS

§Text Passage

1Summary 重點摘要

CSS form: selector { property: value; }. Tag p{}, class .highlight{}, ID #title{}. The box model inside out: content → padding → border → margin. Responsive via @media (max-width: 600px) to restyle on phone screens.

2Vocabulary cards Vocabulary

3Step by step Steps

1. Your first CSS and the basic formatCSS handles looks while HTML handles content. First example: inside a ＜style＞ block write p { color: red; } and every paragraph on the page turns red at once. The basic shape is selector { property: value; } — p is the selector naming the targets, color: red is one style rule, and the trailing semicolon is mandatory, separating rules when several sit together; adding font-size: 18px; restyles the size too. This one-place, whole-page effect is the root of CSS's efficiency.
2. Three kinds of selectorThree everyday selectors: the tag selector p { } acts on every paragraph; the class selector .highlight { } acts on elements marked class='highlight' — one class may sit on many elements at once, ideal for repeated styling such as highlighted paragraphs; the ID selector #title { } acts on the single element with id='title', unique per page, naming the main heading. The choosing principle: tag for everything, class for the shared few, ID for the one — keep the layers straight and confusion stays away.
3. The box modelEvery element is a box with four layers from inside out: the content (text and images), padding between content and border, the border itself, and margin between the element and its neighbours. Example: .card { padding: 16px; border: 2px solid black; margin: 10px; } — the text sits 16px clear of the frame, the frame is a 2px solid black line, and the card keeps 10px away from surrounding elements. Any layer, once changed, shows instantly; fine-tuning a layout is really the sizing of these four layers.
4. Fonts, line spacing and colourTypography shapes the reading experience: body { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.8; } sets the site-wide typeface, 16-pixel size and 1.8 line spacing in one go, making long text instantly readable — 1.5 to 1.8 is the accepted comfort range. Colour comes in two notations: color: red and color: #ff0000 look identical; the three hex pairs control the amounts of red, green and blue — #000000 is black, #ffffff white, and #f07f2e is orange. A site should keep one palette, starting from a single theme colour and extending it.
5. An introduction to responsive designResponsive design keeps one page looking good on both phone and desktop. The entry tool is the media query: @media (max-width: 600px) { body { font-size: 14px; } } means 'when the screen is narrower than 600 pixels (a phone), drop the font to 14px', while desktops keep 16px. One line of code and both devices are comfortable; further steps narrow the margins or hide sidebars on the phone version. With more than half of web traffic now on phones, responsiveness is a baseline requirement, not a bonus.
6. Three ways to attach CSSCSS joins HTML in three ways: inline styles sit in a tag's style attribute, touching that one element — highest priority but hard to reuse; internal styles live inside a ＜style＞ block and style the whole page; external stylesheets are separate .css files pulled in with ＜link rel='stylesheet' href='css/style.css'＞, shared by dozens of pages so one edit restyles the entire site. Formal projects always use external stylesheets, keeping inline styles for temporary tweaks — the industry-standard arrangement.
7. Practical work: a card styleA combined exercise: design a 'card' for an intro paragraph. The style: .card { background-color: #ffffff; border: 2px solid #000000; border-radius: 14px; padding: 16px; margin: 10px; } — white background, black frame, 14px rounded corners, 16px padding. On the HTML side, mark the paragraph with class='card': ＜p class='card'＞This text sits inside a card.＜/p＞. Once applied, the page shows a rounded white card with comfortable space between text and frame. Define styles as classes, attach them in HTML — the daily rhythm of CSS work.

4Diagrams Diagrams

5Worked example Example

6Common mistakes Mistakes

7Quick check Quick check

8Recap Recap

• CSS styles the look, HTML carries the content; one external .css file restyles the whole site.
• The form: selector { property: value; }; every declaration ends with a semicolon.
• Three selectors: tag p, class .highlight (reusable), ID #title (unique per page).
• The box model: content → padding (inside) → border → margin (outside).
• @media (max-width: 600px) keeps one page good on phone and desktop — responsive step one.