CSS Reference Page

Introduction

Below is an example of a webpage, with some added CSS code.

The way that it works is that CSS ‘STYLES’ the HTML tags on the page. For example, you can see that the text written between the <h1> tag has now been styled so that it is size 20, yellow in colour and written in a different font.

How do we add CSS? Where does it go?

To add CSS code to our webpage, we write it between <style> tags.
Because CSS code is NOT page content, we don’t place our <style> tags between the <body> tags.
Instead, we add our <style> tags between the <head> tags at the top of our page of code.

An Example

Using CSS to change the background

Remember, the <body> tags can be thought of as the page, with the opening <body> tag as being the top of the page and the closing </body> tag as being the bottom of the page. So, if we want to change the background of the page we can apply some CSS code to the <body> tags.

Adding a plain background colour

The code below is an example of the CSS code required to add a colour to the webpage:

Adding a gradient background with multiple colours

With CSS we can also create gradient backgrounds where more than one colour can be blended together. The code below is an example of the CSS code required to add gradient backgrounds to the webpage:

Adding a page border

With CSS code it is also possible to add a page border. Often when we do this, we have to add some padding to the edges of the page, moving the page content in from the side and down from the top. Otherwise the border will be placed on top of the page content. Below is an example of the code required to add a border to the webpage:

…and if we want to the border to be slightly curved at the top-left corner, we can apply the following code:

Styling Images

We can also style images using CSS by applying some CSS code to the <img> tag. For example we could curve the edges of an image to improve its presentation. Below is an example:

The Current Issue with CSS

The issue that we have at the moment is that if we apply some CSS code to a particular tag (for example a <p> tag), the CSS will style EVERY SINGLE <p> TAG on the webpage. This is obviously fine if you want every piece of text to look the same, but imagine that you wanted to change the colour or font of certain sentences…with our knowledge so far, this would not be possible.

Introducing DIV Tags (Division tags)

To get over the problem outlined above, we can split our webpage up into divisions. For example, we could have some page content in section 1, some more in section 2 and so on. We could give each division an ID and we could then apply some CSS code to some tags BUT ONLY those contained inside a particular section.

Below is an example of using DIV tags on a webpage in order to create 3 invisible sections. Notice how each division has been given a name (an ID). For example #section1

In this next image you can see how CSS code can be applied to the <p> tags in different sections. This shows how we can style the same tag type (<p>) differently across different parts of our page:

This is the same example as above, with colours to show how the 3 lines of CSS code and the 3 divisions link up:

Finally in the example below you can see how CSS code can be applied to the whole of the webpage or to certain divisions only, depending on whether or not the CSS code begins with a division name (e.g.: #section1):

Share this page!

Testimonials

The ComputerScienceUK website includes a lot of very useful computer science resources for all year groups, which cover topics relevant to the current curriculum. They have saved me a lot of preparation time.

Ms HanlonTeacherSt. Anselm's CollegeEngland

Your computer science resources have been a life saver / time saver, so thank you for all the hard work!

Mrs MaunderTeacherAltrincham Grammar School for GirlsEngland

High quality computer science resources and worksheets – this has saved me hours of work. Great value for money, and well worth it. Many thanks.

Sioned WeeksTeacherPontypridd High SchoolWales

We are extremely pleased with the resources, there is no need for planning. We are with AQA , however there is enough overlap in the course content for us to utilize the resources.

Ms. MirzaTeacherSt.John Payne Catholic SchoolEngland

‘Computer Science UK’ resources have saved us a lot of time and have been very useful – great stuff!!

Mrs EdwardsHead of Computer StudiesChelmer Valley High SchoolEngland

These resources are well thought out, prepared and engaging. They enable me as a teacher to pick up the lesson packs and deliver, saving me lots of time. Would definitely recommend membership to colleges.

Mrs KnibbsCurriculum Lead ComputingKingstone Academy TrustEngland

Fantastic computer science resources which have saved me hours of work. Really impressed with the A-Level resources in particular.

Ms K AkhtarHead of ComputingSutton Coldfield Grammar School for GirlsEngland

As an NQT in a new school where I am the first CS specialist there wasn’t a lot in the way of lesson plans and resources for the CS GCSE. This fantastic website isn’t just fantastic value for money, it contains a veritable cornucopia of entertaining and educational lesson plans, with in depth knowledge and engaging tasks. I highly recommend this resource to any CS teacher.

Mr CollierTeacherAdmiral Lord Nelson SchoolEngland

I have found the resources very useful. They are well-thought out, cover the topic content and are suitable for the age range.

Mrs ChaudhrySubject Leader for ComputingChiltern Hills AcademyEngland

Teaching GCSE Computer Science for the first time as a non-specialist teacher, these resources have been invaluable to me. A real time saver and at a great cost.