Unit2
Ch. 1
1
2
3
4
5
6
7
8
9
10
11
12
13
Ch. 2
14
15
16
17
18
19
20
21

Lesson 6: Styling Text with CSS

Web Lab

Overview

Question of the Day: How can we change the style of text on a web page?

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.

Purpose

This lesson introduces students to a new language (CSS), and to the idea that different computer languages have different functions and syntax. While only a few CSS properties are introduced in the core lesson, students are encouraged to use the optional activities at the end of the lesson to explore more ways that they can express themselves using CSS.

Assessment Opportunities

  1. Use CSS selectors to style HTML text elements.

    See Level 10 in Code Studio.

  2. Link to an external style sheet.

    See Level 10 in Code Studio.

  3. Explain the differences between HTML and CSS in both use and syntax.

    See the review at the main activity. You may also want to collect a T-chart from each group.

Agenda

Lesson Modifications

Warm Up (5 minutes)

Activity (40 minutes)

Wrap Up (10 minutes)

View on Code Studio

Objectives

Students will be able to:

  • Use CSS selectors to style HTML text elements.
  • Link to an external style sheet.
  • Explain the differences between HTML and CSS in both use and syntax.

Preparation

  • Create a new poster titled CSS Properties if your students will not be tracking new CSS properties in their journals

Links

Heads Up! Please make a copy of any documents you plan to share with students.

For the Teachers

Vocabulary

  • 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

Introduced Code

Support

Report a Bug

Forum

Teaching Guide

Lesson Modifications

Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please see these modifications for Unit 2.

Warm Up (5 minutes)

Journal: HTML Appearance

Display: Send students to the sample web page in Code Studio or display it on the board.

Discussion Goal

Goal: Students should notice that they can get the structure and size of the text right using headings (e.g. <h1>) and paragraphs <p>. They may notice that they cannot change the color of the text. Some other styles to notice are that all the paragraphs are in italics, the speech names are underlined, and the citations are much smaller than the paragraphs.

Prompt: Check out the web page on Code Studio. If you wanted to create a page like this, what do you already know how to do? What do you still need to learn how to do?

Discuss: Have students share which parts they know and don't know

Remarks

So far we have only made web pages where we control the content and structure, such as which parts of the pages are headings 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.

Question of the Day: How can we change the style of text on a web page?

Activity (40 minutes)

Web Lab: Introduction to CSS

Group: Put students in pairs.

Transition: Send students to Code Studio.

Allow students to explore the sample web page in Code Studio.

Display: Watch and discuss the CSS video as a class.

Circulate: Support students as they continue through the lesson progression.

Assessment Opportunity

Make sure students are distinguishing between how HTML indicates the structure of a document and how CSS allows students to set the styles, as well as the differences in how the languages look on the screen and where they are used.

Review: Briefly review the "Content-Structure-Style" paradigm found in the "Help and Tips" area of the Code Studio levels. Draw a T-chart on the board and label one side HTML and one side CSS. Have students work in small groups to think of as many differences they can between the two languages, then come back together as a group and share.

Wrap Up (10 minutes)

Recording CSS Properties

Question of the Day: How can we change the style of text on a web page?

Teaching Tip

Journal or Poster? Just as with the "HTML Tags" page in their journals, you may choose to have your class keep track of CSS Properties in a shared class poster.

Set Up: Have students create a new page in their journals called CSS Properties.

Group: Place students in groups of two to five - you'll need at least one group for each of the properties introduced in this lesson.

Jigsaw: Assign each group one of the properties introduced today. Each group needs to come up with a description and example for their property.

Key Vocabulary:

  • 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

Share: Have groups add their properties to their journals or to the class "CSS Properties" poster.

  • Lesson Overview
  • 1
  • (click tabs to see student view)
View on Code Studio

Student Instructions

  • Sample Website
  • 2
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Sample Website

Click the website below to discover some new types of styling for your pages.

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

Teaching Tip

Have students explore this level with a partner. Afterwards lead a short share out so that partners can share with the class their responses to the three questions in the instructions. The subsequent video should help reinforce what students discovered so there's no need to lead a lengthy debrief conversation.

Student Instructions

::: details [How do I switch between files?]

