Subject : ICT
Year: VIII
Term: II
CSS Notes : Web Authoring
What is CSS?
Cascading Style Sheets (CSS) define the style or appearance of a
webpage
CSS uses selectors such as classes or IDs
CSS can be placed within HTML or externally in a file
Multiple pieces of CSS can be combined
Where CSS is used within the HTML, this will be used rather than any
external CSS styling and will override the external stylesheet
Attached & Inline
What is an attached stylesheet?
An attached stylesheet is a separate CSS file that is linked to the HTML
page by a hyperlink
Attached stylesheets mean they can be edited separately to the HTML
This allows for the same styles to be reused across multiple pages
<head>
<link rel="stylesheet" href="[Link]">
</head>
Relative file paths for attached stylesheets
Relative file paths are used for linked stylesheets because they refer to
the location of the CSS file relative to the current HTML file
This makes the code more portable and easier to manage
E.g. if the CSS file is in the same folder as the HTML file, the path would
be "[Link]"
If the CSS file is in a subfolder named css, the path would
be "css/[Link]"
What is an inline stylesheet?
Inline stylesheets are written directly within a HTML tag using
the style attribute
The styles only apply to the webpage they are written into
<p style="color:blue;">This is a blue paragraph.</p>
Hierarchy of multiple attached stylesheets and inline styles
Subject : ICT
Year: VIII
Term: II
CSS Notes : Web Authoring
If there are multiple styles defined for the same HTML element, the style
closest to the element takes priority
This is called the cascading order
The cascading order, from highest to lowest priority, is:
1. Inline styles (inside an HTML element)
2. External and internal styles (in the head section)
3. Browser default
Styles
What are CSS styles?
Styles control the visual properties of an element in the body of a
webpage
Examples of elements that can be styled are:
o Backgrounds
o Fonts
o Tables
Backgrounds
Background colour: Set the background colour using the background-
color property
o E.g. background-color: blue;
Background images: Set a background image using the background-
image property
o E.g. background-image: url("[Link]");
Fonts
Control the appearance of text with font properties
This includes font-size, font-family, color, text-align, and more
p{
font-size: 14px;
font-family: Arial;
color: blue;
text-align: center;
Subject : ICT
Year: VIII
Term: II
CSS Notes : Web Authoring
}
Tables
CSS is used to style HTML tables, allowing users to define the appearance
of the table, table rows, table headers, and table data cells
o Size: Control the width and height of a table
using width and height.
E.g. width: 100%; height: 200px;
o Background colour: Use background-color to set the background.
E.g. background-color: yellow;
o Borders: Apply a border using the border property including colour,
thickness, and visibility.
E.g: border: 2px solid black;
o Collapsed borders: Use border-collapse: collapse; to make borders
appear as a single line
o Spacing: Control the space between cells with border-spacing.
E.g. border-spacing: 5px;
o Padding: Define the space between cell content and its border
with padding.
E.g. padding: 10px;
table {
width: 100%;
height: 200px;
background-color: yellow;
border: 2px solid black;
border-collapse: collapse;
border-spacing: 5px;
}
Classes
What are CSS classes?
Classes allow styles to be grouped together and applied to multiple
elements
Subject : ICT
Year: VIII
Term: II
CSS Notes : Web Authoring
Classes act at reusable templates
To define a class, use a period (.) followed by the class name
To apply a class to an HTML element, use the class attribute
Background colour
Use the background-color property
.red-background {
background-color: red;
}
Background images
Use the background-image property
.image-background {
background-image: url("[Link]");
}
Font properties
Control the font size, family, colour, and alignment
.big-blue-text {
font-size: 20px;
font-family: Arial;
color: blue;
text-align: center;
}
Size
Control the width and height with width and height
.small-cell {
width: 30px;
height: 30px;
}
Background colour
Use background-color to set the background
Subject : ICT
Year: VIII
Term: II
CSS Notes : Web Authoring
.yellow-cell {
background-color: yellow;
}
Horizontal and vertical alignment
Use text-align (horizontal) and vertical-align (vertical)
.center-align {
text-align: center;
vertical-align: middle;
}
Spacing, padding, borders
Use padding for space inside the cell, and border for cell borders
.padded-cell {
padding: 10px;
border: 2px solid black;
}
Collapsed borders
Use border-collapse: collapse; the table class to remove spaces between
cell borders
.collapsed-table {
border-collapse: collapse;
}
Worked Example
A teacher is creating a web page in HTML to display on the school’s intranet.
All colour codes must be in hexadecimal. It has the following style sheet
attached:
h1 {color: #ff0000;
font-family: Times, serif;
font-size: 30pt;
text-align: center;}
h2 {color: #0000ff;
Subject : ICT
Year: VIII
Term: II
CSS Notes : Web Authoring
font-family: Times, Helvetica, serif;
font-size: 24pt;
text-align: center;}
h3 {color: #00ff00;
font-family: Times, Helvetica, serif;
font-size: 14pt;
text-align: justify;}
body {background-color: #ad88e6;}
table {border-color: #000000;}
Having tested the web page the teacher needs to make some changes to the
style sheet.
Write down the CSS to:
a. edit style h1 so that the font is Comic Sans or, if not available, Arial or, if this is
not available, the browser’s default sans-serif font.
[3]
b. add a markup to the table style to set a 3-pixel wide, dashed external border.
[4]
c. edit style h3 so that the colour is set to black.
[1]
d. add a markup to the start of style h2 to display the text as bold.
[2]
Answers
a. font-family: "Comic Sans", Arial, sans-serif;
"Comic Sans", [1]
Arial, [1]
sans-serif; [1]
Must be in the correct order
b. table {border-color: #000000; border-style: dashed; border-width: 3px }
Subject : ICT
Year: VIII
Term: II
CSS Notes : Web Authoring
border-style: [1]
dashed; [1]
border-width: [1]
3px [1]
c. h3 {color: #000000;
#000000; [1]
d. h2 { font-weight: bold;
font-weight: [1]
bold; [1]
