Lesson video

Hello, my name is Mrs. Holborow and welcome to Computing.

I'm so pleased you've decided to join me for the lesson today.

In this lesson, we will learn how to apply and customise CSS to control the appearance of a webpage.

Welcome to today's lesson from the unit Developing for the Web.

This lesson is called Introduction to CSS, and by the end of today's lesson, you'll be able to describe and use CSS to style and approve the appearance of a webpage efficiently.

Shall we make a start? We will be using these keywords in today's lesson.

Inline styling.

Inline styling, applying style changes directly to a HTML element.

Cascading style sheets.

Cascading style sheets, used to control the appearance of a webpage by defining style elements like colours, fonts, and layouts.

Today's lesson is split into two parts.

We'll start by using inline styling to format a webpage.

We'll then move on to apply and customise CSS.

Let's make a start by using inline styling to format a webpage.

Can you spot three reasons why this HTML code won't work in the way the designer expected? Maybe pause the video whilst you look carefully at the code.

The first one was the heading tag, H1 is not closed, so we need to add a forward slash here.

The second one was there was no paragraph or p tag to start the paragraph.

The third one is that the image file name is missing quotation marks, so around the word astronaut.

jpg, we should have quotation marks.

All of the bugs in this code have now been fixed.

HTML works like the bricks of a website.

It acts as the building blocks and gives structure to the text and images of web pages.

Inline styling can be used to format a webpage.

You can change colour, font style, font size, and other elements of the page using inline styling.

So here we've got a couple of examples.

We have a H1 tag with the style colour blue, and you can see This is a blue heading is now formatted with blue font.

The p tag style has been set to colour orange.

So This is an orange paragraph appears with orange font colour.

When you style HTML using inline styling, you have to repeat the same changes for each tag.

So you can see here, even though I have two H1 tags, I have to repeat the style condition for each one.

Using inline styling this way can take a lot of time.

Izzy says "You have to change every single tag for your webpage." Sam says, "This can take a long time." Time to check your understanding.

What is a drawback of using inline styling in HTML? Is it A, it only works on certain browsers, B, it makes styling quick and efficient, C, it prevents you from changing colours, or D, it requires you to change each tag individually.

Pause the video whilst you have a think.

Did you select D? Well done.

A drawback of using inline styling is it that requires you to change each tag individually, which can be time consuming.

To change the colour of text, you can add a colour attribute inside the tag.

So here we have <h1 style="color:blue">.

Note the spelling of colour inside the colour tag.

It must be spelled colour, C-O-L-O-R, the same way as it's spelled in American English.

If you were to add in the English spelling of colour with the u, then your code won't work.

And you can see here the text, This is a blue heading, it's just appearing in black.

To change the background colour, you can add the background-color attribute inside your tag.

So again, we have the H1 tag.

We've set the colour to blue, and then we've used a semicolon.

And then we have background-color is equal to yellowgreen.

To change the background colour, you can also add the background-color attribute inside your tag.

So you can see here the H1 tag has been amended.

We have H1 style is equal to color:blue.

That will set the font colour to blue.

This time, we have a semicolon and we have background-color:yellowgreen;">.

And we can see the output of what this will look like.

Time to check your understanding.

Which line of inline styling is correct? Is it A, B, or C? Pause the video whilst you look carefully at the code.

Did you select A? Well done.

Need to look carefully at where the quotation marks are and where we've closed the tags correctly.

There are many colours you can use.

Make sure you spell the colour name correctly.

So here are a few examples.

Tomato, orange, DodgerBlue, MediumSeaGreen, grey, notice the spelling with an a, SlateBlue, violet, and light.

You need to make sure your colours work well together.

Aisha says, "Avoid clashing colours that make text hard to read.

Alex says, "Test different combinations to see what looks best." And Izzy says, "Think about contrast.

Dark text on a light background or vice versa is easiest to read." There's some really good tips.

To change the font style, you can add the font-family attribute inside the tag.

So in this example, the font-family has been set to impact and you can see the style of the font has changed from our previous versions.

There are many different fonts you can use.

Again, you need to make sure you spell the font name correctly.

Tahoma, georgia, courier, verdana, and impact.

Okay, we are moving on to our first activity of today's lesson, and you've done a great job so far.

So well done.

Open the starter code at oak.

link/pizza-guide.

Use inline styling to make this webpage more engaging.

For Part 1, change all of the headings' font colours.

For Part 2, change all of the paragraphs' text colours.

for Part 3, change all of the background colours.

Change the font styles of the headings and paragraphs.

Choose colours and fonts that you like the most and make sure that your text is easy to read.

When you are finished, check how it looks in the browser.

pause the video whilst you complete the activities.

Okay, how did you get on? Did you manage to change some font styles and colours? Great work.

If you want to, you can open the solution code at oak.

link/pizza-guide-solution.

Let's have a look at some example code here.

So you can see, on line one, we have H1 style.

We're setting the font family to courier the colour to orange and the background to lightgray.

We've used similar styling for the p tag below.

Remember to check the spelling of the font style and colour carefully.

Okay, we are now moving on to the second part of today's lesson where we're going to apply and customise CSS.

Inline styling is a useful method, but we've seen it can take a long time and you have to adjust each tag inside the HTML code.

Alex asks, "Is there a more efficient way to change how a webpage looks?" A more efficient way to build webpages is to keep the structure and content separate from the style and appearance.

