styling markup

giving our blog example some style

In a previous section we took a plain document containing all the text, links and images we wanted for a simple blog and marked it up using descriptive elements and avoiding any style information wherever possible. In this section we're going to take the basic CSS syntax we just learned and apply it to a real document.

We're doing it this way because I think it best to dive into a real example as soon as possible. The side effect of this method is that we have to take several tangents when we introduce a new concept. That being said, let's plow forward.

While we're going through this, it might be useful to view the source code of the document so you can see the elements we are discussing.

blog: including the stylesheet

We need to make a single modification to our marked up file in order to point to the stylesheet we are going to write. This can be done by adding a line like this one within the <header> element.

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

We are going to build the stylesheet for this page incrementally. Because of that you'll notice the link to the stylesheet changing on each incremental build that we do. I'm only doing this for the sake of this tutorial - it allows me to show the incremental progress we make. At the end, our finished product will just be a completed stylesheet called "blog_final.css".

color selection

A common first step of a website is to decide on a color palette. I usually just open up Photoshop or the Gimp and play around with the color selector until I find the colors I like. You can express colors in either hexadecimal notation or by using RGB values. I prefer RGB values because it is easier to look at the notation and get a good idea of what the color is. Here are the major colors I've chosen for our site:

• green - rgb(133,195,41)
• orange - rgb(251,150,34)
• blue - rgb(116,168,245)
• yellow - rgb(255,214,0)
• grey - rgb(193,193,193)
• darker grey - rgb(150,150,150)

I've chosen fairly bright, eye-catching colors because a blog is supposed to grab your attention, especially since there are thousands of them out there now. The main content areas of the page will still be white, so it shouldn't be too overwhelming.

blog: page banner

We'll start by combining the 'header_container' and 'nav_container' elements (I'm referencing their ids here) into a single visual banner that stretches horizontally across the page. We'll do these separately.

header container - blog version 8

The first code on deck for styling is the 'header_container' element, which holds the page's name and title information as well as the search field. The markup looks like this:

<div id='header_container'> <div id='search_container'> search <input id='search_box' type='text'> </div> <div id='title_parts'> <span id='title'>ubiquiblog</span> <span id='subtitle'>everybody's got one</span> </div> </div>

We'll start by changing the color and spacing of the text on the header_container. We'll also modify the 'header_container' div by giving it a background color, removing its margins and padding, and setting its width.

body { margin: 0; padding: 0; font: small verdana, sans-serif; line-height: 1.5em; } #header_container { color: rgb(255,255,255); letter-spacing: 2px; background-color: rgb(116,168,245); } #subtitle { font-size: 90%; } #title { font-weight: bold; font-size: 130%; }

Don't be overwhelmed by this, we've just added 4 CSS rules. One of the first things you usually want to do is style the body element. Any declarations there will apply to the entire document, so this is a common place to put things like font declarations. Here we say that we don't want the browser window itself to have any margin or padding, then we set the font to be 'small', and give a list of preferred fonts (verdana, then sans-serif). We also defined the line height for the lines of text in the document, increasing the defaults to make the text easier to read. We'll cover the styling of text just after this section.

Next we took on the 'header_container', setting the color of the text to white using the 'color' parameter. We then defined how much spacing we wanted there to be between each letter of text (2 pixels) using the 'letter-spacing' parameter.

The 'subtitle' span needed to be a little smaller to make it not as prominent as the 'title', so we made it smaller by descreasing the text size to 90%..

Finally, we made our title bold and increased the font size by 30%. We'll add a bit more to this later, but first we'll talk a little more about styling the text.

best practices when styling text

It is sometimes amazing to see how little attention web developers give when styling text on their website, especially since it's usually the part they want their users to pay attention to most. Hours are devoted to doing graphics and perfecting layout, but little more is done to the text than choosing a font. Worse yet, some sites use poor styling rules for force a certain text size, disabling a user's ability to set their own size. While this gives the designer greater control over the way the site looks, it might cut many users with poor vision off who normally set a larger than default text size.

font family

