Shashidhar HB
Captivating Design
CSS
So how do we do it?
CSS is a design language for the web
h1 {
color : blue ;
margin : 1px;
}
SELECTOR

h1 {
color : blue ;
margin : 1px;
}
PROPERTY

VALUE

DECLARATION
#i1 {
color : blue ;
margin : 1px;
}

<div id=“i1”>…</div>
.c1 {
color : blue ;
margin : 1px;
}

<div class=“c1”>…</div>
<p class=“c1”>…</p>
a:hover {
color : blue ;
}

<a href=“somelink”>…</a>
For more selectors
http://www.w3.org/TR/css3-selectors/
3 types of style sheets can
be applied to HTML
document
• Browser style sheet
• User style sheet

• Author style sheets
sheet
3 ways to
embed author
style sheets to
HTML
Inline Style
<body>
<h1 style=“color: blue;”>
<p>
.
.
.
.
Header Style
<head>
<title>CSS Tutorial</title>
<style type="text/css" media="screen">
h1 {
color: blue;
margin: 1px;
}
</...
External Style
<title>CSS Tutorial</title>
<link rel="stylesheet"
href="css/reset.css" type="text/css"
media="all">
.
.
.
...
For try outs
http://www.w3schools.com/css/
REST or Normalize
CSS
• Browser style sheet
• User style sheet

• Author style sheets
sheet
Browser Style Sheet
/*
Default Style Sheet
Will be applied to all HTML pages
/*
*/
User customizations which can be config...
Web Development
Tools
ctrl + shift + i
Chrome Developer Tools
DEMO
For more about the dev tools
https://developers.google.com/chrome-developer-tools/
Did you know!?
Chrome genesis comic

- http://www.google.com/googlebooks/chrome/

Chrome developer home - http://dev.chrom...
Css 2.0
Css 2.0
Css 2.0
Css 2.0
Upcoming SlideShare
Loading in …5
×

Css 2.0

426 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
426
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css 2.0

  1. 1. Shashidhar HB
  2. 2. Captivating Design
  3. 3. CSS
  4. 4. So how do we do it?
  5. 5. CSS is a design language for the web
  6. 6. h1 { color : blue ; margin : 1px; }
  7. 7. SELECTOR h1 { color : blue ; margin : 1px; } PROPERTY VALUE DECLARATION
  8. 8. #i1 { color : blue ; margin : 1px; } <div id=“i1”>…</div>
  9. 9. .c1 { color : blue ; margin : 1px; } <div class=“c1”>…</div> <p class=“c1”>…</p>
  10. 10. a:hover { color : blue ; } <a href=“somelink”>…</a>
  11. 11. For more selectors http://www.w3.org/TR/css3-selectors/
  12. 12. 3 types of style sheets can be applied to HTML document
  13. 13. • Browser style sheet • User style sheet • Author style sheets sheet
  14. 14. 3 ways to embed author style sheets to HTML
  15. 15. Inline Style <body> <h1 style=“color: blue;”> <p> . . . .
  16. 16. Header Style <head> <title>CSS Tutorial</title> <style type="text/css" media="screen"> h1 { color: blue; margin: 1px; } </style> . .
  17. 17. External Style <title>CSS Tutorial</title> <link rel="stylesheet" href="css/reset.css" type="text/css" media="all"> . . . .
  18. 18. For try outs http://www.w3schools.com/css/
  19. 19. REST or Normalize CSS
  20. 20. • Browser style sheet • User style sheet • Author style sheets sheet
  21. 21. Browser Style Sheet /* Default Style Sheet Will be applied to all HTML pages /* */ User customizations which can be configured in the browser../* */ h2 { Coded by the Web Page Author color: orange; { h2 */ font-family: fantasy; color: red; position: relative; font-family: fantasy; h2 { Inline Style top: 10%; position: relative; blue; color: Header Style left: 30%; top: 20%; font-family: fantasy; External Style } left: 40%; position: relative; } top: 30%; left: 50%; } User Style Sheet Author Style Sheet
  22. 22. Web Development Tools
  23. 23. ctrl + shift + i
  24. 24. Chrome Developer Tools
  25. 25. DEMO
  26. 26. For more about the dev tools https://developers.google.com/chrome-developer-tools/
  27. 27. Did you know!? Chrome genesis comic - http://www.google.com/googlebooks/chrome/ Chrome developer home - http://dev.chromium.org/Home Chrome architecture - http://www.aosabook.org/en/posa/highperformance-networking-in-chrome.html

×