Scribd
Upload
2 views6 pages

Ict Css Notes

The document provides an overview of Cascading Style Sheets (CSS) and their role in defining the style of webpages, including the use of attached and inline stylesheets. It explains the hierarchy of styles, CSS properties for backgrounds, fonts, and tables, as well as the use of classes for reusable styles. Additionally, it includes a worked example with CSS modifications for a teacher's web page.

Uploaded by

tourayabubacarr2009
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
2 views6 pages

Ict Css Notes

The document provides an overview of Cascading Style Sheets (CSS) and their role in defining the style of webpages, including the use of attached and inline stylesheets. It explains the hierarchy of styles, CSS properties for backgrounds, fonts, and tables, as well as the use of classes for reusable styles. Additionally, it includes a worked example with CSS modifications for a teacher's web page.

Uploaded by

tourayabubacarr2009
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/ 6

Cambridge (CIE) IGCSE ICT Your notes

CSS in the Presentation Layer


Contents
CSS

© 2025 Save My Exams, Ltd. Get more and ace your exams at savemyexams.com 1
CSS
Your notes
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="styles.css">
</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 "styles.css"
If the CSS file is in a subfolder named css, the path would be "css/styles.css"

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


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

© 2025 Save My Exams, Ltd. Get more and ace your exams at savemyexams.com 2
The cascading order, from highest to lowest priority, is:
1. Inline styles (inside an HTML element) Your notes
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:
Backgrounds
Fonts
Tables

Backgrounds
Background colour: Set the background colour using the background-color property
E.g. background-color: blue;
Background images: Set a background image using the background-image property
E.g. background-image: url("image.jpg");

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;
}

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
Size: Control the width and height of a table using width and height.
E.g. width: 100%; height: 200px;
Background colour: Use background-color to set the background.
E.g. background-color: yellow;
Borders: Apply a border using the border property including colour, thickness, and
visibility.

© 2025 Save My Exams, Ltd. Get more and ace your exams at savemyexams.com 3
E.g: border: 2px solid black;
Collapsed borders: Use border-collapse: collapse; to make borders appear as a single
line Your notes
Spacing: Control the space between cells with border-spacing.
E.g. border-spacing: 5px;
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
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("image.jpg");
}

Font properties
Control the font size, family, colour, and alignment
.big-blue-text {
font-size: 20px;
font-family: Arial;
color: blue;
text-align: center;
}

© 2025 Save My Exams, Ltd. Get more and ace your exams at savemyexams.com 4
Size
Control the width and height with width and height Your notes
.small-cell {
width: 30px;
height: 30px;
}

Background colour
Use background-color to set the background
.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;

font-family: Times, Helvetica, serif;

© 2025 Save My Exams, Ltd. Get more and ace your exams at savemyexams.com 5
font-size: 24pt;
text-align: center;}
h3 {color: #00ff00; Your notes
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 }
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]

© 2025 Save My Exams, Ltd. Get more and ace your exams at savemyexams.com 6

You might also like