IGCSEICTCIERevision Notes17. Website Authoring17.1 Website AuthoringCSS

CSS (CIE IGCSE ICT)

Revision Note

Becci Peters

Expertise

Computer Science

How to use CSS

  • The presentation layer of a web page is defined by CSS (Cascading Style Sheets). This layer deals with the layout, colours, fonts, and animations on the page
  • It separates the content (HTML) from the appearance of the web page
  • CSS allows for better control and flexibility in designing a web page

Inline Styles

External CSS is written in a separate file with a .css extension, and linked to the HTML document. This allows for the same styles to be reused across multiple pages. E.g.

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Inline CSS is written directly within the HTML tags using the style attribute. This applies the style only to that specific element. E.g.

<p style="color:blue;">This is a blue paragraph.</p>

Background Properties

  • 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");

Font Properties

Control the appearance of text with font properties. This includes font-size, font-family, color, text-align, and more. E.g.

p {
  font-size: 14px;
  font-family: Arial;
  color: blue;
  text-align: center;
}

Tables

CSS is used to style HTML tables, allowing us 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. This includes colour, thickness, and visibility.
    • For instance: border: 2px solid black;
  • Collapsed Borders: Use border-collapse: collapse; to make borders appear as a single line
  • 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;
}

  • Size: Control the width and height of rows, headers, and data cells just like with tables.
    • e.g. width: 50px; height: 50px;
  • Background Colour: Use background-color to set the background of rows, headers, and data cells
  • Horizontal and Vertical Alignment: Control alignment with text-align (horizontal) and vertical-align (vertical).
    • e.g. text-align: center; vertical-align: middle;
  • Padding: Define the space between cell content and its border with padding
  • Borders: Apply a border using the border property
th, td {
  width: 50px;
  height: 50px;
  background-color: white;
  text-align: center;
  vertical-align: middle;
  padding: 10px;
  border: 1px solid black;
}

Exam Tip

  • Be aware that inline CSS has the highest priority. If both external and inline styles are applied, the inline style will override the external
  • Keep in mind that CSS properties are case-sensitive. Always use lower case

Classes

  • Classes in CSS are used to style multiple HTML elements at once
  • 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. E.g.
.red-background {
  background-color: red;
}
  • Background Images: Use the background-image property. E.g.
.image-background {
  background-image: url("image.jpg");
}
  • Font Properties: Control the font size, family, colour, and alignment. E.g.
.big-blue-text {
  font-size: 20px;
  font-family: Arial;
  color: blue;
  text-align: center;
}
  • Size: Control the width and height with width and height. E.g.
.small-cell {
  width: 30px;
  height: 30px;
}
  • Background Colour: Use background-color to set the background. E.g.
.yellow-cell {
  background-color: yellow;
}
  • Horizontal and Vertical Alignment: Use text-align (horizontal) and vertical-align (vertical). E.g.
.center-align {
  text-align: center;
  vertical-align: middle;
}
  • Spacing, Padding, Borders: Use padding for space inside the cell, and border for cell borders. E.g.
.padded-cell {
  padding: 10px;
  border: 2px solid black;
}
  • Collapsed Borders: Use border-collapse: collapse; the table class to remove spaces between cell borders. E.g.
.collapsed-table {
  border-collapse: collapse;
}

Apply these classes to HTML elements like this:

<table class="collapsed-table">
  <tr class="small-cell yellow-cell center-align">
    <td class="padded-cell">Content</td>
  </tr>
</table>

Exam Tip

  • Remember, CSS classes begin with a period (.) in the stylesheet
  • The class attribute is used in the HTML document to apply a class

External CSS

  • External Styles are CSS styles that are defined in a separate .css file and linked to the HTML document. This allows for reusing the same styles across different web pages

  • To create external styles for HTML elements like h1, h2, h3, p, and li, simply specify the element and define the styles within curly braces {}. E.g.

h1 {
  font-family: Arial;
  font-size: 30px;
  color: blue;
  text-align: center;
}

h2 {
  font-family: Arial;
  font-size: 25px;
  color: red;
  text-align: left;
}

h3 {
  font-family: Arial;
  font-size: 20px;
  color: green;
  text-align: right;
}

p, li {
  font-family: Arial;
  font-size: 14px;
  color: black;
  text-align: justify;
}

  • In the above CSS, h1, h2, h3, p, and li tags have been given different font families, sizes, colours, and alignments. Also, p and li share the same style

  • To apply bold or italic styles, use the font-weight and font-style properties respectively:

h1 {
  font-weight: bold; /* makes text bold */
}

p {
  font-style: italic; /* makes text italic */
}

  • Comments in CSS are used to explain the code and make it more readable. They can be inserted anywhere in the code and do not affect the result

  • A CSS comment starts with /* and ends with */. See above for examples

Attached Stylesheets vs Inline Style Attributes

  • Attached Stylesheets: These are external .css files linked to an HTML document. They allow for reusing the same styles across multiple web pages. An attached stylesheet is linked using the <link> tag within the <head> tag
<head>
  <link rel="stylesheet" href="styles.css">
</head>
  • Inline Style Attributes: These are CSS rules applied directly to an HTML element using the style attribute. They affect only the specific element they are applied to
<p style="color:blue;">This is a blue paragraph.</p>
  • The main difference is that attached stylesheets allow for reusability and better organisation, while inline styles are used for single, specific modifications

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

  • 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

Characteristics of a Style and a Class

  • A Style is a set of CSS properties that define the appearance of an HTML element

  • A Class is a way of selecting multiple elements to apply the same style

  • The difference between them lies in their application: a style is used to define the CSS properties, while a class is used to apply these properties to multiple elements

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"

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

font-family: "Comic Sans", Arial, sans-serif;

"Comic Sans", [1]
Arial, [1]
sans-serif; [1]
Must be in the correct order

b. add a markup to the table style to set a 3-pixel wide, dashed external border.

[4]

table {border-color: #000000; border-style: dashed; border-width: 3px  } 

border-style: [1]
dashed; [1]
border-width: [1]
3px [1]

c. edit style h3 so that the colour is set to black.

[1]

h3 {color:  #000000;

#000000; [1]

d. add a markup to the start of style h2 to display the text as bold.

[2]

h2 { font-weight: bold;

font-weight: [1]
bold; [1]

Exam Tip

  • You are being asked to write code in a specific language so you must be exact:
    • Don't forget quotes around items like Comic sans
    • Check spellings including color not colour
    • Make sure you include delimiters where necessary
    • Make sure you include ;
    • Don't forget to write font-weight rather than font-type

You've read 0 of your 0 free revision notes

Get unlimited access

to absolutely everything:

  • Downloadable PDFs
  • Unlimited Revision Notes
  • Topic Questions
  • Past Papers
  • Model Answers
  • Videos (Maths and Science)

Join the 100,000+ Students that ❤️ Save My Exams

the (exam) results speak for themselves:

    Did this page help you?

    Becci Peters

    Author: Becci Peters

    Becci has been a passionate Computing teacher for over 9 years, teaching Computing across the UK helping to engage, interest and develop confidence in the subject at all levels. Working as a Head of Department and then as an educational consultant, Becci has advised schools in England, where her role was to support and coach teachers to improve Computing teaching for all. Becci is also a senior examiner for multiple exam boards covering GCSE & A-level. She has worked as a lecturer at a university, lecturing trainee teachers for Computing.