Lesson video

Hello and welcome to lesson four of our HTML and CSS unit.

I'm Ben, your computing teacher for this lesson.

Now in the previous three lessons you've been exploring HTML.

So this lesson we're going to start looking at CSS, your development to this course.

So all you'll need for this lesson is your computer, a web browser and you'll also need access to your replica account where hopefully you've been saving your laser tag website as we built it over the last three lessons.

So if you can clear away any distractions that you might have and when you're ready, let's get started.

Okay so in this lesson, you will understand the purpose of CSS and why it's needed in addition to HTML.

And we're also going to give you an opportunity to experiment with CSS by changing the style of the tags that you've learned so far in this unit.

So let's get started by talking about what exactly is CSS or CSS downfall, cascading style sheets.

Now possibly the best way to describe what this is, is we think about HTML describing, the structure of a website.

But then CSS describes the styling of the website and the presentation of the page maybe.

Okay.

Another way to think about that is relating it to us.

So HTML would be the structure of us.

So the skin, the bones that makes up us as human being where CSS is the styling.

So, the clothes that we might wear okay.

Now in addition, another web language is JavaScript, and we're not going to study that in this unit, but you may have heard of it.

But it is a common web language that is often used with HTML and CSS to provide inter activities such as doing something when a button is pressed.

So our first activity in this lesson is to take a quick look at some CSS.

So what I'd like you to do in a moment is head over to your worksheet and go to task one on your worksheet where you'll find a link to another website where you can experiment with some CSS code, okay.

What I'd like you to do is alter the code and just see what it does.

So I'm just going to head over to that website now to show you what I'd like to do.

So let me move to that now.

Okay, so hopefully you can see that in the video, now there we are.

So you can see in between the things called style tags here, we've got some CSS here.

Now this is a CSS, where you see background colour, you can see colour, text align, font family and font size.

What I'd like you to do is just play around with those values that you can see they're highlighted in blue, play around with them, see what effect it has on when you change them.

So you need to play around with them maybe for example change the font size to 50 and then run it and see what happens.

Okay, and if I head back over to my slides now, so there are also some questions that I'd like to answer.

So once you've finished playing around with that code and seeing what it can and maybe what it can't do is I'd like to answer the three questions that you can see there.

So what do you notice about the spelling of colour? Why is lightblue not two separate words? So maybe try separating them, see what happens and then why is style located in the head attack, okay.

So pause the video, head over to your worksheet now.

Okay and then have a, have a go with just playing around with that CSS that you see and then answer the questions and once you've done that, I'll be here when you get back.

Okay, so how did you get on with that activity? Well hopefully you've had an opportunity to play around with the values and found out what works and what doesn't work.

But did you answer the question for example, why do you think colour is spelled the way it is? When it is used in American spelling and we must make sure we use the American spelling of colour when applying any CSS because we spell it the, the British way, unfortunately it wouldn't work.

Okay, lightblue was all one word because separate words in CSS so, you'll get to find this as you get a bit more comfortable with CSS.

Things are either a single word or separated with a dash.

Okay, so let's just explore the code that you looked at.

Now every time we write CSS we select the tag we want to work with.

We say which property want to adjust and then give it a value that we want to assign to it.

So as you can see here we've got a selector and then we use the curly braces to decide what we're going to do with a, what we're going to do with that selector.

So we have a property and a value, and the property is separate, separated from the value with a colon and then you can see a semi-colon is used at the end of each line, okay.

So maybe that by itself is a bit confusing so let's look at the example.

So the selector that we can see here is P, now thinking about your HTML tags, that is a HTML tag and it obviously represents paragraph, okay.

So that is one of our selectors, so what other HTML tags do you know that we could count as selectors? Who has any power, any site or any paragraph tag, any HTML type that you used in lessons one to three? So paragraph, all the heading tags, H one, H two three four five six, maybe the list tags, anything like that, underlying tags, any tag that you've applied in HTML can be used in CSS to manipulate this properties, okay.

So we have, we have our selector so P followed by a curly brace, and then you have the property such as font size as you can see they're, separated by a colon and then what do you want the font size to be? So I put 12 pixels large, finish out with a semi-colon and then if we actually have anything else with paragraph.

