0
Unit 1: Web Fundamentals
Lesson 7: Introduction to CSS
August 21, 2013
Lesson 7: Introduction to CSS
2
Introduction
to HTML
Learning to
Use HTML
HTML and
Email
History and
Future of the
Web
HTM...
Recap of Lessons 1-6 (I)
3
• HTML is very important and is used in everything from websites to
email messages to sending d...
Recap of Lessons 1-6 (II)
4
• We can add images and video to our HTML by using tags
• Websites such as YouTube will even g...
Recap of Lessons 1-6 (III)
5
• Forms help us send information to a server whenever we sign in,
search, or post on Facebook...
We’ve done HTML – now let’s look at CSS
• We have seen why HTML is important, but CSS is just as useful
• When HTML provid...
What would websites look like without CSS? (I)
7
Facebook Facebook without CSS
What would websites look like without CSS? (II)
8
Pixar Pixar without CSS
What would websites look like without CSS? (III)
9
Google Google without CSS
• Even Google doesn’t look good without CSS!
One website can change a LOT when styled with
different CSS
10
• Believe it or not, but the two webpages below were writte...
Restyling the Guardian (I)
1. Last time, we edited the HTML code of the Guardian website. This
time, we’ll edit the Guardi...
Restyling the Guardian (II)
2. Right click on the white background and click ‘Inspect Element’
12
‘Inspect
Element’
Restyling the Guardian (III)
3. Next to the HTML code we looked at last time, you should see a
small box in the lower righ...
Restyling the Guardian (IV)
4. Click the box next to ‘white’, and then select a color in the window
that appears
14
Click ...
Restyling the Guardian (V)
5. Now the Guardian has a background color!
15
Restyling the Guardian (VI)
6. However, can you guess what happens when we refresh the page?
16
Refresh
Restyling the Guardian (VII)
7. The background color went back to white!
17
How does the internet work – Take #2 (I)
• To understand why our changes disappeared, we need to revisit
how the internet ...
How does the internet work – Take #2 (III)
• Originally, we said that the Youtube server was sending Andy Murray
the webpa...
How does the internet work – Take #2 (IV)
• If Andy were to receive just the HTML
files, he would see a simple version of
...
How does the internet work – Take #2 (V)
• If Andy were to receive just the HTML
files, he would see a simple version of
t...
How does the internet work – Take #2 (VI)
• If Andy were to receive just the HTML
files, he would see a simple version of
...
Summary (I)
• CSS is just as important as HTML because it allows us to style a
page to make it look pretty
• Changing the ...
Summary (II)
• It’s just as easy to edit CSS as it is to revise HTML
• A server actually sends TWO files when you request ...
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 107 23 aug13-1430-ay

13,320

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
13,320
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
56
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Lesson 107 23 aug13-1430-ay"

  1. 1. Unit 1: Web Fundamentals Lesson 7: Introduction to CSS August 21, 2013
  2. 2. Lesson 7: Introduction to 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 of Lessons 1-6 (I) 3 • HTML is very important and is used in everything from websites to email messages to sending data with forms • HTML files are easy to create – no harder than writing a Word document
  4. 4. Recap of Lessons 1-6 (II) 4 • We can add images and video to our HTML by using tags • Websites such as YouTube will even give us the HTML code to make embedding content easy
  5. 5. Recap of Lessons 1-6 (III) 5 • Forms help us send information to a server whenever we sign in, search, or post on Facebook • Meta tags allow us to tell potential visitors what our website is about • Search engine optimization can help our site rank higher when websites like Google or Yahoo show search results This is the meta description tag
  6. 6. We’ve done HTML – now let’s look at CSS • We have seen why HTML is important, but CSS is just as useful • When HTML provides the structure for a page, CSS lets us make it look pretty 6 HTML is the structure/skeleton CSS is the presentation/clothing jQuery/Javascript is the action/movement
  7. 7. What would websites look like without CSS? (I) 7 Facebook Facebook without CSS
  8. 8. What would websites look like without CSS? (II) 8 Pixar Pixar without CSS
  9. 9. What would websites look like without CSS? (III) 9 Google Google without CSS • Even Google doesn’t look good without CSS!
  10. 10. One website can change a LOT when styled with different CSS 10 • Believe it or not, but the two webpages below were written using identical HTML code • The only difference between them is in their CSS styling!
  11. 11. Restyling the Guardian (I) 1. Last time, we edited the HTML code of the Guardian website. This time, we’ll edit the Guardian’s CSS code. Open up your Chrome web browser and navigate to www.theguardian.com/uk 11
  12. 12. Restyling the Guardian (II) 2. Right click on the white background and click ‘Inspect Element’ 12 ‘Inspect Element’
  13. 13. Restyling the Guardian (III) 3. Next to the HTML code we looked at last time, you should see a small box in the lower right. Scroll halfway down until you see ‘background-color’ 13
  14. 14. Restyling the Guardian (IV) 4. Click the box next to ‘white’, and then select a color in the window that appears 14 Click here
  15. 15. Restyling the Guardian (V) 5. Now the Guardian has a background color! 15
  16. 16. Restyling the Guardian (VI) 6. However, can you guess what happens when we refresh the page? 16 Refresh
  17. 17. Restyling the Guardian (VII) 7. The background color went back to white! 17
  18. 18. How does the internet work – Take #2 (I) • To understand why our changes disappeared, we need to revisit how the internet works 18 ISP Facebook server Amazon server Youtube server DNS Router
  19. 19. How does the internet work – Take #2 (III) • Originally, we said that the Youtube server was sending Andy Murray the webpage files he requested • But the server is sending more than just the HTML files – it’s also sending CSS files for the page 19 Youtube server
  20. 20. How does the internet work – Take #2 (IV) • If Andy were to receive just the HTML files, he would see a simple version of the site 20
  21. 21. How does the internet work – Take #2 (V) • If Andy were to receive just the HTML files, he would see a simple version of the site • If he received both HTML and CSS, he would see the full website 21
  22. 22. How does the internet work – Take #2 (VI) • If Andy were to receive just the HTML files, he would see a simple version of the site • If he received both HTML and CSS, he would see the full website • If he only received the CSS files, he would not see the website at all. You cannot add style to a page that has no structure! 22
  23. 23. Summary (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! 23
  24. 24. Summary (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 24
  25. 25. 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 25
  1. A particular slide catching your eye?

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

×