Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

The Beginner’s Guide to Web Design: Part 2

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

In part two of this series we're going to create a CSS (Cascading Style Sheet) file to edit the appearance of our HTML webpage. Web designers keep the content of a webpage (the HTML) separate from the styling (CSS) to keep the source code easily readable, and to make redesigns of a website much simpler than than if the styling were mixed in with the content.


Also available in this series:

  1. The Beginner’s Guide to Web Design: Part 1
  2. The Beginner’s Guide to Web Design: Part 2
  3. The Beginner’s Guide to Web Design: Part 3


The above image is how our webpage looks right now. Today, we're going to take this unstyled page, and using CSS turn it into this:



Step 1: Getting Started

Using your preferred text editor, create a new blank file in the same directory as your HTML page and name it "style.css" - this is the file we'll store all our styling inside.

But first, we need to link to our CSS file in our webpage.

Inside the HTML file, add the following line into the <head> section, just below <title>:

 
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />

Enter the following into style.css:

 
	body { 
	  background-color: #eeeeee; 
	}

What we're doing here is setting a style for the <body> tag on our HTML page. By styling the body, we're styling the whole page. Inside the { } curly brackets we enter the styles to apply to the targeted tag.


background-color is the CSS property for the background colour of the targeted tag. After typing the property, we have a colon (:) followed by the value for this property. At the end of every CSS property, you must enter a semi-colon (;).

#eeeeee is a hexadecimal number representing the following shade of grey:           . This may be familiar to you if you have any experience with any graphics package like Photoshop.

You can also set colours by their HTML colour name (not recommended as you have little control over colour shades):

 
	background-color: red;

Or as a RGB decimal number:

 
	background-color: rgb(255, 255, 255);

Take a look at your webpage. The background should now be a different colour:



Styling the body

As well as the change of background colour, let's add a few more styles to the <body> tag:

  1. Text Colour: The default colour which browsers give text is black (#00000). Let's change this to a near-black colour instead which will look a little less harsh on against the background, such as #111111.
  2. Font: Most browsers set the default font to "Times New Roman", we want a similar serif font, but something a little 'classier'. We'll set the font to "Georgia".
  3. Font size: The font is a tad large right now, we'll reduce it to 90% of it's default size.

Add the following properties inside the body { } style selector along with the background-color:

 
	color: #111111; 
	font-family: "Georgia", "Times New Roman", serif; 
	font-size: 90%;

On the first line, we use the "color" property to set the colour of the text on our page to #111111.

Following that, we use "font-family" to change the font. As all computers may not have the same fonts installed, it's important to set other fonts for the browser to fall-back to if it can't find the first font.

In our case, we're setting the default font to "Georgia". In the unlikely event that the person visiting our site doesn't have Georgia installed, the browser will try the "Times New Roman" font. If that font isn't installed either, the system's preferred serif font will be used instead.


Finally, we use "font-size" to set the size of the text on our page to 90% of its default setting. To confirm, your CSS file should now read:

 
	body { 
	  background-color: #eeeeee; 
	  color: #111111; 
	  font-family: "Georgia", "Times New Roman", serif; 
	  font-size: 90%; 
	}

Take a look at the page in a browser:



The Box Model – Margins, Padding & Borders

Some of the most important CSS properties for styling pages are "margin", "padding" and "border". Take a look at the diagram below:


Every HTML element is essentially a box, with the content in the middle. Surrounding the content is padding which adds empty space and is affected by the background colour of the element.

The border sits on the edge of the padding, and surrounding the border is the margin which adds transparent empty space around the object.

The image below shows an image aligned to the left of two paragraphs of text. This image has no padding, borders or margin and so it is sitting as close to the text as possible.


If we were to give the image the following properties:

 
	padding: 3px; 
	border: 3px solid #dddddd; 
	margin-top: 5px; 
	margin-right: 10px; 
	margin-bottom: 5px;

It will look like this:


You can clearly see that the 3px grey border is taking effect. The white space between the image and the border is the padding, and the different margins have added transparent space around the outside of the border to separate it slightly from the text.

As padding takes on the background colour of an element, if we were to add the following property:

 
	background-color: yellow;

We'll get:



Step 2: Container

Right now, our webpage fills the whole width of the browser which seriously impacts the readability of the page in large browsers. To combat this, we'll wrap the entire content of our webpage with a 'container', then use CSS to restrict the width of this container.

Open your HTML file in a text editor, and directly after the opening <body> tag, enter:

 
	<div id="container">

And directly before the closing </body> tag, close the container:

 
	</div>

The <div> tag marks-up a 'division' and is largely used as a building block to help lay out parts of a page.

All HTML tags can have an ID and Class attribute to help with styling. Note that you can only use an ID once in the same page and so it's useful for elements which can only exist once - like a container.

Class attributes can be used any number of times on the same page and are useful for common styling between elements (like aligning an image). We'll look more into the class attribute later.

In your CSS file, add the following:

 
	#container { 
	  width: 900px; 
	}

