css 2.0
Post on 15-Jan-2015
121 Views
Preview:
DESCRIPTION
TRANSCRIPT
Shashidhar HB
Captivating Design
CSS
So how do we do it?
CSS is a design language for the web
h1 { color : blue ; margin : 1px; }
h1 { color : blue ; margin : 1px; }
SELECTOR
DECLARATION
PROPERTY VALUE
#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>
http://www.w3.org/TR/css3-selectors/
For more selectors
3 types of style sheets can
be applied to HTML document
• Browser style sheet
• User style sheet
• Author style sheets
• Author style 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; } </style> . .
External Style
<title>CSS Tutorial</title> <link rel="stylesheet" href="css/reset.css" type="text/css" media="all"> . . . .
REST or Normalize CSS
• Browser style sheet
• User style sheet
• Author style sheets
• Author style sheet
Browser Style Sheet /* Default Style Sheet Will be applied to all HTML pages */ h2 { color: orange; font-family: fantasy; position: relative; top: 10%; left: 30%; }
User Style Sheet /* User customizations which can be configured in the browser.. */ h2 { color: red; font-family: fantasy; position: relative; top: 20%; left: 40%; }
Author Style Sheet /* Coded by the Web Page Author */ h2 { Inline Style color: blue; Header Style font-family: fantasy; External Style position: relative; top: 30%; left: 50%; }
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.chromium.org/Home Chrome architecture - http://www.aosabook.org/en/posa/high-performance-networking-in-chrome.html
top related