Click the name of the file you want to look at in the menu on the left side of the screen.

:::

Adding Style

This Web Lab project is using a new language to add style to the page. With a partner explore both the index.html and style.css files. Be ready to discuss the following questions.

  • What changes is this new language making to the page?
  • How is this language different from HTML?
  • How are the index.html and style.css files connected?
  • Video: Intro to CSS - Part 1
  • 4
  • (click tabs to see student view)
View on Code Studio

Teaching Tip

Discussion Goals

Key Vocabulary

  • 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

Students should understand that the structure of the page is there to organize the information in a logical way, but doesn't tell the computer how to display it. So, for example, the structure could include different headings and paragraphs, but would say nothing about the color of text or how big it is displayed. The style of the page is the specifics of its appearance. Without a particular style, each web browser would decide how to display different web page elements on their own.

Styles are important to allow web developers to decide exactly how a web page looks on the screen. Because styles are separate from structure and content, web developers can change the style of an entire page very easily, without having to make any changes to the structure and content of the web page. This means that it's very easy for web pages to have an individual look and feel that is unified across the entire page.

Student Instructions

Questions to Consider

  • How is the style of a web page different from structure?
  • Why might you want your web page to have a certain style?

Download Video

  • Skill Building
  • 5
  • 6
  • 7
  • (click tabs to see student view)
View on Code Studio

Student Instructions

