Scribd
Upload
7 views23 pages

Cascading Style Sheets HTML

This document serves as a comprehensive guide to Cascading Style Sheets (CSS) and HTML, detailing their structure, usage, and practical exercises for students in Higher Computing. It covers the three methods of applying styles (in-line, internal, and external), the importance of CSS for web design, and includes practical exercises to create and manipulate CSS files. Additionally, it provides information on selectors, properties, values, and the use of IDs and classes for styling web elements.

Uploaded by

AK Sah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views23 pages

Cascading Style Sheets HTML

This document serves as a comprehensive guide to Cascading Style Sheets (CSS) and HTML, detailing their structure, usage, and practical exercises for students in Higher Computing. It covers the three methods of applying styles (in-line, internal, and external), the importance of CSS for web design, and includes practical exercises to create and manipulate CSS files. Additionally, it provides information on selectors, properties, values, and the use of IDs and classes for styling web elements.

Uploaded by

AK Sah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

Cascading Style Sheets & HTML

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.

Higher
Structures and Links  stylesheets, CSS (cascading style sheets)
(Websites)  page structure: head, title, body
 metadata
 dynamic web pages
 interactive web page

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.

1
Cascading Style Sheets & HTML

Introduction

As you have already learned, the source code in web pages (HTML) is used by browsers to display
the pages according to the format detailed in the HTML.
In addition to the web page text itself, the code will contain style details such as:
● what fonts, spacing, justification to use for text
● what colours to use for objects or backgrounds
● where to position objects
● what size objects should be
● which objects are in front or behind other objects etc, etc, etc

There are three ways that styles may be added to HTML code: in-line, internally or externally.

Each of the three examples that follow will use the HTML code shown below. Before styles are
added the code produces a white web page with black text. The page contains no formatting.

Source Code

Web Page

2
Cascading Style Sheets & HTML
In-line Styles
Method one involves embedding styles directly, “in-line”, into HTML tags as shown below.

Styles have been added to the <body>, <h1>, <h2>, <table>, <tr>, <td> and <p> 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.

3
Cascading Style Sheets & HTML
Internal Styles
Method two is highlighted below and involves the use of the <style> tag to list all the styles that will
be used throughout the source code at the top of the document.

Although the code has been


dramatically changed the
same output is produced.

The styles are written out as


lists, defining how each tag
should be formatted when the
source code is interpreted by
a browser.

For example, text enclosed by


the <h2> </h2> tags should
now be displayed as red,
centred on the page and font
size 16.

Note that the HTML tags in the body of the document no longer contain additional style instructions.

When a style is used to define a tag internally in this way, the styles apply to every time the defined tag
is used in the source code. Although this significantly reduces the repetition of code in the document it
creates a problem with larger websites as the same styles must be included in each web page in the site.

4
Cascading Style Sheets & HTML
External Styles
Method three removes the styles from the HTML source code and places them in a separate document
called a cascading style sheet.
The two files are linked by adding the highlighted line below to the HTML source code. The browser
interprets this by loading the named style sheet (in this example - “External StyleSheet.css”) and
applying the style definitions it lists when displaying the web page.

The HTML source code file and the


cascading style sheet file are
combined by the browser to produce
exactly the same web page as in the
previous two methods.

5
Cascading Style Sheets & HTML

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.

6
Cascading Style Sheets & HTML
For large websites, cascading style sheets are essential as they:
● reduce workload - styles are only
created once and are then applied to
every page Edited
● ensure consistency - if styles were CSS
applied internally every web page File
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.

7
Cascading Style Sheets & HTML

Selectors, Properties and Values


CSS files are highly structured and their use is very similar to learning a new programming language.
The files are written in blocks called selectors. Often these selectors are simply HTML tags but it is
possible to create your own. Each selector contains properties within two { } brackets. Each
property is then given a value.

Selector Properties

Values
Note:
● each property is separated from the value with a colon
● each property is separated from the next property with a semi-colon

Selectors with a large number of properties become harder to read if the properties are all squashed
together in a single line. For this reason it is common to split the properties over several lines as
shown below.

Once you know how a CSS file is structured, the next step is to learn how the different properties can
be applied to each selector. Unless you are professional web developer it’s unlikely that you will
memorise the extensive list of properties and values that are available.
At the back of this booklet you will find an Appendix of commonly used properties and values. Use
Appendix A when completing each practical exercise.
If you wish to use additional properties and values the Internet has many, many websites devoted to
the use of CSS files in website development.

8
Cascading Style Sheets & HTML

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 <h1> 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.

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


Cascading Style Sheets & HTML

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

10
Cascading Style Sheets & HTML

Practical Exercise 2 - Creating and Linking a CSS file


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

