Download Further web design: Cascading Style Sheets

Further web design:
Cascading Style Sheets
Practical workbook
Aims and Learning Objectives
This document gives an introduction to the use of Cascading Style Sheets in HTML.
When you have completed these exercises you should be able to:
 attach an external style sheet
 understand how style sheets can be used to control visual presentation
 edit existing style sheets
 create your own style sheets
University of Bristol Information Services document web-15
Further web design: Cascading Style Sheets (web-15)
Document information
Course files
This document and any associated practice files (if needed) are available on the web. To find
these, go to www.bristol.ac.uk/is/learning/resources and in the Keyword box, type the document
code given in brackets at the top of this page.
Related documentation
Other related documents are available from the web at:
http://www.bristol.ac.uk/is/learning/resources
Further web design: Cascading Style Sheets (Feb 11)
© 2010 University of Bristol. All rights reserved.
Further web design: Cascading Style Sheets (web-15)
Introduction
Cascading Style Sheets (CSS) has gradually replaced - and supplemented - HTML
formatting as a standard method of presentation. One key feature is the separation of
semantic mark up from visual presentation, resulting in cleaner, more accessible code.
Prerequisites
This document assumes that you are familiar with the use of a computer keyboard and
mouse, Microsoft Windows software including file management, and a web browser.
You should also be able to create simple web pages using a text editor and be able to
transfer files to a web server, having attended a relevant course, e.g. Creating
standards-compliant Web pages in XHTML (code CC1WPC).
Further web design: Cascading Style Sheets (web-15)
Contents
Document information
Task 1
Customising HTML-KIT .......................................................................... 2
Task 2
Introducing style sheets ........................................................................ 5
Task 3
Creating a simple style sheet ................................................................ 7
Task 4
The Box Model ...................................................................................... 10
Task 5
Introducing classes.............................................................................. 11
Task 6
Applying classes to links ..................................................................... 12
Task 7
Additional link styling using pseudo classes .................................... 14
Task 8
Using IDs for positioning ..................................................................... 15
Task 9
Adding a ‘skip navigation’ link ............................................................ 17
Task 10 Creating a nested box .......................................................................... 18
Task 11 Background images ............................................................................. 19
Task 12 Additional tasks: Creating new divisions and applying style to
multiple pages ...................................................................................................... 20
Appendix A
Online CSS resources .......................................................................... 21
Further web design: Cascading Style Sheets (web-15)
Task 1 Customising HTML-KIT
Objectives
To open and customise HTML-Kit to produce XHTML-compliant documents.
Comments
In accordance with University Web guidelines, it is important to code pages to
XHTML 1.0 standards.
1.1
Open HTML-Kit and close additional panels.
 Go to Start / Programs / HTML-Kit and select the launch icon
You should see the HTML-Kit start screen with Open File wizard embedded
within it (Figure 1).
Figure 1 - HTML-Kit default interface showing Open file wizard
 In the Open file wizard (see Figure 1), select Cancel to close the box.
Note
Close the Workspace and Message window by clicking the close buttons (see
Figure 2 and Figure 3).
Figure 2 - closing the workspace
Figure 3 - closing the message window
2
Further web design: Cascading Style Sheets (web-15)
1.2
Set the default template to XHTML;
 On the menu bar, go to Edit / Preferences and select the tab labelled Startup
from the Preferences dialogue box.
 Working in the box shown in Figure 4, make sure the ‘Insert following text into
new documents:’ checkbox shown is ticked, delete the default text, and replace
with the following which can be inserted by clicking on the button labelled Import
From File (see Figure 4) and selecting file C:\Training\WWW\Web design
2\template.txt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Figure 4 - default text for new documents
1.3
Select the File types tab and change the default extension from htm to html
(see Figure 5).
Figure 5 - setting default file extension
1.4
Select the Editor tab and, working in the Word Wrap Options area, check the
box labelled Wrap at column, leaving the following boxes with their default
values: column set to 0 (auto-wrap), and the other boxes, labelled Show wrap
column and Mark wrapped lines checked (see Figure 6).
3
Further web design: Cascading Style Sheets (web-15)
Figure 6 - setting word wrap options
1.5
Select the Help tab and uncheck the box labelled Display after (idle time in
miliseconds), to disable the Tags Reminder (see Figure 7).
Figure 7 - disabling Tags Reminder
Note
1.6
If you find the Tags Reminder feature useful, you can re-enable it. It works by
predicting your code as you begin to type. If you choose to enable it, it is
important that the Use XML format box is checked.
Select the Auto Complete tab and make sure the box labelled Enable Auto
Complete is unchecked (see Figure 8)
Figure 8 - disabling Auto Complete
Note
The Auto Compete option, although useful during the initial construction of a
page, can result in the addition of unwanted code during subsequent editing.
 Click the button labelled OK, at the bottom of the Preferences dialogue box.
