Lesson 110 24 aug13-1400-ay

Unit 1: Web FundamentalsLesson 10: 3 Ways to Use CSS

August 24, 2013

2

Lesson 10: 3 Ways to Use CSS

Introduction to HTML

Learning to Use HTML

HTML and Email

History and Future of the

Web

HTML and Forms

Search Engine

Optimization

Learning to Use CSS

Introduction to CSS

Reusing Code

3 Ways to Use CSS

Separation of Concerns

Launching Your Own Website

Lesson 1 Lesson 2 Lesson 3 Lesson 4



Build understanding Develop skills

3

Recap from last time (I)

• It’s important to divide our HTML pages from our CSS files

1. It saves us time by reusing code. We can link multiple HTML pages with a single CSS stylesheet.

www.codecademy.com www.codecademy.com/about

Both pages share the same navigation bar, and probably the same CSS stylesheet!

4

Recap from last time (II)

2. It helps us debug our code. By keeping the files separate, it makes our code easier to read, which helps us find our mistakes.

<html><head></head><body> <p>Avoid code bloat!</p></body></html>

body { text-align: center; p {color: red;}}

<html><head> <style type=“text/css”> body {text-align: center;} </style></head><body> <p style=“color: red;”> Avoid code bloat! </p></body></html>

HTML mixed with CSS HTML only

CSS only

This is code bloat!

5

Recap from last time (III)

3. It keeps us organized. Separation of concerns splits our code into sections, which helps us to work together in teams.

Header

Footer

Signup form

Login form

6

There are actually multiple ways to use CSS

• Last time, we saw why it’s best to keep our CSS files in a separate stylesheet from our HTML files

• This way is still the best, but it is not the only way – there are actually three ways to use CSS

• It’s important to understand all the possible ways because while we will keep our CSS files separate, others may not always do so

7

Three possible ways to work with CSS

1. Keep CSS in a separate stylesheet

2. Add inline CSS to HTML tags

3. Embed CSS in the HTML

8

Keeping CSS separate is still the best

• As we saw earlier, having a separate CSS stylesheet helps us reuse code, debug mistakes, and stay organized

• This is true even when we use other people’s code

• For example, if we find a CSS stylesheet online that we like, we can download it and import it into our own CSS file

my-file.cssbody { background-color: blue; font-family: copperplate;}

new-styles.css@import “new-styles.css”

body { text-align: center; p {color: red;}}

9





10

We can also add inline CSS to HTML tags

• The second possible way to work with CSS is to add it inline (within the same line) as our HTML

• As you can see below, the CSS styles for the <p> tag appears inline with the <p> tag itself

<html><head></head><body> <p style=“color: red;”> Avoid code bloat! </p></body></html>

HTML file

Inline CSS

11

Why do people sometimes use this?

• People will sometimes use inline CSS because it’s a way to quickly add styling to a tag without having to switch to a different file

<html><head></head><body> <p style=“color: red;”> Avoid code bloat! </p></body></html>

HTML with inline CSS<html><head></head><body> <p> Avoid code bloat! </p></body></html>

HTML filep {color: red;}

CSS file

vs.

12

Best to keep a separate stylesheet

• Harder to reuse code using the inline CSS method because we need to add the CSS within every HTML tag

• Inline CSS will also often lead to code bloat

• May save a little time upfront, but can lead to A LOT of time wasted when debugging!

Don’t let yourself fall into the trap!

13





14

Why do people sometimes use this?

• People will sometimes use embedded CSS if they only have one webpage and will not need to reuse code on multiple pages

<html><head> <style type=“text/css”> p {color: red;} </style></head><body> <p> Avoid code bloat! </p></body></html>

HTML with embedded CSS

<html><head></head><body> <p> Avoid code bloat! </p></body></html>

HTML filep {color: red;}

CSS file

vs.

Embedded CSS always appears between the <head> tags

15

Still best to keep a separate stylesheet

• Embedded CSS prevents us from reusing code across multiple pages, and nearly all websites have multiple pages!

• An exception is when you are building a landing page (a one-page website usually designed to advertise a business)

Landing page for a hotel Landing page for learning French

16

What happens when different methods conflict?

• You may occasionally see code where multiple methods are being used (for example, CSS could be inline AND embedded)

• If there is ever a conflict:

Inline CSS has highest priority

Embedded CSS has second priority

Separate stylesheets have lowest priority

17

Exercise 1: Can you identify the different types of CSS below? (I)

my-file.htmlp {color: black;}

styles.css<html><head> <link rel=“stylesheet” type=“text/css” href=“styles.css”>

<style type=“text/css”> p {color: blue;} </style></head><body> <p style=“color: red;”> What color am I? </p></body></html>

18

Exercise 1: Can you identify the different types of CSS below? (II)


styles.css

Embedded CSS appears in the

<head> of the file

Inline CSS appears in the HTML tag

Separate stylesheets appear in…separate CSS stylesheets

<html><head> <link rel=“stylesheet” type=“text/css” href=“styles.css”>

<style type=“text/css”> p {color: blue;} </style></head><body> <p style=“color: red;”> What color am I? </p></body></html>

19

Exercise 2: What font color will we see when we open these files in our browser? (I)


styles.css

Embedded CSS appears in the

<head> of the file

Inline CSS appears in the HTML tag

Separate stylesheets appear in…separate CSS stylesheets

<html><head> <style type=“text/css”> p {color: blue;} </style></head><body> <p style=“color: red;”> What color am I? </p></body></html>

20

Exercise 2: What font color will we see when we open these files in our browser? (II)

• The text will appear red.

• Remember, inline CSS has highest priority, embedded CSS is second, and separate stylesheets come last

21

Summary

• There are three ways to work with CSS: – In a separate stylesheet (we want to do this)– Inline with HTML tags– Embedded in the <head> of the HTML file

• When conflicts occur,

Inline CSS has highest priority

Embedded CSS has second priority

Separate stylesheets have lowest priority

22

What to do on your own

1. Go to URL to complete the Codecademy course online

2. Do the practice set on the material learned

3. Take the follow-up quiz to test your understanding

Lesson 110 24 aug13-1400-ay

Technology

Transcript of Lesson 110 24 aug13-1400-ay