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 11: Styling Elements with CSS

Overview

Question of the Day: How can we style the images and layouts of our pages?

This lesson continues the introduction to CSS style properties, this time focusing more on non-text elements. Students begin this lesson by looking at a website about Desserts of the World. They investigate and modify the new CSS styles on this website, adding their own styles to the page. After working on the Desserts page, students apply their knowledge of new CSS properties to their personal websites.

Purpose

This lesson builds on what students previously learned about CSS properties, this time looking at properties that can be used on elements. These new properties impact the visual look of the web page beyond its text and give students more precise control over the layout of their pages. As students expand their knowledge of style properties, many may have questions about how they can do even more with CSS. Curious students can explore more properties at W3 Schools .

Assessment Opportunities

  1. Use CSS properties to change the layout properties of elements.

    See Level 8 in Code Studio.

  2. Create a CSS rule-set for the body element that impacts all elements on the page.

    See Level 8 in Code Studio

Agenda

Lesson Modifications

Warm Up (5 minutes)

Activity (40 minutes)

Wrap Up (5 minutes)

View on Code Studio

Objectives

Students will be able to:

  • Use CSS properties to change the size, position, and borders of elements.
  • Create a CSS rule-set for the body element that impacts all elements on the page.

Links

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

For the Teachers

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)

Discuss: What Styles Do You Want?

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

Prompt: What are two CSS styles on this page that you already know? What are two styles on the page that you don’t know how to code yet?

Discussion Goal

Goal: This discussion serves as a review of the CSS properties students have already learned and showcases some of the new properties they will be learning in this lesson. Some of the new properties showcased are:

  • Adding background colors to things
  • Being able to move things around on the page (the images to the left of the text)
  • Being able to add borders to and round corners of images

Discuss: Have students share different stylings on the page.

Remarks

Today we are going to learn more properties we can use to style our web pages, which will allow you to add some of the styles we listed in this discussion.

Question of the Day: How can we style the images and layouts of our pages?

Activity (40 minutes)

Teaching Tip

Pair Programming: Consider using pair programming for some or all of this lesson, in particular as students are learning new CSS properties.

Web Lab: Styling Elements with CSS

Transition: Send students to Code Studio.

Wrap Up (5 minutes)

Question of the Day: How can we style the images and layouts of our pages?

Journal: Have students add the new properties they learned to the CSS Properties page in their journal or the class poster.

Prompt: How might you want to use these new styles in your personal web page?

  • 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 Websites

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

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

Student Instructions

::: details [**What does the body selector do?**] Because the content of the web page is all inside the `body` tag, the body selector gives style rules for everything on the web page. ::: ::: details [**What does the border-style property do?**] The `border-style` property determines what kind of border (solid, dotted, dashed, etc.) the element has. You can read more about this property at W3Schools - CSS border-style Property ::: ::: details [**What does the border-radius property do?**] The `border-radius` property determines the radius of the curves at the corners of the element. A bigger radius makes a bigger, softer curve, and a smaller radius makes a smaller, sharper curve. A radius of zero makes a regular corner. You can read more about this property at W3Schools - CSS3 border-radius property ::: ::: details [**What does the float property do?**] The `float` property makes an element "float", meaning that the elements that come after it all flow around it. If the `float` value is `left`, the element will float to the left, and the elements after it will show up on its right. If the `float` value is `right`, the element will float to the right, and the elements after it will show up on its left. You can read more about this property at W3Schools - CSS float Property :::

Layout and Style

  • Look through web page below for new styles.
  • Open the style sheet
  • With your partner, discuss which parts of the CSS code you think are making the page appear different.
  • What makes the entire page blue?
  • How are the images positioned to the left of all the other elements?

In the next few levels, you'll be changing and adding new styles on this page.

View on Code Studio

Student Instructions

::: details [**How does the code work?**] Here is the code that is making the background of the page blue: wzxhzdk:0 * `body` is the _selector_. It specifies which elements will have to follow the rules inside the curly braces, in this case, the body element is the entire page. * `background-color: lightblue;` is the rule that makes the entire page light blue. * `background-color` is the _property_. It explains what the rule is about, in this case the color of the background. * `lightblue` is the _value_. It explains how the rule should be applied, in this case making the background light blue. ::: ::: 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 [**What does the background-color property do?**] The `background-color` property determines the color of the background of an element. You can read more about the property at W3Schools - CSS background-color Property ::: ::: details [**What if an element inside the page has a different background color from the body?**] You can see the answer to this question by adding a `background-color` rule to the `p` tag. The paragraphs will have the background color in the rule for the `p` tag, and the rest of the page will follow the rule for the `body` tag. ::: ::: 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. :::

Background Color

  • Find the code in the style sheet that is making the background of the entire page light blue.
  • Change the code to make the page a different color.
  • Try to change the background color of just the paragraphs.
