Unit2
Ch. 1
1
2
3
4
5
6
7
8
9
Ch. 2
10
11
12
13
14

Lesson 11: Styling Elements with CSS

Overview

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 do more styling of their personal websites.

Purpose

This lesson builds on what students previously learned about CSS properties, this time looking at properties that can be used all 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 11 in Code Studio.

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

    See Level 11 in Code Studio

Agenda

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.

Introduced Code

Support

Lesson Forum

Report a Bug

Teaching Guide

Warm Up (5 minutes)

Discuss: What Styles Do You Want?

Prompt: Yesterday we styled text elements. What other ways do you wish you could style your page?

Discussion Goal

Goal: Students will likely bring up:

  • Adding background colors to things
  • Being able to move things around on the page (center, left, right)
  • Being able to add borders to things
  • Being able to control the size of objects

Discuss: Have students share styles they would like to be able to add their page.

Remarks

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

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)

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

Prompt: Have students reflect on their development of the five practices of CS Discoveries (Problem Solving, Persistence, Creativity, Collaboration, Communication). Choose one of the following prompts as you deem appropriate.

  • Choose one of the five practices in which you believe you demonstrated growth in this lesson. Write something you did that exemplified this practice.

  • Choose one practice you think you can continue to grow in. What’s one thing you’d like to do better?

  • Choose one practice you thought was especially important for the activity we completed today. What made it so important?

  • Exploring more CSS
  • 2
  • 3
  • (click tabs to see student view)
View on Code Studio

Student Instructions

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.
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
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
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?
  • What made the image corners rounded?

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

View on Code Studio

Student Instructions

How does the code work? Here is the code that is making the background of the page blue: 
body {
  background-color: lightblue;
}
* `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.
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
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
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.
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.

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

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.
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
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
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
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
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
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.

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

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 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.
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
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
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

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.
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
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
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

How does the code work? Here is the code that is making the image float on the left hand side of the page: 
img {
  float: left;
}
* `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.
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

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.
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
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
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 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

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.

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

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

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.
  • Put more space around the images.
  • Make all of the text a different color.
  • Add any other styles you want.
  • Styling your Website
  • 13
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Personal Web Site

Try out some of these new CSS properties on your personal web site.

  • Add styling of your choice to your web site. Be sure to use at least three new CSS properties.

Checklist

We encourage you to use more than three, though! Explore additional CSS properties and add them to your 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.