CSS fundamentals
Lesson details
Learning outcome
I can style the content of web pages using a CSS file.
Key learning points
- CSS describes the styling that is applied to HTML.
- Properties of HTML tags are changed in a CSS file linked to a web page.
- CSS provides consistency of design across the pages of a website in a single location.
- CSS can control text and background formatting.
Keywords
CSS - Cascading Style Sheets: specifications used to style the content and layout of HTML pages
Consistency - keeping the same look, feel, and behaviour of items
Common misconception
It is easier to apply CSS directly to the HTML tags as they are used.
There is little time saved by applying CSS directly to tags and it generates more work later if the same changes need to be made in different parts of a web page.
Teacher tip
Pupils will have encoutered many uses of HTML in the world around them. Tailor the activities in the slides to best reflect the experiences pupils in your school will have had when using HTML-based technology.
Equipment
Pupils will need access to a device with HTML editing software. Examples in this lesson use the RPF Code Editor https://oak.link/html-editor
Licence
Lesson video
Loading...
Prior knowledge starter quiz
6 Questions
Q1.What is the purpose of HTML in web development?
Q2.What is a web browser used for?
Q3.What is a tag in HTML?
Q4.What attribute is used to make images accessible by providing a text description?
Q5.What HTML tag is used to define the main heading on a webpage?
Q6.What HTML tag is used to add an image to a webpage?
Assessment exit quiz
6 Questions
Q1.What does CSS stand for?
Q2.What is the purpose of CSS?
Q3.What is an advantage of using CSS in a separate file?
Q4.Which of these is an example of a CSS property?
Q5.What happens if you apply CSS directly to HTML tags?
Q6.Which CSS property is used to change the background colour of a webpage?
To help you plan your 11 computer science lesson on: CSS fundamentals, download all teaching resources for free and adapt to suit your pupils' needs...
To help you plan your 11 computer science lesson on: CSS fundamentals, 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 4 computer science lessons from the HTML programming project unit, dive into the full secondary computer science curriculum, or learn more about lesson planning.