Unit 1: Web Fundamentals
Lesson 8: Learning to Use CSS
August 22, 2013
Lesson 8: Learning to Use CSS
2
Introduction
to HTML
Learning to
Use HTML
HTML and
Email
History and
Future of the
Web
HTM...
Recap from last time (I)
• CSS is just as important as HTML because it allows us to style a
page to make it look pretty
• ...
Recap from last time (II)
• It‟s just as easy to edit CSS as it is to revise HTML
• A server actually sends TWO files when...
Let’s write our own CSS file (I)
1. Creating our own CSS file is the same process that we looked at in
Lesson 2 for creati...
Let’s write our own CSS file (II)
2. Type the following code (make sure to copy it exactly!)
6
body {
background-color: #F...
Let’s write our own CSS file (III)
3. Go to „File‟‟Save‟ and save the file as „smelly-cat.css‟.
7
MacPC
Let’s write our own CSS file (IV)
4. Now open your Chrome browser and go to „File‟‟Open File‟.
Locate our CSS file and op...
Let’s write our own CSS file (V)
5. That‟s weird…it looks the same as the text we entered. I thought
CSS was supposed to l...
Let’s write our own CSS file (VI)
6. Well, remember that you can‟t style a webpage using CSS if it
doesn‟t have an HTML fo...
Let’s write our own CSS file (VII)
7. Type the following code (make sure there aren‟t any typos!)
11
<html>
<head>
</head>...
Let’s write our own CSS file (VIII)
8. Go to „File‟„Save‟ and save this file as „smelly-cat.html‟.
12
MacPC
Let’s write our own CSS file (IX)
9. Open up your Chrome browser again. Go to „File‟„Open
File‟, locate „smelly-cat.html‟...
Let’s write our own CSS file (X)
10. You can see that the content appears, but it hasn‟t been stylized at
all. This is bec...
Let’s write our own CSS file (XI)
11. Going back to „smelly-cat.html‟, add the following line of code
between the <head> t...
Let’s write our own CSS file (XII)
12. Save “smelly-cat.html” and open it again in the browser. Notice
anything different?...
CSS lets us style a page how we want (I)
• Let‟s see how just a few lines of CSS code were able to transform
the look of o...
CSS lets us style a page how we want (II)
18
body {
background-color: #FFFFF0;
color: #FF0000;
font-family: copperplate;
t...
CSS lets us style a page how we want (III)
19
body {
background-color: #FFFFF0;
color: #FF0000;
font-family: copperplate;
...
Be creative and use your imagination!
20
• There are so many possible ways to style a website – you‟re limited
only by you...
Summary (I)
• Creating a CSS file is just as easy as making an HTML file
• CSS always needs to be paired with HTML for the...
Summary (II)
• The HTML code must tell the browser where to find the matching
CSS file
• There are infinite possibilities ...
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 108 23 aug13-1430-ay

13,055
-1

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
13,055
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
43
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lesson 108 23 aug13-1430-ay

  1. 1. Unit 1: Web Fundamentals Lesson 8: Learning to Use CSS August 22, 2013
  2. 2. Lesson 8: Learning 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) • CSS is just as important as HTML because it allows us to style a page to make it look pretty • Changing the CSS of a site can make a big difference! 3
  4. 4. Recap from last time (II) • It‟s just as easy to edit CSS as it is to revise HTML • A server actually sends TWO files when you request a webpage – HTML and CSS • You need both to see the full version of the website 4
  5. 5. Let’s write our own CSS file (I) 1. Creating our own CSS file is the same process that we looked at in Lesson 2 for creating an HTML file. If using a PC, open Notepad. If using a Mac, open TextEdit. 5 MacPC
  6. 6. Let’s write our own CSS file (II) 2. Type the following code (make sure to copy it exactly!) 6 body { background-color: #FFFFF0; color: #FF0000; font-family: copperplate; text-align: center; padding-top: 50px; }
  7. 7. Let’s write our own CSS file (III) 3. Go to „File‟‟Save‟ and save the file as „smelly-cat.css‟. 7 MacPC
  8. 8. Let’s write our own CSS file (IV) 4. Now open your Chrome browser and go to „File‟‟Open File‟. Locate our CSS file and open it. 8 MacPC
  9. 9. Let’s write our own CSS file (V) 5. That‟s weird…it looks the same as the text we entered. I thought CSS was supposed to look cool! 9 MacPC
  10. 10. Let’s write our own CSS file (VI) 6. Well, remember that you can‟t style a webpage using CSS if it doesn‟t have an HTML foundation. So now we need to create an HTML file to pair with our CSS file. Let‟s open up a new file in Notepad (PC) or TextEdit (Mac). 10 MacPC
  11. 11. Let’s write our own CSS file (VII) 7. Type the following code (make sure there aren‟t any typos!) 11 <html> <head> </head> <body> <h1>Smelly Cat</h1> <h3>By Phoebe Buffay</h3> <p> Smelly Cat, Smelly Cat,<br> What are they feeding you?<br> Smelly Cat, Smelly Cat,<br> It's not your fault.<br> </p> </body> </html>
  12. 12. Let’s write our own CSS file (VIII) 8. Go to „File‟„Save‟ and save this file as „smelly-cat.html‟. 12 MacPC
  13. 13. Let’s write our own CSS file (IX) 9. Open up your Chrome browser again. Go to „File‟„Open File‟, locate „smelly-cat.html‟ and open it. 13 MacPC
  14. 14. Let’s write our own CSS file (X) 10. You can see that the content appears, but it hasn‟t been stylized at all. This is because our browser doesn‟t know that the HTML file and CSS files should be linked together. Let‟s link them and see what happens… 14 MacPC This address will look different
  15. 15. Let’s write our own CSS file (XI) 11. Going back to „smelly-cat.html‟, add the following line of code between the <head> tags. It should now look like this: 15 <html> <head> <link rel=“stylesheet” type=“text/css” href=“smelly-cat.css”> </head> <body> … This line tells the browser to look for a CSS file called “smelly-cat.css”
  16. 16. Let’s write our own CSS file (XII) 12. Save “smelly-cat.html” and open it again in the browser. Notice anything different? 16 MacPC
  17. 17. CSS lets us style a page how we want (I) • Let‟s see how just a few lines of CSS code were able to transform the look of our page 17
  18. 18. CSS lets us style a page how we want (II) 18 body { background-color: #FFFFF0; color: #FF0000; font-family: copperplate; text-align: center; padding-top: 50px; } 1 2 • This sets the background color to „#FFFFF0‟, which is shorthand for pale yellow • This sets the font color to „#FF0000‟, which is shorthand for red • This changes the font style to one named „Copperplate‟ 1 2 3 3 4 5
  19. 19. CSS lets us style a page how we want (III) 19 body { background-color: #FFFFF0; color: #FF0000; font-family: copperplate; text-align: center; padding-top: 50px; } 1 2 • This aligns the text horizontally in the center of the page • This adds padding, or extra space, between the text and the top of the page 4 5 3 4 5
  20. 20. Be creative and use your imagination! 20 • There are so many possible ways to style a website – you‟re limited only by your imagination!
  21. 21. Summary (I) • Creating a CSS file is just as easy as making an HTML file • CSS always needs to be paired with HTML for the styling to take effect 21
  22. 22. Summary (II) • The HTML code must tell the browser where to find the matching CSS file • There are infinite possibilities in styling a website! 22
  23. 23. 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 23
  1. A particular slide catching your eye?

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

×