Lesson video

Hi, everyone, my name is Mrs. Welsh.

Welcome to today's lesson.

We will be learning about CSS fundamentals.

Don't worry if this is something completely new, I'll be here to guide you through each step.

So let's get started.

Welcome to today's lesson from the unit HTML Programming Project.

This lesson, we are looking at introducing the use of CSS.

So by the end of today's lesson, you'll be able to style the content of your webpages using a CSS file.

Let's have a look at those keywords before we get started.

CSS stands for cascading style sheets.

These are the specifications used to style the content and layout of HTML pages.

Consistency, keeping the same look, feel, and behaviour of items. So let's begin the lesson.

In today's lesson, we're gonna be focusing on how CSS is used to ensure consistency and how we can implement text formatting using CSS.

So let's begin looking at consistency.

CSS stands for cascading style sheets.

While HTML gives the webpage its structure.

CSS gives a webpage its styling.

CSS helps provide consistency across a website.

Why is consistency important? CSS can help make a website look professional and well-designed.

It can help provide a clear and consistent design, which helps users find things easily.

And it makes a website easier to update since you only have to change one CSS file rather than update the whole site.

So let's have a look at these two web pages.

Which webpage is using CSS? When you've decided on which one, make sure you can explain your answer.

If you need to pause the video to have a look at the websites, do so now.

So which webpage do you think is using CSS? It is the one on the right-hand side.

This webpage is using CSS.

We know it's using CSS, as it has a consistent design; all the paragraphs, headings, and colours match; and the webpage has a more professional look about it and is definitely more readable.

The webpage on the left-hand side of this slide does not use CSS.

There isn't a consistency on the webpage.

All the headings and paragraphs are different colours and different sizes, and the webpage does not look very professional, and it is quite difficult to read.

So did you get that? You understand how CSS can play a part in making our webpages look consistent with our formatting? Brilliant.

Let's move on.

So how does CSS work? CSS is a rule-based language.

You define the rules to give an element on a webpage a specific style.

Have a look at the example on this slide.

What do you think the CSS code does to the <h1> heading? So what do you think? If we have a look at the rules that have been applied, we can see that something is happening to the colour.

There is something happening to the font size, and also, there is something happening to the alignment of the text.

So let's have a look at it in more detail.

Colour, this defines the colour of the text.

In this example, we are using hex code #b22222, and that is a dark red colour.

We can see that it is defining the font size, and in this example, we are setting the font size two 30 pixels.

And for text alignment, we are going to position the text in the centre of the screen.

And as it says there, in HTML and CSS, we use hex colour codes to identify colour, as this is easier than using colour names.

There are different types of CSS that we can use.

We have external CSS, and this is a single CSS file that is applied to multiple web pages.

We have internal CSS, and this kind of CSS is built into a webpage's HTML code, and the CSS rules could only be used on that webpage.

And then we have what is known as inline CSS, and this is applied directly to one element of a webpage.

This version of using CSS is the most ineffective, as it is the hardest one to keep up to date.

So let's have a look at this question.

Why is external CSS useful? Is it A, it makes a webpage load more slowly? Is it B, it ensures all web pages have the same design; C, it forces every webpage to have a different look; or D, it only works for small websites? If you need to pause the video to read through the question, decide on your answer, do so now.

Okay, which answer do you think it is? It is B.

It ensures all webpages have the same design.

External CSS makes a site consistent, 'cause, remember, that is the CSS file that sits outside of the HTML code for all the web pages, so you can use it across multiple web pages.

Let's have a look at task A.

What I want you to do is open the starter code file, and you are going to modify the HTML code.

And you are going to add in a title, add in a <h1> or main heading, add in a paragraph.

You're then going to need to run the HTML code and then go into the style.

css file and modify it by changing the colour of the <h1> tag and the paragraph tag.

You're going to modify the text alignment of the <h1> tag so it is set to the centre, and you're gonna modify the <p> tag font size to 16 and then run the code and see how it has updated.

If you need to pause the video here so you can read through the task again, do so now.

Okay, so should we have a look at what the solution may look like? So when we run the code, what we're gonna have is the main title, Overview of GCSE Computer Science.

It is in a different colour, and it has been centred.

And also, the main heading text has been added.

We have then got underneath, paragraph text that has been added in, and the paragraph text is a different colour and font size to the main heading.

Did you manage to get the CSS file and the HTML file updated so it shows something similar to the following? You may have picked slightly different colours, of course.