Specifying a font for your pages is an easy way to control its appearance. While there are thousands of fonts to choose from, it's best to use a common one because not all fonts are universally available. This font guide gives a good list of the most commonly available ones with both examples of their appearance and short discussions of each. My personal favorite is Verdana, which is used on these pages.

font size

The font-size CSS property is used to define the size of the font, but several different units of measurement can be used. I'll explain some of the most common ones and make an argument for what I believe to be the best practice when sizing text.

The most common unit of text sizing is the px (or pixel), probably because it allows the most precise control over the type size. All major browsers include features that allow users to change the default text size of a page, a vital feature for users with poor vision. Because Internet Explorer doesn't allow the user to resize text defined in px units, it's better to use another method.

I suggest an approach taken from Cerderholm's excellent book Bulletproof Web Design, in which you use a keyword to define the base text size of the overall document and then make adjustments to specific portions using relative units. Another benefit of this method is that you can scale your site simply by changing the base keyword.

You might be wondering how the browser will size such generic terms as 'small' or 'medium'. Of course they don't do it identically but the term 'small' is usually equivalent to 12px. Owen Briggs has compiled this wonderful collection of screenshots showing how different browsers render fonts with different settings.

As you can see, we've used Cerderholm's approach by defining the base text size for the document in the body tag with this declaration:

font: small verdana, sans-serif;

Then, when we wanted to enlarge the slogan at the top of the page, we used a relative percentage:

font-size: 130%;

Here we used a percentage as our relative unit for sizing, but a few other units are commonly employed. Among these, the most popular are em, which sets the size relative to the parent element, and ex, which defines it relative to the height of the letter 'x' of the base font. For both of these, you pass a value such as 1.3 or 0.8. For example, '1.5em' would set the text size to be one and a half times that of the parent element.

line height and padding within blocks

I'd like to throw in another quick note on styling text in your documents before we go back to our blog. The line-height property can be used to define the spacing between each line in a block. This greatly increases the readability of text on a site and, in my opinion, should usually be used. Also, if you put any text within blocks you should be sure to add padding to the enclosing block. Consider the following CSS rule:

p { border: 1px dotted rgb(150,150,150); }

This defines a normal paragraph except that I've added a dotted border. This renders in the browser like:

Marketing teams input produce cross purposing in view of goal alignments due to knowlege paucity, necessitating workflow education and orientation. Media sourcing as an acquistion strategy is counterproductive in a internet environment in virtual component methodology. Imaging through ideals rather than real world branding, is a perilous undertaking with negative results. Branding strategies generating motion as activity without reproducible results is an ultimately futile effort if left in place.

That is how the browser renders the paragraph if we don't add any other style definitions. The text slams right against the borders and there is little spacing between each line of the paragraph. We can make this more readable by adding padding to the paragraph and increasing the line height with the following rule:

p { border: 1px dotted rgb(150,150,150); padding: 5px; line-height: 1.5em; }

Which the browser renders as:

Marketing teams input produce cross purposing in view of goal alignments due to knowlege paucity, necessitating workflow education and orientation. Media sourcing as an acquisition strategy is counterproductive in a internet environment in virtual component methodology. Imaging through ideals rather than real world branding, is a perilous undertaking with negative results. Branding strategies generating motion as activity without reproducible results is a ultimately futile effort if left in place.

See how much more readable that is? With just a couple CSS declarations we've made our paragraphs much more readable, allowing the user to get through more of our site before their eyes start to cross. Check out UsableType for more information on typography on the web with CSS.

blog: navigation - creating tabs from an unordered list

Going back to the styling of our blog, what will become our navigation menu is currently just an unordered list of links. We're going to style these as a set of tabs that align horizontally and on the right-side of the page. To accomplish this we'll introduce one of the most useful (and difficult) concepts of styling with CSS - the float property. It allows you to shift content to the left or right of the page and is used to control page layout.

The section of HTML that corresponds to our navigation menu looks like this:

<div id='nav_container'> <ul id='navigation'> <li id='nav_home'><a href='#'>home</a></li> <li id='nav_articles'><a href='articles.html'>articles</a></li> <li id='nav_photos'><a href='gallery.html'>photos</a></li> <li id='nav_me'><a href='me.html'>me</a></li> <li id='nav_links'><a href='links.html'>links</a></li> </ul> </div>

We have a simple container div with id 'nav_container' which holds our 'navigation' unordered list. Each element of our unordered list has an appropriate identifier, which we won't use quite yet. We'll add the style to this in a couple of steps. Here are our initial CSS rules:

#nav_container { margin: 0; padding: 0; width: 100%; background-color: rgb(116,168,245); } #navigation { margin: 0; list-style: none; } #navigation li { padding: 0; border: 1px solid rgb(193,193,193); background-color: rgb(255,255,255); } #navigation li a { text-decoration: none; font-weight: bold; color: rgb(100,100,100); }

navigation container - blog version 9

We apply 4 CSS rules here. First, we remove margins and padding on the 'nav_container', set its width, then apply the same background color as the header (since we want our navigation menu to appear as part of the header.) Next, since we're transforming our unordered list into tabs, we removed the list's default styling by setting the list-style property to 'none'. We also removed any margin on the list. The individual elements of our list are going to be the tabs, so we gave these a white background and a gray-ish border (note our first use of a descendant selector here.) Finally, because the contents of each tab will be a clickable link, we add simple styling to the <a> elements within each <li>.

Our 'tabs' are still stacked on top of one another. We'll add a few declarations to our existing rules to get them arranged horizontally:

#navigation { margin: 0; list-style: none; float: right; } #navigation li { float: left; padding: 0; margin: 0 10px 0 0; border: 1px solid rgb(193,193,193); background-color: rgb(255,255,255); }

navigation container - blog version 10

We'll talk about floats in detail in just a minute - for now you can see we've added a 'float' property to both our 'navigation' unordered list, which aligns it to the right of the page. We also floated each of the list elements to the left, which forces them to line up horizontally. We also added some margin to each of the <li> elements so they are spaced apart from one another. They are beginning to look more like tabs, but you may have noticed that we lost the background color we had previously. We'll explain why this is true in our float introduction below, but for now we can fix it with the following:

#nav_container { clear: both; margin: 0; padding: 0; float: right; width: 100%; background-color: rgb(116,168,245); }

navigation container - blog version 11

The clear property is often used in conjuction with float to control page layout. Before we talk about how they are related and why this restored our background color, we'll add one more series of declarations to clean up our tabs:

#navigation { margin: 0; padding: 10px 0 0 10px; list-style: none; float: right; } #navigation li { float: left; padding: 0; margin: 0 10px 0 0; border: 1px solid rgb(193,193,193); border-bottom: none; background-color: rgb(255,255,255); } #navigation li a { text-decoration: none; font-weight: bold; color: rgb(100,100,100); padding: 7px; }

navigation container - blog version 12

These three new declarations just finished off the look of our tabs. We first added some padding to the top and left of our group of links, then we removed the bottom border of each of the tabs to give an appearance of blending into the body of the page. Finally, we added some padding to the links inside each tab to prevent the label from appearing cramped. Before we tackle the body of the page let's give a brief introduction to the float and clear properties, which we'll use again to achieve a three-column layout in the main portion of our blog.

float introduction

The float and clear properties are two that give the user control of the layout of the page. Visualizing how they work and having a good understanding of their use is essential for designing with CSS. You've probably already realized that when you create block-level elements in your HTML they stack on top of another vertically when rendered by the browser. This is intuitive, as you wouldn't expect the browser to just randomly throw them up on the screen in any order. This rendering of elements on top of one another is called the normal flow of the document.

The valid values for the float property are 'left', 'right' and 'none'. If you take an image, for example, and float it to the left the browser will position it vertically according to the normal flow of the document. It then pulls it out of the normal flow and slides it as far left as allowed either by the browser window or some containing block-level element. All the elements below it then shift upwards to replace its previous position in the normal flow. Consider the following code:

<div> <img id='haha_guy' src='../images/haha.jpg' alt='Ha ha quaker guy'> <h3>floating image example</h3> <p> HA! HA! (also known as the HA! HA! guy or The HA! HA! Quaker) refers to an Internet phenomenon featuring a picture of a laughing colonial man with a customized subtitle of what he is saying. It first gained prominence on the SomethingAwful.com forums and later came to briefly dominate the forums of Fark.com. </p> <p> After making the rounds on Something Awful, this image was adapted to appear on Hetemeel.com a few months later as a template, with the option of editing the text in the picture in order to create a customized "HA! HA!" image. The relative ease by which new iterations of the HA! HA! guy could be generated prompted an incredibly rapid spread and penetration of the meme, especially on the website Fark.com. Commenters on Fark began to use the image in order to make their own remarks in random threads on the website usually to comment in some way on the topic of the thread in which the image appeared. </p> </div>

Unstyled, this would render like this:

Notice that each element rendered according to the normal flow of the document - first an image, then a header, followed by two paragraphs. It is common in print and on the web to place an image among a group of paragraphs that wrap smoothly around it. We can achieve this by floating our image to the right using this CSS rule:

img#haha_guy { float: right; margin: 10px 10px 0 10px; }

This now renders like:

Applying the float to our image removed it from the normal flow and aligned it to the far-right of the containing <div>. The <h3> and two <p> elements then shifted up to fill in the space left when the image was removed. The text within the paragraphs then naturally flows around the image.

We created the tabs in the navigation menu of our blog by floating elements of a list. When you apply the same float to multiple sequential elements they will stack horizontally on that side of the page if there is room for them to do so, else they will wrap to the next line. We'll illustrate this in a step-wise fashion and introduce the concept of clearing floats. Consider the following HTML:

<div> <ul id='float_list_example'> <li id='elem1'>element1</li> <li id='elem2'>element2</li> <li id='elem3'>element3</li> </ul> <p> This paragraph exists after the unordered list. </p> </div>

I've added borders around the container div and unordered list, as well as a background color, to make it easier to talk about, but it renders like this:

Now, if we float the first element left:

When the first element was floated left the second element tried to move up into its position but, since the text was in the way, it couldn't take its exact position. Instead it moved up and then to the right until there was room for it. Now, we'll float the second element left:

Now elements 1 and 2 are floated left, and they stack horizontally. Element 3 also moves up into the row because that is the first available place for it. Notice that each time we've floated an element the height of our unordered list has shrunk (as judged by the height of the blue background.) Let's now float element 3.

Ah! We can see from the background color that we've lost our unordered list almost completely. This is because we've floated all the elements out of our list, which is now empty. If it is empty it has no height, so the list is still there it just has a height of 0 and isn't visible. When we floated the last element the paragraph below the list also tried to move up into its position but was blocked by the text. It moved up as far as possible and then shifted to the right.

What if you wanted to contain your floated <li> elements inside your unordered list and make sure the list remained tall enough to hold them and display the background color? The solution is to float the <ul> to the left too, which will remove it from the normal flow and force it to contain its children (the <li> elements). So, adding "float: left;" to the <ul> gives us:

Our list elements are now contained properly and we have a horizontal menu (or, at least, the beginnings of one). Now, of course, our paragraph tried to move up and take the place of the floated unordered list, but since that space was occupied to shifted to the right of it. How can we make our paragraph aware that there is a float around and that it should render underneath it? This is what the clear property is for.

The 'clear' property has four possible values: 'left', 'right', 'both', and 'none'. When used it will force the element to respect any floating elements it might encounter and render below them, with respect to the side passed. In this case, we can apply a "clear: left;" to our paragraph to force it to render under the unordered list:

I encourage you to play around with the float and clear properties on different element types until you've got the hang of how they work. A mastery of these will help make layout with CSS much easier. We'll continue to expand our knowledge of these properties by using them more as we finish our blog example, but if you want more information first check out this float tutorial.

Now that we've handled our page's banner and introduced text formatting and floats, we're ready to move onto styling the rest of our blog.