View on Code Studio

Student Instructions

::: details [**What does the body selector do?**] Because the content of the web page is all inside the `body` tag, the body selector gives style rules for everything on the web page. ::: ::: details [**What does the color property do?**] The `color` property specifies the color of the text. If there’s no text, it won’t do anything. Read more at W3Schools - CSS color Property ::: ::: details [**What does the text-align property do?**] The `text-align` property aligns the text to the left, right, or center. You can read more at W3Schools - CSS text-align Property ::: ::: details [**What does the text-decoration property do?**] The `text-decoration` property puts a line over, under, or through a piece of text. You can read more about the property at W3Schools - CSS text-decoration Property ::: ::: details [**What does the font-family property do?**] The `font-family` property changes the font of the text. It gives a general description of the type of font that should be used, but each browser might display the font slightly differently. Read more at W3chools - CSS font-family Property ::: ::: details [**What does the font-size property do?**] The `font-size` property changes the size of the text. You can use general terms, such as `small`, `medium`, and `large`, or you can specify the exact size in pixels, such as `20px`. Read more at W3Schools - CSS font-size Property ::: ::: 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:0 In this example, `h2` is the selector, `color` and `font-family` are properties, and `blue` and `cursive` are the values for those properties. :::

The Body Element

  • Find the body rule-set in the style sheet.
  • Discuss with a partner what you think will happen if you add text-align, color, or other text properties to the body rule set.
  • Try out some different properties to check your guesses.
View on Code Studio

Student Instructions

::: details [**How does the code work?**] Here is the code that is making the image float on the left hand side of the page: wzxhzdk:0 * `img` is the _selector_. It specifies which elements will have to follow the rules inside the curly braces, in this case, the images. * `float: left;` is the rule that makes the image float to the left. ::: ::: details [**What does the `float` property do?**] The `float` property makes an element "float", meaning that the elements that come after it all flow around it. If the `float` value is `left`, the element will float to the left, and the elements after it will show up on its right. If the `float` value is `right`, the element will float to the right, and the elements after it will show up on its left. You can read more about this property at W3Schools - CSS float Property :::

Float

  • Look at the float property inside your img rule-set
  • Discuss with your partner what you think the property does.
  • Change the value from left to right.
View on Code Studio

Student Instructions

::: details [**How does the code work?**] Here is the code that is making the image its current size: img { width: 250px; } * `img` is the _selector_. It specifies which elements will have to follow the rules inside the curly braces, in this case, the images. * `width: 250px` is the rule that makes the image 250 pixels wide. It also changes the height so that the image does not stretch. ::: ::: details [**What does the `width` property do?**] The `width` property determines how wide the element will be. Most of the time, you will define the width in pixels, which makes the element take up an exact amount of space on the screen. Defining the width will also change the height so that the image does not stretch, unless you have also defined the height. You can read more about this property at W3Schools - CSS width Property ::: ::: details [**What does the `height` property do?**] The `height` property determines how tall the element will be. Most of the time, you will define the height in pixels, which makes the element take up an exact amount of space on the screen. Defining the height will also change the width so that the image does not stretch, unless you have also defined the width. You can read more about this property at W3Schools - CSS height 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 does using a width and height rule at the same time sometimes stretch out the image?**] When the width of an images changes, the height must change by the same percentage, otherwise the image will stretch. For example, if you double the width of an image, you must also double the height, or the image will be stretched horizonally. When you only define the width or the height, the computer will automatically change the other property so that the image looks the same. :::

Width and Height

  • Find the property in the style sheet that controls the width of the images.
  • Change the width of the images to be larger or smaller.
  • Create a new rule with a height property to control the height of the images.
  • Use the width property in the p rule-set to change the width of your paragraphs.
View on Code Studio

Student Instructions

Practice your new skills here.


Choose from the following activities:
a
Debug some images

Figure out why the images are not the correct height and debug this page.

b
Debug the style

Figure out why the images are not the correct height and debug this page.

c
Debug the Heading

Figure out what's wrong with the code even though the preview looks like it is correct.

d
Add New Rules

Right now there are very few rules for the body of this page. Add some more to make it look cool!

e
Fix Image Width

Fix the issue with images being different sizes from each other.

f
Fix Image Position

Make it so the images are next to the text

View on Code Studio

Student Instructions