The next line, we would then do the next property.

So for example colour and you can see that's spelled the American way.

So colour, colon and then the, the value red semi-colon.

And when you finished changing all the properties and values that you'd like to you, you then close your curly braces.

Okay.

Now, one thing to watch out for compared to maybe if you're using something like Python, when we run our Python further, we come up with an error.

Okay, and it'll tell us if there's a syntax error, it will tell us where the error is.

Unfortunately when you're using the CSS it won't tell you where the error is, it will only just display incorrectly, not do what you want it to do.

So the kind of really important thing to look out for is make sure that you've used your braces appropriately, so you, when you've opened the curly brace you close it and also make sure that you have used the semi-colons and you've used the colons in the right places.

So check all of those things if things quite, aren't quite working exactly how you'd like them to, okay.

So, in the example that you experimented with you were looking at CSS, if I'm going to start this again.

Three, two, one.

Okay, so in the example that we looked at, you'll notice that the CSS was in between these thing called style tags in each page.

Now, the problem with well, there are problems. Oh I just started again, right and start again.

Okay so three, two, one.

So you'll have noticed that the CSS that we applied, applied to that HTML file you were working on, and it was in between these tactical these style tags, okay.

Now you were looking at CSS that affected only the page that it was written on.

Now a better way to write CSS, is in a separate CSS file.

So why do you think that is? So just pause for a moment cause it might require the constant turn a little bit for you to think about what the answer to that would be.

So pause the video, see if you can think of an answer and then unpause, when you think you have an answer.

Okay so what do you think the answer is? So the best way for me to go through the answer is to read, we do the benefits of putting things in external style sheets.

So by writing CSS in an external file, all HTML files can be accessed by the same style sheet.

So this supports duplication of code and helps you to achieve a consistent level across all of your webpages.

So imagine if you wanted to apply CSS in the way that you have experimented with before in between the style tags in each individual page.

If you think about any websites that you've ever used, they might have one page, they might have five pages, 10 pages, 50 pages, they might even have a 100 pages.

So if we wanted to apply consistent styling to those 100 pages, we would need to copy and paste and duplicate the CSS in between the style tags on each one of those 100 pages.

So actually the most efficient and sensible way to go about this is actually create a CSS file, and just link all your HTML files to that CSS file.

And that would make much more sense and make things much more efficient because if I wanted to change the stylings of the hole that applied to the whole site, I'd just change it in one place, rather than all the places, all HTML files.

So what I'm going to do is give you a demonstration about how to do this.

And I'm going to head over to a replica, which is linked inside your worksheets while we're going to come start in just a moment, and we'll go through how we're going to create an external style sheet and link to it.

Okay so this is the file that you've been given, that you can start working with.

So I'm going to give you a demonstration to how we can create our first CSS file.

Okay, so what I'm going to do is if, once you open this link by the way then don't forget to flow the project and then that way it'll save it under your replica account.

So you can always look back at this.

So you notice this as the files that we've been building up with our laser tag website, so what I'm going to do is create a style sheet.

So to why I can do that, if I hover over the icons at the top, where you can see the index HTML rules to HTML, there's a little icon there with a, with a white plus on it and you click add file, okay.

Now I'm going to give it a name.

So I'm just going to call it a styles dot CSS as really important that you finish it with dot CSS.

Okay, so that way your computer is going to know that is a CSS file obviously.

Okay, so I'm going to close that.

Now, now I've got access I've highlighted it, this is my CSS file.

So let's start off by adding some CSS.

So if we go back to my index HTML page.

I might just want to have a look at some tags that I can use.

Now which of the tag that applies to the whole page, which one is it that we can visibly see? Do you remember? So hopefully you're remembering that it's in body tag so that's going to be my selector, so I'm going to use my selector there.

So in my style CSS I'm just going to type in body, okay.

Then after that I'm going to use my curly braces, so I'm going to open my curly braces so on my keyboard and it's quite common to be in this place on the keyboard.

If you press shift and it's a book the square bracket, so near the enter key on the right-hand side of the keyboard.

So use not all software does this, but replica automatically closes the braces for you.

