CS Notes

Writing CSS - Styling

3 min read

  • 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:

140 colours

  • 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 . followed by the class name so .offer

It needs to have an orange border. The property for this is border-color so border-color: orange

Answer:

The correct answer:

.offer {
  border-style: solid;
  border-color: orange;
}

Graph View

Backlinks