Lesson 7: Styling Text Elements with CSS

Web Lab

Overview

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 About Me page.

Purpose

While there are many CSS properties, the properties highlighted in the levels are simple properties that can style text elements. Students will use these properties often. More properties are covered in subsequent lessons.

Agenda

Warm Up (5 minutes)

Activity (40 minutes)

Wrap Up (5 minutes)

Objectives

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.

Preparation

Links

For the Students

Vocabulary

  • CSS - CSS stands for Cascading Style Sheets. CSS allows each HTML element to be styled according to certain set of rules.
  • CSS Selector - Specifies the part of the code which the style should be applied to.

Introduced Code

Support

Report a Bug

Teaching Guide

Warm Up (5 minutes)

Journal: HTML Appearance

Discussion Goal

Students may mention that the h1 tag has large font, or that the li tag puts a number or bullet before the text. Some other options that they may not consider are that all the text appears in black, and uses the same font. None of the text is underlined or bolded. Prompt students to realize that there are other possible styles that they see on web pages that it not the default appearance when HTML is used.

Prompt: 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, think of as many different HTML tags as you can, and what they mean.

Discuss: Choose one of the text-based tags (p, li, h1, etc.) and have the students describe how the contents of that tag appear on a web page, then ask them whether they would 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?

Remarks

So far we have only made web pages that contain 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. HTML also makes elements display in particular ways, depending on their tags, but it doesn't let developers customize the look and style of the elements. To do that, we need a language to express those styles. Web developers use CSS to specify the style of a page. Web developers use different languages for structure and style because it makes it easier to differentiate between the code for style and the code for structure.

Activity (40 minutes)

Web Lab: Introduction to CSS

Goal: Students will add styling to a web page that already has content.

Transition: Students should open Code Studio.

Wrap Up (5 minutes)

Start CSS Properties List

Set Up: Have students take out their Web Development Practices - Project Guide.

Once students have finished their work on the levels have them turn to page 4 of Web Development Practices - Project Guide and start a table of all the CSS properties they have learned.

View on Code Studio

The Internet - Web Development: Lesson 7 - Styling Text Elements with CSS

Background

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 About Me page.

Vocabulary

  • CSS - CSS stands for Cascading Style Sheets. CSS allows each HTML element to be styled according to certain set of rules.
  • CSS Selector - Specifies the part of the code which the style should be applied to.

New Blocks

Resources

  • Levels
  • 3
  • 4
  • (click tabs to see student view)
View on Code Studio

Student Instructions

**What colors can I use in CSS?** CSS includes most common color names (red, blue, green, etc.), and many uncommon ones. You can see a full list of CSS color names at W3Schools - HTML Color Names. You can still use colors that are not included in the named list, but you will need to use their RGB values. You can read more about using colors in CSS at W3Schools - CSS Legal Color Values
**How does the code work?** Here is the code that is making the `h1` header red:
h1 {
  color: red;
}
* `h1` is the _selector_. It specifies which elements will have to follow the rules inside the curly braces. * `color: red;` is the rule that makes the text inside the `h1` tags red. * `color` is the _property_. It explains what the rule is about, in this case the text color. * `red` is the _value_. It explains how the rule should be applied, in this case making the text red.
**Why do I need all the punctuation?** The punctuation, such as the curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer to understand the rules in the style sheet. The curly braces hold all the rules for a particular selector. Each rule should end in a semicolon, and the properties and values are always separated by a colon.
**What is a style sheet?** A style sheet is a document that controls how a web page will appear. External style sheets are separate files that are linked to the HTML page.
**What is CSS?** CSS is a language that controls the way content on a web site appears. It uses rule-sets to change the look of a page. Each rule set has a selector, which specifies which elements on the page will be affected, and the rules, which explain how to display the elements. Each rule consists of a property and a value for that property. Here’s an example of a rule-set that makes the text in an `h2` tag blue and cursive:
h2 {
   color: blue;
   font-family: cursive;
}
In this example, `h2` is the selector, `color` and `font-family` are properties, and `blue` and `cursive` are the values for those properties.

CSS and Text Color

This HTML file uses a style sheet ("style.css") to give the page a particular style. The style sheet contain information about what each of the HTML elements should look like.

  • Find the code in the style sheet (click on "style.css" in the files area) that is making the h1 header red.
  • Change the code for the color of the h1 header from red to a different color.
View on Code Studio

Student Instructions

