Know Enough to be Dangerous: Tools for taking control of HTML and CSS

A presentation for HigherEd BlogCon 2006 in the Websites & Web Development track by Steve Lawson, Humanities Librarian, Colorado College

Introduction

Blogs have been hyped as "push-button publishing"; indeed, it is fairly simple for an educator, librarian, administrator or the like to set up his or her own blog with almost no knowledge of HTML, CSS, or JavaScript. But for those who do so, this lack of knowledge can quickly become limiting and frustrating when they want to customize their blog.

This session is designed to help you learn enough about CSS (Cascading Style Sheets) to feel comfortable making changes to your blogs and other web pages. It will work like a case study; we'll start with a blog right "out of the box," and use free tools like the Firefox Web Developer extension to customize and personalize the blog. In the process, you will gain confidence in making small changes to existing templates, preparing you for more extensive, adventurous changes in the future.

Additionally, this presentation has many links and pointers to further reading for those who either need more background on the fundamentals of HTML and CSS or who want to explore the ideas and techniques introduced in the session in greater depth.

Most of this presentation is text, but screencasts illustrate the projects.

What will (and will not) be covered in this session

The goal of this session is to help you take a blog with default templates and fine-tune it so that it more accurately reflects your sense of style and the purpose of your blog. Once you feel comfortable with the tools and techniques demonstrated here, you can use them for any kind of web page, not just a blog. The advantage to starting with a blog is that there is an existing structure and cascading style sheet, so you can tweak someone else's code, rather than starting with a blank screen.

To that end, we will cover:

We will not cover:

Tools

I was planning to demo this with a free blog hosted at WordPress.com but they limit you to their pre-selected templates which you can't edit. Same with edublogs.org. There is nothing wrong with that in general, but for our purposes, we need to be able to monkey with the code.

So we'll use a Blogger blog four our example instead. I have created a blog at http://knowenoughtobedangerous.blogspot.com/ that will appear in the screencasts; you can make changes to that blog with the Web Developer extension yourself (though you can't save the changes and have them affect that blog).

But the basic principles should be the same whether you are using Blogger, WordPress (the full, locally-hosted version that gives you complete control), Movable Type (which is what I use for my blog, See Also), or any other blog software that allows customization of templates.

Find out more about tools

Basic CSS and HTML terminology

Objective: Learn (or review) some basic CSS terminology to make sure you can follow the examples to come.

While this presentation won't teach you CSS in any comprehensive way, there are a few concepts that we need to review or make explicit so that everyone can follow the projects below. In this section, we will talk about the structure of CSS and how it affects the HTML document. If you are already comfortable with selectors and rules, ids and classes, <div>s and <span>s, you can safely skip to the next section.

Finding your style sheet

First, you will need to find the style sheet for your blog. This should be in the "templates" section of your blogging software. In Blogger, the style sheet is right in the <head> of the HTML document between two <style> tags; this is known as an "embedded" style sheet. For Movable Type, there is a separate template for the style sheet with the template name "Stylesheet" and an output file named "styles-site.css". Again, before you edit this style sheet, I strongly suggest that you back it up, either by saving a copy of the file, or by copying and pasting the contents of the file into a new document that you can save on your local hard drive.

Looking at a CSS rule

A style sheet, whether it is embedded or external, consists of a series of rules. Here is an example of a rule from the default style sheet for our example blog:

h2 {
    margin:1.5em 0 .75em;
    font:bold 78%/1.4em "Trebuchet MS",Trebuchet,
        Arial,Verdana,Sans-serif;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:#777;
    }

