Chapter 2: CSS Stylesheets

previous chapter | next chapter

Today we continue the introduction on some basic web building techniques. Last week we used XHTML to build simple static web pages. Today we are going to add the graphics design using Cascade Style Sheets, aka CSS stylesheets.

You can find a CSS Tutorial at W3 Schools.

Download an essential CSS Cheat Sheet from www.addedbytes.com!

  1. Prerequisites

    You will need the HTML file created last week. If you don't have it on your local (network) disk, please download it.

    If you don't have an HTML file, you should create one. For a quick start however, you can download one from here: jarek.html. To download, click on the link, then use right button of your mouse to choose View source. You will see your HTML in the Notepad window - you only have now to choose File | Save as.

    CSS syntax and structure is not difficult, but the number of possible selectors and properies is enormous. Therefore it is a very good idea to use a good CSS editor. Such editors suggest possible selectors, properties and their values.

    At this workshop we will use Microsoft Visual Studio. You can find it useful for editing both CSS and HTML files. Microsoft Viual Studio is free for KU students (providing no-commercial use, check here).

    For home use, it is recommended to use one of the light-weight free editors. Many of them can be found at the CSS official site. You can find on e of the following useful:

  2. Web Development with Style

    The first example is provided for my file jarek.html. You may need some customization to make it looking good with your file. One thing to consider is to use a rather small size imaging, so that to easier apply styles.

    Firstly, we have to impose the stylesheet to be used by the HTML file. A single line requires to be added to the HTML header:

    jarek.html
...
  <head>
	<title>My first example</title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
	<link href="default.css" rel="stylesheet" type="text/css" />
  </head>
  ...

    The stylesheet introduced in this section is based on standard HTML tags and defines the following formatting:

    <body>
    Changes the font to Arial, 12pt (points), as the default fone for the entire document.
    <img>
    Floats the images to the left. This means that the images will be displayed on the left-hand side and the other stuff may be pushed to the right. Besides, the margin width is set: starting with top at 16px (16 pixels), than clockwise: right 24px, bottom none, left 16px.
    <h1>
    The main header is set to large white letters on the maroon (or: ruby) background, with 16px padding on the top and the bottom. Padding is the additional space between the contents and the boundary of the object. Unlike the margins, padding area is filled with the colour of background - so it is an extra space filled with maroon.
    <h2>
    Just maroon (ruby) letters.
    <a>
    The links are set to the ruby colour. Besides, the text-decoration is switched to none. By default, links are underlined. A specific formatting is applied to hovered a's: the text-decoration is set back to underlined.
    <table>
    Table borders will be collapsed.
    <td>
    Left padding set to 16px to provide more space between columns and on the left of the table.

    And here is the CSS file:

    default.css
body 
{
	font: normal small Arial, Verdana, Helvetica, sans-serif;
	font-size: 12pt;
}
img
{
	float:left;
	margin: 16px 24px 16px 16px;
}
h1
{
	font-size: 32pt;
	background: maroon;
	color: White;
	padding: 16px 0 16px 0;
}
h2
{
	color: Maroon;
}
a, a:visited
{
	color: Maroon;
	text-decoration: none;
}
a:hover
{
	text-decoration: underline;
}
table
{
	border-collapse:collapse;
}
td
{
	padding-left: 16px;
}

    You can now use copy and paste to create your own CSS. Apply it to jarek.html (go back to Section 1 to download) and you should get something like this. There is a difference, isn't it?

    EXERCISE 2.1

    Use the default.css file provided above as a template for your stylesheet and apply it to yur HTML. Introduce necessary amendments to create a design that looks great!

  3. Introduction to CSS

    Syntax of CSS is simple. It's just three components:

    selector { property: value; }

    In a simple case, selector may be a name of a HTML tag. In the previous secion we have defined selectors for body, img, h1, h2, a, table and td.

    For each selector you can define zero, one or more properties. Properties define various elements of style (formatting), like size, colour, positioning etc. Use a colon do divide the property from a its value, and a semicolon to divide various properties within the same selector.

    Some selectors, like a, may appear in different flavours, for example a:visited, a:focus and a:hover provides a possibility to differentiate between links in various states. We call them pseudo-selectors. Among other pseudo-selectors some of the most handy are :first-line and :first-letter. They allow to change formatting for only the fist line of the first character within the given tag.

  4. Identifiers and Classes

    Formatting of a HTML tag is a good thing, but not always good enough. What if you want to format just a particular occurance of a given tag, not all the tags of a particular type in the document?

    There are several different approaches.

    Identifiers
    Use identifiers if you have exactly one spot in the text that you want to be specially formatted. First, provide a unique identifier for the given tag, for example: <p id="valentine">Be my Valentine!</p> Now, the corresponding CSS formatting looks like this: #valentine { color: red; }
    Classes
    Classes are an appropriate solution when you have a number of spots that you would like to format in the same way. Assign a class name for each of them, for example <p class="caption">Various customs on Valentine's Day</p> And provide a common formatting for all such places: .caption { font-style:italic; }

    In practice, it may be a bit difficult to decide between an identifier and a class and the choice may be sometimes up to you.

    You can also use some other types of selectors, for example:

    • p.caption will only format paragrpahs with the given style (no other tags),
    • .caption a will only affect those links that appear in bounds of a wider tag with the caption class.
    • #valentine em affects all emphasised text within the tag identified as valentine.
    EXERCISE 2.2

    In your favourite HTML file, choose one of the paragraphs (line items, table cells or whatever) and change its formatting using either a class name or an identifier.

  5. DIV and SPAN: Great HTML tags that do nothing

    It often happens that the area you need to format is not any HTML tag at all - just an area from here till there. We can just add some summy tags. Two of them are particularly often used: <div> and <span>. They do not bring any special formatting with them; they are just placeholders to provide either an identifier or a class name and to define the formatting for a required area of the page.

    In this section we will create a centered frame around the whole page - a design quite popular with a number of sites, for example http://bbc.co.uk.

    Firstly, we will change the background colour of the whole page, and we will align our future frame centrally: 

    default.css
body 
{
	font: normal small Arial, Verdana, Helvetica, sans-serif;
	font-size: 12pt;
	text-align: center;
	background: #fffdda;
	margin: 0;
}

    We now need to format the area of the whole page, to provide white background, ruby border and essentially left text-align. We will add a <div> tag so that to encompass entire text of the page: 

    jarek.html
...
<body>
	<div id="page">
		<!-- all the staff normally in the page -->
	<div>
</body>
...

    The style looks like this: 

    default.css
#page
{
	width: 800px;
	text-align: left;
	background: white;
	border: solid maroon 1px;
}

    We have set the width of the frame to the fixed value of 800 pixels. You can also set the width in relation to the width of page, eg.: width: 80%;. In that case you may also want to specify min-width and max-width properties to constrain how the frame grows or shrinks when you resize the browser.

    EXERCISE 2.3

    Formatting for #page affects entire content of the page. Explain why this formatting cannot be placed at body selector. Make an experiment if you don't know.

    The page looks quite good, but still the letters touch the left and right border of our frame, wchich does not look good. We need to provide padding, but not for entire page - just for the contents, which is everything but the heading. Add a new <div> tag to the HTML:

    jarek.html
...
<body>
	<div id="page">
		<img src="http://rails.francik.name/extras/jarek.jpg" alt="portrait" />
		<h1>Jarek Francik</h1>
		<div id="content">
			<!-- all the staff normally in the page -->
		<div>
	<div>
</body>
...

    And the style for the newly added tag:

    default.css
#content 
{
	padding: 0 1em 1em 1em;
}
    EXERCISE 2.4

    Check what happens if padding is moved from #content to #page.

    You can now check how the new page looks.

    EXERCISE 2.5

    Provide a CSS stylesheet for the HTML page you created in the Activity 1. Take into regard the requirements that will be displayed below.

    Type here the last two digits of your KNumber to see the requirements for the style of your page.

Valid XHTML 1.0 Strict Valid CSS!

Copyright (C) 2009-2011 by Jaroslaw Francik