Lesson 10: Styling Text with CSS
This lesson introduces CSS as a way to style elements on the page. Students learn the basic syntax for CSS rule-sets and then explore properties that impact HTML text elements. They work on a HTML page about Guinness World Record holders, adding their own style to the provided page. In the last level, students apply what they have learned about styles for text elements to their personal web page.
Students will be able to:
- Use CSS selectors to style HTML text elements.
- Create and link to an external style sheet.
- Explain the differences between HTML and CSS in both use and syntax.
- CSS – Cascading Style Sheets; a language used to describe how HTML elements should be styled
- CSS Selector – the part of a CSS rule-set that defines which HTML elements the style should be applied to
Warm Up (5 minutes)
Journal: HTML Appearance
- In the past few lessons, we’ve been using HTML to write our web pages. HTML lets us use tags to define the structure of a page. With your partner, come up with a list of all the different HTML tags as you can recall, and what they mean.
- Choose one of the tags that describes text on the screen (
<h1>, etc.) describe how the contents of that tag appear on a web page. Would you always want those elements to appear in that exact way? For example,
<p>always means that the content is a paragraph, but should paragraphs always look the same on every page and on every site?
- So far we have only made web pages where we control the content and structure, such as which parts of the pages are headers, lists, or paragraphs. We’ve been using HTML as the language to specify the content and structure of the pages. While HTML allows us some control over how the page looks, it doesn’t give developers much control over the specific look and style of each element. To do that, we need a language to express style. Web developers use CSS to specify the style of a page.
Activity (40 minutes)
Web Lab: Introduction to CSS
- Go to code.org Lesson 10
- Do Level 1 together as a class
- Do Level 2 on your own
- Do Level 3 together as a class
- Do Levels 4 & 5 on your own
- Do Level 6 together as a class: Review the “Content-Structure-Style” paradigm introduced in the map level during the lesson. Draw a T-chart on the board and label one side HTML and one side CSS. Work in small groups to think of as many differences you can between the two languages, then come back together as a group and share.
- Do Levels 7-10 on your own
- Do Levels 11 & 12 together as a class
- Do Levels 13 & 14 on your own
Wrap Up (10 minutes)
Recording CSS Properties
- Create a new page in you journal called CSS Properties.
- Get in groups of two to five – there needs to be at least one group for each of the properties introduced in this lesson.
- Your group will be assigned one of the properties introduced today.Your group needs to come up with the a description and example for your property.
- Add your group’s properties to your journals and to the class “CSS Properties” poster.