Styling Text with CSS

Web Development - Lesson 6

Styling Text with CSS

Open Ended

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?

Warm Up

• Get the structure and size of text using headings and paragraphs (<h1> and <p>)

• Don't know how to change the color of the text, italics, underline

  • Citations are very small

Question of the Day

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

(e.g. color, font size, italics)

Web Development Lesson 6 - Warm Up

Code Studio, Level 2

Do This

● Explore the index.html and style.css files

Web Development Lesson 6 - Activity

Web Development Lesson 6 - Activity

Open Ended

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

Web Development Lesson 6 - Activity

Intro to CSS

• The structure of the page organizes the information in a logical way, but doesn't tell the computer how to display it

• The style of the page is the specifics of its appearance

• Having them seperate makes changing the style of a website easier

  • Can have an individual look on each page but still be unified across the entire site

Web Development Lesson 6 - Activity

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

Web Development Lesson 6 - Activity

Code Studio Level 3-7

Do This
● Follow the instructions on each level
● If you get stuck, try…

○ Drop down tips
○ Help and Tips Tab
○ Code documentation

● If you make a big mistake…

○ Use version history to go back

Web Development Lesson 6 - Activity

Code Studio, Level 8

Do This

● Add code that will link the stylesheet to the HTML file

Web Development Lesson 6 - Activity

Code Studio, Level 9

Practice styling text using CSS. Complete FOUR of the choice modules here.

Web Development Lesson 6 - Activity

Code Studio, Level 10 & 11

Assessment & Reflection Levels

Level 10: Do This

●

Follow the instructions to complete the task in Level 10.

●

The "Rubric" tab describes how to demonstrate your understanding.

●

Check out the Help & Tips tab if you need help.

Level 11: Do This

●

Reflect on how you did on the assessment task

●

How did you know how to complete it? What was easy? What was
challenging?

Web Development Lesson 6 - Activity

Code Studio, Level 12

Complete FOUR of the challenges

Web Development Lesson 6 - Activity

Open Ended

Describe one CSS property you learned today and give an example.

Web Development Lesson 6 - Wrap Up

CSS Properties

Property

What it Changes

Example

color

The color of your text

color: maroon;

font-family

Which font to use

font-family:fantasy;

font-size

The size of your text

font-size: 20px;

text-align

The alignment of your text

text-align: center;

text-decoration

Additional style

text-decoration: underline;

letter-spacing

Adds extra space between letters

letter-spacing: 5px;

text-shadow

Adds a shadow to text

text-shadow: 3px -3px;