4
Further web design: Cascading Style Sheets (web-15)
Task 2 Introducing style sheets
Objectives
To examine a document before and after the attachment of a style sheet.
Comments
Older browsers such as Netscape 4.* do not support all style sheet code.
Recommended browsers include Internet Explorer 5.0 and above, and Firefox.
2.1
Open Mozilla Firefox and enter the following URL:
http://www.bristol.ac.uk/is/info/websupport/resources/css.html
2.2
Press the <Ctrl + n> keys to open a new browser window and enter the URL
above.
2.3
Open each Joe Bloggs’s home page link in a separate window (see Figure 9
and Figure 10).
Figure 9 - Joe Bloggs's home page without style sheet
5
Further web design: Cascading Style Sheets (web-15)
Figure 10 - Joe Bloggs's home page with style sheet attached
2.4
Note
Examine each page, noting as many differences as possible.
The purpose of style sheets is to separate the (semantically-structured) content
of web pages from the presentation. This results in much ‘cleaner’ code than
were the visual styling embedded within the HTML, and enables a consistent look
and feel to be applied across a website.
6
Further web design: Cascading Style Sheets (web-15)
Task 3 Creating a simple style sheet
Objectives
To create a basic style sheet to redefine several HTML elements (tags).
Comments
A style sheet can, alternatively, be embedded in the head of an HTML document.
This course concentrates on using an external style sheet linked to multiple
pages.
3.1
Open file index.html in HTML-Kit:
 Go to File / Open File.
 Browse to folder: C:\Training\WWW\Web Design 2, and select index.html.
3.2
Preview your index page:
 Click the Preview in default browser icon
 Close the browser by clicking the
3.3
on the Toolbar.
icon at the top-right of the browser.
Return to HTML-Kit and open a blank style sheet:
 Go to File / New.
 Select Blank Style Sheet from the three options.
3.4
Type the following code into your new document window:
body {font-family: Arial, Helvetica, sans-serif;
color: #069;
background-color: #FFFFCC;
margin-top: 0;}
This sets the default for the body of the document i.e. the whole of the visible
page. All tags nested within the body will inherit these properties and values,
unless they are set to be more specific.
Note the use of space and line breaks in the CSS. This is purely aesthetic and is
ignored by the browser.
Note
When colour codes comprise three pairs of identical characters, they can be
truncated, for example: #006699 becomes #069. The margin-top property is
used to ensure browser compatibility by overriding the top margin applied by
some browsers by default.
3.5
Select File / Save As, and save as joebloggs.css in folder:
C:\Training\WWW\Web Design 2.
3.6
Return to file index.html and add the following code, shown in bold, to the head
of the document:
<title>Joe Bloggs: Welcome!</title>
<link href="joebloggs.css" rel="stylesheet" type="text/css" />
</head>
3.7
Save your file: File / Save, and reload/refresh your browser to update your
index.html file.
You will notice that a new style has been applied throughout your page.
3.8
Return to joebloggs.css in HTML-Kit and examine the code.
7
Further web design: Cascading Style Sheets (web-15)
You will notice that the file comprises nothing but the HTML body element
alongside a pair of curly brackets containing the descriptive information.
CSS is always structured as follows:
selector {property: value;}

selector is, in this case, synonymous with HTML element, e.g. h1. The
distinction will be explained later.

Property has the same meaning as attribute: font or font-family being an
example. This is always followed by a colon (:)