::: details [**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 ::: ::: details [**How does the code work?**] Here is the code that is making the `h1` heading red: wzxhzdk:0 * `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. ::: ::: details [**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. ::: ::: details [**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. ::: ::: details [**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: wzxhzdk:1 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 contains information about what each of the HTML elements should look like.

Do this

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

Assessment Opportunities

Key Concepts:

Apply formatting in a web page using CSS

Assessment Criteria:
Extensive Evidence

The h3 headings are a new color (not black). There is no extra code in the stylesheet, and there are no syntax errors in the code.

Convincing Evidence

The h3 headings are a new color (not black).

Limited Evidence

The h3 headings have a special rule-set in the stylesheet, and the color property is used, but there are enough errors that the text does not change color.

No Evidence

There is no special rule-set for h3 headings or the color property is not used in the rule-set.

Student Instructions

::: details [**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 ::: ::: details [**How does the code work?**] Here is the code that is making the `h1` header red: wzxhzdk:0 * `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. ::: ::: details [**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. wzxhzdk:1 * `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. ::: ::: details [**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. ::: ::: details [**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. ::: ::: details [**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: wzxhzdk:2 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.

Do this

  • 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 style for the h3 tag.
  • Add code to set a different color for the h3 tags.
View on Code Studio

Student Instructions

::: details [**How does the code work?**] Here is the code that is controlling the paragraph text size: wzxhzdk:0 * `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. ::: ::: details [**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. ::: ::: details [**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. ::: ::: details [**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. ::: ::: details [**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: wzxhzdk:1 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.

Do This

  • Find the CSS rule-set in the style sheet that determines the style for the paragraph tag.
  • Change the text size of the paragraphs and the headings.
  • Video: Intro to CSS - Part 2
  • 8
  • (click tabs to see student view)
View on Code Studio

Teaching Tip

Discussion Goals

Make sure all the students understand how to link to their stylesheet from each web page.

Student Instructions

Question to Consider

  • How does the web page know what stylesheet it should be using?

Download Video

  • Skill Building
  • 9
  • (click tabs to see student view)
View on Code Studio

Student Instructions

::: details [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.

:::

::: details [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.

:::

::: details [How do I create a new style sheet?] To create a new style sheet, click on the "Add CSS" button above the code area. :::

::: details [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. :::

::: details [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. :::

::: details [How do I link a style sheet to a web page?]

To link a style sheet to a web page, open up the code for the web page. Inside the head tag, add the following code <link rel="stylesheet" href="style.css">. Then change "style.css" to the name of your style sheet.

:::

Adding a Style Sheet

This developer has been working on some style for the page, but has forgotten to add the stylesheet, so none of them work!

Do this

  • Inside the HTML page, add the code that will link the style sheet to the web page.

View on Code Studio

Student Instructions

Try out your new skills on these different challenges!


Choose from the following activities:
a
Debug the font size

Use your debugging skills to figure out why the font size isn't changing.

b
Debug the missing paragraph style

Use your debugging skills to figure out why the paragraph style is not being applied.

c
Debug the missing heading style

Use your debugging skills to figure out why the heading style is not being applied.

d
Debug the missing styles

Use your debugging skills to figure out why none of the styles are being applied.

e
Add a heading rule-set

Add a rule-set for the heading of this article.

f
Add a paragraph rule-set

Add a rule-set for the paragraph of this ad.

g
Add a style sheet

Add a style sheet and rule-sets to this article.

View on Code Studio

Student Instructions

Debug: Wrong Font Size

::: details [What is a bug?] Bugs are mistakes in code which causes it not to work as planned. :::

::: details [What is debugging?] Debugging is the process of finding and fixing bugs. Debugging is a problem solving process so use your problem solving steps as you try to debug. :::

::: details [What are some examples of bugs?]

Bugs can be anything that causes code not to work as planned. Some examples are misspelling, putting code in the wrong place, using the wrong tag, or forgetting to close a tag.

:::

::: details [Why does the code sometimes turn pink?]

Web Lab is programmed to automatically detect some mistakes in HTML. When it notices a mistake, it turns that code pink. The mistake might be in pink, or it might be somewhere before the pink code. You'll need to carefully debug to find your mistake.

:::

::: details [Why does HTML seem to work even when it's broken?]

HTML is read by your web browser to generate web pages. Since people often make little mistakes when writing their web pages, browsers are programmed to make a best guess of what you intended to do. Sometimes different browsers are even programmed to make different guesses! The only way to ensure your code looks like you intend is make sure you're always using tags correctly.

:::

Someone has submitted a bug report on this web page. Can you fix the bug?

What I expected to happen What happened instead
Paragraph font size to be 24px Paragraph font is the default size

# Do this * Find and fix the problem that is causing the bug.

View on Code Studio

Student Instructions

Debug: Missing Paragraph Style

::: details [What is a bug?] Bugs are mistakes in code which causes it not to work as planned. :::

::: details [What is debugging?] Debugging is the process of finding and fixing bugs. Debugging is a problem solving process so use your problem solving steps as you try to debug. :::

::: details [What are some examples of bugs?]

Bugs can be anything that causes code not to work as planned. Some examples are misspelling, putting code in the wrong place, using the wrong tag, or forgetting to close a tag.

:::

::: details [Why does the code sometimes turn pink?]

Web Lab is programmed to automatically detect some mistakes in HTML. When it notices a mistake, it turns that code pink. The mistake might be in pink, or it might be somewhere before the pink code. You'll need to carefully debug to find your mistake.

:::

::: details [Why does HTML seem to work even when it's broken?]

HTML is read by your web browser to generate web pages. Since people often make little mistakes when writing their web pages, browsers are programmed to make a best guess of what you intended to do. Sometimes different browsers are even programmed to make different guesses! The only way to ensure your code looks like you intend is make sure you're always using tags correctly.

:::

What I expected to happen What happened instead
Paragraph color is gray Paragraph color is black

# Do this * Find and fix the problem that is causing the bug.

View on Code Studio

Student Instructions

Debug: Missing Heading Style

::: details [What is a bug?] Bugs are mistakes in code which causes it not to work as planned. :::

::: details [What is debugging?] Debugging is the process of finding and fixing bugs. Debugging is a problem solving process so use your problem solving steps as you try to debug. :::

::: details [What are some examples of bugs?]

Bugs can be anything that causes code not to work as planned. Some examples are misspelling, putting code in the wrong place, using the wrong tag, or forgetting to close a tag.

:::

::: details [Why does the code sometimes turn pink?]

Web Lab is programmed to automatically detect some mistakes in HTML. When it notices a mistake, it turns that code pink. The mistake might be in pink, or it might be somewhere before the pink code. You'll need to carefully debug to find your mistake.

:::

::: details [Why does HTML seem to work even when it's broken?]

HTML is read by your web browser to generate web pages. Since people often make little mistakes when writing their web pages, browsers are programmed to make a best guess of what you intended to do. Sometimes different browsers are even programmed to make different guesses! The only way to ensure your code looks like you intend is make sure you're always using tags correctly.

:::

What I expected to happen What happened instead
Heading color is green Heading color is black

# Do this * Find and fix the problem that is causing the bug

View on Code Studio

Student Instructions

Debug: Missing Styles

::: details [What is a bug?] Bugs are mistakes in code which causes it not to work as planned. :::

::: details [What is debugging?] Debugging is the process of finding and fixing bugs. Debugging is a problem solving process so use your problem solving steps as you try to debug. :::

::: details [What are some examples of bugs?]

Bugs can be anything that causes code not to work as planned. Some examples are misspelling, putting code in the wrong place, using the wrong tag, or forgetting to close a tag.

:::

::: details [Why does the code sometimes turn pink?]

Web Lab is programmed to automatically detect some mistakes in HTML. When it notices a mistake, it turns that code pink. The mistake might be in pink, or it might be somewhere before the pink code. You'll need to carefully debug to find your mistake.

:::

::: details [Why does HTML seem to work even when it's broken?]

HTML is read by your web browser to generate web pages. Since people often make little mistakes when writing their web pages, browsers are programmed to make a best guess of what you intended to do. Sometimes different browsers are even programmed to make different guesses! The only way to ensure your code looks like you intend is make sure you're always using tags correctly.

:::

What I expected to happen What happened instead
Heading 1 color is blue Heading 1 color is black
Heading 2 color is green Heading 2 color is black
Paragraph font is 12px Paragraph font is default size

# Do this * Find and fix the problem that is causing the bug

View on Code Studio

Student Instructions

Add Heading Rule

Here is an opportunity to be creative and customize the heading.

# Do this * Add a rule-set for the heading.

View on Code Studio

Student Instructions

Add Paragraph Rule

Here is an opportunity to be creative and customize the paragraph.

# Do this * Add a rule-set for the paragraph.

View on Code Studio

Student Instructions

Add Style Sheet

Here is an opportunity to be creative and practice everything you have learned about style.

# Do this * Add a style sheet and rule-sets.

  • Assessment
  • 11
  • (click tabs to see student view)
View on Code Studio

Assessment Opportunities

Key Concepts:

Assessment Criteria:
Extensive Evidence

The paragraphs are a new color and size, and there are no errors or inconsistencies in the HTML or CSS code.

Convincing Evidence

The paragraphs are a new color or size.

Limited Evidence

The paragraphs have a special rule-set in the stylesheet, and the color or size property is used, but there are enough errors that the text does not change color or size. There is HTML code that attempts to link the stylesheet to the web page.

No Evidence

There is no special rule-set for paragraphs or the color or size properties are not used in the rule-set. There is no code to link the stylesheet to the web page.

Student Instructions

::: details [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. :::

::: details [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. :::

::: details [How do I create a new style sheet?] To create a new style sheet, click on the "Add CSS" button above the code area. :::

::: details [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. :::

::: details [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. :::

::: details [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 <link rel="stylesheet" href="style.css">. Then change "style.css" to the name of your style sheet.

:::

Style this page!

Here is an opportunity to be creative and have some fun with styles.

# Do this * Link the stylesheet to the web page. * Make the paragraph text a different size. * Make the paragraph text a different color.

View on Code Studio

Student Instructions

There are lots of different ways to style text. Use the challenges below to get new ideas for your web page.


Choose from the following activities:
a
Extra Code: Font Family

Learn to use different font styles.

b
Extra Code: Underlining

Put lines under, over, or through your text.

c
Extra Code: Align text

Align text to the right or center of the page.

d
Extra Code: Letter Spacing

Space letters further out and closer to each other.

e
Extra Code: Text Shadow

Learn how to give your text a shadow

f
Free Play

Make a web page using the new code.

View on Code Studio

Teaching Tip

Note on fonts and font families

For a web browser to display a font, the font must be available on the device the web browser is running on. There's no guarantee that any device has a particular font, so it's much safer to use font families, which allow for many different fonts that have the same general look at feel.

If students want to specify an exact font, they'll need to use a font from the web, so the browser can download that specific font to use when rendering the page. More information on these fonts can be found at Google Fonts and W3Schools.

Student Instructions

::: details [**How does the code work?**] Here is the code that is controlling the paragraph font: wzxhzdk:0 * `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. ::: ::: details [**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 ::: ::: details [**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. ::: ::: details [**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. ::: ::: details [**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: wzxhzdk:1 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

::: details [**How does the code work?**] Here is the code that makes the `h1` elements underlined: wzxhzdk:0 * `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. ::: ::: details [**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 ::: ::: details [**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. ::: ::: details [**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. ::: ::: details [**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: wzxhzdk:1 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 h4 tag double underlined.
  • Change the text decoration to something else.
  • Choose from "underline", "overline", and "line-through"
  • Add a text decoration rule for the paragraph, h1, h2 or h3 tag.
View on Code Studio

Student Instructions

::: details [**How does the code work?**] Here is the code that is controlling the paragraph text alignment: wzxhzdk:0 * `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. ::: ::: details [**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. ::: ::: details [**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 ::: ::: details [**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. ::: ::: details [**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. ::: ::: details [**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: wzxhzdk:1 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 CSS code that is making the "From Wikipedia" in the h6 tag align to the right.
  • Change the h1 tag so that it is aligned to the center of the page.
  • Change the alignment of the paragraph tag, too.
View on Code Studio

Student Instructions

::: details [**How does the code work?**] Here is the code that is controlling the paragraph text alignment: wzxhzdk:0 * `p` is the _selector_. It specifies which elements will have to follow the rules inside the curly braces. The `p` stands for paragraph. * `letter-spacing: 5px;` is the rule that makes the characters inside the `p` tags be spaced out by 5 pixels each. * `letter-spacing` is the _property_. It explains what the rule is about, in this case the space between each character. * `5px` is the _value_. It explains how the rule should be applied, in this case making each character spaced 5 pixels from each other. ::: ::: details [**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. ::: ::: details [**Why doesn't `text-align: 0px;` 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 `letter-spacing` is `0`, so it doesn't change from how it already looked. ::: ::: details [**What are the possible values for letter spacing?**] You can choose between negative and positive numbers. Negative numbers space the letters closer to each other while positive numbers space the letters out further. ::: ::: details [**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. ::: ::: details [**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. ::: ::: details [**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: wzxhzdk:1 In this example, `h2` is the selector, `color` and `font-family` are properties, and `blue` and `cursive` are the values for those properties. :::

Letter Spacing

The letter-spacing property sets the space between each letter between text elements.

  • Find the CSS code that is making the letters in "Orchids!" in the h1 tag be spaced out more than normal.
  • Change the h2 tag so that the letters are spaced out by two pixels.
  • Change the letter spacings of the paragraph and h3 tags as well.
View on Code Studio

Student Instructions

::: details [**How does the code work?**] Here is the code that is controlling the text shadow: wzxhzdk:0 he `text-shadow` property gives text a "shadow", meaning that it ill create a duplicate of the text but slightly shifted to make it look like a shadow. The first value is how much the shadow will be shifted horizontal and the second value will be how much the shadow will be shifted vertically. And if you want, you can change the color along with other properties. Read more about it at W3Schools - CSS text-shadow Property ::: ::: details [**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. ::: ::: details [**Why doesn't text-shadow: 0px 0px; 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-shadow` is `0px 0px`, so it doesn't change from how it already looked. ::: ::: details [**What are the possible values for text shadow??**] You can choose between negative and positive numbers. Negative numbers move the shadow either ledt or up while positive numbers move the shadow to the right or up. ::: ::: details [**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. ::: ::: details [**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. ::: ::: details [**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: wzxhzdk:1 In this example, `h2` is the selector, `color` and `font-family` are properties, and `blue` and `cursive` are the values for those properties. :::

Text Shadow

The text-shadow property sets sets a shadow for the text elements.

  • Find the CSS code that is giving the letters in "Stradivarius Violins" a shadow in the h1 tag.
  • Give the h2 tag a shadow spaced two pixels to the right and up from the original text.
  • Give a text shadow to other tags as well.
View on Code Studio

Student Instructions

Free Play

Use your new knowledge to create a new page with as many styles as possible.

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming
  • 2-AP-16 - Incorporate existing code, media, and libraries into original programs, and give attribution.
  • 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.