Website Construction for Visual Artists

Making a CSS Stylesheet

First of all, you are going to see a lot of new CSS scripting on this page, without a detailed bullet-list of the CSS available. But don't worry -- there isn't all that much you would need to learn to get a decent website going. Most CSS is designed to enhance and embellish, over-and-above a basic professional layout.

Let's start with a very basic external CSS document (we'll call it a "stylesheet" from this point foreward). It would be typed into a fresh text-editor document, and saved with a name like "stylesheet.css".

body {
margin:80px;
background-color: #000000;
color: #cccccc;
font-size: 12px;
line-height: 14px;
font-family: Helvetica, Arial, sans-serif;
}

h1 {
font-size:40px;
line-height: 42px;
}

a:link {
color: #ffffcc;
}

a:visited {
color: #cccccc;
}

a:hover {
color: #ffffff;
}

a:active {
color: #ff66cc;
}

You can see that I have put in all kinds of (technically) useless line-breaks, for visual clarity. I could have chosen to write it like this:

body { margin:80px; background-color:#000000; color:#cccccc; font-size:12px; line-height:14px; font-family: Helvetica, Arial, sans-serif; }

h1 { font-size:40px; line-height:42px; }

a:link { color:#ffffcc; }

a:visited { color:#cccccc; }

a:hover { color:#ffffff; }

a:active { color:#ff66cc; }

First of all, let's look at the differences between HTML tags and CSS rules. An HTML tag has the following structure:

<element attribute="value">

Some examples:

<img src="picture3.jpg">
or even <img src="picture3.jpg" width="400" height="200" border="1">

CSS is similar, with some changes in syntax:

selector { property:value; }

For example:

img { border:1px; border-style:dotted; border-color:#ffffff }

Note that I'm writing CSS for an external CSS document -- there are no HTML <> brackets here. A browser will simply read a stylesheet to understand the formatting and decoration plan of a webpage.

Selectors are the same as HTML elements -- any element can be a selector. The main difference is that a single selector identified in a CSS stylesheet can pertain to all corresponding HTML elements in the connected webpages. In other words, the parameters that I have set for the largest header text (h1) above will apply to all instances of the <h1> in the website. Even if I use <h1> 100 times per page. Even if I have 1000 webpages in my site. If I change the size of this header text from 20-pixels to 24-pixels, then this change would apply to every single instance of <h1> in all 1000 of those pages.

CSS uses the { } curly moustache braces instead of the < > brackets.

CSS doesn't use equal-signs or quotation marks. Use a colon between the property and value -- this property/value duo is known as a declaration, btw. A CSS rule may have numerous declarations, so they need to be separated by semi-colons. It is a good habit to conclude every property/value with one.

Tip: The colons and semi-colons are very common CSS typos. Also, be sure that your curly moustache brackets are facing the correct direction.

Now, let's decipher this CSS document:

body {
margin:80px;
background-color: #000000;
color: #cccccc;
font-size: 12px;
line-height: 14px;
font-family: Helvetica, Arial, sans-serif;
}

This first CSS rule applies to everything between the <body> tags of every linked HTML page.

Margin establishes a margin between the browser window and content (80 pixels).
The background-color is set to black (#000000), but color refers to the (non-link) text color, which will be light grey (#cccccc).

Helvetica is the declared font family, but Arial is included as a secondary backup in case a browser doesn't know Helvetica. Either serif or sans-serif should be chosen as a last-resort, emergency backup.

h1 {
font-size:40px;
line-height:42px;
}

Without CSS, a browser will greatly enlarge the <h1> header text, but I'll opt to control the sizing -- 40px font-size with a 42px line-height.

a:link {
color: #ffffcc;
}

a:visited {
color: #cccccc;
}

a:hover {
color: #ffffff;
}

a:active {
color: #ff66cc;
}

These 4 CSS rules control 4 states for links. Links, by default, are blue and underlined, and then go purple when visited. You can control the colors/fonts/sizes of linked text to match your page design with a:link and a:visited. Here, I set my links to be light yellow (#ffffcc), and the visited links to be the same color as the normal text -- light grey (#cccccc).

In addition, you can give links a rollover effect with a:hover. I set mine to turn white (#ffffff) when moused over.

An activated link (a:active) is the link state when the mouse button is actually pressed. It's sort of nice as a little feedback cue for the user. I set mine to magenta (#ff66cc).

I have the CSS script above saved as "stylesheet_demo.css" in my website folder. Let's try it out with an HTML document. I'll type the following:

<html>

<head>

<title>HTML test page</title>

</head>

<body>

<h1>Mortal Terror</h1>

Click <a href="http://cuteoverload.com">here</a> and despair

</body>

</html>

I saved this HTML in a document called "htmltestpage.htm".
Go ahead and view the results.

So far, no CSS styling. That's because the link to the CSS document still needs to be typed into the <head> of the document, like so:

<html>

<head>

<title>HTML test page</title>

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

</head>

<body>

<h1>Mortal Terror</h1>

Click <a href="http://cuteoverload.com">here</a> and despair

</body>

</html>

Now see what happens.

Next: More CSS Top