Step 2 Using a suitable editor, create a new blank document and save it as a .css file to your
own copy of the CSS Task 2 folder. Choose a suitable name for the file.

Step 3 Using a suitable editor open the HTML file called “Standard Algorithms.html”.

Step 4 Also open the “Standard Algorithms” file in a browser and look carefully at the web
page you are about to format.

You can see from the above web page that there is a main heading, several sub-
headings, a bullet-point list, paragraphs and several tables containing pseudocode.
These were created using the following HTML tags:
● <h1>, <h2> & <h3> three levels of headings
● <div>, <p> division sections and paragraphs
● <ul>, <li> bullet point list containing list items
● <table>, <tr>, <td> rows and data (cells) within a table

11
Cascading Style Sheets & HTML

Step 5 First you must link the HTML file to your CSS file.
Inside the <head> 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.

12
Cascading Style Sheets & HTML

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.
CSS file HTML file

● 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

13
Cascading Style Sheets & HTML

Practical Exercise 3 - Adding Classes to a Style Sheet


Step 1 Open the HTML and CSS file you used for the previous exercise in a suitable editing
application.

The html file contains 5 tables. An example of the table for the linear search
algorithm is shown below. Note that there are no borders set in the table.

Each table is constructed


using several rows (<tr>
</tr>), one for each line of
pseudocode and two columns
(<td> </td>) for each row.

The first column is used to


display the line number and
the second is used to display
the pseudocode.

Step 2 Your task is to create classes in the CSS file and use them in multiple <td> tags to
indent the loops and if statements in the pseudocode. You will have to work out how
to increase the blank space before some of the text.
A finished example is shown below.

Step 3 Show your teacher your completed work.

14
Cascading Style Sheets & HTML

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 <div> </div> tags. Style
sheet rules are then created to resize and position each of the boxes.

15
Cascading Style Sheets & HTML

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

Header

Navigation Content

Footer

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

16
Cascading Style Sheets & HTML

Complete the structure by adding a division for each of the four boxes.

Header

Navigation Content

Footer

You should now have 5 divisions with one of them enclosing the others.

Whole page

Header

Navigation

Content

Footer

To resize and position the boxes we will create ID selectors. (Remember IDs are unique to one
object.)

Whole Page Style


This allows us to set:
● the page width to 900 pixels
● the margin to 0 (no margin)
● the background colour of the page to white.

17
Cascading Style Sheets & HTML

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 <div>
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.

18
Cascading Style Sheets & HTML

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


<div> </div> 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 <div> </div> tags, IDs, properties and values
to position objects on the page.

Header
Menu Options

Advertising
Navigation Content
Space

Footer

19
Cascading Style Sheets & HTML
Appendix A - CSS Properties & Values

Text
Property Example Values Explanation
font-family ariel Sets the selectors font.
helvetica Note that if the name of the font is longer than one word it
“times new roman” should be enclosed in inverted commas.
font-size medium Text may be set to a small, medium, large size.
14px Set text to a fixed size in pixels (px) or points (pt).
18pt The percentage value indicates the size of text relative to a
75% parent element.
font-weight bold The thickness of each character can be adjusted using either
normal text values (bold etc) or more accurately using numerical
bolder values (500).
lighter For numerical values, 400 = normal and 700 = bold.
400
font-style normal Sets styles of text as seen in Word Processing applications.
underline
italics
text-decoration underline This property works in a similar way to font-style and is
overline commonly used to style hyperlinks.
line-through
text-transform capitalize Changes the first letter of every word into uppercase.
uppercase Turns all the text to uppercase.
lowercase Turns all the text to lowercase.
letter-spacing 0.5em Sets the size of the gap between each letter.
word-spacing 2em Sets the size of the gap between each word.
Word-wrap Normal Sets text to word wrap words at the end of a line (normal) or
Break-word split words if they are too long (break-word)
text-align left Text justification as found in Word Processing applications.
right Note the spelling of ‘center’ uses American English.
center
justify
text-indent 20px This indents the first word of a paragraph by a distance given
in px.
line-height 2 This specifies the distance between the lines in relation to the
font-size. So a value of 2 would be double spacing.

Colours
Property Example Values Explanation
color blue Colors (note the American spelling in HTML and CSS) can be
rgb(255,67,0) set on the majority of selectors using:
#ff349f ● a word - red, navy, yellow, black
● an r/g/b value - expressed as numbers between 0 and 255
background-color (237,129,255) or a percentage (60%,34%,0%)
● a hexadecimal rgb code - using either one digit (0-f) for
each color (f6b), or two digits (ff6c00)

20
Cascading Style Sheets & HTML

Margins, Padding & Borders


