Introduction to CSS
-
Upload
ted-nielsen -
Category
Documents
-
view
440 -
download
1
description
Transcript of Introduction to CSS
![Page 1: Introduction to CSS](https://reader036.fdocuments.net/reader036/viewer/2022062312/55499052b4c905b96a8b5401/html5/thumbnails/1.jpg)
CSS in 11 slides.
![Page 2: Introduction to CSS](https://reader036.fdocuments.net/reader036/viewer/2022062312/55499052b4c905b96a8b5401/html5/thumbnails/2.jpg)
Good Type of Waterfall
CSS uses the DOM<div id=“site”> <h2>Big Header</h2> <div class=“post”> <h2>Title</h2> <p>Text text text</p> </div> <div class=“post”> <h2>Title</h2> <p>Text text text</p> </div> <div class=“post”>…</div></div>
h2{ font-weight: normal; color: green; }.post h2{ color: blue; }.site p { color: red; }div > p:first-child { color: purple; }
![Page 3: Introduction to CSS](https://reader036.fdocuments.net/reader036/viewer/2022062312/55499052b4c905b96a8b5401/html5/thumbnails/3.jpg)
Cascading Style SheetsHTML
Body
Class or ID
Child / Parent
In-line
Reset CSS *{…}
Document-wide Style (DRY): body { font-size: 12px }
Most common type you’ll see/write
Close second; hardest to track down.
BAD.
![Page 4: Introduction to CSS](https://reader036.fdocuments.net/reader036/viewer/2022062312/55499052b4c905b96a8b5401/html5/thumbnails/4.jpg)
.class vs. #id
Same syntax (selectors, pseudo-classes, properties)
a#fb { background: url(img/18px_sprites.png) no-repeat -17px left; margin-right: 7px; }
.carouselImage{ z-index:0; left:40px; position:relative; color:blue;}
#id{}’s are unique to a page; singletons
.classes come in groups (or at least can.)
Why care?$(‘#fb’).fadeOut();
![Page 5: Introduction to CSS](https://reader036.fdocuments.net/reader036/viewer/2022062312/55499052b4c905b96a8b5401/html5/thumbnails/5.jpg)
Real-world Example
![Page 6: Introduction to CSS](https://reader036.fdocuments.net/reader036/viewer/2022062312/55499052b4c905b96a8b5401/html5/thumbnails/6.jpg)
Helpful Hints
Open Source is Your FriendFirebug or Cmd+alt+I
Margin vs. Padding(both increase the size of the box!!)
Negative margin is bad.
![Page 7: Introduction to CSS](https://reader036.fdocuments.net/reader036/viewer/2022062312/55499052b4c905b96a8b5401/html5/thumbnails/7.jpg)
Tools (cont.)
![Page 8: Introduction to CSS](https://reader036.fdocuments.net/reader036/viewer/2022062312/55499052b4c905b96a8b5401/html5/thumbnails/8.jpg)
Block ModelBlock vis-à-vis in-line elements
Block: <div>, <h#>, <table>, <form>, <(o|u)l>
In-line: <img>, <a>, <i>, <b>, <u>, etc.
You can redeclare as ….{ display: block; } :table-cell, etc.
![Page 9: Introduction to CSS](https://reader036.fdocuments.net/reader036/viewer/2022062312/55499052b4c905b96a8b5401/html5/thumbnails/9.jpg)
““
Always Float: Leftor :right, but never both
Elements are floated horizontally; this means that an element can only be floated left or right, not up or down.
A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.
--W3C Schools
![Page 10: Introduction to CSS](https://reader036.fdocuments.net/reader036/viewer/2022062312/55499052b4c905b96a8b5401/html5/thumbnails/10.jpg)
The Internet Wants to Help
http://css-tricks.com/
http://net.tutsplus.com/
http://stackoverflow.com/
http://smashingmagazine.com/
http://unmatchedstyle.com/
http://www.w3schools.com/Css/default.asp
http://lmgtfy.com/?q=background+image+css
(sort of)
![Page 11: Introduction to CSS](https://reader036.fdocuments.net/reader036/viewer/2022062312/55499052b4c905b96a8b5401/html5/thumbnails/11.jpg)
One more thing…
![Page 12: Introduction to CSS](https://reader036.fdocuments.net/reader036/viewer/2022062312/55499052b4c905b96a8b5401/html5/thumbnails/12.jpg)
Windows Sucks
http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs