Benjamin Lu

everyday is cool

One Stylesheet for the Whole Site

Changing a link color in five HTML files makes it easy to miss the sixth. A shared stylesheet lets each page load its colors and fonts from the same file.

Save this as site.css next to two HTML pages:

body {
  background: #f8f6ef;
  color: #252525;
  font-family: Verdana, Arial, sans-serif;
}
a { color: #174678; }
a:visited { color: #624070; }

Put this line inside the head of each page:

<link rel="stylesheet" type="text/css" href="site.css">

Open both pages. Change the background color in the stylesheet, then reload each page. Both should pick up the change. If only one does, check whether that page is in a different folder and needs a path such as ../site.css.

This example changes presentation while leaving the headings and links in the HTML. That separation makes a site easier to update even when it only has a handful of pages.