Website Construction for Visual Artists

More CSS

This is not an exhaustive list of available CSS properties, but enough to give you some controls over the website template documents offered on this tutorial.

CSS to control text

font-family:
Any font family may be used, but that doesn't mean that a visitor's browser has that font installed. Generally, the most preferred (and adventurous) fonts are listed first, then more generic fonts (like Times, monospace, Arial, Courier, etc.). Just separate fonts with a comma. You should finish the list with serif or sans-serif -- if all else fails, at least these two will work. Font families are optional of course, and some Web publishers will opt to allow the user to see the text content according to their own personal browser preferences.

Most common font families

font-size:
You can use point (pt) sizes, which pertain to the font style itself, or pixel (px) sizes, which pertain to the resolution of the user's viewing device. There are also em units for relative sizing. For example, p { font-size:1.5em } will cause text to be 150% the size it would otherwise be (as a result of inherited CSS pt/px settings, or as a result of the user's browser settings). Again, this is optional, and some Web publishers will decline to control sizing for general text. Not every viewer has great eyesight, and not every display device will render 10px too well.

text-align:
Left, center, or right.

text-decoration:
This is handy for navigational links that you don't want to be underlined, for aesthetic reasons.
For example:

<a style="text-decoration:none;" href="...">Section One</a>

font-weight:
This is more precise than the <b> (boldface) HTML tag, You can use the values bold, bolder, lighter and normal. You can also use numeric values: 100, 200, 300...and so on, up to 900. However, that doesn't mean that a user's browser will understand precisely what to do with font-weight:500;. Generally, 400 is normal and 700 is bold.

Some others:
line-height:
letter-spacing:
word-spacing:

CSS for colors

Colors can be applied to text with the color: property, and to backgrounds with the background-color: property. Here are some ways to select colors:

Pre-defined colors. The number of reliable, pre-defined colors (colors you can identify by name) differs among browsers, but generally it is agreed that there are 16 colors. This, however, is not the ideal palette to work with.
Hexidecimal colors. These 216 colors are the most popular, being reliable across browsers, and easily available from the Photoshop Color Picker -- just click the "Only Web Colors" button in the bottom-left corner, and you can see 6-digit hexidecimal values next to the # symbol. Or consult this page.
RGB values. In CSS, you can control the amounts of red, green and blue in a color (with values between 0-255). For example:
p { background-color: rgb(215,251,164); } -- this would be a pale lime-green
p { background-color: rgb(0,0,0); } -- this would be black
I found the colors above by going to my Photoshop Color Picker, but leaving the "Only Web Colors" button off. RGB values are shown in the "R", "G" and "B" fields.

Using RGB values does allow you to have great control over your colors, and it works because home computers tend to have monitors with millions of colors (and updated browsers). With the proliferation of smaller, sleeker Web-viewing devices (cellphones, PDA's, etc.), this may not be the case, so hexidecimal values will be more reliable.

Inline CSS

Regardless of whether or not you choose to have an external CSS document for your website, you can inject CSS scripting into the HTML tags of your webpages. Inline CSS is useful when you want to control styling in specific instances (a word, an image, a paragraph, or even in the <body> tag to set controls for the whole page).

Inline CSS doesn't use any { } curly moustache brackets. Instead you use the style=" " attribute inside of any HTML tag. Like so:

<h1 style="font-size:50px; color:#cccccc">

<img src="picture.gif" style="width:100px; height:75px; margin:25px">

<p style="background-color:#ff0000; border:1px solid #000000; padding:30px; text-align:center">

Inline CSS can override any CSS in an external document, so it is a good way to make specific changes on a particular webpage without affecting the rest of the website.

Div and span

There are two HTML tags which are indispensible to anyone using CSS: <div> and <span>. The <div> can be useful in HTML for aligning blocks of content, but otherwise these don't have much of an affect on your HTML page. They become very useful in creating containers for content that you would like to control with CSS (either inline, or with an external document).

The <div> tag, like the <p> (paragraph) tag, is a block-level element. This means that the browser will give it a "carriage-return" -- a bit of space above and below the enclosed content, with an enforced line-break. Designers will use the <div> tag to single out page sections, columns, mutiple paragraphs or clusters of HTML elements (like images+text+headers). Consider the white text-box you are reading right now. My site is a neutral blue-gray, but I've nested all my text within <div> tags with the following CSS:

div.right {
width:700px;
padding:20px;
padding-left:35px;
padding-right:55px;
border:1px solid #003333;
background-color:#ffffff;
}

So basically, no matter what I have going on in these white-box areas (paragraphs of text, headers, images, links), the <div> enclosure will ensure a white background, a width of 700 pixels, a thin border, 35px of padding between the left-border and the content, etc.

You'll notice that I wrote my div selector as div.right. The .right is a particular class of <div>, because I'm using the <div> tag multiple times on the page (each page here also uses a div.left for the left column, and a div.nav to create the blue navigation boxes -- I don't want them all to get confused). A class name is something I picked arbitrarily. It wouldn't affect an ordinary <div> tag in my HTML pages. To put it to work, I'd have to type the following:

<div class="right">

Consider this line of HTML:

<div class="greyboxwithorangeborder">The sea cucumber is an echinoderm of the class Holothuroidea, with an elongated body and leathery skin, which is found on the sea floor worldwide.</div>

I have the following line of CSS in my stylesheet:

div.greyboxwithorangeborder {
width:50%;
margin:10px;
padding:15px;
border:1px solid #ff9900;
background-color:#cccccc;
}

so I get this:

The sea cucumber is an echinoderm of the class Holothuroidea, with an elongated body and leathery skin, which is found on the sea floor worldwide.

I'm using CSS box-properties in this example,. I'll discuss them further on the next page

So how would I make a small change to a piece of content, like making a single word a different color? If I use the <div> tags, a carriage-return will be enforced and it will disrupt the sentence structure. Instead, I can use the <span> tag, which is completely useless in HTML and on its own cannot interfere with page presentation. For example:

<div class="greyboxwithorangeborder">The sea cucumber is an echinoderm of the class Holothuroidea, with <span style="color:white; background-color:black;">an elongated body and leathery skin</span>, which is found on the sea floor worldwide.</div>

The sea cucumber is an echinoderm of the class Holothuroidea, with an elongated body and leathery skin, which is found on the sea floor worldwide.

I could have changed the text-color with the old HTML <font> tag, but I couldn't have given it a background color. I personally use span tags all the time to make small adjustments to lines of text, particularly on marketing materials where the little typographical details need to work harder to direct attention.

Next: CSS box properties Top