Introduction to CSS
Lesson details
Learning outcome
I can describe and use HTML and CSS to style the appearance of a web page.
Key learning points
- Inline styling is a method of formatting a web page within the HTML file.
- CSS (Cascading Style Sheets) allows for centralised styling, making web page design more efficient and consistent
Keywords
Inline styling - applying style changes directly to an HTML element
CSS (Cascading Style Sheets) - used to control the appearance of a web page by defining styles like colours, fonts, and layout
Common misconception
CSS rules must always include < > like HTML tags.
CSS uses just the tag name, without brackets.
Teacher tip
Note that, within code, the word colour is spelt 'color', which is the American spelling. This is the spelling used in both HTML and CSS, and many other programming languages.
Equipment
A HTML editor is required to enable pupils to complete activities. Links to the same projects in the Raspberry Pi Code Editor are provided as one option.
Licence
except where otherwise stated. See Oak's terms & conditions (Collection 2).Lesson video
Loading...
Prior knowledge starter quiz
6 Questions
Q1.Match the terms to their definitions.
structures the content of a web page
a piece of code used to define elements on a web page
adds a title or heading to a web page
adds a paragraph
Q2.What is the purpose of an HTML attribute?
Q3.Which HTML tag is used to display an image on a webpage?
Q4.Which HTML attribute is used to specify the source of an image?
Q5.Why is it important to use the alt attribute for images?
Q6.Which attribute can be used to control the size of an image?
Assessment exit quiz
6 Questions
Q1.What does CSS stand for?
Q2.Which method allows you to apply style changes directly to an HTML element?
Q3.What is a key benefit of using CSS over inline styling?
Q4.Which of the following is an example of inline styling?
Q5.Match each CSS property to its function.
changes the text colour
changes the background colour
changes the size of the text
aligns text horizontally
Q6.What is a common mistake when writing CSS rules?
To help you plan your 8 computing lesson on: Introduction to CSS, download all teaching resources for free and adapt to suit your pupils' needs...
To help you plan your 8 computing lesson on: Introduction to CSS, download all teaching resources for free and adapt to suit your pupils' needs.
The starter quiz will activate and check your pupils' prior knowledge, with versions available both with and without answers in PDF format.
We use learning cycles to break down learning into key concepts or ideas linked to the learning outcome. Each learning cycle features explanations with checks for understanding and practice tasks with feedback. All of this is found in our slide decks, ready for you to download and edit. The practice tasks are also available as printable worksheets and some lessons have additional materials with extra material you might need for teaching the lesson.
The assessment exit quiz will test your pupils' understanding of the key learning points.
Our video is a tool for planning, showing how other teachers might teach the lesson, offering helpful tips, modelled explanations and inspiration for your own delivery in the classroom. Plus, you can set it as homework or revision for pupils and keep their learning on track by sharing an online pupil version of this lesson.
Explore more key stage 3 computing lessons from the Developing for the Web unit, dive into the full secondary computing curriculum, or learn more about lesson planning.