Lesson 8: Styling Elements with CSS

Web Lab

Overview

This lesson continues to introduce 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 About Me page.

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 .

Agenda

Warm Up (5 minutes)

Activity (40 minutes)

Wrap Up (5 minutes)

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.

Preparation

Links

For the Students

Introduced Code

Support

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

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)

Web Lab: Styling Elements with CSS

Wrap Up (5 minutes)

CSS Properties List

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

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

View on Code Studio

The Internet - Web Development: Lesson 8

  • Levels
  • 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 puzzles, 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

Review: Styling the Body Element

As a class review the body element and how it impacts styling. Make sure students understand that the rule-set for the body element only applies if a specific rule is not provided for that element.

View on Code Studio

STOP: CSS

In the last lesson, you used CSS to change the way that the text appeared on the screen. CSS can also be used to style other elements on the page. You can give elements borders, change their size and where they appear on the screen, and change the way the background appears.

The body Element

One special element is the body element, which includes everything on the page. Rule-set for the body element will apply to every element on page, unless the element itself has a rule that contradicts it.

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 headers 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 in 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 in 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 width 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

Review: Properties Posters

Properties Posters

Group: Divide the class into 8 groups.

Set up: Assign each group 1 of the properties they learned about today.

  • Background Color
  • Border Width
  • Border Color
  • Border Style
  • Width
  • Height
  • Float
  • Margin

Have each group make a diagram which explains how their properties works. It should include:

  • Explain the possible values that can be used
  • Example CSS code
  • Example output from code
  • Short explanation of what happens when you use this property

This can be done on a poster sized paper or normal sized paper depending on how you want to display them and what you have available.

View on Code Studio

STOP

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

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

Student Instructions

About Me Page

Try out these some new CSS properties on your About Me page.

  • Add styling of your choice to your About Me Page. Be sure to use at least 3 new CSS properties.

Checklist

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

Standards Alignment

View full course alignment