Website Construction for Visual Artists

The Basics of CSS

CSS ("Cascading Style Sheets") is a scripting language which resembles HTML, but is specifically designed for handling colors, fonts, page formatting, margins and other visual matters that HTML is not very good at. HTML does have tags to control background colors or font sizes, but they are far too rudimentary for today's standards.

For example, the old <font> tag in HTML (deprecated) only has a few options for changing the font size, and they are unpredictable from browser to browser. CSS, on the other hand, allows to you specify the exact pixel (or point) sizes. Here's a <p> paragraph tag with a CSS injection:

<p style="font-size:16px;"> ... </p>

CSS can also allow you to control the spacing for characters, words and lines:

<p style=" font-size:16px; line-height:18px; letter-spacing:3px; word-spacing:5px; ">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, etc, etc....
</p>

Here's how the above text content will look with these CSS controls:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, etc, etc....

Let's go a bit further, and give the paragraph a background color, change the text color, and apply a Times New Roman font:

<p style=" font-size:16px; line-height:18px; letter-spacing:3px; word-spacing:5px; background-color:red; color:white; font-family:Times New Roman; ">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, etc, etc....
</p>

And here 'tis:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, etc, etc....

Note that "red" and "white" are selected from 16 predetermined color settings.
I could also choose from 216 web-safe hexidecimal colors,
or a vast palette of RGB coordinates. More on this later.

Also, notice the font size seems to shrink a bit.
It doesn't, really, but the switch to Times New Roman font makes it appear so.

The CSS here can get much more intricate, giving web-designers a wide variety of options for controlling their interfaces, to the degree that we all enjoy with a word processor (or a layout application, like Quark or InDesign). This is what gives contemporary pages the "professional look" that was missing from most websites published in the 90's. By saying this, I mean that the page presentation looks like the result of careful aesthetic considerations on the part of the designer, and not just default settings on the part of the browser.

The CSS from the example above is something called inline CSS. It is CSS added to HTML tags within the <body> tags -- basically, it is CSS formatting just stuck into the content of the document in those instances where I need to control things better. If you're making a single-page website, then inline CSS is perfect for adding visual style for your page..

Problems arise when a 20-page website is being built, in which a lot of inline CSS would have to be retyped. And what happens when you want to change the look of the site? That would mean opening up every single page in a text-editor to make alterations. This would be best handled -- and here comes the beautiful part! -- with an external CSS document. This is a text document (also typed with a text-editor, but given a ".css" suffix instead of ".htm") that the HTML pages of your website can be linked to. The link is inside the <head> of your document -- it doesn't appear on the page, but the browser sees it.

You can view the CSS document that controls this website here (if you're using Internet Explorer, you'll have to download this link and view it in a text-editor).

You can view how this page would look without the external CSS document. Note that you'll see some inline CSS (like the red paragraph) that I've typed within the <body> tags. This is because I simply just copied this page under a slightly different name, and erased the link to the external CSS document. In addition, I'll note that the page structure vanishes because I was using CSS to create a leftmost column for the navigation at top, instead of using tables (which would have worked just as well).

When a visitor's browser reads the first HTML page of your site and sees the CSS link, it will read this external CSS document and learn all the formatting directions for the website. Every subsequent page that links to the same CSS document will be displayed according to these formatting directions. Even if your website is 100 pages, just one document can control all fonts, colors, margins, etc. My own CSS document linked above gives the site a neutral-blue background and sans-serif text. Tomorrow, I can open this document and change the background to pink, with a Times New Roman font, for the entire site. The next day, I can change it back again. Major aesthetic revisions can be made very casually, which was especially helpful when I first designed this site and I wasn't 100% sure of how I wanted it to look.

To use this external CSS document, my HTML pages must have the following line somewhere between the <head> </head> tags:

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

You can click View at the top of your browser, look at the page source, and see this link in the HTML for this page (fourth line down).

