Cascading Style Sheets & HTML Practical Exercises, Study Guides, Projects, Research of Applied Computing

Download Cascading Style Sheets & HTML Practical Exercises and more Study Guides, Projects, Research Applied Computing in PDF only on Docsity!

Computing

Science

Information Systems

Design and Development

Cascading Style Sheets

& HTML

Practical Exercises

Version 1

Buckhaven High School

1 Written by Mr G.Reid, PTC Technologies, Buckhaven High School - Feb 2014

Contents

Page 1 How to use this booklet

Page 2 Introduction

Page 8 Selectors, Properties and Values

Page 9 Practical Exercise 1 - Editing a CSS File

Page 11 Practical Exercise 2 - Creating and Linking a CSS File

Page 13 IDs and Classes

Page 14 Practical Exercise 3 - Adding Classes to a Style Sheet

Page 15 Extension Work - Page Layout Using Positioning Properties

Page 19 Practical Extension Exercise - Creating a Page Layout Using Positioning

Page 20 Appendix A - CSS Properties and Values

Page 22 Appendix B - HTML Tag Reference

How to use this booklet

This booklet has been written to cover the following content in Higher Computing.

For assessment purposes, students should:

● memorise a definition of cascading style sheets

● be able to explain the uses/advantages of cascading style sheets

● be able to write a simple external style to manipulate text, colours, margins & padding.

Higher Structures and Links (Websites)

ü stylesheets, CSS (cascading style sheets) ü page structure: head, title, body ü metadata ü dynamic web pages ü interactive web page

3 Written by Mr G.Reid, PTC Technologies, Buckhaven High School - Feb 2014

In-line Styles

Method one involves embedding styles directly, “in-line”, into HTML tags as shown below.

Styles have been added to the , , , , , and

tags to control margins, colours, fonts, text size, spacing and borders.

When in-line styles have been inserted into a tag they only apply to that tag. You will notice that the above document has a lot of repetition of styles throughout.

### ISDD

Internal Styles

Method two is highlighted below and involves the use of the

ISDD

Once a CSS has been created it can be linked to multiple web pages. This ensures that headings, text format, layouts, tables, paragraphs are formatted the same way throughout a website.

The term “cascading” is used as the style definitions in the style sheet cascade from a single file through the entire website.

7 Written by Mr G.Reid, PTC Technologies, Buckhaven High School - Feb 2014

For large websites, cascading style sheets are essential as they: ● reduce workload - styles are only created once and are then applied to every page ● ensure consistency - if styles were applied internally every web page would have to be checked to ensure it used exactly the same styles as the others ● aid maintenance - a change can be applied to an entire website by simply changing one line of code in the CSS.

In this unit you will work through a variety of practical task during which you will learn to create cascading style sheets and use them to manipulate the appearance of a website.

Edited CSS File

9 Written by Mr G.Reid, PTC Technologies, Buckhaven High School - Feb 2014

Practical Exercise 1 - Editing a CSS file

Step 1 Locate the folder called CSS Task 1 and copy it into your own network folder.

Step 2 Using a suitable editor open both the CSS file.

You can see that the CSS code contains selectors, properties and values for 6 of the HTML tags used in the Task 1 web page.

Read through the code and use Appendix A at the back of this booklet to make sense of the properties and values assigned to the selectors.

Step 3 Open the HTML file in the CSS Task 1 folder in a browser of your choice.

Step 4 Edit the CSS file so that the tag will display: ● white text ● centered text ● size 24px text

Save the CSS file to update the changes you have made and then refresh the web page in your browser. The web page should change to reflect the newly edited CSS file.

ISDD

Step 6 Using Appendix A for reference, continue to make changes to the cascading style sheet.

You could: ● change values ● remove existing properties ● add new properties

By editing only the style sheet, try and make the final web page look as different from the original as you possibly can. (^) Before

After

ISDD

Step 5 First you must link the HTML file to your CSS file.

Inside the tag, at the top of the HTML file, add the line of code shown below.

Remember to put your own .css file name into the link and save the changes.

Step 6 Now you are ready to begin creating and testing your cascading style sheet.

Begin by typing in a selector and empty curly brackets for each of the tags you wish to style as shown.

From the list given on the previous page we know that a total of 10 tags could be styled.

Step 7 Using Appendix A (along with CSS reference pages on the Internet) add properties and values to each of the selectors.

Unlike other tasks, where you may complete a large section of a project before testing it, you should continually save the CSS file and then refresh your browser to check your CSS code is formatting the HTML file correctly.

Step 8 When you have finished, print the HTML file in the browser, write your name on it and submit it to your teacher.

13 Written by Mr G.Reid, PTC Technologies, Buckhaven High School - Feb 2014

IDs and Classes

The selectors used in Practical Tasks 1 and 2 all made use of existing HTML tags. If cascading style sheets were limited to simply styling tags, each tag would have to have the same properties and values throughout every page that was linked to the style sheet.

IDs and Classes are used to define additional style information that is not tied to a specific tag. These two additional selectors behave in a similar way and should be used as follows:

● ID selectors are created to style a single, unique element in your web page. For example a paragraph that is formatted differently for any other tag in the HTML. IDs are added to the CSS file with a preceding # symbol and then referenced in the HTML by adding the ID within a tag, as highlighted below.

● Classes are created when you wish to apply the same style to multiple tags. Classes in CSS files are preceded with a full stop and are added to the HTML tags as highlighted below.

CSS file HTML file

CSS file HTML file

15 Written by Mr G.Reid, PTC Technologies, Buckhaven High School - Feb 2014

Extension Work - Page Layout Using Positioning Properties

If you look closely at modern web pages you will see an underlying structure of rows and columns.

The boxes below can be mapped to the different areas of the Amazon web page shown above.

To create this page, each of the above boxes would be created using division tags. Style sheet rules are then created to resize and position each of the boxes.

ISDD

The diagram below shows a common structure for a simple web page.

To create the structure for the above web page start by creating a division for the whole page.

Next add a division for the header.

Header

Navigation Content

Footer

Header

ISDD

Header Style This allows us to set: ● a background colour of ● a padding of 20 pixels inside the header No positioning is required as the header appears first out of the four boxes in the HTML. This means it will automatically appear at the top of the page.

Navigation Style This allows us to: ● ensure that the navigation box is positioned at the left of the web page ● set the width of the navigation ● set a padding of 20 pixels inside the box, pushing the text from the edges. ● set the background colour to

Content Style This allows us to: ● ensure that the content box is positioned at the right of the web page ● set the width of the content box ● set a padding to push the text in from the top and left of the content box edges.

Footer Style This allows us to: ● clear the left and right positioning of the previous two boxes (ignore them) ● set a background colour of ● centre all the text ● set a padding of 20 pixels inside the footer Note that a height of 1% will ensure the footer is never larger than its contents require.

19 Written by Mr G.Reid, PTC Technologies, Buckhaven High School - Feb 2014

Finally the ID selectors must be added to the HTML to implement the styles and create the layout.

If you add some content inside the completed tags you can now see what the finished page will look like.

Practical Extension Exercise - Creating a Page Layout Using Positioning

Your task is create the layout shown below using tags, IDs, properties and values to position objects on the page.

Header

Footer

Menu Options

Navigation Content Advertising Space