If so, well done, and let's move on.

So if we have a look at the HML code for the webpage, we can see within the <body> tag, we've got the <h1> heading that's got overview of computer science, and then we have got the paragraph tag where we've got some information about GCSE computer science, so we've got a little overview there.

Making sure that we have closed both the <h1> tag and the <p> tag and then the body tag at the end.

The CSS rule, once updated, looks something like the following.

So the <h1> CSS rule, the colour has been updated, and the text has been aligned so it now shows centre.

And again the <p> tag, the font size has been updated to 16, and the colour of the paragraph text has also been updated.

So did you manage to get that done? Did you manage to alter the CSS rules? If so, well done, and let's move on.

So moving on to looking at how we implement text formatting using CSS.

So as we've discussed, CSS allows you to change how text and backgrounds look on a webpage.

It takes a HTML element such as the <h1> tag and applies a style rule to it.

So if we have a look at the example here, we have some HTML code, so we've got a paragraph there, and we have then got a style rule that is applied to the paragraph tag.

And we can see that it has colour and font size.

And underneath, we have got what the text will look like when it is displayed in our web browser.

So we can see there that our paragraph of text has got a blue colour and is the font size of 16 because that is what the CSS style rule is telling us.

As we discussed, the best way to apply a CSS to a website is to use external CSS.

By using external CSS, we create a separate file that is linked to the HTML file.

And in the code, editor you'll have the HTML code files and a CSS file, and that's shown below.

So you may have seen this already when doing the previous activities.

You'll see the name of the HTML webpages that you've created, and underneath, you'll see something sitting there that is called style.

css, and that is where we put all our style rules.

How do we go about using external CSS? As it states there, the code editor will set up a default HTML and CSS file for you to use.

The HTML and CSS files need to be linked together in the HTML file using the link tag.

And below here, we've got an example of how we would link a HTML and CSS file.

So using the link tag, we use the keyword link, and then we are telling it what we are linking it to, which is a style sheet.

And then we have to provide the name of the CSS file.

So that is the href and then style.

css.

So that is how we are linking them both together.

So very similar to when we make hyperlinks between web pages.

It is the same kind of process.

We use the link tag to connect the CSS file to the HTML file.

We have to tell it what type of file is being linked, and in this case, it is a style sheet.

And then we need to provide the name of the CSS file, and the default name in the code editor is style.

css.

So having a look at the example of how we use that tag in our HTML file.

And you can see the example here.

Within our head tag, we are gonna have our link tag that links our CSS file to our HTML file.

And any changes that we make to that CSS file will update the HTML code when it's displayed because those two files are now linked together.

So having a look at a different way we could do it, if we were going to format each tag individually or use what's called the inline CSS, each tag would need to use the style rules, which takes an awful lot of time, and the code would start looking a little bit messy.

So the example below is if we were using an inline CSS format.

And you can see here we have got the <h1> tag, we have got a style rule for colour, font size, and then we've got the rest of the tag content.

And we would have to repeat that for all the tags that we were using that required some form of style rules.

So therefore, anytime we wanted to make a change, every single style rule would need to be edited individually.

And as a website got bigger with more web pages, it would become much harder to actually maintain.

So looking at a question to see what we can recall, what is a disadvantage of using inline CSS? Is it A, it makes updating styles harder; B, it keeps HTML and CSS separate; or C, it applies styles across multiple web pages? If you need to pause the video now so you can read through the question, do so.

Okay, have you got an answer? Let's have a look.

Which one did you get, A, B or C? The answer is A.

Okay, so a disadvantage of using inline CSS is that it makes updating styles harder.

Okay, and it says there, inline CSS makes updating styles harder because each tag must be edited separately.

Having a look at some of the key style rules for formatting a webpage, there was quite a few that we may use quite regularly.

So we have got colour, and remember, at this case, it is colour spelt without the U, and this changes the text colour.

And we can see an example there that we have the rule colour.

We have the colour.

We then have a hex code for the colour.

And again, it's always followed by that semicolon after it.

We have font-size.

This is pretty obvious, it is gonna change our text size, and we will include what pixel size we want it to be.

We have font-family, and this changes the font style.

So the example there is that we have font-family, and we can set it to Arial.

We have font-weight.

This makes our text bold.

We can see there, in the example, we'll have font-weight and bold.

Text-align means we can move the text to either the left, the right, or the centre of our webpage.

And all we have to do is use the text-align property and state where we want it positioned.