Value refers to the value to which a property is set, e.g., the colour red or
a size of 60px. It is followed by a semi-colon.
In this case, the body element has been defined as having a cream (#FFFFCC)
background, with dark turquoise (#069) text. The font-family property list fonts in
order of preference. If possible, a browser will display any text in Arial. If the end
user does not have this font installed on their computer, the browser will instruct it
to search for Helvetica. If neither of these can be found, the default sans-serif
font will be displayed.
3.9
Add the following, shown in bold, to style sheet joebloggs.css:
body {font-family: Arial, Helvetica, sans-serif;
color: #069;
background-color: #FFFFCC;
margin-top: 0;}
h1 {margin-top: 8px;
font-size: 190%;}
h2 {color: #ED8D6D;
font-size: 120%;}
h3 {color: #069;
font-size: 105%;
border: 1px solid #069;
margin-bottom: 8px;
padding: 2px;}
Note
In this case the properties: border-width, border-style and border-color have
been replaced by the border shorthand property.
3.10
Save file joebloggs.css, return to your browser and reload/refresh your
index.html file, noting any changes (there are no <h3> elements on the index
page).
3.11
Browse to folder: C:\Training\WWW\Web Design 2, open file aboutme.html,
and attach the style sheet joebloggs.css (see task 3.6). Save the file
aboutme.html.
3.12
Return to your browser and select the About me link on your index page. Note
the consistency of style across the two pages.
3.13
Using the example shown in the body element, change the font in one of the
headers. Font families include:

serif (e.g., “Times New Roman”, Times, serif)

sans-serif (e.g., Arial, Helvetica, sans-serif)

monospace (e.g., "Courier New", Courier, monospace)
8
Further web design: Cascading Style Sheets (web-15)
Save your style sheet and refresh the webpage in your browser with each
change.
Note
Quotes are used where font names comprise more than one word.
3.14
Note the colours, represented by hexadecimal codes. Try changing the colours
of elements, making sure the foreground (text) and background colours ‘sit well’
together and there is sufficient contrast. For assistance with colour codes, look at
the following page:
http://www.webmonkey.com/webmonkey/reference/color_charts/.
Looking at the CSS code in task 3.9, you may have noticed that the h1, h2 and
h3 selectors have no font specified, but when viewing the document, all instances
are rendered as sans-serif (Arial in our case). This is an example of inheritance
or acquisition. HTML elements have what is known as a parent/child
relationship. The <body> element acts as a parent to elements within it, and
so, unless specified otherwise, all elements below the body tag will inherit many
of its values.
3.15
Add comments to your style sheet. Browsers will ignore content placed between
/* and */. This technique is a good way to divide a style sheet into sections and
give instructions or tips to other parties.
 Add the following to your style sheet, where indicated in bold:
/* Sets defaults font, colours and background for whole page */
body {font-family: Arial, Helvetica, sans-serif;
color: #069;
background-color: #FFFFCC;}
/* Styles specific to headings */
h1 {margin-top: 8px;
font-size: 190%;}
h2 {color: #ED8D6D;
font-size: 120%;}
h3 {color: #079FE5;
font-size: 105%;
border: 1px solid #079fe5;
margin-bottom: 8px;
padding: 2px;}
Note
Note the use of percentages to modify font size. Using fixed font sizes removes
the user’s ability to control text size via the view menu in some browsers, and is
therefore considered an accessibility issue.
9
Further web design: Cascading Style Sheets (web-15)
Task 4 The Box Model
Objectives
To understand the Box Model.
Comments
CSS treats all content as though contained within a box (cf. table cell).
4.1
Look at the code within your style sheet, focussing on the properties margin,
border and padding.
CSS treats content as though contained within a box. Box properties bear a
close relationship to the table attributes specified in many applications: a border
can be added, margins defined to indent the whole box, padding added around
content, and a background colour and/or image added (see Figure 11).
Figure 11 - the box model
4.2
Identify some of the box properties of your style sheet and make a few changes.
Supported border styles include double, dashed, dotted and solid (the default).
Note
Note how CSS can be truncated, e.g. border colour, thickness and style
expressed in one shorthand property. On the other hand properties can be split
into sub-properties (denoted by the hyphen). For example, note in your style
sheet how the margin property for h1 and h2 is limited to: margin-top and
margin-bottom respectively. Using simply margin with one value, (e.g. margin:
8px;) would apply the same value to each side. Expressing four values would
apply one to each side in turn, starting at the top, and working round clockwise,
for example: margin: 4px 8px 8px 4px;
10
Further web design: Cascading Style Sheets (web-15)
Task 5 Introducing classes
Objectives
To examine and define CSS classes.
Comments
Classes can be defined to apply styling to one specific element, any element, or
to span inline content.
5.1
The main problem associated with the simple redefinition of elements’ style is
inflexibility. For example, how can a document contain both blue and red h2
headers if the style sheet defines them all as red?
The way to achieve this is through the use of classes, to categorise elements or
span content within a block. A class is a user-defined style, for example:
.undergrad {color: #009900;}
Notice how the class name begins with a dot; this is mandatory. The author will
give the class a name appropriate to the content it is styling – in this case, a
reference to undergraduate students. The function of the class, in this case, is to
turn content green.
Classes can be written and applied in three ways:
 to any element, as shown above;
 to a specific element, in which case the class would be written as:
h2.undergrad {color: #009900;}
 spanning inline portions of content, e.g. individual words or sentences within a
paragraph, header etc.
Classes are then applied within the HTML, in the following ways:
 Applied to whole block-level elements (p, h1 etc.):
<h1 class="subhead">Joe Bloggs: Welcome </h1>
 Applied inline, across content within blocks, using the span element:
<h1>Joe Bloggs: <span class="subhead">Welcome</span></h1>
Add the following to the bottom of your joebloggs.css file and save it:
.subhead {color: #ED8D6D;}
.leftpic {margin-right: 16px;
float: left;}
5.2
Open your HTML-Kit window containing your index.html document.
5.3
Apply the classes to your code where indicated in bold:
<h1>Joe Bloggs: <span class="subhead">Welcome</span> </h1>
<h2>5th June 2006</h2>
<img class="leftpic" src="images/joe-key.jpg" height="120" width="87” alt="Joe
Bloggs computer key" />
Note
The float property embeds objects within following content. To stop floating at a
given point, the clear property is used. This is explained in Task 10.
11
Further web design: Cascading Style Sheets (web-15)
Task 6 Applying classes to links
Objectives
To apply a CSS class to each link state
Comments
Link classes are applied directly to the <a> tag: <a class="navlinks" href="…
6.1
Add the following to the bottom of your style sheet:
.navlinks
Note
6.2
{background-color: #FFF;
color: #079FE5;
text-decoration: none;
padding: 2px 4px 2px 4px;
font-size: 85%;
border-top: 1px solid #EEE;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-left: 1px solid #EEE;
margin: 4px 0;}
Note margin values expressed as 4px 0. This is shorthand for 4px 0 4px 0. The
padding values in this example could also be truncated to 2px 4px.
Working in your index.html document, apply the class to each of the <a> tags,
shown below in bold.
<li>Home >></li>
<li><a class="navlinks"
<li><a class="navlinks"
<li><a class="navlinks"
<li><a class="navlinks"
href="news.html">News</a></li>
href="aboutme.html">About me</a></li>
href="contact.html">Contact me</a></li>
href="links.html">Links</a></li>
6.3
Save, then refresh/reload your page in your browser, noting changes.
6.4
Add the following, shown in bold, to your style sheet to set a consistent button
size.
.navlinks
Note
{display: block;
width: 7em;
background-color: #FFF;
color: #079FE5;
text-decoration: none;
The display: block; value sets inline elements in their own block, where they
would otherwise be just part of a block (e.g. a couple of words within a
paragraph). When elements are displayed inline, the size of the content
determines the width. For this reason, a width cannot be attributed to an inline
elements unless displayed as a block (or floated, which does not apply in this
case).
Also note the use of em as a unit of measurement. Any dimension expressed in
em will resize according to text size in the browser’s view: text size menu option.
A typical use is to enable boxes to expand or contract to accommodate text
displayed at different sizes.
6.5
Add a style for the currently selected link (i.e. the current page).
 Add the following CSS to your style sheet:
12
Further web design: Cascading Style Sheets (web-15)
.currentlink {display: block;
width: 7em;
background-color: #FFF;
color: #ED8D6D;
padding: 2px 4px 2px 4px;
font-size: 85%;
border-top: 1px solid #EEE;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-left: 1px solid #EEE;
margin: 4px 0;
font-weight: bold;}
6.6
Span it across the text in the first list item, as shown in bold below:
<li><span class="currentlink" >Home >></span></li>
<li><a class="navlinks" href="news.html">News</a></li>
6.7
Save your style sheet, and then refresh/reload your page index.html in your
browser, noting changes.
13
Further web design: Cascading Style Sheets (web-15)
Task 7 Additional link styling using pseudo classes
Objectives
To apply styling to specific link states.
Comments
Pseudo classes differ from standard CSS classes in that the browser applies
them automatically.
Links have four states: link (as yet unvisited), visited (detected via the browser
history), hover (a mouse is currently pointing at the link) and active (a mouse is
currently clicking the link). Styles for each can be set as follows
a:link {property:value;}
a:visited {property:value;}
a:hover {property:value;}
a:active {property:value;}.
These are examples of Pseudo Classes, so-named because, unlike CSS
classes, which are applied manually in the HTML, the browser itself decides
when they should be applied.
Note
7.1
It is important to express link states in the correct order to ensure properties are
overridden correctly when hovering and clicking.
Add the following to the bottom of your style sheet:
a:hover {text-decoration: none;}
This modifies the style for all links, removing the underline when the mouse
hovers over to link.
7.2
Apply a :hover pseudo class unique to your navigation links, by adding the
following to the bottom of your style sheet
a.navlinks:hover {background-color: #FFF3E5;}
7.3
Save, refresh and view the changes in your page. Run your mouse over the links
in your navigation bar to see the hover effect.
Note
To consolidate the code added in tasks Task 6 and Task 7, the properties and
values common to a.navlinks and .currentlink could be combined to read as
follows (note the values unique to each class are subsequently listed separately):
a.navlinks, .currentlink
{display: block;
width: 7em;
background-color: #FFF;
text-decoration: none;
padding: 2px 4px 2px 4px;
font-size: 85%;
border-top: 1px solid #EEE;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-left: 1px solid #EEE;
margin: 4px 0px; }
a.navlinks {color: #079FE5;}
a.navlinks:hover {background-color: #FFF3E5;}
.currentlink {color: #ED8D6D;
font-weight: bold;}
14
Further web design: Cascading Style Sheets (web-15)
Task 8 Using IDs for positioning
Objectives
To investigate the use of IDs and use CSS to position content within a web page.
Comments
IDs work in a similar way to classes, but can only be applied once in a page, as
their function is to define specific sections of a page, e.g. a navigation bar or
banner, to create a template applied across a site.
8.1
Split your index page into definable divisions using the <div> </div> tags:
 Add the following, shown in bold, to your file index.html to define the main
content area of your page.
<div id="maincontent">
<h1>Joe Bloggs: <span class="subhead">Welcome</span> </h1>
<h2>5th June 2006</h2>
 Close the division just above the body of the document:
</div>
</body>
 Repeat the process to define your navigation bar and then save your file:
<div id="navlist">
<ul>
<li><span class="currentlink">Home >></li>
<li><a class="navlinks" href="news.html">News</a></li>
<li><a class="navlinks" href="aboutme.html">About me</a></li>
<li><a class="navlinks" href="contact.html">Contact me</a></li>
<li><a class="navlinks" href="links.html">Links</a></li>
</ul>
</div>
Note
8.2
The <div> tag performs the function of a generic block level tag (h1, p etc are all
referred to as block level or structural elements). Unlike a paragraph or
header, a div has no specific function, semantic meaning or properties. It is used
within CSS to divide web pages into discrete sections.
Add the following to the bottom of your style sheet:
#maincontent {margin-top: 110px;
margin-left: 12em;
margin-right: 20px;
margin-bottom: 0;}
8.3
Save your file joebloggs.css.
An ID begins with a hash (#), rather like the dot employed by a class. The main
difference between the two is that whereas a class can be applied any number of
times within a page, an ID defines a specific portion of a page.
15
Further web design: Cascading Style Sheets (web-15)
CSS can be used to position elements within a page. Add the following to your style
sheet and save it:
#navlist
{position: absolute;
top: 110px;
left: 8px;}
#navlist ul {margin-top: 0;
margin-left: 0;
padding-left: 40px;}
#navlist li {list-style-type: none;}
Note
Elements can be nested within ids. The example above styles a division (div)
called navlist, and any list (ul) and list items (li) contained within it. #navlist ul
and #navlist li are examples of descendent or contextual selectors.
Note also the padding and margin values applied to the ul selector; these have
both been specified to ensure browser consistency: some apply a default margin
whereas some set default padding.
8.4
Note
Refresh your index.html document in your browser.
Note the property position: absolute. This enables us to position elements
exactly where we want them to appear on the page. The top and left properties
set the position, relative to the body of the document (see exception below).
Note that now this content has been removed from the HTML flow (the order in
which the page was written), the main content moves up to occupy the space
now vacant in the flow. There are four type of position: absolute, relative, fixed
and static. Relative positioning moves content by offsetting it from its current
position (i.e. not relative to the body). Fixed positioning is similar to absolute, but
positioned content does not scroll with the rest of the page, appearing ‘stuck to
the screen’. Static positioning is used to return otherwise-positioned content to
its place in the HTML flow.
If a parent block is set to position:relative, child elements can be positioned
absolutely within it.
16
Further web design: Cascading Style Sheets (web-15)
Task 9 Adding a ‘skip navigation’ link
Objectives
To add a hidden bookmark within the web page to enable screen-reader to skip
past a navigation bar to the main page content.
Comments
This exercise demonstrates how to use the CSS display property to hide page
content from visual browsers
The id attributed to the <div> maincontent has multiple uses: in the previous exercise it was
used for styling. Here we will also be using it as a bookmark to create a link within a webpage.
9.1
Open file index.html in HTML-Kit
9.2
Add the following code, shown in bold, just above the navigation bar.
<div id="navskip"><a href="#maincontent">Skip navigation</a></div>
<div id="navlist">
<ul>
<li> <span class="currentlink">Home >></span></li>
<li><a class="navlinks" href="news.html">News</a></li>
<li><a class="navlinks" href="aboutme.html">About me</a></li>
<li><a class="navlinks" href="contact.html">Contact me</a></li>
<li><a class="navlinks" href="links.html">Links</a></li>
</ul>
</div>
<div id="maincontent">
<h1>Joe Bloggs: <span class="subhead">Welcome</span></h1>
9.3
Save and preview in a browser, noting the link that appears at the top of the
page. This is to enable users of assistive technology (e.g. screen-readers) to
jump directly to the main page content, bypassing content - notably navigation that is repeated on every page.
9.4
Apply the same code to your page aboutme.html
9.5
Add the following to the bottom of your style sheet
/* Hides skip navigation link */
#navskip {display: none;}
9.6
Save your style sheet and open/refresh one of your webpages. Note that the skip
navigation link disappears; not only is it invisible, but the space it occupies is also
removed from the page.
17
Further web design: Cascading Style Sheets (web-15)
Task 10 Creating a nested box
Objectives
To create a new division, nested within another.
Comments
This task also covers clearing floated elements.
10.1
Add the following to your index page and save it.
<div id="newsbox" style="clear: left;">
<h2>Latest news: </h2>
<ul>
<li><a href="news.html">News item 1 </a></li>
<li><a href="news.html">News item 2 </a></li>
<li><a href="news.html">News item 3</a></li>
</ul>
</div>
 Add the corresponding CSS to your style sheet and save it.
#newsbox
{margin-top: 40px;
padding: 0;
border: 1px solid #ED8D6D;}
#newsbox h2 {font-size: 110%;
margin-top: 0px;
margin-right: 0px;
padding-left: 4px;
color: #FFF;
background-color: #ED8D6D;}
#newsbox li
Note
{list-style-type: square;
list-style-position: outside;
color: #069;}
This example uses the html style attribute to contain CSS:
<div id="newsbox" style="clear: left;">
This technique is know as inline styling should only be used for one-offs, where
deemed appropriate. In this case, an instruction is given to skip any left-floated
objects and begin a new block underneath. The clear property can have values:
left, right, both (or none, used to override any acquired clearing value).
Note also the property list-style-position. This has a value of inside or outside,
and positions bullets inside or outside the content (i.e. text within the list item).
To ensure content does not wrap under the bullet points when the list item runs
on to more than one line, it should be set to outside. Browser defaults vary.
18
Further web design: Cascading Style Sheets (web-15)
Task 11 Background images
Objectives
To apply fixed and scrolling background images to elements of a web page.
Comments
The use of background images for decoration via CSS helps keeps HTML code
clean, and does not interfere structurally with page accessibility. However, it is
important to ensure background images do not impair page visibility.
11.1
Add a static watermark to the top left of your home page:
 Add the following, shown in bold, to the body element in your style sheet and
save it. Note the background colour change to #FFF.
body {font-family: Arial, Helvetica, sans-serif;
color: #006699;
background-color: #FFF;
background-image: url(images/bodyback.gif);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 30px 0;}
 Refresh your index page noting changes.
Note
Using the value fixed for background-attachment sets the image as static
wallpaper. To make the image scroll with the page, use the value scroll.
The background-repeat property sets the image tiling: repeat-x tiles the image
horizontally, repeat-y tiles vertically and no-repeat will set the image to be
displayed only once.
The background-position property sets the position of the image horizontally
and vertically, relative to the containing div. Values include top, left, center and
right. Alternatively, explicit positions can be used to offset the image from its
default position of left top, in this case a 30px left indent and no offset at the top
(‘0’ and ‘top’ are essentially the same).
11.2
Add a background image to frame your main content area:
 Add the corresponding CSS to your style sheet and save it, before refreshing
your index.html page in your browser.
#maincontent {margin-top: 110px;
margin-left: 12em;
margin-right: 20px;
margin-bottom: 0px;
background: transparent url(images/mainbg.gif) left top
scroll no-repeat;}
Note
The code controlling the background can be truncated to one all-encompassing
background shorthand property. The value transparent will allow the
background of parent (the body in this case) to show through. To render the
main content section opaque it should be set to a colour value (e.g. #FFF).
11.3
Add padding to the main content area to position it correctly within the
background image, by adding the following to the bottom of your #maincontent
CSS:
background: #FFF url(images/mainbg.gif) left top scroll no-repeat;}
padding: 16px 24px 0 28px;
19
Further web design: Cascading Style Sheets (web-15)
Task 12 Additional tasks: Creating new divisions and
applying style to multiple pages
Objectives
To finish applying changes to a second web page and create a division to apply.
Comments
These exercises use techniques covered in previous exercises.
12.1
Update your About Me page.
 Return to your aboutme.html file in HTML-Kit.
 Apply the subhead class to the h1 to match the index page (see task 5.3).
 Apply the navlist and maincontent <div>s along with corresponding ids (see
tasks 7.1 and 7.2).
 Apply the navlinks and currentlink classes (see tasks 6.2 and 6.5).
12.2
Float the image laptop.jpg to the right of the text:
 Create a class .rightpic to float images to the right and add a left-hand margin
(c.f. .leftpic in task 5.1).
 Apply class .rightpic to the image laptop.jpg
12.3
Create a footer for copyright and credits.
 Using the techniques covered in previous exercises, create your own id and
apply it to the following division at the bottom of each page (an example will be
available).
<div>&copy; 2006 Joe Bloggs</div>
20
Further web design: Cascading Style Sheets (web-15)
Appendix A Online CSS resources
CSS Zen Garden: downloadable CSS examples with emphasis on background images
http://www.csszengarden.com/
W3 Schools CSS Tutorial and reference
http://www.w3schools.com/CSS/
W3C CSS Validator
http://jigsaw.w3.org/css-validator/
Firefox Web Developer toolbar
https://addons.mozilla.org/firefox/60/
HTML Kit 292 download page
http://www.chami.com/html-kit/
21