1. Unit 1: Web Fundamentals
Lesson 10: 3 Ways to Use CSS
August 24, 2013
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
