Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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>© 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