In this case, the example says left.

And the final one is background-color.

Again, we need to make sure we spell colour without the U, and this will change the background colour of the section.

So here we've got background-color, and again, we've got a hex code for the colour.

Looking at how we create a style rule for a tag, first thing we have to do is identify what tag we are creating that style rule for.

In the example, we are creating a style rule for <h1>.

What we then have to do is open the parentheses, and all the style rules are going to go between those.

We then have to define each of the style rules for the tag.

And in here, we have got colour, font-size, font-family, and text-align.

At the end of each of the style rules, we need to make sure we add a semicolon, as this tells the web browser the style rule has finished.

And at the end, as with everything with HTML and CSS, we need to make sure we close, okay? And in this case, we are gonna close the parentheses, and this defines the end of the style rule for that particular tag.

Looking at how we use background colour, background-color property in CSS is used to set the background colour of an element, such as a heading or a paragraph.

And we can do this to create one background colour for the whole of the body tag.

So again, if we are going to make a style rule, we will do it in the same way.

We will have our body tag identified as the style rule.

We will include background colour and the colour that we are looking for.

The result of the example will give this webpage a light grey background, and we can use background colour in other style rules to give a section a different background colour.

So the example here, we have got our style rule for the <p> tag, and we have included the background colour.

So this means when we use the <p> tag, this style rule will make all paragraph text red with a light grey background.

Let's see what we can remember.

The following CSS style rules are applied to a webpage.

What I would like you to do is have a look at the <h1> style rules and the <p> tag style rules and answer the following questions.

One, what background colour will the <h1> element have? And you just need to identify the hex code unless you want to go off and see if you can convert the hex code into a colour name.

Question two, what will the <h1> tag text colour be? And again, you just need to state the hex code, or if you want to go and convert it into the colour name, you can do.

Question three, what background colour will the paragraph element have? Question four, what will the paragraph text colour be? And finally, question five, what font will be applied to the paragraph text? If you need to pause the video now so you can read through the question, do so now.

Are you ready? Should we go and have a look and see what we got? Question one, what background colour will the <h1> element have? The <h1> background colour will appear as a shade of, like, a red-orange.

Question two, what will the <h1> text colour B? The text inside the <h1> tag will be white.

Question three, what background colour will the paragraph element have? The paragraph background colour will appear to be a light blue.

So did we get all those ones? You may just have the hex colour, but if you manage to identify the hex colour correctly, that is what it converts into.

Question four, what will the paragraph text colour be? That will be showing up as black.

And what font will be applied to the paragraph text? The paragraph text will use a sans serif font.

If we have multiple fonts listed, such as the example below, we can see that there is a font family of Arial and sans serif, the web browser will use the font that is listed first.

So in this case, it would be Arial.

If that font is not available, the web browser will go to the next font listed.

So in the example below, we have got font families of Arial and sans serif.

It will try and represent Arial first as the text.

If not and Arial isn't available, it will use sans serif.

So how did we do? Did we manage to identify everything correctly? If so, excellent stuff, and we can move on.

Moving on to task B, you are going to open the starter HTML file, and you're going to do the following: open up the theory_network.

html, add in the heading network topologies, using an unordered list for the topologies and including bus, mesh, and star, and add three paragraphs of text with relevant content, one for each of the topologies.

Then you're gonna go into the style.

css file and create the following style rules.

You need to add a background colour for the body tag; add a text colour, font family, and font size for the paragraph tag; add text colour, font family, and text alignment for the different heading tags; and also add a background colour for the paragraph tag.

You then need to go into index.

html, theory_memory.

html, and theory_networks.

html and make sure all the links are updated so all the pages can navigate to each other.

Following on from that, you need to create some section links from the unordered list to the following places on the webpage.

So from the unordered list, you need to have a link that goes down to the paragraph about the bus topology, the star topology, and the mesh topology.

If you need to pause the video now to read back through the task, do so.

Let's have a look at the solution, starting with the index page.

Within the head tag, we have got the link to the style sheet, and this means that style rules can now be applied to that webpage.

We'll need to include this on the other web pages within this website.

So on the theory memory and also on the theory network pages.

Also, on the index page, we have had to update the HTML links to the other webpages that have been created, and we can see in the body tag.

In the theory topics, we have now got two links, one linking us to the theory memory page and a second link to the theory networks page.

So did we get both of those so you can go from the index page to both of theory pages that we've created so far? If so, well done.

And let's see what else we have had to update.