**What colors can I use in CSS?** CSS includes most common color names (red, blue, green, etc.), and many uncommon ones. You can see a full list of CSS color names at W3Schools - HTML Color Names. You can still use colors that are not included in the named list, but you will need to use their RGB values. You can read more about using colors in CSS at W3Schools - CSS Legal Color Values
**How does the code work?** Here is the code that is making the `h1` header red:
h1 {
  color: red;
}
* `h1` is the _selector_. It specifies which elements will have to follow the rules inside the curly braces. * `color: red;` is the rule that makes the text inside the `h1` tags red. * `color` is the _property_. It explains what the rule is about, in this case the text color. * `red` is the _value_. It explains how the rule should be applied, in this case making the text red.
**How do I make a new rule-set?** To make a new rule set, you'll need a selector and a list of rules. The selector is the name of the tag you want the rules to be applied to. The rules are a list of property and value pairs. You'll also need to pay careful attention to the punctuation in the rule set. Look at the code below for an example of how the code should look. You'll need to change the specifics for your page.
h1 {
  color: red;
}
* `h1` is the _selector_. It specifies which elements will have to follow the rules inside the curly braces. * `color: red;` is the rule that makes the text inside the `h1` tags red. * `color` is the _property_. It explains what the rule is about, in this case the text color. * `red` is the _value_. It explains how the rule should be applied, in this case making the text red.
**Why do I need all the punctuation?** The punctuation, such as the curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer to understand the rules in the style sheet. The curly braces hold all the rules for a particular selector. Each rule should end in a semicolon, and the properties and values are always separated by a colon.
**What is a style sheet?** A style sheet is a document that controls how a web page will appear. External style sheets are separate files that are linked to the HTML page.
**What is CSS?** CSS is a language that controls the way content on a web site appears. It uses rule-sets to change the look of a page. Each rule set has a selector, which specifies which elements on the page will be affected, and the rules, which explain how to display the elements. Each rule consists of a property and a value for that property. Here’s an example of a rule-set that makes the text in an `h2` tag blue and cursive:
h2 {
   color: blue;
   font-family: cursive;
In this example, `h2` is the selector, `color` and `font-family` are properties, and `blue` and `cursive` are the values for those properties.

Making a new CSS rule-set

The block of code that gives rules for a particular tag is called a rule-set. You can make a new rule set by copying the pattern you see in the rule-set for the h1 tag.

  • Find the CSS rule-set in the style sheet that determines the styles for the h1 tag.
  • Using the same pattern, write a new CSS rule-set that will determine the styles for the h3 tag.
  • Add code to make the text in all h3 tags a different color.
View on Code Studio

Review: CSS Rule-Sets

Bring the class back together to review the basics of CSS rule-sets.

View on Code Studio

Stop: Introduction to CSS and Style sheets

Up until this lesson, you have been adding content to your pages without any instructions on how to style it. Web Developers intentionally separate content and style to make their code easier to maintain. HTML is the language used to structure the content of a web page. CSS is a language that adds style to a web page.

In CSS, style rules are used to style certain elements of HTML. Style rules explicitly call out certain properties of the element to be styled.

Adding A Style sheet

1) To add CSS style rules to an HTML page, you need to create a style sheet document.

2) This is the style sheet.

3) Link to your style sheet. The link goes inside the head tag and looks like this:

<link rel="stylesheet" href="style.css">

CSS Rule-sets

CSS rule-sets consist of two main parts: the selector and the rules.

Selector

The selectors can be any part of the web page you want to style. One way you can identify parts of the web page is using the names of the element type. Selecting an element type will make all elements of that type have the given styling. The selector name for HTML element types is the name of the tag with the brackets removed. In the below example the selector is h1 and it will style all the h1 elements with the rules inside the curly braces ({ }).

Rules

The rules describe how the elements identified by the selector should change. Each rule consists of a property name and a value, separated by a colon (:). The property name describes what the rule is about, such as color or size, and the value how the property should change. For example, the rule-set below will make all the h1 headers on the page have blue text that is underlined.

h1{
  color:blue;
  text-decoration: underline;
}

The punctuation in the rule-set is very important, because that's the way the computer knows where each rule starts and stops.

View on Code Studio

Student Instructions