The # in #container is the CSS selector for "a HTML element with an ID of...". We could also write this selector as div#container.

We've set the container to have a width of 900 pixels. This is a good width for a website but keep in mind the highest recommended width to use is 960px to ensure the page displays without a horizontal scrollbar on the vast majority of screen resolutions.

To center the container in the browser window, add the following style to #container:

 
	margin: 0 auto;

This sets the top and bottom margins to 0 (ie. no margin) and the left and right margins to be calculated automatically - which means the browser will center the container within the browser window.



CSS Shorthand

In the margin style for the container we used CSS short-hand. We could have wrote the style as:

 
	margin-top: 0; 
	margin-right: auto; 
	margin-bottom: 0; 
	margin-left: auto;

However by setting "margin" and giving it two values ('0' and 'auto'), the first value is used for the top and bottom margins and the second value for left and right.

Using One Value

The style below will add a 5px margin to every side of the element:

 
	/* Short-hand: */ 
	margin: 5px; 
 
	/* Long-hand: */ 
	margin-top: 5px; 
	margin-right: 5px; 
	margin-bottom: 5px; 
	margin-left: 5px;

Two Values

This will give it 10px margin on the top and bottom, and 20px on the left and right:

 
	/* Short-hand: */ 
	margin: 10px 20px; 
 
	/* Long-hand: */ 
	margin-top: 10px; 
	margin-right: 20px; 
	margin-bottom: 10px; 
	margin-left: 20px;

Three Values

If we set three values, the first value is used for the top margin, the second is used for left and right and the third is used for the bottom margin.

 
	/* Short-hand: */ 
	margin: 10px 15px 5px; 
 
	/* Long-hand: */ 
	margin-top: 10px; 
	margin-right: 15px; 
	margin-bottom: 5px; 
	margin-left: 15px;

Four Values

By setting four values, the first is the top margin, second is right, third is bottom and fourth is left. Think of this order as going clockwise round the element - Top, Right, Bottom, Left.

 
	/* Short-hand: */ 
	margin: 5px 3px 9px 12px; 
 
	/* Long-hand: */ 
	margin-top: 5px; 
	margin-right: 3px; 
	margin-bottom: 9px; 
	margin-left: 12px;

You can use this shorthand style with both margins and padding. To read about other CSS shorthand techniques, check out this article at WebCredible.


Step 3: Header

As we work our way down the page, the next section is the header. Here, we want to center the heading on the page and apply a subtle text shadow to it.

Add the following style to your stylesheet:

 
	header h1 { 
	  text-align: center; 
	  text-shadow: 1px 1px 1px #999999; 
	}

The "header h1" selector means "find every h1 inside a header".

"text-align" does exactly as you'd expect it to: it sets the horizontal alignment of the element. In this case, we're setting it to center. You can also set it to "right" or "left" (default).

"text-shadow" is a new property in CSS 3 and requires four values:

  1. Number of pixels to the right to display the shadow (use a negative number to set it left)
  2. Number of pixels below to display the shadow (use a negative number to set it above)
  3. Number of pixels to blur the shadow by
  4. Colour of the shadow

In our case, we're setting the shadow to be 1px below and to the right of the text, have a very subtle 1px blur and in a mid-grey colour (#999999).



Navigation

Now on to the navigation which will take slightly more code to style:


Start with the following style:

 
	nav ul { 
	  list-style: none; 
	  padding: 0; 
	  text-align: center; 
	}

Here, we're targetting the ul (un-ordered list) inside the nav. "list-style" styles the bullet points of each list item. In this case we're removing the bullet points by setting the property to "none".

"padding: 0;" removes the default padding web browsers normally give a UL (normally a left padding). Finally, we center the text with "text-align".


