CSS (OCR A Level Computer Science) : Revision Note

Jamie Wood

Written by: Jamie Wood

Reviewed by: James Woodhouse

Updated on

Writing 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

Classes & Identifiers

Classes

  • In CSS, a class is a type of selector that is used to apply a specific style to one or more HTML elements

  • A class is denoted by a full stop (.) followed by the class name. E.g. .myClass refers to any HTML element with the class attribute set to "myClass"

  • The class selector is versatile in that it allows the same styles to be applied to multiple HTML elements across the webpage

Identifiers

  • An identifier, also known as an ID, is another type of selector in CSS

  • An identifier is represented by a hash (#) followed by the ID name. For example, #myID would select any HTML element with the ID attribute set to "myID"

  • IDs are unique within a webpage, meaning that each ID can only be used once per page. This makes them useful for styling singular, distinct elements on a webpage

  • E.g.

<body>

  <div id="header">

    <h1>Study Guide</h1>

  </div>

  <div class="subject" id="maths">

    <h2>Maths Revision</h2>

    <p>Key topics to revise are algebra, trigonometry, and statistics.</p>

  </div>

  <div class="subject" id="english">

    <h2>English Revision</h2>

    <p>Focus on improving your grammar, vocabulary, and essay writing skills.</p>

  </div>

  <div class="subject" id="science">

    <h2>Science Revision</h2>

    <p>Remember to revise the core concepts in physics, chemistry, and biology.</p>

  </div>

</body>

Here’s an example to illustrate the styling of classes and IDs:

/* styles.css */

#header {

  background-color: lightblue;

  padding: 10px;

  text-align: center;

}

.subject {

  border: 1px solid black;

  margin: 10px;

  padding: 10px;

}

#maths {

  background-color: #FFDDDD;

}

#english {

  background-color: #DDFFDD;

}

#science {

  background-color: #DDDDFF;

}

This is what the page looks like:

Example webpage using different formatting using CSS for IDs and classes
  • All the subjects have the same border and heading style but each one has a different coloured background

👀 You've read 1 of your 5 free revision notes this week
An illustration of students holding their exam resultsUnlock more revision notes. It's free!

By signing up you agree to our Terms and Privacy Policy.

Already have an account? Log in

Did this page help you?

Jamie Wood

Author: Jamie Wood

Expertise: Maths Content Creator

Jamie graduated in 2014 from the University of Bristol with a degree in Electronic and Communications Engineering. He has worked as a teacher for 8 years, in secondary schools and in further education; teaching GCSE and A Level. He is passionate about helping students fulfil their potential through easy-to-use resources and high-quality questions and solutions.

James Woodhouse

Reviewer: James Woodhouse

Expertise: Computer Science Lead

James graduated from the University of Sunderland with a degree in ICT and Computing education. He has over 14 years of experience both teaching and leading in Computer Science, specialising in teaching GCSE and A-level. James has held various leadership roles, including Head of Computer Science and coordinator positions for Key Stage 3 and Key Stage 4. James has a keen interest in networking security and technologies aimed at preventing security breaches.

Download notes on CSS