**How does the code work?** Here is the code that is controlling the paragraph text size:
p {
  font-size: 14px;
}
* `p` is the _selector_. It specifies which elements will have to follow the rules inside the curly braces. The `p` stands for paragraph. * `font-size: 14px;` is the rule that makes the text inside the `p` tags a particular size. * `font-size` is the _property_. It explains what the rule is about, in this case the text size. * `14px` is the _value_. It explains how the rule should be applied, in this case making the text 14 pixels big.
**What does `px` mean / What is a pixel?** Pixel, which is abbreviated `px`, is how elements are measured in CSS. It’s the size of a single point of light on the screen.
**Why do I need all the punctuation?** The punctuation, such as the curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer to understand the rules in the style sheet. The curly braces hold all the rules for a particular selector. Each rule should end in a semicolon, and the properties and values are always separated by a colon.
**What is a style sheet?** A style sheet is a document that controls how a web page will appear. External style sheets are separate files that are linked to the HTML page.
**What is CSS?** CSS is a language that controls the way content on a web site appears. It uses rule-sets to change the look of a page. Each rule set has a selector, which specifies which elements on the page will be affected, and the rules, which explain how to display the elements. Each rule consists of a property and a value for that property. Here’s an example of a rule-set that makes the text in an `h2` tag blue and cursive:
h2 {
   color: blue;
   font-family: cursive;
In this example, `h2` is the selector, `color` and `font-family` are properties, and `blue` and `cursive` are the values for those properties.

Changing text size

You can control other things besides colors by using other properties.

  • Find the CSS rule-set in the style sheet that determines the style for the paragraph tag.
  • Change the text size of the paragraphs to be bigger.
  • Add a new rule to your rule-set for your h3 tag to make the text bigger or smaller.
View on Code Studio

Student Instructions

**How does the code work?** Here is the code that is controlling the paragraph font:
p {
  font-family: cursive;
}
* `p` is the _selector_. It specifies which elements will have to follow the rules inside the curly braces. The `p` stands for paragraph. * `font-family: cursive;` is the rule that makes the text inside the `p` tags a particular font. * `font-family` is the _property_. It explains what the rule is about, in this case the font. * `cursive` is the _value_. It explains how the rule should be applied, in this case making the text cursive.
**What are the possible values for font family?** You can choose between "serif", "sans-serif", "cursive", "fantasy", and "monospace". You can also try more specific fonts as described in W3Schools - CSS Web Safe Font Combinations
**Why do I need all the punctuation?** The punctuation, such as the curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer to understand the rules in the stylesheet. The curly braces hold all the rules for a particular selector. Each rule should end in a semicolon, and the properties and values are always separated by a colon.
**What is a stylesheet?** A style sheet is a document that controls how a web page will appear. External style sheets are separate files that are linked to the HTML page.
**What is CSS?** CSS is a language that controls the way content on a web site appears. It uses rule-sets to change the look of a page. Each rule set has a selector, which specifies which elements on the page will be affected, and the rules, which explain how to display the elements. Each rule consists of a property and a value for that property. Here’s an example of a rule-set that makes the text in an `h2` tag blue and cursive:
h2 {
   color: blue;
   font-family: cursive;
In this example, `h2` is the selector, `color` and `font-family` are properties, and `blue` and `cursive` are the values for those properties.

Changing the Font

  • Find the CSS rule-set in the style sheet that determines the style for the paragraph tag.
  • Change the font family and choose which one you like the best.
  • Choose from "serif", "sans-serif", "cursive", "fantasy", and "monospace"
  • Add a font family rule for the h1 or h3 tags.
View on Code Studio

Student Instructions

**How does the code work?** Here is the code that makes the `h1` elements underlined:
h1 {
  text-decoration: underline;
}
* `h1` is the _selector_. It specifies which elements will have to follow the rules inside the curly braces. The `p` stands for paragraph. * `text-decoration: underline;` is the rule that makes the text inside the `h1` tag underlined. * `text-decoration` is the _property_. It explains what the rule is about, in this case where the line goes. * `underline` is the _value_. It explains how the rule should be applied, in this case making the test underlined.
**What are the possible values for text decoration?** You can choose between "underline", "overline", and "line-through". You can read more about the text-decoration property at W3Schools - CSS text-decoration Property
**Why do I need all the punctuation?** The punctuation, such as the curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer to understand the rules in the stylesheet. The curly braces hold all the rules for a particular selector. Each rule should end in a semicolon, and the properties and values are always separated by a colon.
**What is a stylesheet?** A style sheet is a document that controls how a web page will appear. External style sheets are separate files that are linked to the HTML page.
**What is CSS?** CSS is a language that controls the way content on a web site appears. It uses rule-sets to change the look of a page. Each rule set has a selector, which specifies which elements on the page will be affected, and the rules, which explain how to display the elements. Each rule consists of a property and a value for that property. Here’s an example of a rule-set that makes the text in an `h2` tag blue and cursive:
h2 {
   color: blue;
   font-family: cursive;
In this example, `h2` is the selector, `color` and `font-family` are properties, and `blue` and `cursive` are the values for those properties.

Underlining

  • Find the code in the style sheet that makes the h1 tag underlined.
  • Change the text decoration and see which one you like.
  • Choose from "underline", "overline", and "line-through"
  • Add a text decoration rule for the paragraph or h3 tag.
View on Code Studio

Student Instructions

**How does the code work?** Here is the code that is controlling the paragraph text alignment:
p {
  text-align: left;
}
* `p` is the _selector_. It specifies which elements will have to follow the rules inside the curly braces. The `p` stands for paragraph. * `text-align: left;` is the rule that makes the text inside the `p` tags align to the left side of the paragraph. * `text-align` is the _property_. It explains what the rule is about, in this case the text alignment. * `left` is the _value_. It explains how the rule should be applied, in this case making the text align to the left side of the paragraph.
**Why doesn't `text-align: left;` do anything?** Most properties have default values. The default values are the styles that an element will have automatically, before you add your style sheet. The default value for `text-align` is `left`, so it doesn't change from how it already looked.
**What are the possible values for text align?** You can choose between "left", "right", and "center". You can read more about the text-align property at W3Schools - CSS text-align Property
**Why do I need all the punctuation?** The punctuation, such as the curly braces `{}`, the colon `:`, and the semicolon `;`, help the computer to understand the rules in the style sheet. The curly braces hold all the rules for a particular selector. Each rule should end in a semicolon, and the properties and values are always separated by a colon.
**What is a style sheet?** A style sheet is a document that controls how a web page will appear. External style sheets are separate files that are linked to the HTML page.
**What is CSS?** CSS is a language that controls the way content on a web site appears. It uses rule-sets to change the look of a page. Each rule set has a selector, which specifies which elements on the page will be affected, and the rules, which explain how to display the elements. Each rule consists of a property and a value for that property. Here’s an example of a rule-set that makes the text in an `h2` tag blue and cursive:
h2 {
   color: blue;
   font-family: cursive;
In this example, `h2` is the selector, `color` and `font-family` are properties, and `blue` and `cursive` are the values for those properties.

Text Alignment

The text-align property sets the horizontal (side to side) position of the text within each line.

  • Find the "text-align" property in the paragraph tag.
  • Change the paragraph alignment.
  • Choose from "left", "right", and "center"
View on Code Studio

Review: Basic CSS

Transition: Students should transition off their computers.

Things students might share:

* CSS is the language used to style web pages
* CSS consists of style rule-sets
* Rule-sets are made up of selectors and properties
* Properties have a name and a value
* Selectors can be names of HTML elements without the angle bracket
* New CSS Properties
    * color
    * text-align
    * text-decoration
    * font-family
    * font-size

Goal: Give time for students to share learning from the levels as they have just processed a lot of new information.

Stand Up, Sit Down Review

  1. Have all students in the class stand up.
  2. Call on students one at a time to share one thing they learned during the levels. Don't let them repeat what the previous students said.
  3. Record the information they shared in a location all students can see.
  4. Tell them they can sit down once they have shared something.

Web Lab: Style About Me Page

Transition: Students should resume work on Code Studio.

View on Code Studio

Stop

Stop and wait for your teacher. In the meantime, you can go back to previous levels and try some new ways to use styles.

  • Levels
  • 12
  • 13
  • (click tabs to see student view)
View on Code Studio

Student Instructions

**What is a style sheet?** A style sheet is a document that controls how a web page will appear. External style sheets are separate files that are linked to the HTML page.
**What is CSS?** CSS is a language that controls the way content on a web site appears. It uses rule-sets to change the look of a page. Each rule set has a selector, which specifies which elements on the page will be affected, and the rules, which explain how to display the elements. Each rule consists of a property and a value for that property. Here’s an example of a rule-set that makes the text in an `h2` tag blue and cursive:
h2 {
   color: blue;
   font-family: cursive;
In this example, `h2` is the selector, `color` and `font-family` are properties, and `blue` and `cursive` are the values for those properties.
**How do I create a new style sheet?** To create a new style sheet, click on the "Add CSS" button above the code area.
**What should I name my style sheet?** You can name your style sheet anything, but it's better to choose a relevant name, such as "style.css" or "aboutmestyles.css" so that it's clear what the file is. Your file should always end in the ".css" extension.
**How do I rename a file?** To rename a file, you can right click (or control click) on the file name and choose the "Rename" option. This will allow you to type in a new file name. Clicking on a file name after it is already highlighted will also allow you to rename the file.
**How do I add a style sheet to a web page?** To add a style sheet to a web page, open up the code for the web page. Inside the head tag, add the following code ``. Then change "style.css" to the name of your style sheet.

Adding a Style Sheet

This is your About Me page from before. In the next level, you'll have a chance to add some different styles to it, but first, you need to add a style sheet, name it, and link it to your html page.

  1. Create a new style sheet for your project.
  2. Rename the style sheet file.
  3. Add your style sheet to your HTML page.

View on Code Studio

Student Instructions

About Me Page

Now you can style the text on your About Me page!

  • Open your style sheet and add styling of your choice to your About Me Page. Be sure to use at least 3 different CSS properties.

Checklist

If you’ve used at least 3 of the properties from the checklist, you can explore some additional text properties to add to your About Me page.

Standards Alignment

View full course alignment