CSS stands for Cascading Style Sheets. These are used when building webpages. Before we discuss CSS though, we must understand HTML. Web pages are usually created using HTML – Hypertext Mark Up Language. HTML is used to instruct the browser (e.g. Google’s Chrome or Apple’s Safari) on what and how to display a web page. This is done via the use of ‘tags’. HTML tags were invented by Tim Berner’s Lee and made public in 1991. There is a World Wide Web Consortium (W3C), which works to develop recommendations on how to develop web pages. These recommendations are continuously being updated, to enhance web design. The latest is HTML 5, released as a ‘W3C Recommendation’ in late 2014. HTML tags are relatively easy to understand and use. They are enclosed in chevrons <> to open and to close. A simple example is one that you may already be familiar with:

Heading 1.

. This will display a Heading 1. For lower level headings, we simply replace the 1 with 2 and so on. The tags also provide for displays such as paragraphs; lists; italics; bold and even buttons. HTML documents generally follow a structure; much like other programming languages. HTML can be typed on your computer using a text editor such as Notepad. It is then saved as an html document, which when opened with a browser will show a web page. Our examples shown here are displayed using Chrome. Let us look at an example:

1.      Create First Page

The HTML source code for the web page above is shown below:

1. – this tells the browser that the document is in HTML
2. – this opens a section for meta data – this tells the browser about the page; the information here is not usually visible on the webpage
3. – this will not be visible
4. Home Fred – although in the head, this is displayed as the title of the page

8. Fred’s website

9. Hi, my name is Fred.
10. This is my story.

Let us now add a (simple) navigation menu:

2.      addListforNav

The additional HTML source code for the page above is shown below:   an unordered list an unordered list  

• Home

– list item  

• About Fred

– as above  

• Contact Fred

– as above  

3.      addImage

Many websites make use of imagery to capture their visitors’ attention.  Let us now add an image. The additional HTML code to display the above is shown below:  the file path to the image, and the alt text for screen readers Life’s journey isn’t always clear

4.      addForms

As with images, many sites make use of forms.  These often rely on other code to interact with the backend of a website, such as php.  However, the browser can interpret HTML to display some types of form inputs.  Examples are shown below: The additional HTML code is shown below:

Login to our site here

– to indicate that we are creating a form

User name: –  is a line break (does not need the closing chevrons) Password:  – this will show dots, not the characters  

Are you happy today?

 Yes – radio button allows only one choice  No  

Where would you most like to live?

–dropbox shows available options Earth Mars Atlantis  

Which browser(s) do you use regularly?

 Chrome  IE –  Safari – more than one or all boxes can be checked.

Cascading Style Sheets (CSS)

Thus far our website has been devoid of colours and styling.  These are added using style sheets, commonly called Cascading Style Sheets, or CSS.  These allow a ‘master’ style to be created, much like the Master slide in packages used to prepare presentations.  The style can be added to any page required, by telling the browser its name and path on the computer. Every element on a page can be styled – this includes the headings; paragraphs; navigation links; images and so on. The code is written as for html, but it is saved as a .css file, to tell the bowser that it contains styling information. The css code selects each element, then shows the styling required. It contains extra syntax, such as the selectors; curly brackets and colons.  If any of these is missing, then the page will not have the desired look. Let us look at an example: Here we see the following changes:

• The page title now has a little icon next to it – a favicon
• The h1 heading – Fred’s Website – is now red and in the middle of the page
• The p text – Hi, my name is Fred… – is now displayed in purple
• The navigation list is now displayed horizontally, with separators between each link
• The h2 headings for the form inputs – Login to our site here…- are now displayed in blue
• The page colour is now grey.

There are two sets of code needed to display the page above.  Firstly, the styling – this as we saw earlier on, is stored in a css file, shown below:

5.      addStyle.css

li    { display: inline;  – this shows the navigation links as a horizontal bar } body  { font-family:  “Trebuchet MS”, Verdana; – this sets the font, in availability order font-size:  16px; background-color:  #cccccc; – colour code, not the American spelling! color:  #696969; padding: 3px; – spacing around the element to make reading easier } h1    { font-family: Georgia, serif; color:  #ff0000; font-size:  30px; text-align: center; } h2    { font-family: Georgia, serif; color:  blue; font-size:  20px; } p     { font-family: Georgia, serif; color:  purple; font-size;  12px; } We then call the css file and the favicon from the HTML document:

3. Home Fred

Here we have provided a brief look at how web pages are created and styled using HTML and CSS.  In another paper, we will look at the use of JavaScript and JQuery to add interactions to web pages. A bit of trivia – what is the difference between the web and the internet? – the answer to this and further information on HTML and CSS can, of course, be found on the web!