I've moved us into the code editor to have a look at the theory networks page because there was quite a lot of things that we needed to do on this.

First of all, as we can see on line five, we have got a link to the style sheet.

Further down where we've had to add content, so from line seven, we have got the body tag.

And then on line eight, we have got our heading one, which has our network topologies.

Following on from that, we have got a paragraph, just to introduce the topologies and the main types.

And then from line 12 to line 16, we can see our unordered list that has got the three topologies we need to be looking at, so bus, star, and mesh.

At the same time, you can also see, on lines 13, 14, and 15, we have got a section link, and we are using the anchor tag and we have identified each section with a unique ID, and we've used bus, star, and mesh.

Underneath the unordered list, we have got three paragraphs, one for each of the top apologies that we have to focus on, and we have got the section link ID.

So we can see there that bus topology has been given the identification of bus, star is star, and mesh is mesh.

So when we go back up to the unordered list, we can see the links using those IDs.

And right at the bottom of the page, we have got a link that takes us back to the index page.

So there's quite a lot going on on that theory networks page from putting in the content to creating the section links and also making sure it links to the style sheet and back to the index page.

So if you managed to get all of that content done and all of those different links created, that's really good job.

This is quite complicated one, so well done.

And just looking at it so we can see it a little bit larger, if we're looking again at the theory network page, in the heading, we have got the link to the style sheet.

And if you remember for this task, we have to create the network topologies with heading, paragraph, and an unordered list.

Our unordered list included links down to the relevant sections for each of the topologies.

And then we had three paragraphs, one for each of the topologies that were identified using the ID and a key word.

The updates to the theory memory page weren't quite as complicated as the network page because we already had the content there.

And for the theory memory page, in the heading, we had to include the link to the style sheet.

And at the bottom of the webpage, just before we close the body tag, we needed to include a link back to the index page.

So that's all we need to do on the theory memory page, just to include the style sheet and some navigation so we could go back to the index page.

Hopefully, you managed to get those updates done on the theory memory page and you didn't forget about it because it only had the style sheet and the link at the bottom back to the index page to include.

So if you did that, you should find that your theory memory page has got the style sheet applied to it.

So when you run it, it is nicely formatted with a link at the bottom of the page back to the index page.

So well done if you manage to include all of those things.

And finally, if we take a look at the solution for the CSS file, you should have included a background colour for the body.

In <h1>, you had to include the text colour, the font family, and the text alignment.

And you can see some examples there.

Remember, if you are going to use the same font family and text colour throughout the whole of your website, you can actually include them within the body style rule.

So if, for example, I was going to use the same font family, so Montserrat and sans serif, and the colour of my text was going to be #0044cc on all of my texts, I could put those two rules up in the body tag with the background colour.

And then our other two rules for our <h2> heading, we, again, have got a style rule that includes the text colour, the font family, and the text alignment.

So for h2, we have got a different colour for the text, we have got the font family set up again to Montserrat and sans serif, and we've got the text alignment to the left.

And then our paragraph style rules, again, include text colour and also background colour.

So this time, we've got colour of the text, we have got a background colour to sit behind the text.

We've got a font family that is set to Arial, and we are also looking for a font size, and it has been set to 16.

Did you manage to update all of your CSS rules? Have you managed to link the CSS file to each of your web pages? You'll know that it has worked when you click the run button and the pages format as you have expected.

And have you got it so everything links to each other, so the two theory pages go back to HTML index page and that the index page goes to the two theory pages that you've created? If you have managed to get your website working so it is formatted using the CSS file and all the links are there and the content is there, that is a really good job.

This was a really, really tricky task for today's lesson.

So really well done if you've got all of that completed.

Don't worry if you haven't managed to get through all of it.

If you've managed to get the CSS file working and you've got some of the links working, again, that's a really good job.

It was quite a complex task.

Taking the key points from today's lesson, CSS controls the look of a webpage by adding colours, fonts, and layouts to style the HTML.

A CSS file can be linked to a HTML page, so you only need to make changes once to update the whole site.

Using CSS keeps a website's design consistent and ensures that all pages have the same style.

And CSS gives control over text and background formatting elements, such as font styles, colours, and spacing.

Again, thank you for joining me for today's lesson, having a look at CSS fundamentals.

I hope you've got a good understanding of how we create a CSS file, link it to our HTML files, and also how we create CSS style rules.

I hope you've enjoyed today's lesson, and I hope to see you next time.