So I'm just going to hit a couple of spaces, and so anything between those curly braces, now I know it's going to be my CSS, okay.

Now I'm going to add in some background colour, okay.

So I'm just going to type in backgrounds.

Okay, now you notice again this is really helpful because you're not expected to remember all of this CSS, not a chance.

No programmer ever remembers all the commands that they can possibly use.

They remember the ones that they use most regularly.

So don't be afraid to just look up some CSS if you want to change some properties about something and you don't know what the CSS is, just give it a quick search on the internet and you'll find that selector.

But you don't need to do that for this unit, you just follow my lead and I'll make sure that you're comfortable with using a whole range of CSS types, okay? So I've used background there and you can see I've got colour appeared.

So I could just with my mouse select colour, or I could just continue typing.

So it got background dash colour, and then I'm going to use my column and I'm going to give it a colour.

Now you can pick the colour that you want.

It comes up with a whole range of colours that you can use but I'm just going to type in red, and then if you remember what symbol do I finish this off with? That's right it is a semi-colon, okay.

So I'm going to type in semi-colon right? So let's run this and see what happens.

Okay and nothing is visibly happy now why do you think that is? Well, the reason is because I put it in my style sheet.

Here's the style so CSS, but as I mentioned before we must link our HTML to this file.

We must tell our, our HTML files to go have look and find the stylings inside the, from the style dot CSS file.

Okay, so the way I do that is I click back on one of the pages I apply it to, okay.

And where am I going to put it? Because remember, do I want this link to be in the visible part of the website or the non-visible part? Well give you a clue it's a non-visible part, so where is that in my HTML? Okay so that is in between the head tags okay? So what I need to do is I now need to make a nice link to that file, okay.

So the way I do that is in my inside my head tags it really makes no difference where you put it inside the head target, it could be before or after title it doesn't really matter.

But what we do is we put in a link, so I'm just going to pipe in the wave link.

Okay and then I'm going to tell it to it's, it's style sheet.

So relation it is speech marks we put style.

Okay, so we say it is a style sheet and then the Href of it so the reference they link to where it is.

Okay, is well what we do is remember this is a local link because it's there, so we'd all need to do them between the inside my speech mark sorry, is typing the actual file name.

So it's styles dot CSS.

Okay and then I'm going to close the bracket okay.

So then we go to this mode close Chevron.

So now we've made a link to that style sheet so I've said there's a style sheet and here's the reference to the style sheet so let's see what happens when I've run it.

Hopefully it will work.

I'm going to run this, and there you go.

You can see that it is not white and it's applied that red background to my page.

Now if I click on rules of the park.

Okay, so why is that not got a red background? Well because I haven't made the link in my rules HTML file to this spreadsheet.

I'd rather be typed out again.

Let's not waste any time on that, I'm just going to highlight this, I'm going to copy it.

And I'm going to go to my rules page and put the link there as well.

So I'm just going to paste it in, okay.

And now if I run this again, it should go back to my homepage, that's from this.

So now click on rules of the park, there we go.

We can now see that also has a red background.

Okay, so if I head back over to my slides now.

Okay, so what I would like you to do now is I would like you to change the colour of the background using CSS in an external style sheet, just like I demonstrated there, okay.

So all the instructions for this are on your worksheets, so you need to create an external style sheet and to add a background colour to that style and most importantly, you need to link your HTML files to that style sheet, okay.

And don't worry about remembering the exact that, that bit of text that linked it to the style sheet.

Even I don't remember that and I type it in quite regularly.

Okay, so I have to look it up every time and just copy and paste it in the right places, okay.

So, so pause the video now have a go at task two on your worksheet, apply those styles and then unpause when you've done that.

Okay ,so how did you get on with that? To hopefully announcing the real potential about the things that you can do with CSS, because all we've done so far is we've changed the background colour to a colour of your choice, but hopefully that's given you a bit of a third touch you want to do more, maybe change the colour of the paragraphs as well and the headings.

So, as we've already mentioned it you can change the properties of any type that you can find inside the body of your HTML files.

So including the body tag itself as we just experimented with just them.

