3 Using CSS to create neat format and layout.

Learning Objectives

  • Learn about the need for uniform code across each page of a website.
  • Create a basic stylesheet.
  • Create a layout for the website design, which can be applied to each page in the site.

Learning Outcomes

Must understand what css is used for, and why it can save time. (Level 5)

Should make a simple style sheet to change the formatting and layout of the website. (Level 6)

Could use div tags to create a uniform layout  (Level 7)

Keywords

Words to learn:  CSS, Tag, Style sheet, semi-colon, div

Starter

Watch this video:

Main

Go to the Start Menu and Computer.  Open your H: drive and find your y9html folder.  Inside this folder, create an “images” folder :

Open Brackets – it should remember your folder from the last lesson.

Using the Internet, find some images of your favourite actor or actress.  Save your images to the images folder you have created.

*TIP*  Don’t save the images with long names which contain strange characters.  This will lead to no end of trouble when you write your code:

You can see here that some names are VERY long and complex.  Right-click and select rename to choose something more appropriate (e.g. freeman1.jpg then freeman2.jpg etc).

Now, we can put some text and images into our webpage as before, but this time we can use the <img src=””> tag.  In between the quote marks put images/ followed by the name of your image.  For example:

<img src="images/Martin-Freeman.jpg">

Make sure you save and test this by going to the File menu and choosing Live Preview.

We have absolutely no indication of how this material should be displayed.  HTML helps us by giving us text and images etc. It doesn’t let us format the information though.  In the last lesson we used style sheet information in a style tag, however this isn’t the best way of doing it.  As the video suggested, for this, we can use CSS in a stylesheet.

In Brackets, click File and create a new file.  Save it as stylesheet.css – this MUST be saved in the same folder as the index page.

CSS lets us re-format html tags,  and also create our own tags.  In order to use it, we have to tie the web-page to the style sheet.  Add this line of code to the <head> tags  of your index.html file:

snapshot9

Now we can use the stylesheet!

We’ll start by changing the behaviour of the <body> tag.  Remember you wanted cool colours and fonts?  Here it comes:

snapshot10

Add this to your stylesheet,  (the empty file you made and saved as stylesheet.css), save it, and load the page up…

All pages that use this sheet will now have a green body.

Now let’s change the font size  (the writing is small after all!)

snapshot11

Cool fonts!

How about changing fonts?  Normally you’re limited to the font installed on the computer used to view the website.

We can thankfully add some more interesting fonts to our website using Google Fonts.

First visit Google fonts.  Select an interesting font, and click the Plus button.  You will notice it comes up with a black bar that says “1 Family selected”.  Click the black bar:

Copy the code from the Embed Font section into your index.html <head>

Finally, copy the code (css for the font) from step 4 into your css code, and make sure you’ve saved both your index.html file and your stylesheet.css file:

Now refresh your page in Chrome, and… hey presto!!

It would be fair to say that our image is a little big.  Why not just over-ride the <img>  tag in our stylesheet to make sure images default to a sensible size?

snapshot17

Main 2: Div tags

So now we can change fonts and colours by over-riding html tags.  Now we need to go one step further and look at the layout of our pages.  We can make “containers”  and specify their position.  This is is really useful as we can very quickly create a neat professional looking page layout.

Look at this screenshot:

C64-left

You can see this fairly standard web page can be split into different sections.  In fact, using CSS, all pages on this whole website will probably have the same layout.  We can achieve this very easily with our css stylesheet.

To do this, we add an “id tag” to our stylesheet:

#menu {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}

We can then add a “div” tag to the index page:

<div id=”menu” >a link – another link – another link </div>

The “div” tag creates a divider, or container on the page.  Refresh the page in the browser to see the effect of your new container…

Now add this code to the stylesheet:

#header{
background-color:black;
color:white;
text-align:center;
padding:5px;
}

and this to the index page:

<div id=”header”> This is the header </div>

The stylesheet:

#content {
    width:350px;
    float:left;
    padding:10px;
}

The index.html page:

<div id=”content” >Some content would go here:   </div>

So you can see we’re creating named boxes which “float” – so we can specify their position, width, height, background colour and  much more.

Task:

  1. Try to finish off the layout from the image above.  You’ll need to add to both your stylesheet and your index page.  You’ll need a “sidebar” container, and also a footer.
  2. Take a screenshot of both the .css code and the finished page for your books.
  3. Draw your own design for your fansite. Make sure you have a sensible layout of boxes and columns.
  4. Now, edit and adapt your index page to match your own layout, and screenshot both your page and your code.