Property Example Values Explanation
margin 20px Sets a space in pixels around the outside of the entire selector.
margin-left 30px As above but allows for more control over which side of the
margin-right selector will have a margin.
margin-top
margin-bottom
padding 40px This defines a blank area of space inside the boundaries of a
selector.
padding-left 16px As above but allows for more control over which side of the
padding-right selector will have a padded area.
padding-top
padding-bottom
border-width 3px Sets a border width in px around the entire selector.
border-left-width 10px As above but allows for more control over the border
border-right-width thickness applied to each side of the selector.
border-top-width
border-bottom-width
border-color red Sets the colour of the border.
border-style solid Sets the appearance of the border as described by the values
dotted shown.
dashed
double

Positioning, Floating & Clear


Property Example Values Explanation
position static Ensures that the selector appears in the order given in the
HTML.
relative Takes the selectors normal (static) position and moves it
relative to this point.
absolute This sets the selector to ignore its order in the HTML code and
move to a set point on the web page.
fixed Similar to absolute but selector will stay in their position on
the web page, even when the page is scrolled in the browser.
top 0px Used in conjunction with the position property above to place
bottom 20px a selector at an exact position in the web page.
Left:20px would move the selector 20 pixels in from the left.
left
right
float left Floating a selector will move it to the left or right of the page
right with surrounding content flowing round it.
clear left Clear is used to cancel the effect of floating left or right
right selectors.
both

21
Cascading Style Sheets & HTML
Appendix B - HTML Tag Reference

Document
Tag Explanation of Use
<html> These tags appear at the top and bottom of every web page. They tell the browser that
</html> this is an HTML document.
<head> The head tag acts as a container for head elements. The head tag must include a <title>
</head> and may include <style>, <base>, <link>, <meta> and <script> tags.
<title> The title tag is used to enclose a title of your choice that will appear at the top of the
</title> browser when the page is viewed.
<title>My Hockey Home Page</title>
<body> The body tag encloses the all the content of the web page that will be displayed by the
</body> browser.
Example <html>
<head>
<title>My Hockey Home Page</title>
</head>
<body>
I have been playing hockey since the age of 6.
</body>
</html>

Layout
Tag Explanation of Use
<div> The division tag can be used several times throughout a document to spilt the HTML code
</div> into sections. They are often used with CSS files to layout a web page.
<p> The paragraph tag is used to define and enclose paragraphs of text.
</p>
<br> The break tag tells the browser to move the next object onto the next line.

Links
Tag Explanation of Use
<a> The a tag encloses an object to turn it into a hyperlink.
</a> It is used like this:
<a href=”http://www.rslearning.co.uk>Visit RS Learning Ltd</a>
<link> The link tag is used to load in external sources like style sheets and has no end tag.
<link rel="stylesheet" href=”Home Page Styles.css">

Graphics
Tag Explanation of Use
<img> The image tag includes a link to a graphic file and tells the browser how to display the
file.
<img src="smiley.gif" alt="Smiley face" height="42" width="42">

22
Cascading Style Sheets & HTML
Tables
Tag Explanation of Use
<table> Used to enclose the content of a table.
</table>
<tr> The table row tags enclose the data for each row of the table. If the table has three
</tr> columns each table row tag will enclose three sets of data tags <td> </td>.
<td> The table data tags each represent a cell in the table. All the information in a table,
</td> displayed by the browser, is enclosed by <td> </td> tags.
<thead> The table head tag usually encloses the top row of the table. It can be used to style the
</thead> headings or top row of the table differently from the rest.
<tbody> The table body tag encloses all the rows that make up the body of the table. It can be
</tbody> used to style the body content of the table differently from the headings.
<colgroup> The column group tag allows groups of columns to be declared and then styled.
</colgroup> Additional <col> tags contain the information about how the columns are grouped.
Example <table>
<colgroup>
<col style="background-color:red">
<col span="2" style="background-color:yellow">
</colgroup>
<thead style="background-color:red">
<tr>
<td>Name</td>
<td>Wins</td>
<td>Draws</td>
</tr> Name Wins Draw
</thead>
Pars United 29 5
<tbody>
<tr> Saints Academicals 18 16
<td>Pars United</td>
<td>29</td>
<td>5</td>
</tr>
<tr>
<td>Saints Academicals</td>
<td>18</td>
<td>16</td>
/tr>
</tbody>
</table>

Lists
Tag Explanation of Use
<ul> The unordered list tag creates a bullet point list. Each bulleted item should be contained
</ul> between list item tags.
<ol> </ol> The ordered list tag creates a numbered list. Each numbered item should be contained
between list item tags.
<li></li> The list item tags are used to enclose each item in a list.
Example <ul>
● Bread
<li>Bread</li>
<li>Butter</li> ● Butter
<li>Jam</li> ● Jam
</ul>

23

You might also like