So our navigation is now centered on the page, but they're displaying below each other. This is because each list item has a default styling which makes them 'block' elements - meaning they won't display side-by-side. To correct this, we'll make them display 'inline':

 
	nav ul li { 
	  display: inline; 
	  font-variant: small-caps; 
	  letter-spacing: 2px; 
	}

So now each of our list items (li) inside an unordered list (ul) inside the nav will display inline, allowing other elements to sit next to them.

We've also set the "font-variant" property to set the text to "small-caps" (all lower-case characters will display as smaller upper-case characters).

Finally, we set the "letter-spacing" to 2px. This adds an extra 2 pixel gap between each character. You could use a negative value here to force characters closer together.

You can really see the power that CSS offers us; it can do pretty much whatever Photoshop can.


Now, let's add some lines between each navigation item to separate them out a bit. Add the following inside the "nav ul li" style:

 
	border-right: 1px solid #999999;

We've added a border on the right of each list item, with a 1px thickness, as a "solid" line and with a mid-grey colour (#999999). Other line styles than "solid" include "dashed", "dotted", "double" and several more.


The border is there, but we really need some spacing between it. Let's add a margin and padding to fix it:

 
	margin-right: 10px; 
	padding-right: 10px

Remember from the 'Box Model' that the padding is on the inside of the border, and the margin on the outside. From that, we know the above code adds a 20px gap between each list item, with a 1px border in the middle.


Still two problems, though: the border on the last list item is un-necessary and the links themselves are a horrible colour.

To remove the border from the last list item, use the following style:

 
	nav ul li:last-child { 
	  border: none; 
	  margin: 0; 
	  padding: 0; 
	}

The ":last-child" selector targets the last li inside of the ul in nav (basically, our last navigation item). We've removed all borders, margins and padding from this item (we've removed the margins and padding to be sure they don't throw the list slightly off-center).


To change the link colours, we'll target all links ("a" tags) inside the nav:

 
	nav a { 
	  color: #111; 
	  text-decoration: none; 
	}

The first line is clear, we've set the colour of the links to #111 - the same colour as the rest of the text on the website. On the second line, we've removed the underline that usually appears below links by setting the "text-decoration" to "none".

This works great, but when we hover over a link, nothing happens to the link to confirm we're hovering over it. To correct this, add the following style:

 
	nav a:hover { 
	  text-decoration: underline; 
	}

The ":hover" selector means "when this element is hovered over with the mouse". So when this happens, we'll add an underline back to the link by altering the "text-decoration" property we previously removed it from.


In the image above I'm hovering over the "Nettuts" link for the underline to appear.


Section & Aside

Right now, our sidebar (<aside>) isn't actually a sidebar - it's just sitting below the main content (<section>). To correct this, we need to give both <section> and <aside> a width, and then tell them to stick to either side of the container.

As you'll remember, our #container has a width of 900px for us to work with. We know that our main content should be wider than the sidebar, so a 2:1 ratio between <section> and <aside> will work good - so we'll set "section" to 600px and "aside" to 300px.

There's one slight problem with that logic, though: there's no gap between the main content and the sidebar. To correct this, we'll only set the sidebar to 280px - leaving a 20px gap between them:

 
	section { 
	  float: left; 
	  width: 600px; 
	} 
 
	aside { 
	  float: right; 
	  width: 280px; 
	}

In the code above we're setting the widths of both objects, but we've also told <section> to "float" left, and <aside> to "float" right.

By setting the "float" property, we're literally aligning each object to either side of their container, allowing the sidebar to sit up alongside the main content.



Footer

Right now our footer is sitting directly below the sidebar as it's trying to fit into any empty space. To correct this, we need to tell the footer to not allow any objects floated on either side of it:

 
	footer { 
	  clear: both; 
	  display: block; 
	}

"clear: both" ensures nothing is "floated" either side of the footer. You can also set "clear" to "left" or "right" to ensure nothing is floated on one specific side.

"display: block" ensures the footer is not displayed inline (Firefox needs this).


Finally, let's fix up the styling for the text inside the footer. Add the following to the existing footer styling:

 
	font-size: 90%; 
	font-style: italic; 
	font-variant: small-caps; 
	padding-top: 10px;

And the following new style to style links in the footer:

 
	footer a { 
	  color: #111111; 
	}


Summary

In the final part of the series we'll be further enhancing your HTML and CSS skills by adding an extra page to the our website, working with some different HTML elements and expanding our CSS knowledge by styling them.

Advertisement