Lesson video

Hi, I'm Allen Heard, and this is lesson three of six for developing for the web, and this one is called Taking Shortcuts.

There is a prerequisite for this lesson.

You will need to have completed lesson two, as you need a completed HTML file that was completed during that one.

If you haven't completed that, please do so.

Turn off all notifications on mobile phones, remove any distractions that are nearby, pause the video until you're settled, and then we can make a start.

Okay, in this lesson, we'll describe cascading style sheets or CSS, we'll use CSS to style some static webpages, and we will assess the benefits of CSS.

So remember back in lesson two, when we started formatting some HTML code using the style attribute and we put the colour next to it.

So for instance, in the code, you can see, we styled heading two to be coloured red.

What you will have noticed is if we wanted to do that again, somewhere in that HTML file, we'd have to do that.

We'd have to put that same style tag next to the heading, once more.

This can be very time consuming, if we've got a lot of things that we need to format in there.

Alternatively, you can use a separate CSS file.

You can format parts of the website and the structure of the website, all in one place to save you doing it on each individual line.

So a style sheet defines how tags and properties in HTML are formatted.

Tags are modified and they all take on the properties defined within the sheet.

Crucially, as mentioned previously, we only need to make changes in one place for a specific tag, and then that would apply to all instances of that tag throughout the HTML page.

Here's an example.

So on the left, you can see, we have an example of a CSS file and we can see it's says h2 and then we've got some curly braces, and nested within that we have the attribute colour, and then we're choosing red.

That will be a separate file.

Then we have a HTML file.

Well, we already know about the housekeeping and making sure we've got the doc type in there, and the opening and closing HTML and body tags, but in here, it just says <h2>Pig one, there's no styling information in there whatsoever.

What you would see in the webpage, on the right, is the heading coloured in red, and also we'd need to link the style sheet to the HTML file, and you'll find how to do that later on, but essentially what you're looking at here, is an example of what we put in the CSS file, what we're putting in the HTML file, and what the output will look like on the webpage.

So a CSS file is created in the same way as the HTML file will be, through a text editor.

The CSS file is then loaded through the HTML file.

We'd have a link at the top of the HTML file showing the location and the file name of that CSS file, and then whatever formatting is explained within there, or as detailed within there, that would then appear on the webpage that you see.

So here you can see kind of an example, HTML file goes that way to get the CSS code, it brings it back in, stands it accordingly, and then you can see the resulting HTML webpage on the right-hand side there.

So let's have a look at a demonstration to see this in action.

Okay, so let's take a look at how CSS works with our HTML file.

So if you remember from last time, when we start a HTML file, we need to state the doc type, and in this case, it's HTML, and we also need an opening HTML tag and an opening body tag.

Hope you remember that we do need to close whatever tags we have open, so I'll just close these two, there we go, and I've got an image on my desktop of some snails, so I'm going to make a page that's got a heading that says all about snails, close the heading one tag, and then what I'm going to do is, I'm going to add my image.

So img src =, and it's in the same place as my webpage.

I'm going to save my webpage on the desktop, so I can just put the file name, and for this image, I'm going to set the width to 50%, there we go.

So a fairly straightforward page, and I'm going to save this.

Don't forget, by the way, you need to take this.

txt off, otherwise it'll save it as a text file and we definitely don't want that, and I'm going to call this snailpage.

html, there we go.

So this is how we would normally create a page.

If I open this one up, you can see, there we go.

We've got, all about snails, which is pretty good.

It looks nice.

Okay, so let's see what difference we can make to this with some CSS.

So in a separate text file, I'm going to say, when you see the image tag, what I'd like you to do, or what I'd like the browser to do, is put a border around it, four pixels wide, you can change that if you want to, and I'd like it to be solid, and I'd like it to be green to match the kind of nature aspect of my snails picture, and also, if I have a heading one anywhere, I would like to do, I would like to make my heading colour, I'm going to choose green, there we go, and I've also forgotten to put that on the top of that one, you must need a semi-colon there as well, and then I will close that.

So this is my CSS, my cascading style sheet, and what this is saying is anywhere it finds an image, it's going to put a border around it that's four pixels wide and it's green, and anywhere it finds an h1 tag, it's also going to change the colour of that to green, excuse me.

So if I save this now, just in the same way as I saved my HTML file is.

HTML.

I must put.

CSS on the end of this one, and again, change it to All Files, so it will put the extension as we want it.

So now on the desktop, you can see my style sheet and my snail page.

Now, if I was to refresh my snail page at the minute, nothing's going to change because I haven't linked it to my HTML page.

So at the moment, this is just a standard header.

So what I need to do, is in here, is put a link to that style sheet.

So I'm going to say, link, and then it's going to be a stylesheet, and the type, is going to be text/CSS, and what it's actually called style.

CSS.

So whatever you've called, whatever you choose to call your style sheet would need to be in there.

So they're all, all that is on one line, so it looks something like that.

I'm going to press Ctrl + Save, to save my new HTML file, and now when I refresh my webpage, it will link to the CSS file, look at its contents, and then format my webpage accordingly.

So you can now see that this has changed to green.

We've got a border around the image that's green as well.

So the benefit of doing this is if I was to have multiple h1 tags in my HTML file, I wouldn't need to add the style option here to every single one of them, all I would need to do is change the style or the colour in here, and that would apply to all h1.

Similarly, you could do it for h2, and you could choose what all your headings for h2 are going to be like, and if they're going to be centred or whatever, so changes only need to be made in one central place.

So that's the benefit of cascading style sheets.

Okay, so now I've got a task for you called creating and using CSS.

There are three parts to this task.

You will need the HTML file that you created last lesson, and as I said at the beginning, if you don't have that, you'll need to go back and do that lesson first.

In this task you'll be creating a CSS file and using it in conjunction with the HTML to style the webpages that you created using the task sheet, follow the instructions and complete the task.

Okay, how did you get along with that task? Well, here's an example on the right-hand side of what it might look like.

I created another one with a heading and around that image of those hot air balloons there is a blue border, and we've got some text underneath.

When it said solid blue on the task sheet, on the worksheet that you were using and following, it said solid blue, you can replace that word solid with some other examples, for instance.

So you can use dotted, dashed, and double, like you can see there.

There are some others that you can use, which you'd be able to reference, be able to research yourself, however, some of those depend on the weight of the border, the pixel width, and the colour too.

So now I'm going to look at some other ways in which we can use CSS to style our webpage.

Take a look at the code opposite.

You can pause the video for a second, if you want to.

What do you think the effect might be on your webpage, if you added the code on the right to your CSS file? Okay, well, we've got a background colour in there for changing the colour to ivory, and we've got a font family of verdana, so it's changing the font of the body text.

It's also changing the heading to blue and it's centering it also.

So in this task, there are two parts to this one.

You can use the worksheet and make changes to your CSS file.

Make sure you test that they're being applied by opening your HTML file in a browser.

You can pause the video and complete the task.

Okay, so there are two images on this screen that you can see now.

The one on the left is for part one, and we had the ivory background for the page.

We had a blue heading and a blue border around the images before, and you can see that the whole background of the whole page is that ivory colour.

For part two, we had the same thing, the same code in our CSS file, the only difference was we changed the heading two, or we've added a heading two here, and this one now says, how does it work in green, and the font is changed to arial on this one.

Okay, so I hope you've enjoyed that lesson, learning about cascading style sheets.

As always, there is a quiz to assess your learning during this lesson.

We'd love you to share your work with Oak National, so if you'd like to, please ask your parent or carer to share your work on Instagram, Facebook, or Twitter, tagging @OakNational and #LearnwithOak.

I'll see you next time.