CSS (OCR A Level Computer Science)
Revision Note
Written by: Jamie Wood
Reviewed by: James Woodhouse
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. .
myClassrefers 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,
#myIDwould 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:
All the subjects have the same border and heading style but each one has a different coloured background
Last updated:
You've read 0 of your 5 free revision notes this week
Sign up now. It’s free!
Did this page help you?