::: details [**How does the code work?**] Here is the code that is making the image its current size: wzxhzdk:0 * `img` is the _selector_. It specifies which elements will have to follow the rules inside the curly braces, in this case, the images. * `width: 250px` is the rule that makes the image 250 pixels wide. It also changes the height so that the image does not stretch. ::: ::: details [**What does the `width` property do?**] The `width` property determines how wide the element will be. Most of the time, you will define the width in pixels, which makes the element take up an exact amount of space on the screen. Defining the width will also change the height so that the image does not stretch, unless you have also defined the height. You can read more about this property at W3Schools - CSS width Property ::: ::: details [**What does the `height` property do?**] The `height` property determines how tall the element will be. Most of the time, you will define the height in pixels, which makes the element take up an exact amount of space on the screen. Defining the height will also change the width so that the image does not stretch, unless you have also defined the width. You can read more about this property at W3Schools - CSS height 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 does using a width and height rule at the same time sometimes stretch out the image?**] When the width of an images changes, the height must change by the same percentage, otherwise the image will stretch. For example, if you double the width of an image, you must also double the height, or the image will be stretched horizonally. When you only define the width or the height, the computer will automatically change the other property so that the image looks the same. :::

Debug the Images

These images are all supposed to be 100 pixels high, but the height property is not working. Find the bug and make the images all the same height.

View on Code Studio

Student Instructions

::: details [**How does the code work?**] Here is the code that is making the image its current size: img { width: 250px; } * `img` is the _selector_. It specifies which elements will have to follow the rules inside the curly braces, in this case, the images. * `width: 250px` is the rule that makes the image 250 pixels wide. It also changes the height so that the image does not stretch. ::: ::: details [**What does the `width` property do?**] The `width` property determines how wide the element will be. Most of the time, you will define the width in pixels, which makes the element take up an exact amount of space on the screen. Defining the width will also change the height so that the image does not stretch, unless you have also defined the height. You can read more about this property at W3Schools - CSS width Property ::: ::: details [**What does the `height` property do?**] The `height` property determines how tall the element will be. Most of the time, you will define the height in pixels, which makes the element take up an exact amount of space on the screen. Defining the height will also change the width so that the image does not stretch, unless you have also defined the width. You can read more about this property at W3Schools - CSS height 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 does using a width and height rule at the same time sometimes stretch out the image?**] When the width of an images changes, the height must change by the same percentage, otherwise the image will stretch. For example, if you double the width of an image, you must also double the height, or the image will be stretched horizonally. When you only define the width or the height, the computer will automatically change the other property so that the image looks the same. :::

Debug the Style

None of the styles are working for this page. Debug the code, then change the styles to something you like.

View on Code Studio

Student Instructions

::: details [**What does `head` do?**] The `` tags contain information, called metadata, about your web page. Metadata is not displayed on your web page and content you want on your actual page should not go here. ::: ::: details [**What does `body` do?**] Between the `` tags is where you want to be the content of your web page. It should contain the body of the web page, including all text, media, links, etc. that you want people to see on your page. :::

Debug the Headings

Everything looks like it's working for this page, but something's not right. Can you figure out what's wrong?

View on Code Studio

Student Instructions

Add New Rules

The rules for the body right now are not very exciting. Add some more to make it look cool! You can also add or change other rules.

View on Code Studio

Student Instructions

::: details [**What does the `width` property do?**] The `width` property determines how wide the element will be. Most of the time, you will define the width in pixels, which makes the element take up an exact amount of space on the screen. Defining the width will also change the height so that the image does not stretch, unless you have also defined the height. You can read more about this property at W3Schools - CSS width 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. :::

Change the Width

The images here are all different sizes with some of them way too big. Create a rule that makes the width of all the images the same and sizes them down!

View on Code Studio

Student Instructions

::: details [**What does the float property do?**] The `float` property makes an element "float", meaning that the elements that come after it all flow around it. If the `float` value is `left`, the element will float to the left, and the elements after it will show up on its right. If the `float` value is `right`, the element will float to the right, and the elements after it will show up on its left. You can read more about this property at W3Schools - CSS float Property :::

Change the Position

Move the images using the float property so that they are to the side of the text rather than below it.

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

Assessment Opportunities

Key Concepts:

Create rules that affect entire groups of elements; apply formatting in a web page using CSS.

Assessment Criteria:
Extensive Evidence

The background, images, and text have all been styled as described in the instructions. There are no syntax errors or extra code (that does not function) in the stylesheet.

Convincing Evidence

The background, images, and text have all been styled as described in the instructions, but there may be minimal errors or non-functioning code in the stylesheet.

Limited Evidence

Rule-sets have been created in the style-sheet to style the background, images, and text, but there are major errors that prevent the code from working properly.

No Evidence

There are no rule-sets in the stylesheet, or the rule-sets do not have the necessary selectors to style the background or images in the pages.

Student Instructions

Try it out!

Now that you've seen some different ways to style, it's time to try it out yourself. Here's a web page you've seen before, but it needs some style!

Do This

  • Give the webpage a background color.
  • Make all the images go to the right of the page.
  • Make all of the text a different color.
  • Add any other styles you want.
View on Code Studio

Student Instructions

Try extra challenges or learn some new code.


Choose from the following activities:
a
Extra Code: Create Borders

Create borders around the elements on your page.

