CSS
Introduction
HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are two of the main tools for designing and and displaying websites and web pages. If they are combined with a client-side processing language like JavaScript to add dynamic and interactive content, then websites can be built that are clear, memorable, useful, informative, accessible, organised and maintainable. This section deals with CSS.
CSS (Cascading Style Sheets)
The content of a web page and the instructions that tell the browser how to layout the content are divorced in well written websites. This is achieved by writing two files for a web page. The first file, called a Cascading Style Sheet, or CSS file, holds the layout instructions that tells a web browser how to layout any information on the web page. It deals with actual layout, the fonts to use, the size of the fonts, the colours to use, how to lay out tables, pictures and so on. The second file is the HTML file. This file contains only the content you want to display on a web page. You can set up many different 'style sheets' and use them at any time for any of your web pages. For example, you might have some tags in a style sheet that say "Display all headings in size 1, underlined and red". If this style sheet is applied to a web page then whenever it comes across a piece of information that's a title, it formats it according to the style sheet’s instructions. Style sheets in HTML are very useful. Imagine, for example, you have written 100 pages of information, each with a green page background. If you changed your mind and wanted a blue background, you would only need to change one page, the style sheet, instead of 100 individual pages!
What do OCR students need to know for the AS and A Level qualifications?
According to the OCR specifications for the AS and A Level qualifications, OCR students are expected to have an awareness of the following CSS instructions, and any other properties used in an examination question will be introduced in the question itself.
Learners are expected to be able to use CSS directly inside elements using the style attribute
<h1 style=”color:blue;”>
and external style sheets. In the style sheets they should be able to use CSS to define the styling of elements:
h1{
color:blue;
}
classes
.infoBox{
background-color: green;
}
and Identifiers
#menu{
background-color: #A2441B;
}
They are expected to be familiar with the following properties.
background-color
border-color
border-style
border-width
color with named and hex colours
font-family
font-size
height
width
Any other properties used will be explained in the question.
CSS tutorials
Because CSS has been around for so long now, there are thousands of excellent tutorials. Like HTML, you can easily write CSWS using any text editor e.g. Notepad in Windows and any web broswer. There are also editors, which do the same job as text editors but have additional features that make writing and testing CSS code that little bit easier. Don't use any word processors, as they make use of hidden codes in pages that can make the production of CSS very messy and problematic. You can find many CSS editors using Google:
but Notepad++ is my personal favourite.
A quick search for CSS tutorials, CSS beginner or Learning CSS will reveal many sets of step-by-step lessons for you to explore. Here are some favourites, which I have used in the past and can recommend:
A set of video lessons
An excellent and easy to follow tutorial by w3schools.com
Lissa explains css here
Echoecho.com
Code Academy
YouTube tutorials