I named my CSS document "stylesheet.css" simply because it is conventional to do so. Typically, when I start a website, I have 2 text-editor windows open: a new HTML document, and a new CSS document. I'll work back and forth between them, putting content into my HTML page, and tweaking the presentation in my CSS page.

There is a third way to use CSS: document-level CSS. This is CSS scripting located between the <head> tags, and it applies to all the content between the <body> tags -- but just for that one page. For example:

<head>

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

<style type="text/css">

body { background-color:yellow; }

h1 { color:blue; font-size:25px; }

</style>

</head>

This means that regardless of whatever CSS directions are in "stylesheet.css", the page background will be yellow, and the <h1> header text will be blue and 25 pixels high. And the whole HTML page will obey.

What the "cascading" part means

Cascading refers to the pecking order in which certain CSS scripting overrides other CSS script. I can use an external CSS document to make all 100 pages of my website have blue text, but I can use document-level CSS to isolate a single page and give it red text. Furthermore, I can then use inline CSS to make a particular sentence green. The closer the CSS script is to the content being controlled, the more authority it carries. To put it in other words, consider the chain of command in a corporation:

The president of a company, with 100 locations across the country, decides that all employees may only have 30 minutes for lunch. Similarly, an external CSS document creates rules for all connected webpages.
The general manager of the Los Angeles branch, with a 14-story office under her command, decides to relax the rule and increase the lunch break to 45 minutes. Her decision will only affect that office building, and none of the other 99 locations. This is similar to the document-level CSS, which controls all the content of a particular HTML page.
A particular dept. manager on the 6th floor of the LA office decides all these new lunch rules are for the birds, and tells the 10 employees in his dept. that they can go ahead and take a 90-minute lunch break. His decision will affect no other employees on his floor, or on other levels of the building. This is like using inline CSS to create formatting rules in very specific instances.

In defense of CSS

You can read the first chapter from Eric Meyer's Cascading Style Sheets: The Definitive Guide (2000, O'Reilly), which is a rather clear introduction of CSS (and arguments to defend it, since it wasn't so widely embraced at the time).

Given that this tutorial is targeted towards artists -- individuals who tend to be very particular about their interfaces -- I do feel it is appropriate to push CSS for styling pages, even though old HTML tags for coloration and fonts will still work. To be fair:

<body background="#" text="#" ink="#" alink="#" vlink="#">

These attributes for the <body> tag allow you to establish a background color for the entire page, and establish colors for the general text, the links, the activated links (alink -- a link that is being pressed with a mouse), and the visited links (vlink -- it's good to give these a distinct color so that users can figure out where they've been). After each # sign, there should be a 6-digit hexidecimal number (for Web-safe colors), such as background="#ff0000" which would make the background color red.

To control fonts, you can use the following:

<font face="" size="" color="#"> ...enter text here... </font>

Here are specific examples:

<font face="Arial, sans-serif" size="+2" color="#ff0000"> ...enter text here... </font>
<font face="Times New Roman, serif" size="-1" color="#cc9900"> ...enter text here... </font>

Color selections in HTML are reliable, but limited. Text-sizing is unpredictable -- it changes depending on the browser being used and the display settings. Font families are quite unreliable -- they're much stronger in CSS (although never quite guaranteed, so in CSS we give the browser a list of preferred fonts in descending order).

In any case, if you Googlesearch HTML tutorials, you'll find at least 10 years worth of pure HTML guides that will show you how to make a site with little or no mention of CSS. I won't promote them any further. CSS does allow you to get more sophisticated with presentation:

Controlling the width of margins between the browser window and content.
Controlling the space between blocks of content -- whether that content is small pieces like words or images, or large pieces like page sections.
Giving borders and background colors to individual page elements (as I've done on these pages).
Choosing from a wider palette of colors for backgrounds and text.
Controlling background elements (like images/patterns).

The next section will cover the external CSS document, which is indispensible for saving time for the web-designer, and eliminating the traditional drudgery of changing/updating a website.

Next: CSS stylesheet Top