0
Unit 1: Web Fundamentals
Lesson 10: 3 Ways to Use CSS
August 24, 2013
Lesson 10: 3 Ways to Use CSS
2
Introduction
to HTML
Learning to
Use HTML
HTML and
Email
History and
Future of the
Web
HTML...
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....
Recap from last time (II)
2. It helps us debug our code. By keeping the files separate, it
makes our code easier to read, ...
Recap from last time (III)
3. It keeps us organized. Separation of concerns splits our code into
sections, which helps us ...
There are actually multiple ways to use CSS
• Last time, we saw why it’s best to keep our CSS files in a separate
styleshe...
Three possible ways to work with CSS
1. Keep CSS in a separate stylesheet
2. Add inline CSS to HTML tags
1. Embed CSS in t...
Keeping CSS separate is still the best
• As we saw earlier, having a separate CSS stylesheet helps us
reuse code, debug mi...
Three possible ways to work with CSS
1. Keep CSS in a separate stylesheet
2. Add inline CSS to HTML tags
1. Embed CSS in t...
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 li...
Why do people sometimes use this?
• People will sometimes use inline CSS because it’s a way to quickly
add styling to a ta...
Best to keep a separate stylesheet
• Harder to reuse code using the inline CSS method because we
need to add the CSS withi...
Three possible ways to work with CSS
1. Keep CSS in a separate stylesheet
2. Add inline CSS to HTML tags
1. Embed CSS in t...
Why do people sometimes use this?
• People will sometimes use embedded CSS if they only have one
webpage and will not need...
Still best to keep a separate stylesheet
• Embedded CSS prevents us from reusing code across multiple
pages, and nearly al...
What happens when different methods conflict?
• You may occasionally see code where multiple methods are being
used (for e...
Exercise 1: Can you identify the different types
of CSS below? (I)
17
my-file.html
p {color: black;}
styles.css
<html>
<he...
Exercise 1: Can you identify the different types
of CSS below? (II)
18
my-file.html
p {color: black;}
styles.css
Embedded ...
Exercise 2: What font color will we see when we
open these files in our browser? (I)
19
my-file.html
p {color: black;}
sty...
Exercise 2: What font color will we see when we
open these files in our browser? (II)
20
• The text will appear red.
• Rem...
Summary
• There are three ways to work with CSS:
– In a separate stylesheet (we want to do this)
– Inline with HTML tags
–...
What to do on your own
1. Go to URL to complete the Codecademy course online
2. Do the practice set on the material learne...
Upcoming SlideShare
Loading in...5
×

Lesson 110 24 aug13-1400-ay

12,907

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
12,907
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
39
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Lesson 110 24 aug13-1400-ay"

  1. 1. Unit 1: Web Fundamentals Lesson 10: 3 Ways to Use CSS August 24, 2013
  2. 2. Lesson 10: 3 Ways to Use CSS 2 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
  3. 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. 3 www.codecademy.com www.codecademy.com/about Both pages share the same navigation bar, and probably the same CSS stylesheet!
  4. 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. 4 <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. 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. 5 Header Footer Signup form Login form
  6. 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 6
  7. 7. Three possible ways to work with CSS 1. Keep CSS in a separate stylesheet 2. Add inline CSS to HTML tags 1. Embed CSS in the HTML 7
  8. 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 8 my-file.css body { background-color: blue; font-family: copperplate; } new-styles.css @import “new-styles.css” body { text-align: center; p {color: red;} }
  9. 9. Three possible ways to work with CSS 1. Keep CSS in a separate stylesheet 2. Add inline CSS to HTML tags 1. Embed CSS in the HTML 9
  10. 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 10 <html> <head> </head> <body> <p style=“color: red;”> Avoid code bloat! </p> </body> </html> HTML file Inline CSS
  11. 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 11 <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 file p {color: red;} CSS file vs.
  12. 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! 12 Don’t let yourself fall into the trap!
  13. 13. Three possible ways to work with CSS 1. Keep CSS in a separate stylesheet 2. Add inline CSS to HTML tags 1. Embed CSS in the HTML 13
  14. 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 14 <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 file p {color: red;} CSS file vs. Embedded CSS always appears between the <head> tags
  15. 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) 15 Landing page for a hotel Landing page for learning French
  16. 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: 16 Inline CSS has highest priority Embedded CSS has second priority Separate stylesheets have lowest priority
  17. 17. Exercise 1: Can you identify the different types of CSS below? (I) 17 my-file.html p {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. 18. Exercise 1: Can you identify the different types of CSS below? (II) 18 my-file.html p {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>
  19. 19. Exercise 2: What font color will we see when we open these files in our browser? (I) 19 my-file.html p {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>
  20. 20. Exercise 2: What font color will we see when we open these files in our browser? (II) 20 • The text will appear red. • Remember, inline CSS has highest priority, embedded CSS is second, and separate stylesheets come last
  21. 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, 21 Inline CSS has highest priority Embedded CSS has second priority Separate stylesheets have lowest priority
  22. 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 1. Take the follow-up quiz to test your understanding 22
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×