lesson 110 24 aug13-1400-ay
TRANSCRIPT
![Page 1: Lesson 110 24 aug13-1400-ay](https://reader038.vdocuments.net/reader038/viewer/2022103016/5552ec23b4c90584028b470a/html5/thumbnails/1.jpg)
Unit 1: Web FundamentalsLesson 10: 3 Ways to Use CSS
August 24, 2013
![Page 2: Lesson 110 24 aug13-1400-ay](https://reader038.vdocuments.net/reader038/viewer/2022103016/5552ec23b4c90584028b470a/html5/thumbnails/2.jpg)
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
Lesson 8 Lesson 7 Lesson 6 Lesson 5
Lesson 9 Lesson 10 Lesson 11 Lesson 12
Build understanding Develop skills
![Page 3: Lesson 110 24 aug13-1400-ay](https://reader038.vdocuments.net/reader038/viewer/2022103016/5552ec23b4c90584028b470a/html5/thumbnails/3.jpg)
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!
![Page 4: Lesson 110 24 aug13-1400-ay](https://reader038.vdocuments.net/reader038/viewer/2022103016/5552ec23b4c90584028b470a/html5/thumbnails/4.jpg)
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!
![Page 5: Lesson 110 24 aug13-1400-ay](https://reader038.vdocuments.net/reader038/viewer/2022103016/5552ec23b4c90584028b470a/html5/thumbnails/5.jpg)
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
![Page 6: Lesson 110 24 aug13-1400-ay](https://reader038.vdocuments.net/reader038/viewer/2022103016/5552ec23b4c90584028b470a/html5/thumbnails/6.jpg)
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
![Page 7: Lesson 110 24 aug13-1400-ay](https://reader038.vdocuments.net/reader038/viewer/2022103016/5552ec23b4c90584028b470a/html5/thumbnails/7.jpg)
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
![Page 8: Lesson 110 24 aug13-1400-ay](https://reader038.vdocuments.net/reader038/viewer/2022103016/5552ec23b4c90584028b470a/html5/thumbnails/8.jpg)
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;}}
![Page 9: Lesson 110 24 aug13-1400-ay](https://reader038.vdocuments.net/reader038/viewer/2022103016/5552ec23b4c90584028b470a/html5/thumbnails/9.jpg)
9
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
![Page 10: Lesson 110 24 aug13-1400-ay](https://reader038.vdocuments.net/reader038/viewer/2022103016/5552ec23b4c90584028b470a/html5/thumbnails/10.jpg)
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
![Page 11: Lesson 110 24 aug13-1400-ay](https://reader038.vdocuments.net/reader038/viewer/2022103016/5552ec23b4c90584028b470a/html5/thumbnails/11.jpg)
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.
![Page 12: Lesson 110 24 aug13-1400-ay](https://reader038.vdocuments.net/reader038/viewer/2022103016/5552ec23b4c90584028b470a/html5/thumbnails/12.jpg)
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!
![Page 13: Lesson 110 24 aug13-1400-ay](https://reader038.vdocuments.net/reader038/viewer/2022103016/5552ec23b4c90584028b470a/html5/thumbnails/13.jpg)
13
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
![Page 14: Lesson 110 24 aug13-1400-ay](https://reader038.vdocuments.net/reader038/viewer/2022103016/5552ec23b4c90584028b470a/html5/thumbnails/14.jpg)
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
![Page 15: Lesson 110 24 aug13-1400-ay](https://reader038.vdocuments.net/reader038/viewer/2022103016/5552ec23b4c90584028b470a/html5/thumbnails/15.jpg)
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
![Page 16: Lesson 110 24 aug13-1400-ay](https://reader038.vdocuments.net/reader038/viewer/2022103016/5552ec23b4c90584028b470a/html5/thumbnails/16.jpg)
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
![Page 17: Lesson 110 24 aug13-1400-ay](https://reader038.vdocuments.net/reader038/viewer/2022103016/5552ec23b4c90584028b470a/html5/thumbnails/17.jpg)
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>
![Page 18: Lesson 110 24 aug13-1400-ay](https://reader038.vdocuments.net/reader038/viewer/2022103016/5552ec23b4c90584028b470a/html5/thumbnails/18.jpg)
18
Exercise 1: Can you identify the different types of CSS below? (II)
my-file.htmlp {color: black;}
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>
![Page 19: Lesson 110 24 aug13-1400-ay](https://reader038.vdocuments.net/reader038/viewer/2022103016/5552ec23b4c90584028b470a/html5/thumbnails/19.jpg)
19
Exercise 2: What font color will we see when we open these files in our browser? (I)
my-file.htmlp {color: black;}
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>
![Page 20: Lesson 110 24 aug13-1400-ay](https://reader038.vdocuments.net/reader038/viewer/2022103016/5552ec23b4c90584028b470a/html5/thumbnails/20.jpg)
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
![Page 21: Lesson 110 24 aug13-1400-ay](https://reader038.vdocuments.net/reader038/viewer/2022103016/5552ec23b4c90584028b470a/html5/thumbnails/21.jpg)
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
![Page 22: Lesson 110 24 aug13-1400-ay](https://reader038.vdocuments.net/reader038/viewer/2022103016/5552ec23b4c90584028b470a/html5/thumbnails/22.jpg)
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