(Don't worry about what that all means right now; by the time you are done here, you will have a good idea.)

Note that white space doesn't matter. We could write it like this, and it would be the same rule:

h2 { margin:1.5em 0 .75em; font:bold 78%/1.4em 
"Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase; letter-spacing:.2em; 
color:#777; }

In the example, the h2 is the selector. So this rule will apply to all parts of the HTML document that are marked up as h2, i.e., all second-level headers. More on selectors in a moment.

Following the selector is an open curly brace: {.

After the open curly brace come a series of declarations. Each declaration consists of a property, a colon, and a value, and ends with a semicolon. In the example statement, color:#777; is a declaration. So this example rule gives all h2 headers a certain margin, font and text properties, and color.

A rule can contain any number of declarations. After the last declaration, the rule is closed with a closed curly brace, }.

More on selectors

IDs and classes

As we saw in the example above, a selector can be an HTML element such as a header like h2, a paragraph p, or a link anchor a. In the CSS rule, it doesn't come with the angle brackets, so it is h2 rather than <h2>.

A selector can also be an ID or a class. In the HTML document, an ID can only be used once, so IDs are typically used to denote major sections of the page, such as the header, the navigation, the footer, etc. In the style sheet, IDs are marked with a # sign before them, as in this example:

#sidebar {
    width:220px;
    float:right;
    }

To apply the style from an ID in the HTML document, we use the id attribute:

<div id="sidebar">

(More on what a div is in a moment.)

Unlike an ID, classes can be used over and over again, so they can be used to apply different styles in different situations. For example, on my blog, I sometimes go back and update a post. I want the paragraph containing the update to stand out from the normal paragraphs on my blog entry, so I have defined a class edited to give those paragraphs a different look. In the CSS it looks like this:

.edited {
    font-family: Georgia, serif;
    font-style:italic;
    line-height:1.5em;
    color: #333;
    }

and to invoke that style in my HTML document, I mark up the paragraph like this:

<p class="edited">Note: Slanderous portions of this post have been deleted on advice of my lawyer.</p>

and the result looks like this:

Note: Slanderous portions of this post have been deleted on the advice of my lawyer.

Often, blog style sheets have a large number of classes, with different classes applied to a post's headline, body, date, comments, etc.

Grouping and descendants

Selectors can be grouped. If you want all h1, h2, and h3 headers to be red, you could use several rules:

h1 { color:#f00;}
h2 { color:#f00;}
h3 { color:#f00;}

But you can also group them with a comma. This means the same as the example above:

h1, h2, h3 { color:#f00;}

You can also be more specific by choosing descendant selectors. Say that I want all paragraphs in my blog to use the font Arial, or, failing that, to choose the browser's defined sans-serif font. I use a CSS rule like this:

p {font-family: Arial, sans-serif;}

But in my sidebar, I want all paragraphs to use the font Georgia (or another serif font if Georgia isn't available) and be light gray rather than the default color. I define the sidebar with the ID sidebar and use a CSS rule like this:

#sidebar p {
    font-family: Georgia, serif;
    color:#777;
    }

By using the selector #sidebar p, I am saying "for those paragraphs that are descendants of the sidebar ID (i.e., that are inside the sidebar), use this style."

In the HTML it will look like this:

<p>This paragraph is not part of the sidebar.</p>
<div id="sidebar">`
    <p>This paragraph is part of the sidebar.</p>
</div>

And the first paragraph will be in Arial, while the second paragraph will be in Georgia.

There are other more complicated kinds of selectors, but that should cover most of what you will find in a typical blog style sheet.

The <div> and <span> HTML elements

I have used the HTML tag <div> in the examples above, but haven't explained what it is. Here is what the W3C says it is:

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content.

What that means is a <div> is a tag that simply says "here is a block-level element" but it doesn't mean anything more than that. <span> is similar, but for inline elements. What is the difference between block and inline? Again, the W3C on block vs. inline:

Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements....By default, block-level elements are formatted differently than inline elements. Generally, block-level elements begin on new lines, inline elements do not.

So block-level elements are things like <p> or <blockquote> or <h1> while inline elements are things like <a> or <em> (for emphasis, preferred to <i> for italics), or <strong> (for stronger emphasis, preferred to <b> for bold).

Usually, a blog template will have its major sections laid out in divs. spans are usually used more sparingly.

Find out more about CSS and HTML

Learning the layout of the Web Developer extension

Objective: Get a quick overview of the Web Developer menus and see the features that we'll be using in action.

Developer Chris Pederick provides a brief overview of the features of the Web Developer extension. In this screencast, we will look a little more closely at the features we will actually be using in our sample projects.

Remember, the screencast only shows a fraction of the features of the extension; when you have time, try playing around with all the different menus, as I might be skipping just the feature that you have always wanted.

Screencast one: learning the layout of the Web Developer extension

View screencast one in a new window (4:33, Flash)

If you want to play along at home, you will want to have http://knowenoughtobedangerous.blogspot.com/ open and ready to go.

Find out more about the Web Developer extension

  • Chris Pederick's blog: the developer himself provides occasional updates about the extension on his blog.

Project: Color

Objective: Find a new color scheme and try it out in edit mode.

Before getting into the project screencast, a few words about color in CSS.

Specifying color

You can specify a color in CSS using several different methods. The most useful for our purposes are color keywords and hexadecimal values.

CSS 3 defines 147 named color keywords. At this time, CSS 3 is under development, but the support for these named colors is practically uniform across current browsers. So it is possible to specify the color "darkkhaki" or "mediumseagreen."

More commonly, colors are specified with a hexadecimal value preceded by a # sign. So the keyword "darkkhaki" corresponds to the hexadecimal #bdb76b and "mediumseagreen" is #3cb371. The first pair of digits specify how much red, the second pair how much green and the third pair how much blue. So #ff0000 looks like this. #ffffff is white and #000000 is black.

There is also a shorthand way of using hexadecimal values. If each of the pairs of hex digits are the same--like #ddcc99 or #aa1111, you can eliminate the duplication and use a three-digit code like #dc9 or #a11. Using this shorthand method reduces the number of colors you can use (there is no way to represent that "mediumseagreen" #3cb371 in shorthand; the closest you could get is #3b7, which isn't really the same), but it does result in shorter, easier to remember codes. We will use these three-digit codes in our project.

Several years ago, designers were concerned about "web-safe" colors, the 216 colors that would appear uniform across platforms and on monitors that could only display 256 colors. It seems that hardly anyone bothers about those anymore, as users are assumed to have more capable monitors by this time.

The color and background CSS properties

When you go to change the colors in your blog, you will want to look for the color, background, and border properties in the style sheet (or sometimes background-color and border-color; background and border are shorthand properties that allow you to set the color and other values for the background or border in a single declaration). color controls the text color, while the others control the background and border colors.

Screencast two: Trying out a new color scheme

View screencast two in a new window (5:21, Flash)

If you want to follow along and make changes on the sample blog I created, the URL is http://knowenoughtobedangerous.blogspot.com/. The main colors I use in the project are #a11 (red), #221 (off-black?), #eec (light sand), and #dc9 (dark sand).

Find out more about colors

Project: Fonts and typography

Objective: Re-vamp a blog's typography.

Before we look at the project screencast, let's go over a few things about fonts and text in CSS.

Font and text properties

There is a group of CSS properties that control the fonts, including font-family, font-size, and more. There is also a font property which is a shorthand property for setting all aspects of the font at once. For a quick introduction to all these properties, I recommend the W3Schools CSS Font page.

Similarly, there are a number of text-related properties, such as letter-spacing, text-transform, and more. There is no shorthand text property. Again, for a nice overview, see the W3Schools CSS Text Properties page.

Choosing a font

When choosing a font, remember that there are only a handful of fonts that almost all users have on their computers. Even fewer of those fonts were designed to be read on the screen.

The usual suspect are Arial, Trebuchet, and Verdana (for sans-serif) and Georgia and Times New Roman (for serif). You can, however, specify a comma-separated list of fonts, and if the user's browser doesn't have the first font specified, it will try the next one, and so on until it either finds a font it can use or falls back on the browser's default font.

For example, here is how I set the font on my blog, See Also:

body {font-family: "Lucida Grande", Arial, sans-serif;}

I want Macintosh users (like myself) to see the blog in the font Lucida Grande. Since that font name contains a space, I put it in quotes so the browser won't get confused. Since most Windows users don't have that font, I set the next font in the list to Arial. Lastly, if the browser can't find either of those fonts, I say "use your default sans-serif font."

Font-sizes

Sizing fonts is made difficult by browser quirks. It is possible to specify font sizes in many different ways: keywords (like "small," "medium," etc.), pixels, points, ems, and more. There are problems with all these methods, mostly due to inconsistencies across browsers.

There are some endearingly obsessive approaches to combating this problem documented at the blogs clagnut and the noodle incident (text sizing-up the garden path and sane css typography). Font size is an area where you may find non-standard CSS (aka "hacks") attempting to overcome cross-browser problems.

In this project, I take the coward's way out and don't touch the font size. If you choose to, remember to check as many different browsers as possible to make sure the results look acceptable in each. Don't worry if it doesn't look identical in each.

Screencast three: changing fonts and typography

View screencast three in a new window (6:11, Flash)

We will again be making changes to http://knowenoughtobedangerous.blogspot.com/.

(Note: in the introduction to the screencast I call it "screencast four." I'm sorry, I don't know what I was thinking.)

Project: CSS layout

Objective: Learn how to change CSS layout and convert a fixed-width layout to a percent-based layout.

Layout

Before good CSS support in browsers became the norm, people typically laid out their web pages using <table> elements to create a grid layout for the page.

There are a variety of reasons why table-based layout is not optimal. Luckily, just about any blog template you might come across will now use CSS for layout.

CSS layout can be a very complicated topic; true to form, we'll be skimming over many of the details. When designers title their articles on CSS layout In Search of the Holy Grail and In Search of the One True Layout, you know that ideal solutions are elusive.

I got my first simple, effective introduction to the topic from Dan Cedarholm's excellent book, Web Standards Solutions.

The "box model": padding, borders, margins

If you want to control how elements are laid out on the page, you need to come to terms with the box model. The box model describes how block-level elements are laid out on the page. Here it is, as drawn by the W3C:

diagram of the CSS box model

In short, the "content" is the text or image or the like; the "padding" is the transparent space surrounding the content; the "border" is an optional visible border; and the "margin" is the space between the border and other surrounding elements.

Like many things in CSS the padding, border, and margin can be set using different units (pixels, percentage, ems, etc.). By declaring, say margin: 1em, you are saying "put more-or-less the width of one capital letter in the current font-size between this element and all surrounding elements.

You can also use the CSS properties margin-top, margin-right, margin-bottom, and margin-left (or border-top, padding-top etc.)

You can set different values for the top, right, bottom, and left margin or padding with a space separated list: margin: 5px 5px 10px 400px; gives you a 5-pixel top and right margin, a 10-pixel bottom margin, and a nice big 400-pixel left margin. You can remember the order with the mnemonic TRouBLe for Top, Right, Bottom, Left. Or just remember that they are clockwise.

If you just specify two values, as in padding:5% 20% you are setting a 5% top and bottom padding and a 10% right and left padding.

Just to make this a little more confusing, when you specify a width in a CSS rule, you are setting the width of the content (see the box model illustration, above). The width of the padding, border, and margin are added on top of that. So if you want a 200 pixel-wide box and your corresponding rule looks like this:

div .200pixelWideBox {
    width:200px;
    border: 1px solid red;
    padding: 10px;
    margin: 20px;
    }

You are going to be disappointed, as the full width of the element will be 262 pixels:

(200px content) + 2(1px border) + 2(10px padding) + 2(20px margin)

Floats

There is more than one way to position an element on a page, but in this project, we will look at the float. You have three choices for float: left, right, or none.

When you float an element left or right, you are telling it to go as far to the left or right as possible inside its "parent" element. In our example blog, the columns that we are floating are inside a div with the ID content. When we float them, they don't float all the way to the edge of the screen, but to the left or right of the content div.

Confused? If the project screencast doesn't make it clear, try Floatutorial.

Screencast four: CSS layout

View screencast four in a new window (5:09, Flash)

Once more, http://knowenoughtobedangerous.blogspot.com/ is our sample blog.

Ideas for advanced projects

Now that you have a good handle on these techniques, your biggest problem will be deciding what to do next! Here are some ideas for advanced projects:

I hope this presentation has been useful for you. Please email me at slawson@coloradocollege.edu, or leave comments back at HigherEd BlogCon and let me know what works and what is still confusing. Thanks!

Get more inspiration