XTREMWEB
Classification Technical Architecture Guide

Style Sheets for the Terminally Impatient

Document ID XTW-STYLE-SHEETS-FOR-THE-TERMINALLY-IMPATIENT
Date Published 2015.01.08
Status Editorial Record
Word Count 303 words

If you want your web pages to look polished and clean, but want to avoid writing font and layout styles inline over and over again, you need Cascading Style Sheets (CSS).

Under web standards, there are three ways to apply style rules: inline styles, document-level styles (inside <style> blocks in the document head), and external style sheets. The fastest, cleanest, and most maintainable way to style your site is by linking to a single external style sheet.

What is an External Style Sheet?

An external style sheet is simply a plain text file containing styling rules (selectors and their related properties). It separates content from presentation. A basic sheet looks like this:

/* base layout styles */
body { 
  color: #1a1f2c;
  background-color: #faf9f6;
  font-family: Arial, Helvetica, sans-serif;
}

/* links */
a:link { 
  color: #2563eb;
}
a:visited { 
  color: #1d4ed8;
}

/* headings */
h1 { 
  font-size: 2rem;
  line-height: 1.4;
  color: #0f172a;
}

To apply these rules across your website, add a <link> tag inside the <head> of your HTML document (after the <title> and <meta> tags):

<link rel="stylesheet" href="style.css">

By linking this single file, any modification to style.css instantly updates the visual design across your entire site.

Styling Specific Elements with Classes

To apply styles to specific elements rather than every tag of a certain type, use class selectors. For example, if you want a specific small font for navigation or footer text, define a class in your CSS file:

.navigation { 
  font-size: 0.875rem; 
  line-height: 1.25rem; 
  color: #64748b;
}

In your HTML document, apply the class to your tag using the class attribute:

<p class="navigation">This text will be rendered in the smaller navigation style.</p>

Using external classes keeps your markup lean, improves page load speeds, and ensures that your layout remains consistent as your site grows.