CSS Implementation (SQA National 5 Computing Science): Revision Note

CSS Implementation

Practical applications

• In exam and assignment tasks students may be asked to:

  • Style a specific section or <div> using a class or ID

  • Change the colour or alignment of headings or paragraphs

  • Style hyperlinks using selectors like a { color: green; }

  • Apply styles only on one page using internal CSS

  • Apply shared styles across several pages using an external stylesheet

  • Set the size of an image using CSS:

img { width: 200px; height: 150px; }

Example

• To see how HTML works with this CSS example, read the HTML Implementation Notes, which show exactly how these elements are styled across pages

/* 1. Base page styles */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #222222;
  background-color: #f5f5f5;
}

/* 2. Header and navigation */
#mainHeader {
  background-color: #004080;
  color: #ffffff;
  text-align: center;
  padding: 20px;
}

#mainHeader h1 {
  font-size: 32px;
  margin-bottom: 5px;
}

.tagline {
  font-size: 14px;
  color: #cce0ff;
}

/* Navigation links */
.nav-link {
  font-size: 16px;
  color: #ffffff;
  text-decoration: none;
  margin: 0 10px;
}

.nav-link:hover {
  text-decoration: underline;
}

.nav-link.active {
  font-weight: bold;
}

/* 3. Main content sections */
main {
  max-width: 900px;
  margin: 20px auto;
}

.feature {
  background-color: #ffffff;
  padding: 15px;
  margin-bottom: 15px;
}

.feature h2 {
  font-size: 22px;
  color: #004080;
  margin-bottom: 5px;
}

.feature p {
  text-align: left;
}

/* Highlighted section using another class */
.highlight {
  background-color: #fff8d6;
}

/* 4. Image styling */
.feature-image {
  width: 100%;
  max-width: 350px;
  height: auto;
  display: block;
  margin-top: 10px;
}

/* 5. Footer */
#pageFooter {
  background-color: #004080;
  color: #ffffff;
  text-align: center;
  padding: 10px;
  font-size: 14px;
}

Breakdown of what is going on

1. Base page styles

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #222222;
  background-color: #f5f5f5;
}

• Selector: body

  • This targets the whole page

• font-family: sets the default font for all text on the page

• font-size: base text size

• color: the default text colour for the page

• background-color: light grey page background

2. Header and navigation

#mainHeader {
  background-color: #004080;
  color: #ffffff;
  text-align: center;
  padding: 20px;
}

• Selector: #mainHeader

  • This is an ID selector. It matches <header id="mainHeader">

• background-color: dark blue header background

• color: sets text colour inside the header to white

• text-align: center: centres the header content horizontally

• padding: space inside the header between content and edges

#mainHeader h1 {
  font-size: 32px;
  margin-bottom: 5px;
}

• Selector: #mainHeader h1

  • This targets only h1 elements inside #mainHeader

• Makes the title bigger and slightly separated from the tagline

.tagline {
  font-size: 14px;
  color: #cce0ff;
}

• Selector: .tagline

  • This is a class selector. It matches <p class="tagline">

• Changes font size and colour for the tagline only

.nav-link {
  font-size: 16px;
  color: #ffffff;
  text-decoration: none;
  margin: 0 10px;
}

• Selector: .nav-link

  • Applied to each <a> that has class nav-link

• Text properties:

  • font-size

  • color

  • text-decoration: none removes the underline

• Margin adds horizontal spacing between links

.nav-link:hover {
  text-decoration: underline;
}

• Selector: .nav-link:hover

  • Pseudo class

  • Styles the link when the mouse is over it

• Gives the classic underline hover effect

.nav-link.active {
  font-weight: bold;
}

• Selector: .nav-link.active

  • Matches <a class="nav-link active">

• font-weight: bold makes the current page link stand out

3. Main content sections

main {
  max-width: 900px;
  margin: 20px auto;
}

• Selector: main

  • Targets the <main> element

• max-width: keeps content in a readable column

• margin: 20px auto: vertical margin 20px, horizontal auto centres the block

.feature {
  background-color: #ffffff;
  padding: 15px;
  margin-bottom: 15px;
}

• Selector: .feature class, reused for each feature section

• White background against the grey page

• Padding adds space inside

• margin-bottom separates each block

.feature h2 {
  font-size: 22px;
  color: #004080;
  margin-bottom: 5px;
}

• Targets h2 tags inside .feature

• Bigger, coloured headings for each section

.highlight {
  background-color: #fff8d6;
}

• A class that changes background colour

• When combined with .feature in HTML (class="feature highlight"), it tweaks one section without duplicating lots of CSS

4. Image styling

.feature-image {
  width: 100%;
  max-width: 350px;
  height: auto;
  display: block;
  margin-top: 10px;
}

• Selector: .feature-image, used on the <img> element

• width: 100% and max-width: 350px: image can scale but never exceed 350px wide

• height: auto: keeps aspect ratio

• display: block and margin-top: pushes it onto its own line with space above

5. Footer

#pageFooter {
  background-color: #004080;
  color: #ffffff;
  text-align: center;
  padding: 10px;
  font-size: 14px;
}

• ID selector: #pageFooter matches <footer id="pageFooter">

• Uses background colour and text colour for a consistent footer bar

• Small font size and centred text