0.5.3 CSS: Styling a Web Page

CSS Controls Presentation

HTML describes the structure of webpage content.

CSS, or Cascading Style Sheets, controls much of the page's visual presentation.

CSS can influence things such as:

  • colors;
  • text size;
  • spacing;
  • borders;
  • layout;
  • fonts.

A useful separation is:

HTML: What is this content?

CSS: How should this content be presented?

Start With Structured HTML

Suppose the HTML contains:

Activity diagram showing HTML structure, then CSS presentation, then browser rendering, then visible webpage.
HTMLStructure.
  • New
  • Changed
  • Removed

That does not mean HTML and CSS are the same artifact.

They contribute different information to the result.

Start With Structure, Then Style

A useful workflow for a small webpage is:

  1. Create meaningful HTML content.
  2. Confirm the page structure makes sense.
  3. Add CSS for presentation.
  4. View the result in a browser.
  5. Revise styling without damaging the content structure.

The browser becomes the place where both representations come together.