CSS styling — Computing, 11–13
CSS controls how a web page looks without changing the page’s main content. You learn to separate meaning from appearance, then set colours, spacing, sizes, and layout with rules.
Content and appearance
A web page has content, such as a heading or a paragraph, and it can also have a visual style. CSS is a set of instructions saying which elements should look which way: blue text, a wide margin, or a two-column layout. The page can keep the same message while its style changes.
Why separate style?
If every page mixed its words with all its visual instructions, changing a colour or fixing a layout would mean editing many places. CSS grew from the need to style many pages consistently and update them more easily. It also lets the same content adapt to a phone, a large screen, or a printer.
Making a heading blue
Suppose a page has a heading marked as a heading. First, choose that kind of element as the target. Next, set its text colour to blue and its size to 24 pixels. When the browser loads the page, every matching heading receives those settings. Change the rule once, and all matching headings change together.
The style-is-content trap
It is tempting to use visual size or colour to decide what something means, because people notice appearance first. That can make a page look right while making its structure unclear to browsers and assistive technology. Mark an item for what it is, then use CSS to decide how it should look.
CSS in real sites
Everyday websites use CSS for readable text, menus, cards, spacing, and layouts that fit different screens. Online shops can keep the same product information while changing its appearance for a phone or a desktop. CSS cannot create a missing fact or make a poor image meaningful; it shapes presentation rather than supplying content.
Keep exploring
Other languages
Loading MyLeoNes™…