So as you can see on the right-hand side I've, I've actually changed the, the properties or the look and feel of some of the other elements that we find inside our sia, our HTML file sorry.

So you can see, not only on the body but changing the background colour, I've also changed the font family as well.

I've also, for the headings I've made the background colour different colour.

I've changed the text align to centre, in the paragraph I've also changed the colour and also change the font size as well, okay.

Now I've used a term there that might've made you go, Oh, what's a font family.

So let's actually explain what font family is.

Now the font family properties specifies the font to be used inside one of the tag or your elements.

Okay, now the font family property can hold several related font names.

So why do we do that? Well the reason that we have a font family is in a collection of fonts, is because if the web browser doesn't support your first font, then it won't display it and it'll display a default font.

So what we can do is we can group together a collection of fonts that look kind of similar so that if you're a web browser or the person viewing your websites, their web browser doesn't support your first choice of font, then it will move to the second choice of font.

And if it can't do that one either it will move to the third choice of font.

So it gives us an opportunity to use fonts that are similar, to it doesn't go back to the default font.

And if it does go back to their default font, it might ruin the look and feel that you want to achieve with your website.

Now don't worry you don't have to make up your font families.

If you were to do an internet search for font families, you would find a collection of similar looking fonts that you could just copy and paste into this property to make sure that you do get that look and feel that you're particularly after, okay.

Now paragraphs, headings and bodies.

So your next task is to experiment with customising the styles of each one of the types that you might find inside your HTML pages.

So try customising the styles of each one and use the examples on the right hand side as a starting point.

So get your first your index page for your laser tag, have a look at the HTML tags that you've used and think about how you could customise the properties using CSS, okay.

So like I said, you can use what you can see on screen as a starting point and that's also on your worksheet.

But also if you want to just do a little bit more experimenting why didn't you do an internet search and search for some of those CSS properties that you're able edit and see what you're able to achieve, okay.

But most importantly have fun with this really experiment with it, make it look really ugly and see what happens and then change it, make it look nice, okay.

So what I'd like to do again for the final time this lesson is I'd like to pause the video and I'd like to head over to task three on your worksheet and have a go and just have a little bit fun experiment with all those different properties, okay.

So pause the video and I'll be here when you get back.

Okay so again, how did you get on with that? So hopefully you've got some nice looking pages and importantly some consistently nice looking pages.

And even if they're not so nice looking, then at least you've got some consistently ugly looking pages maybe as well because you've linked the both all three, all three pages to the same style sheet.

Okay, so what I'd like to do now is spot some errors okay.

And again is not a trick question.

I'm going to show you three sections of three snippets of CSS, and I'd like to spot the error with each one of them.

So pause the video now spend a little bit of time looking over each one of those blocks and see if you can work out the error in each one of those.

Okay so how have you gotten on with it you managed to spot all levers? Okay but let's have a look, so let's start off with the first one.

So the top left hand side, the body background colour.

What was the problem with that? Or you may have noticed that it was the UK English spelling of colour, so that wouldn't unfortunately work, you need to use it without the u , so let's move on to H seven see what the problem with that was.

Well the problem with that is there's no H seven tag in HTML.

There's only H one to H six so that one's what tied him because he can't possibly have had a H seven in your HTML code, okay.

And then we're going finally to P tag or what's the problem with this? So hopefully this is the, this one is the mistake that most my students ever made in the classroom, which was it's missing the semi-colon.

So, if you got background colour colon yellow, there must be a semi-colon at the end of that and colour blue there must be a semi-colon at the end of that blue, okay.

Otherwise it just wouldn't work and you wouldn't see any effects taking place on your HTML pages.

So, that's all for this lesson and I hope you've enjoyed styling your website.

So this is what we're going to continue with for the next two lessons.

We're going to build upon your knowledge and actually make them look really stylish and really nice, okay.

So I'd love to see the work that you've done please do share with us.

I'd love to see your, your laser type website starting to take shape, okay.

So, and if you would like to share it with me, then please ask your parents or care to share your work on Instagram, Facebook or Twitter, talking at national and using the hashtag learn without, okay.

So that's all from me and I hope you're looking forward to next lesson as much as I am so I will see you then.