css-styling

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;

}

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 (opens in a new tab) 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 (opens in a new tab) can be used to get the hex code for a particular colour