The structure and content of a webpage are written in a HTML file.

The style and appearance of a webpage are written inside a separate CSS file.

CSS is short for cascading stylesheets.

Because a CSS file is stored outside of a HTML code, it is known as an external stylesheet.

CSS stylesheets must be saved in the.

css format.

Using CSS means a web designer doesn't have to manually change the formatting of every line of HTML.

The CSS can be reused across many different web pages.

Once CSS is set up, making changes to a webpage style becomes quick and easy.

A CSS stylesheet defines how HTML tags and properties should be styled when viewed on a webpage.

For example, this is how a heading looks.

The CSS file, the HTML document and then the webpage.

So the CSS file is setting the text colour.

The HTML file is setting the text that will appear in the title.

Note that the tags in this HTML example do not contain any styling attributes.

This website uses CSS to style the appearance.

If you want to go and have a look at the example, you can go to oak.

link/protect-our-environment.

Time to check your understanding.

What is the main purpose of CSS in web design? Is it A, to add content to a webpage, B, to make webpages interactive, or C, to style the appearance of a webpage? Pause the video whilst you have a think.

Did you select C? Well done.

The main purpose of CSS in web design is to style the appearance of a webpage.

To use a CSS sheet in HTML file, the link tag should be used.

So let's have a look at this example.

We have link rel="stylesheet" and then href, which is the link, "style-sheet.

css," again, in quotation marks.

This needs to be stored inside the head tag of your HTML document.

Alex says, "Without this, the webpage won't use the CSS stylesheet." Should we go and have a look at this as an example? So I've opened the HTML page.

I'm going to click on the stylesheet on the left-hand side, and you can see styles have been added for body, header, H1, and the image and p tags.

If I go back to the website and hit Run, you can see that the styles have been applied to the website content.

If I change the link to the stylesheet to a stylesheet that it cannot find, and then run the website again, you can see that all the formatting is lost.

The name stated inside the href tag must exactly match the name of the CSS file that you wish to use.

So you can see here href is equal to style-sheet.

css, and at the top tab where we've got the CSS document open is called exactly the same thing.

Every rule in CSS is made up of two parts, the selector and the declaration.

The selector is the part of HTML that you want to style.

In this example, it's H1.

The declaration is inside curly brackets.

It gives instructions for the styles that should be used.

This rule states which colour and font size should be used.

So we're setting the font colour to blue and the font size to 12.

CSS can be written on a single line, like this example.

However, it's very common to use multiple lines to aid readability, especially with long declaration blocks.

Izzy says, "It looks like the CSS file is missing the tags.

I think this code should start with a p." CSS doesn't use tags like HTML.

Instead, it uses selectors and curly brackets to give styles to elements.

Time to check your understanding, fill in the gaps in these sentences using the words provided.

pause the video whilst you have a go.

Let's have a look at the answers together.

CSS is the language used to tell the web browser how your webpage should look.

It sets things like positioning, colours, and fonts.

In CSS, the selector is used to target specific HTML elements you want to style.

The declaration contains the rules for how the selected HTML elements should be styled.

These rules set things such as the colour, font, and layout.

The declaration contains the rules for how the selected HTML elements should be styled.

These rules set things such as the colour, font, and layout.

For the next task, you'll be working on a CSS file.

When you make changes in the CSS file, it will affect the HTML webpage that it is linked to.

To see the changes, you need to press Run in the code editor.

The CSS file contains comments which are notes for anyone reading the code.

These comments help to explain the parts of the file, but they are ignored by the browser and do not affect how the webpage looks.

Comments in CSS are written inside a /*, so they don't interfere with the code.

Okay, we are now moving on to the second set of tasks for today's lesson, and you're doing a great job, so well done.

I'd like you to open the starter code oak.

link/terrific-tigers.

In the HTML file, add the CSS file, styles.

css, to the link tag.

Make the following changes in the linked CSS file.

Change the background colour of the webpage, change the font size and colour of the main heading.

Change the font size and colour of the paragraph text.

Make sure your style choices work well together.

Use the comments in the CSS file to help you.

Pause the video whilst you complete the activity.

How did you get on? Let's have a look at this solution together.

If you want to open the full working solution, you can go to oak.

link/terrific-tigers-solution.

So you were asked to link to the stylesheet, so on line seven, you should have <link rel="stylesheet" href="styles.

css">.

That's in the HTML file.

And then, in the CSS file, you were asked to update the styles.

So, in body, we've changed the background-color to lightblue.

Remember, you could have chosen anything you wanted.

In the H1 tag.

we've changed the font sized 30 pixels and the colour to darkblue.

In the p tag, or paragraph tag, we've changed the font size to 16 pixels and the colour to black.

Okay, we've come to the end of today's lesson and you've done a fantastic job, so well done.

Let's summarise what we've learned in this lesson.

Web pages can be styled in two different ways.

Inline styling allows you to apply styles directly to individual HTML elements.

Inline styling is useful for making quick, small changes to specific elements, but it can become difficult to manage when styling multiple parts of a webpage.

Cascading stylesheets, or CSS, are more efficient way to control the appearance of a webpage, as style rules are kept in a separate file.

This makes it easier to update and manage the design.

I hope you've enjoyed today's lesson, and I hope you'll join me again soon.

Bye.