CSS
What are Cascading Style Sheets (CSS) ?
A Cascading Style Sheet is used to format the appearance of web pages. They can be applied to multiple web pages in a site or they can affect only a single page.
HTML provides the Structure, with CSS providing the presentation
Style Rules
A style rule consists of a few main parts:
selector - this selects which HTML elements are to be styles
property - this is which CSS property is going to be changed
value - this is what value is being changed for the property
A declaration consists of a valid property and value. A rule may contain multiple declarations.
This rule would style all H1 elements as blue and size 12 font.
A style rule has the following structure. You will notice that there is a semi colon ; separating each pair of CSS property and value.
Properties
At National 5 you are expected to be able to use the following CSS properties:
Text: Font (font-family,font-size)
Color and Background Color
Alignment (left, right, centre or justified)
Font-family property
The font-family property is used to choose the font for a piece of text. You can also select a backup font in case the first one isn't available.
There are some common font-families:
Serif vs Sans-Serif Fonts
Serif fonts such as Times New Roman have small serifs or accentuations on the end of their font characters. They may also have different thicknesses. Sans-Serif fonts such as Arial or Verdana do not.
Examples of the differences between Sans-Serif fonts such as Arial and Serif fonts such as Times New Roman
Using the font-family property.
This rules in the example below try to find the font called Times New Roman to style all level 1 Headings, if that isn’t available it will display the default Serif font.
This internal stylesheet styles both levels of headings using different fonts.
A generic font family should be the last item in the list of font family names.
Using the font-size property.
The font-size property sets the size of the text. There are various measures you can use for this but at N5 we will use:
Pixel Size (px)
Keywords: The size of the text relative to the browser default with various sizes from:
xx-small, x-small, small, medium, large, x-large, xx-large
Color property
The color property sets the foreground colour of a particular element. You can specify the colour by the following methods
Named Colours
rgb Values
Hex Colour Codes
Named Colours
In the first version of CSS (1996) there were 16 named colours. There are now 148 named colours (CSS 4 July 16) that are pre-named and a sample is shown to the right.
A useful utility is http://htmlcolorcodes.com/
Color Codes(Hex Values)
Colour codes can be constructed using the mix of Red, Green and Blue (in hex values).
An example rule is shown to the right - this would style all h1 elements red.
Structure of the Red Hex Colour Code
Color Codes(rgb Values)
Colour codes can be constructed using the mix of Red, Green and Blue but this time will have a minimum value of 0 (none of that colour) and maximum value of 255.
An example rule is shown to the right - this would also style all h1 elements red.
Structure of the Red Colour Code using RGB codes (min = 0, max = 255)
Color Property Examples
The examples below will show examples and output of the various different methods to use with the color property. They happen to be stored in an internal stylesheet.
Background -Color
The background-color property sets the background colour of an element and uses the same methods to specify colours as the previous color property but styles the background of an element.
To change the background colour of the page, use the <body> selector and then set the background-color property as shown in the gallery below.
Text-Alignment Property
The text-alignment property is used to control how the content in an element is displayed. There are various properties but we will look at the following:
left
right
center
justify
The red line shows the line of justification that is applied in each case