b
Extra Code: Rounded Corners

Make the corners of your images rounded.

c
Extra Code: Margins

Control the amount of space around each element in your page.

d
Extra Code: Background Image (url)

Learn how to add background images using a url.

e
Challenge: Animal Webpage

Complete this challenge that asks you to style a web page about animals.

f
Challenge: Dessert Webpage

Complete this challenge that asks you to style a web page about desserts.

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 image borders:

img {
  border-color: saddlebrown;
  border-width: 4px;
  border-style: solid;
  border-radius: 10px;
}
  • img is the selector. It specifies which elements will have to follow the rules inside the curly braces, in this case, the images.
  • border-color: saddlebrown;,border-width: 4px;,border-style: solid;, and border-radius: 10px; are the rules that make the border. :::

::: details [What does the border-style property do?] The border-style property determines what kind of border (solid, dotted, etc.) the element has. You can read more about this property at W3Schools - CSS border-style Property :::

::: details [What does the border-radius property do?] The border-radius property determines the radius of the curves at the corners of the element. A bigger radius makes a bigger, softer curve, and a smaller radius makes a smaller, sharper curve. A radius of zero makes a regular corner. You can read more about this property at W3Schools - CSS3 border-radius property :::

::: details [What does the float property do?]

The float property makes an element "float", meaning that the elements that come after it all flow around it. If the float value is left, the element will float to the left, and the elements after it will show up on its right. If the float value is right, the element will float to the right, and the elements after it will show up on its left. You can read more about this property at W3Schools - CSS float Property

:::

Borders

  • Find the rules in the style sheet that set image borders color and width.
  • Change the color and width of your borders.
  • Try out some different border styles.
  • Choose from dotted, dashed, solid, and double
  • Put a border on another type of page element, such as one of the headings or the paragraphs.
View on Code Studio

Student Instructions

::: details [How does the code work?] Here is the code that is making the image borders:

img {
  border-color: saddlebrown;
  border-width: 4px;
  border-style: solid;
  border-radius: 10px;
}
  • img is the selector. It specifies which elements will have to follow the rules inside the curly braces, in this case, the images.
  • border-color: saddlebrown;,border-width: 4px;,border-style: solid;, and border-radius: 10px; are the rules that make the border. :::

::: details [What does the border-style property do?] The border-style property determines what kind of border (solid, dotted, etc.) the element has. You can read more about this property at W3Schools - CSS border-style Property :::

::: details [What does the border-radius property do?] The border-radius property determines the radius of the curves at the corners of the element. A bigger radius makes a bigger, softer curve, and a smaller radius makes a smaller, sharper curve. A radius of zero makes a regular corner. You can read more about this property at W3Schools - CSS3 border-radius property :::

::: details [What does the float property do?]

The float property makes an element "float", meaning that the elements that come after it all flow around it. If the float value is left, the element will float to the left, and the elements after it will show up on its right. If the float value is right, the element will float to the right, and the elements after it will show up on its left. You can read more about this property at W3Schools - CSS float Property

:::

Border Radius

  • Look at the border-radius property inside your img rule-set
  • Discuss with your partner what you think the property does.
  • Try different values for border radius and decide which one you like the best.
View on Code Studio

Student Instructions

::: details [How does the code work?] Here is the code that is putting extra space around the images:

img {
    margin: 10px;
}

  • img is the selector. It specifies which elements will have to follow the rules inside the curly braces, in this case, the images.

  • margin: 10px; is the rule that puts 10 pixels of space around the image. :::

::: details [What does the margin property do?]

The margin property determines how much space will be around the image. Most of the time, you will define in the margin in pixels. You can read more about this property at W3Schools - CSS margin 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.

:::

Margin

Margins specify how much space should be around an element.

  • Find the margin property in the img rule-set.
  • Change the margin to be larger, and discuss the effect with a partner.
  • Choose another element type and give it a margin, too.
View on Code Studio

Student Instructions

Background Image

The background of an element can be set to any image that you would like! Just like when inserting a photo, you can use the image's url name. Find the property in the style sheet that controls the background image. Change the image to one of your choice.

View on Code Studio

Student Instructions

Challenge: Style Animal Web Page

A basic web page about endangered animal species has been provided for you. Complete these challenges to add style to it: Create a background color or image for the page. Make the images have a consistent height or width. Give each heading unique styles: font family, color, size, decoration, etc. Float all the images to the left. Put a margin and green border around the images. Add any other style or content to customize the page!

View on Code Studio

Student Instructions

Challenge: Style Dessert Web Page

A basic web page about desserts has been provided for you. Complete these challenges to add style to it: Create a background color or image for the page. Fix heading sizes so it looks better. Give each heading unique styles: font family, color, size, decoration, etc. Round the edges of the images. Add another dessert with a description and image (give proper citation!). Add any other style or content to customize the page!

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.