CSS: Styling (OCR A Level Computer Science)
Revision Note
Written by: Jamie Wood
Reviewed by: James Woodhouse
Writing CSS: Styling
CSS can be used to style individual elements e.g. all of the h1s or all the paragraphs
h1{
color:blue;
}
CSS can also be used to style classes by adding a . before the class name
.infoBox{
background-color: green;
}
Identifiers can be styled by adding a # before the identifier name
#menu{
background-color: #A2441B;
}
Styling can also be done inline (in the HTML). The examples below will cover both
<p style="background-color: lightblue;”> Save My Exams </p>
Multiple properties can be included in the styling
#header {
background-color: lightblue;
padding: 10px;
text-align: center;
}
Examiner Tips and Tricks
Your code must be exactly what it appears on this page. So color must be spelt the American way as colour doesn’t work in CSS. Make sure you know the properties listed below and don’t name them something which is incorrect e.g. text-colour instead of color
Also make sure your syntax is correct so use : instead of =
Properties
background-color
Example within HTML
<p style="background-color: lightblue;”> Save My Exams </p>
Example in external CSS
.h1{
background-color: lightblue;
}
border-color
Example within HTML
<p style="border-color: black; > Save My Exams </p>
Example in external CSS
.h1{
border-color: black;
}
border-style
Example within HTML
<p style="border-style: solid; ” > Save My Exams </p>
Example in external CSS
.h1{
border-style: solid;
}
border-width
Example within HTML
<p style="border-width: 2px; ”> Save My Exams </p>
Example in external CSS
.h1{
border-width: 2px;
}
colour
Note that this changes the font colour
Example within HTML
<p style="color: #ff0000; ”> Save My Exams </p>
Example in external CSS
.h1{
color: #ff0000;
}
font-family
Example within HTML
<p style="font-family: Arial;” > Save My Exams </p>
Example in external CSS
.h1{
font-family: Arial;
}
font-size
Example within HTML
<p style="font-size: 14px; ” > Save My Exams </p>
Example in external CSS
.h1{
font-size: 14px;
}
height & width
Example within HTML
<p style="height: 200px; width: 200px;” > Save My Exams </p>
Example in external CSS
.h1{
height: 200px;
width: 200px;
}
Colours
Colours can be referred to by name or hex number
Colour is spelt the American way in CSS (color) - the code won't work if written the British way (colour)
There are 140 colour names which can be used. Here is a selection:
Colours can also be given using a hex code e.g. #9ACD32
Every 2 characters in the hex colour code represent either red, green or blue
E.g. Red is #FF0000
Green is #00FF00
Blue is #0000FF
A colour picker can be used to get the hex code for a particular colour
Worked Example
The site also contains the following code.<div class="offer">All oranges 50% off.</div>
Complete the CSS code that would make any div elements of the class offer have an orange border.
2 marks
..........{ border-style: solid;
..........
}
How to answer the question:
The styling will apply to the div elements of the class offer. This is done using the .div name so .offer
It needs to have an orange border. The property for this is border-color so border-colour: orange
Answer:
The correct answer:
.offer{
border-style: solid;
border-color: orange;
}
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?
