Code.org Unit 2 Lessons 4-6

Code.org Unit 2 Lessons 4-7

by Carrie Casey

​CSS

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

​Rule Set

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

Multiple Choice

Where in the code do we go to  change the color in the h3 tag?

• color

• font-size

• h3

• <p>

​Line Breaks and Paragraphs

​Line Break

In some situations, like a poem or a list, you'll want to start a new line inside the same paragraph, like you might do in poetry. You can use the line break <br> tag for this.

Tip: The <br> tag is useful for writing addresses or poems. It does not need a closing tag!

Note: Use the <br> tag to enter line breaks, not to separate paragraphs. Always separate each paragraph with its own set of <p> and </p> tags!

Multiple Choice

How can you make this heading larger?

• <h1>Dolphins</h1>

• <h6>Dolphins</h6>

• <h3>Dolphins</h3>

• <h4>Dolphins</h5>

Multiple Choice

Why does the code sometimes turn pink?

• there is a bug that needs to be fixed

• pink means no problems keep going

• pink means there is a header

• pink means to put in a paragraph

Multiple Choice

How can we fix this error in the code?

<h1>Styles of Dance</h3>

• <h1>Styles of Dance</h4>

• <h1>Styles of Dance</h1>

• <h1>Styles of Dance<br>

• <H1>Styles of Dance</H1>

Fill in the Blanks

Type in how we can fix this code.

<h3>Ballet</h1>

​Ordered lists

​Ordered Lists

What are the two types of lists?What is an ordered list?How do I make an ordered list?

An ordered list is like an unordered (bulleted) list, but it has numbers. Just use the <ol> tag instead of <ul>.

Multiple Choice

Which tag represents an ordered list?

• <p>

• <body>

• <ol>

• <li>

Multiple Choice

Which tag represents a list?

• <p>

• <body>

• <ol>

• <li>

​Cascading Style Sheets = CSS

​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?

​Rule-Set

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

Multiple Choice

What does CSS stand for?

• Cats Standing Still

• Cascading Style Sheets

• Coats Shapes Square

• Cute Style Sheets

Multiple Choice

Is this HTML or CSS in the picture?

• CSS

• HTML