CSS, part 1 · Playing with selectors All work and no play makes
Transcript of CSS, part 1 · Playing with selectors All work and no play makes
![Page 1: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/1.jpg)
CSS, part 1
CS147L Lecture 2Mike Krieger
Friday, October 2, 2009
![Page 2: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/2.jpg)
Welcome back!
Friday, October 2, 2009
![Page 3: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/3.jpg)
Week 1 Recap
- HTML provides content
- CSS provides style
- Javascript provides action
Friday, October 2, 2009
![Page 4: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/4.jpg)
HTML Recap
- Set of tags that enclose images, video, text, & other content
- <head>er and <body>
- <div> boxes, <span> around short text
Friday, October 2, 2009
![Page 5: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/5.jpg)
HTML Recap, 2<html>� <head></head>� <body></body></html>
Friday, October 2, 2009
![Page 6: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/6.jpg)
HTML Recap, 2<html>� <head></head>� <body>� � <div class='title'>Hello</div>� � <div class='bio'>Hi, this is a little bit about me</div>� </body></html>
Friday, October 2, 2009
![Page 7: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/7.jpg)
HTML Recap, 2<html>� <head></head>� <body>� � <div class='title'>Hello</div>� � <div class='bio'><span class='greeting'>Hi</span>, this is a little bit about me</div>� </body></html>
Friday, October 2, 2009
![Page 8: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/8.jpg)
Questions from Week 1?
- Simulator price
- How to load files into localhost (will talk about it after class if interested)
Friday, October 2, 2009
![Page 9: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/9.jpg)
By the end of today
- Know how to style text & boxes using CSS
- Understand how CSS positioning works
Friday, October 2, 2009
![Page 10: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/10.jpg)
Today's topics
- Styling text
- Styling elements like boxes
- Positioning boxes & text
- Display & z-ordering
Friday, October 2, 2009
![Page 11: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/11.jpg)
What is CSS?
- Cascading Style Sheets
- Cascading because multiple styles can affect one element
- Style sheets because that's how elements are styled
Friday, October 2, 2009
![Page 12: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/12.jpg)
CSS intro
- Where? Either in your <head>er or a separate file
- Set of selectors and rules
Friday, October 2, 2009
![Page 13: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/13.jpg)
First things first
- In-line: <style>...</style> in your <head>
- External file: <link rel="stylesheet" href="yourstylesheet.css" />
- In-element: <div style="css-goes-here">
- Changing in Javascript: element.style.backgroundColor = '';
Friday, October 2, 2009
![Page 14: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/14.jpg)
First things first
- In-line: <style>...</style> in your <head>
- External file: <link rel="stylesheet" href="yourstylesheet.css" />
- In-element: <div style="css-goes-here">
- Changing in Javascript: element.style.backgroundColor = '';
Friday, October 2, 2009
![Page 15: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/15.jpg)
What's a selector?
- Referencing one or many objects in the DOM that got created from your HTML
Friday, October 2, 2009
![Page 16: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/16.jpg)
The 3 selectors to learn
- #name (selects by id)
- .name (selects by class)
- tagname (selects by tag)
Friday, October 2, 2009
![Page 17: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/17.jpg)
Let's start.
- Open up simplebox.html in this week's folder
Friday, October 2, 2009
![Page 18: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/18.jpg)
Simple.html<html><head>� <style></style></head><body>� <div class='content'>� � All <a href='work.html'>work</a> and no � � <a href='play.html'>play</a> makes <span � � class='person-name'>Jack</span> a dull � � boy� </div>� <div class='citation'>-Author unknown</div>
Friday, October 2, 2009
![Page 19: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/19.jpg)
Playing with selectors
<body>
<div class='content'>All <a href='work.html'>work</a> and no <a href='play.html'>play</a> makes <span id='person-name'>Jack</span> a dull boy</div>
<div class='citation'>-Author unknown</div>
</body>
selectedbody
<body>
<div class='content'>All <a href='work.html'>work</a> and no <a href='play.html'>play</a> makes <span id='person-name'>Jack</span> a dull boy</div>
<div class='citation'>-Author unknown</div>
</body>
originalselector:
Friday, October 2, 2009
![Page 20: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/20.jpg)
Playing with selectors
<body>
<div class='content'>All <a href='work.html'>work</a> and no <a href='play.html'>play</a> makes <span id='person-name'>Jack</span> a dull boy</div>
<div class='citation'>-Author unknown</div>
</body>
selecteddiv
originalselector:
<body>
<div class='content'>All <a href='work.html'>work</a> and no <a href='play.html'>play</a> makes <span id='person-name'>Jack</span> a dull boy</div>
<div class='citation'>-Author unknown</div>
</body>
Friday, October 2, 2009
![Page 21: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/21.jpg)
Playing with selectors
<body>
<div class='content'>All <a href='work.html'>work</a> and no <a href='play.html'>play</a> makes <span id='person-name'>Jack</span> a dull boy</div>
<div class='citation'>-Author unknown</div>
</body>
selected.content
originalselector:
<body>
<div class='content'>All <a href='work.html'>work</a> and no <a href='play.html'>play</a> makes <span id='person-name'>Jack</span> a dull boy</div>
<div class='citation'>-Author unknown</div>
</body>
Friday, October 2, 2009
![Page 22: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/22.jpg)
Playing with selectors
<body>
<div class='content'>All <a href='work.html'>work</a> and no <a href='play.html'>play</a> makes <span id='person-name'>Jack</span> a dull boy</div>
<div class='citation'>-Author unknown</div>
</body>
selected#person-name
originalselector:
<body>
<div class='content'>All <a href='work.html'>work</a> and no <a href='play.html'>play</a> makes <span id='person-name'>Jack</span> a dull boy</div>
<div class='citation'>-Author unknown</div>
</body>
Friday, October 2, 2009
![Page 23: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/23.jpg)
Playing with selectors
<body>
<div class='content'>All <a href='work.html'>work</a> and no <a href='play.html'>play</a> makes <span id='person-name'>Jack</span> a dull boy</div>
<div class='citation'>-Author unknown</div>
</body>
selecteda
originalselector:
<body>
<div class='content'>All <a href='work.html'>work</a> and no <a href='play.html'>play</a> makes <span id='person-name'>Jack</span> a dull boy</div>
<div class='citation'>-Author unknown</div>
</body>
Friday, October 2, 2009
![Page 24: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/24.jpg)
Playing with selectors
<body>
<div class='content'>All <a href='work.html'>work</a> and no <a href='play.html'>play</a> makes <span id='person-name'>Jack</span> a dull boy</div>
<div class='citation'>-Author unknown</div>
</body>
selected#another
originalselector:
<body>
<div class='content'>All <a href='work.html'>work</a> and no <a href='play.html'>play</a> makes <span id='person-name'>Jack</span> a dull boy</div>
<div class='citation'>-Author unknown</div>
</body>
Friday, October 2, 2009
![Page 25: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/25.jpg)
What's a rule?
- Set a property on selected elements
Friday, October 2, 2009
![Page 26: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/26.jpg)
What are properties?
- Visual
- font size, font family, color, background, border, padding
- Position & Size
- Animations & Transitions
Friday, October 2, 2009
![Page 27: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/27.jpg)
Setting a property.classname {
}
Friday, October 2, 2009
![Page 28: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/28.jpg)
Setting a property.classname {� rule:}
Friday, October 2, 2009
![Page 29: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/29.jpg)
Setting a property.classname {� property: value;}
Friday, October 2, 2009
![Page 30: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/30.jpg)
Setting a property.classname {� property: value;� prop2: differentvalue;}
Friday, October 2, 2009
![Page 31: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/31.jpg)
Making all links blacka {� color: black;}
Friday, October 2, 2009
![Page 32: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/32.jpg)
styling text
Friday, October 2, 2009
![Page 33: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/33.jpg)
Styling fonts overview
- picking a font: font-family
- size: font-size
- weight: font-weight
- 'style': font-style
- Color: color
Friday, October 2, 2009
![Page 34: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/34.jpg)
<div class='text'>The <span class='emphasis'>quick</span> <span class='brown'>brown</span> fox jumps over the <a href='lazy.html'>lazy dog</a></div>
css{{empty}}
result
Friday, October 2, 2009
![Page 35: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/35.jpg)
Font-family
- One or more font family names, separated by a comma
- Browser will pick the first it finds on user's system
- Keywords: serif and sans-serif are last-ditch fallbacks
Friday, October 2, 2009
![Page 36: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/36.jpg)
<div class='text'>The <span class='emphasis'>quick</span> <span class='brown'>brown</span> fox jumps over the <a href='lazy.html'>lazy dog</a></div>
css
result
.text {
}
Friday, October 2, 2009
![Page 37: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/37.jpg)
<div class='text'>The <span class='emphasis'>quick</span> <span class='brown'>brown</span> fox jumps over the <a href='lazy.html'>lazy dog</a></div>
css
result
.text {� font-family: Helvetica;}
Friday, October 2, 2009
![Page 38: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/38.jpg)
<div class='text'>The <span class='emphasis'>quick</span> <span class='brown'>brown</span> fox jumps over the <a href='lazy.html'>lazy dog</a></div>
css
result
.text {� font-family: Gotham, Helvetica;}
no change; I don't have Gotham
Friday, October 2, 2009
![Page 39: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/39.jpg)
<div class='text'>The <span class='emphasis'>quick</span> <span class='brown'>brown</span> fox jumps over the <a href='lazy.html'>lazy dog</a></div>
css
result
.text {� font-family: Gotham, sans-serif;}
no change; "sans-serif" defaults to Helvetica on the Mac
Friday, October 2, 2009
![Page 40: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/40.jpg)
<div class='text'>The <span class='emphasis'>quick</span> <span class='brown'>brown</span> fox jumps over the <a href='lazy.html'>lazy dog</a></div>
css
result
.text {� font-family: Gotham, serif;}
Friday, October 2, 2009
![Page 41: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/41.jpg)
A note on Web fonts
- Limited selection!
Friday, October 2, 2009
![Page 42: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/42.jpg)
Microsoft Core Fonts
Andale MonoArialComic Sans MSCourier New GeorgiaImpactTimes New RomanTrebuchet MSVerdana
Friday, October 2, 2009
![Page 43: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/43.jpg)
Fonts on the iPhoneAmerican TypewriterAmerican Typewriter CondensedArialArial Rounded MT BoldCourier New
GeorgiaHelveticaMarker FeltTimes New RomanTrebuchet MSVerdana
!
Friday, October 2, 2009
![Page 44: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/44.jpg)
Sizing fonts
- font-size takes measurement in pixels (px), ems (em), percentages (%), or absolute measures (cm, mm, pt)
Friday, October 2, 2009
![Page 45: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/45.jpg)
What's an em?
- Relative measure: 1em = the point size of the current font
- at 16pt, 1em=16pt
- 1em = 100%
- set global (default) in px, scale using ems
Friday, October 2, 2009
![Page 46: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/46.jpg)
<div class='text'>The <span class='emphasis'>quick</span> <span class='brown'>brown</span> fox jumps over the <a href='lazy.html'>lazy dog</a></div>
css
result
.text {� font-family: Helvetica;� font-size: 4px;}
Friday, October 2, 2009
![Page 47: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/47.jpg)
<div class='text'>The <span class='emphasis'>quick</span> <span class='brown'>brown</span> fox jumps over the <a href='lazy.html'>lazy dog</a></div>
css
result
.text {� font-family: Helvetica;}
Friday, October 2, 2009
![Page 48: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/48.jpg)
<div class='text'>The <span class='emphasis'>quick</span> <span class='brown'>brown</span> fox jumps over the <a href='lazy.html'>lazy dog</a></div>
css
result
.text {� font-family: Helvetica;� font-size: 1em;}
Friday, October 2, 2009
![Page 49: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/49.jpg)
<div class='text'>The <span class='emphasis'>quick</span> <span class='brown'>brown</span> fox jumps over the <a href='lazy.html'>lazy dog</a></div>
css
result
body { font-size: 10px; }.text {� font-family: Helvetica;� font-size: 1em;}
Friday, October 2, 2009
![Page 50: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/50.jpg)
<div class='text'>The <span class='emphasis'>quick</span> <span class='brown'>brown</span> fox jumps over the <a href='lazy.html'>lazy dog</a></div>
css
result
body { font-size: 10px; }.text {� font-family: Helvetica;� font-size: 1.6em;}
(back where we started)
Friday, October 2, 2009
![Page 51: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/51.jpg)
Font weight
- font-weight takes either:
- number b/w 100 and 900 in 100-step increments
- normal, bold, bolder, lighter
- in practice, either normal or bold
Friday, October 2, 2009
![Page 52: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/52.jpg)
<div class='text'>The <span class='emphasis'>quick</span> <span class='brown'>brown</span> fox jumps over the <a href='lazy.html'>lazy dog</a></div>
css
result
.text {� font-family: Helvetica;}
Friday, October 2, 2009
![Page 53: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/53.jpg)
<div class='text'>The <span class='emphasis'>quick</span> <span class='brown'>brown</span> fox jumps over the <a href='lazy.html'>lazy dog</a></div>
css
result
.text {� font-family: Helvetica;� font-weight: bold;}
Friday, October 2, 2009
![Page 54: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/54.jpg)
Setting font style
- font-style takes:
- normal, oblique, italic
- italic falls back to oblique
Friday, October 2, 2009
![Page 55: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/55.jpg)
<div class='text'>The <span class='emphasis'>quick</span> <span class='brown'>brown</span> fox jumps over the <a href='lazy.html'>lazy dog</a></div>
css
result
.text {� font-family: Helvetica;� font-style: italic;}
Friday, October 2, 2009
![Page 56: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/56.jpg)
Setting color
- color takes:
- a hexadecimal value
- a color word
- an rgb() value
Friday, October 2, 2009
![Page 57: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/57.jpg)
Hexawhat?
- hex runs from 00 (nothing) to FF (full)
- so, 00...33..99..AA...DD...FF
- looks like: #RRGGBB
- #0000FF (all blue)
- #FFFF33 (yellow)
- #c5d5ec light blue
Friday, October 2, 2009
![Page 58: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/58.jpg)
Named colors
- black, blue, gray, red...
- huge list:
- http://www.w3schools.com/HTML/html_colornames.asp
Friday, October 2, 2009
![Page 59: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/59.jpg)
rgb()
- rgb(redval, greenval, blueval)
- Runs from 0 to 255
- rgb(0, 0, 255) all blue
- rgb(103, 233, 40) lime green
- #RRGGBB -> rgb(rv, gv, bl)
Friday, October 2, 2009
![Page 60: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/60.jpg)
<div class='text'>The <span class='emphasis'>quick</span> <span class='brown'>brown</span> fox jumps over the <a href='lazy.html'>lazy dog</a></div>
css
result
.brown {� color: brown;}
Friday, October 2, 2009
![Page 61: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/61.jpg)
<div class='text'>The <span class='emphasis'>quick</span> <span class='brown'>brown</span> fox jumps over the <a href='lazy.html'>lazy dog</a></div>
css
result
.brown {� color: #763017;}
Friday, October 2, 2009
![Page 62: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/62.jpg)
Aligning text
- text-align:
- left, right, center, justify
Friday, October 2, 2009
![Page 63: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/63.jpg)
<div class='text'>The <span class='emphasis'>quick</span> <span class='brown'>brown</span> fox jumps over the <a href='lazy.html'>lazy dog</a></div>
css
result
.text {� text-align: right;}
Friday, October 2, 2009
![Page 64: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/64.jpg)
Underlining
- text-decoration:
- none, underline, strikethrough
Friday, October 2, 2009
![Page 65: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/65.jpg)
Cascading rules
Friday, October 2, 2009
![Page 66: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/66.jpg)
Cascading styles
- <span class='brown'>brown</span> in inside the <div class='text'>. What happens if we already have a color defined?
Friday, October 2, 2009
![Page 67: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/67.jpg)
Overridden styles.text {� color: gold;}
.brown {� color: brown;}
Friday, October 2, 2009
![Page 68: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/68.jpg)
Cascade
- elements inherit from their parents
- specific styles on an element override anything on their parent
Friday, October 2, 2009
![Page 69: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/69.jpg)
Same rule, Same Element, Different places
- If same style for same element is defined in multiple places:
- First check styles in the HTML for that element (<div style=...)
- Then check CSS in <style> tags and loaded <link>ed stylesheets in reverse order
Friday, October 2, 2009
![Page 70: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/70.jpg)
Example<link rel="stylesheet" href="quickbrown.css" type="text/css" media="screen" title="no title" charset="utf-8"><style>� .brown {� � color: yellow;� }</style>
even though stylesheet specifies .brown{ color:brown;}, <style> takes precedence
Friday, October 2, 2009
![Page 71: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/71.jpg)
!important<link rel="stylesheet" href="quickbrown.css" type="text/css" media="screen" title="no title" charset="utf-8"><style>� .brown { color: green !important }� .brown {� � color: yellow;� }</style>
an !important declaration will jump out of the cascade to the top
Friday, October 2, 2009
![Page 72: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/72.jpg)
Example<link rel="stylesheet" href="quickbrown.css" type="text/css" media="screen" title="no title" charset="utf-8"><style>� .brown {� � color: yellow;� }</style>...<span style="color:lightblue" class='brown'>brown</span>
Style defined on the element takes precedence
Friday, October 2, 2009
![Page 73: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/73.jpg)
Firebug
- Essential tool for Web development
- Developed by Joe Hewitt, now Facebook's lead iPhone dev
- Download at: http://getfirebug.com/
Friday, October 2, 2009
![Page 74: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/74.jpg)
Firebug
- Inspect any element to see the styles defined on it
- Lots of Javascript features too, we'll revisit in coming weeks
Friday, October 2, 2009
![Page 75: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/75.jpg)
Firebug How-To
- Right click anywhere in your page
- Click "Inspect Element"
Friday, October 2, 2009
![Page 76: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/76.jpg)
Firebug
- Javascript console- DOM Inspector- CSS Editor- Script debugger- Network analyzer
Friday, October 2, 2009
![Page 77: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/77.jpg)
Inspecting the 'brown' element
Friday, October 2, 2009
![Page 78: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/78.jpg)
Changing styles on the fly
Friday, October 2, 2009
![Page 79: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/79.jpg)
Safari 4 Inspector
- Mostly on par with Firebug
Friday, October 2, 2009
![Page 80: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/80.jpg)
Summary
- Use either Firebug or the Safari Inspector
- They'll be a huge time-saver!
- We'll see more of them soon
Friday, October 2, 2009
![Page 81: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/81.jpg)
Styling elements
Friday, October 2, 2009
![Page 82: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/82.jpg)
Properties
- border
- size
- margin
- padding
- display
- background
- opacity
Friday, October 2, 2009
![Page 83: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/83.jpg)
Border
- Either separately:
- border-width, border-style, border-color
- (specify at least style)
- Or together:
- border: width style color
Friday, October 2, 2009
![Page 84: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/84.jpg)
Border style
- border-style
- solid, dotted, dashed, hidden, groove, ridge, inset...
- most of the time: solid, dotted, dashed
Friday, October 2, 2009
![Page 85: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/85.jpg)
Border color
- border-color (same color arguments as before)
Friday, October 2, 2009
![Page 86: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/86.jpg)
border-width- Takes measurement(s) (px, em, etc)
- Overloaded:
- border-width: 1px; (all sides 1px)
- border-width: 2px 1px (top and bottom 2px, left and right 1px)
- border-width: 2px 3px 4px 3px (top, right, bottom, left)
- Or, specify border-width-top, border-width-bottom, etc
Friday, October 2, 2009
![Page 87: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/87.jpg)
<div id='box'>I'm in a box!</div>
css
result
#box {border-width: 5px;
}
(no change; we need to specify at least a width and a style)
Friday, October 2, 2009
![Page 88: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/88.jpg)
<div id='box'>I'm in a box!</div>
css
result
#box {border-width: 5px;border-style: dotted;
}
Friday, October 2, 2009
![Page 89: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/89.jpg)
<div id='box'>I'm in a box!</div>
css
result
#box {border-width: 5px 60px 4px 8px;border-style: solid;
}
Friday, October 2, 2009
![Page 90: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/90.jpg)
<div id='box'>I'm in a box!</div>
css
result
#box {border-width: 5px;border-style: dotted;border-color: #ffccee;
}
Friday, October 2, 2009
![Page 91: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/91.jpg)
<div id='box'>I'm in a box!</div>
css
result
#box {border: 5px dotted #ffccee;
}
Friday, October 2, 2009
![Page 92: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/92.jpg)
Sizing divs
- width:
- height:
- both take sizes or percentages
- width: defaults to 100% of parent element
- height: as big as the text needs to be
Friday, October 2, 2009
![Page 93: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/93.jpg)
<div id='box'>I'm in a box!</div>
css
result
#box {� width: 50px;� border: 1px solid black;}
Friday, October 2, 2009
![Page 94: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/94.jpg)
<div id='box'>I'm in a box!</div>
css
result
#box {� height: 100px;� border: 1px solid black;}
Friday, October 2, 2009
![Page 95: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/95.jpg)
<div id='box'>I'm in a box!</div>
css
result
#box {� height: 100px;
width: 100px;� border: 1px solid black;}
text will overflow
Friday, October 2, 2009
![Page 96: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/96.jpg)
Overflow
- overflow sets what happens when stuff goes outside the box
- visible (default), hidden, scroll, auto
Friday, October 2, 2009
![Page 97: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/97.jpg)
<div id='box'>I'm in a box!</div>
css
result
#box {� height: 100px;
width: 100px;� border: 1px solid black;
overflow: hidden;}
Friday, October 2, 2009
![Page 98: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/98.jpg)
<div id='box'>I'm in a box!</div>
css
result
#box {� height: 100px;
width: 100px;� border: 1px solid black;
overflow: scroll;}
always shows a scroll box
Friday, October 2, 2009
![Page 99: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/99.jpg)
<div id='box'>I'm in a box!</div>
css
result
#box {� height: 100px;
width: 100px;� border: 1px solid black;
overflow: auto;}
only show scroll if needed
Friday, October 2, 2009
![Page 100: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/100.jpg)
Display
- display sets how the DOM element behaves:
- none (hides the element)
- block (has a width & height, line-break after)
- inline (no width & height, no line-break)
Friday, October 2, 2009
![Page 101: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/101.jpg)
<div id='firstbox'>I'm a box!</div><div id='secondbox'>I'm another box!</div>
css
result
#firstbox {� display: block;� border: 1px solid black;� width: 100px;}#secondbox {� display: block;� border: 1px solid black;� width: 130px;}
Friday, October 2, 2009
![Page 102: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/102.jpg)
<div id='firstbox'>I'm a box!</div><div id='secondbox'>I'm another box!</div>
css
result
#firstbox {� display: inline;� border: 1px solid black;� width: 100px;}#secondbox {� display: block;� border: 1px solid black;� width: 130px;}
Friday, October 2, 2009
![Page 103: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/103.jpg)
<div id='firstbox'>I'm a box!</div><div id='secondbox'>I'm another box!</div>
css
result
#firstbox {� display: inline;� border: 1px solid black;� width: 100px;}#secondbox {� display: inline;� border: 1px solid black;� width: 130px;}
Friday, October 2, 2009
![Page 104: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/104.jpg)
Margin & Padding
Friday, October 2, 2009
![Page 105: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/105.jpg)
Margin & Padding
- Margin is distance from element from its parent
- Padding is distance from edge of element to its contents
Friday, October 2, 2009
![Page 106: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/106.jpg)
<div id='outerbox'><div id='box'>I'm in a box!</div></div>
css
result
#outerbox {� border: 1px solid black;}
#box {� border: 1px solid red;}
Friday, October 2, 2009
![Page 107: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/107.jpg)
<div id='outerbox'><div id='box'>I'm in a box!</div></div>
css
result
#outerbox {� border: 1px solid black;}
#box {� border: 1px solid red;� margin: 3px 10px;}
Friday, October 2, 2009
![Page 108: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/108.jpg)
<div id='outerbox'><div id='box'>I'm in a box!</div></div>
css
result
#outerbox {� border: 1px solid black;}
#box {� border: 1px solid red;� margin: 3px 10px;� padding: 25px 5px;}
Friday, October 2, 2009
![Page 109: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/109.jpg)
Overlapping margins
- CSS will find the minimum margin between two elements that satisfies their margin requirements
Friday, October 2, 2009
![Page 110: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/110.jpg)
Example
box 1
box 2
margin-right: 40px
margin-left: 60px
Friday, October 2, 2009
![Page 111: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/111.jpg)
If they were next to each other
box 1 box 2margin-right: 40px
margin-left: 60px
Friday, October 2, 2009
![Page 112: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/112.jpg)
Centering an elementmargin: 0 auto; /* or margin: 10px auto, etc */
telling the browser:0px top and bottom marginautomatic left/right margin to center element
note: a width needs to be set
Friday, October 2, 2009
![Page 113: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/113.jpg)
<div id='outerbox'><div id='box'>I'm in a box!</div></div>
css
result
#outerbox {� border: 1px solid black;}
#box {� border: 1px solid red;� margin: 0px auto;
width: 200px;� padding: 25px 5px;}
Friday, October 2, 2009
![Page 114: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/114.jpg)
Background
- background properties:
- background-image
- background-color
- background-repeat
Friday, October 2, 2009
![Page 115: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/115.jpg)
Background color
- background-color takes:
- a color spec as before
Friday, October 2, 2009
![Page 116: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/116.jpg)
<div id='outerbox'><div id='box'>I'm in a box!</div></div>
css
result
#outerbox {� border: 1px solid black;}
#box {� margin: 10px;� background-color: red;}
Friday, October 2, 2009
![Page 117: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/117.jpg)
background-image
- takes a url( ) parameter with the link to the file
Friday, October 2, 2009
![Page 118: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/118.jpg)
<div id='outerbox'><div id='box'>I'm in a box!</div></div>
css
result
#outerbox {� border: 1px solid black;}
#box {� margin: 10px;� background-color: red;� background-image: url(http://dryicons.com/files/graphics_previews/decorative_background.jpg);
Friday, October 2, 2009
![Page 119: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/119.jpg)
background-repeat
- can specify:
- repeat-y, repeat-x, or just repeat (will repeat both x and y)
Friday, October 2, 2009
![Page 120: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/120.jpg)
Opacity
- takes a number between 0 and 1.0 and sets how opaque the div and its contents will be
Friday, October 2, 2009
![Page 121: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/121.jpg)
<div id='outerbox'><div id='box'>I'm in a box!</div></div>
css
result
#outerbox {� border: 1px solid black;� background-color: red;}
#box {� margin: 0 auto;� width: 200px;� padding: 25px 5px;� background-color: white;� opacity: 0.7;}
Friday, October 2, 2009
![Page 122: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/122.jpg)
Positioning boxes & text
Friday, October 2, 2009
![Page 123: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/123.jpg)
Positioning Elements
- Two ways:
- absolute & relative positioning
- floats
Friday, October 2, 2009
![Page 124: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/124.jpg)
Absolute & Relative
- Changing an element's absolute position takes it out of the normal flow of the DOM (other elements act like it was never there)
- Changing an element's relative position makes the DOM act like the element is still in its starting spot
Friday, October 2, 2009
![Page 125: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/125.jpg)
Specifying position
- position: relative|absolute|normal;
- left/right/top/bottom: size of how much to displace for any of these directions
Friday, October 2, 2009
![Page 126: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/126.jpg)
<div id='outerbox'><div id='firstbox'>I came.</div><div id='secondbox'>I saw.</div><div id='thirdbox'>I conquered.</div></div>css
result
#outerbox {� border: 1px solid black;� background: lightblue;}
Friday, October 2, 2009
![Page 127: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/127.jpg)
<div id='outerbox'><div id='firstbox'>I came.</div><div id='secondbox'>I saw.</div><div id='thirdbox'>I conquered.</div></div>css
result
#outerbox {� border: 1px solid black;� background: lightblue;}
#firstbox{� position: relative;� left: 100px;}
Friday, October 2, 2009
![Page 128: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/128.jpg)
<div id='outerbox'><div id='firstbox'>I came.</div><div id='secondbox'>I saw.</div><div id='thirdbox'>I conquered.</div></div>css
result
#outerbox {� border: 1px solid black;� background: lightblue;}
#firstbox{� position: relative;� left: 100px;}
#secondbox {� position: absolute;� left: 220px;}
Friday, October 2, 2009
![Page 129: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/129.jpg)
Positioned relative to what?
- Its first positioned parent, or the body if nothing is positioned relative or absolute
- In other words, walk up the DOM tree until it finds a node that has been positioned.
Friday, October 2, 2009
![Page 130: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/130.jpg)
Example<div id='grandparent'>� <div id='firstparent'>� � <div id='movemearound'>� � � Move me around!� � </div>� </div></div>
Friday, October 2, 2009
![Page 131: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/131.jpg)
Nothing positioned
Friday, October 2, 2009
![Page 132: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/132.jpg)
So if we position the movemearound box
#movemearound{� position: absolute;� background: yellow;� top: 0;}
...it's positioned relative to the whole body, not any of its parents
Friday, October 2, 2009
![Page 133: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/133.jpg)
Now let's position the grandparent
#grandparent {� background: black;� padding: 10px;� width: 500px;� position: absolute;� left: 30px;� top: 20px;}
#firstparent {� background: white;� margin-top: 10px;}
#movemearound{� // disabling this positioning for now}
Friday, October 2, 2009
![Page 134: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/134.jpg)
Now grandparent is positioned
Friday, October 2, 2009
![Page 135: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/135.jpg)
So if we position movemearound again...
#grandparent {� background: black;� padding: 10px;� width: 500px;� position: absolute;� left: 30px;� top: 20px;}
#firstparent {� background: white;� margin-top: 10px;}
#movemearound{� position: absolute;� background: yellow;� top: 0;}
it's positioned relative to the grandparentFriday, October 2, 2009
![Page 136: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/136.jpg)
Now let's position its direct parent
#firstparent {� background: white;� position: relative;� left: 40px;� padding: 5px;
}
Friday, October 2, 2009
![Page 137: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/137.jpg)
So, if we now position movemearound...
#movemearound{� position: absolute;� background: yellow;� top: 0px;
}
...it's positioned relative to #firstparent, not #grandparent or the body
Friday, October 2, 2009
![Page 138: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/138.jpg)
Position Summary- position: relative doesn't affect the
elements around it; DOM acts like it's still there
- position: absolute takes element out of the DOM flow
- left/right/top/bottom properties are relative to the first parent from the element that has a position attached...or the body
Friday, October 2, 2009
![Page 139: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/139.jpg)
float
- float right/left will move an element as far in that direction in its bounding box as possible. Everything else in that box (other than other floated elements) flows around it.
Friday, October 2, 2009
![Page 140: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/140.jpg)
<div id='outerbox'><div id='firstbox'>I came.</div><div id='secondbox'>I saw.</div><div id='thirdbox'>I conquered.</div></div>css
result
#outerbox {� border: 1px solid black;� background: lightblue;}
#firstbox{� background: lightgreen;� float: left;}
Friday, October 2, 2009
![Page 141: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/141.jpg)
<div id='outerbox'><img id="flowerimage" src="http://www.w3schools.com/CSS/klematis_small.jpg"/> <div id='secondbox'>I saw.</div><div id='thirdbox'>I conquered.</div></div>
css
result
#outerbox {� border: 1px solid black;� background: lightblue;}
#flowerimage{� float: left;� margin-right: 10px;}
Friday, October 2, 2009
![Page 142: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/142.jpg)
<div id='outerbox'><img id="flowerimage" src="http://www.w3schools.com/CSS/klematis_small.jpg"/><img id="otherflower" src="http://www.w3schools.com/CSS/klematis3_small.jpg"/> <div id='secondbox'>I saw.</
css
result
#outerbox {� border: 1px solid black;� background: lightblue;}
#flowerimage{� float: left;� margin-right: 10px;}
#otherflower{� float: right;}
Friday, October 2, 2009
![Page 143: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/143.jpg)
<div id='outerbox'><img id="flowerimage" src="http://www.w3schools.com/CSS/klematis_small.jpg"/><img id="otherflower" src="http://www.w3schools.com/CSS/klematis3_small.jpg"/> <div id='secondbox'>I saw.</div><div id='thirdbox'>I conquered.</div></div>css
result
#outerbox {� border: 1px solid black;� background: lightblue;}
#flowerimage{� float: left;� margin-right: 10px;}
#otherflower{� float: right;}
Friday, October 2, 2009
![Page 144: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/144.jpg)
Floated elements don't flow
Friday, October 2, 2009
![Page 145: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/145.jpg)
Clearing a float
- Setting clear: left|right|both on an element will put it after the full height of floated elements on the left|right or both sides
Friday, October 2, 2009
![Page 146: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/146.jpg)
Clearing floats#outerbox {� border: 1px solid black;� background: lightblue;}
#flowerimage{� float: left;� margin-right: 10px;}
#otherflower{� float: right;}
#thirdbox {� clear: both;}
Friday, October 2, 2009
![Page 147: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/147.jpg)
Putting it in practice
Friday, October 2, 2009
![Page 148: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/148.jpg)
2 ways of doing a left-side menu with right
content- using position
- using float
- let's pretend we're building Axess
Friday, October 2, 2009
![Page 149: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/149.jpg)
Our starter code<div id="nav">� <ul>� � <li>Home</li>� � <li>Add/Edit Courses</li>� � <li>Order books</li>� � <li>Make a payment</li>� </ul></div><div id="content">� Lorem ipsum...</div>
Friday, October 2, 2009
![Page 150: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/150.jpg)
Looks like this:
Friday, October 2, 2009
![Page 151: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/151.jpg)
method 1: position
- Strategy: pull the left menu out of the DOM flow using position: absolute
- Then move the content over by using position: relative
Friday, October 2, 2009
![Page 152: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/152.jpg)
step 1#nav {� position: absolute;}
Friday, October 2, 2009
![Page 153: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/153.jpg)
#nav is now out of the flow, so the #contentis overlapping it
Friday, October 2, 2009
![Page 154: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/154.jpg)
step 2#nav {� position: absolute;� width: 200px;}
ul {� margin: 0px;}
#content {� position: relative;� left: 220px;}
Friday, October 2, 2009
![Page 155: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/155.jpg)
Friday, October 2, 2009
![Page 156: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/156.jpg)
This looks good, but...
- What happens when the right side is shorter than the left?
Friday, October 2, 2009
![Page 157: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/157.jpg)
with a footer<div id="nav">� <ul>� � <li>Home</li>� � <li>Add/Edit Courses</li>� � <li>Order books</li>� � <li>Make a payment</li>� </ul></div><div id="content">� If the content is short...</div><div id="footer">What if we wanted more information like a footer?</div>
Friday, October 2, 2009
![Page 158: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/158.jpg)
Friday, October 2, 2009
![Page 159: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/159.jpg)
Uh oh...
- We need a different approach if we want a footer
Friday, October 2, 2009
![Page 160: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/160.jpg)
Method 2: float
- Strategy: float both elements left
Friday, October 2, 2009
![Page 161: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/161.jpg)
Step 1#nav {� float: left;� width: 200px;}
body {� width: 800px;}
ul {� margin: 0px;}
#content {� width: 500px;}
Friday, October 2, 2009
![Page 162: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/162.jpg)
Friday, October 2, 2009
![Page 163: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/163.jpg)
Step 2#nav {� float: left;� width: 200px;}
body {� width: 800px;}
ul {� margin: 0px;}
#content {� float: left;� width: 500px;}
Friday, October 2, 2009
![Page 164: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/164.jpg)
Friday, October 2, 2009
![Page 165: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/165.jpg)
And now for a footer...
- We can use clear!
Friday, October 2, 2009
![Page 166: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/166.jpg)
first, adding the footer
Friday, October 2, 2009
![Page 167: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/167.jpg)
now add clear#nav {� float: left;� width: 200px;}
body { width: 800px;}ul { margin: 0px;}
#content {� float: left;� width: 500px;}
#footer {� clear: both;}
Friday, October 2, 2009
![Page 168: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/168.jpg)
Friday, October 2, 2009
![Page 169: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/169.jpg)
Success!
Friday, October 2, 2009
![Page 170: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/170.jpg)
Portfolio Part 2
Friday, October 2, 2009
![Page 171: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/171.jpg)
<!DOCTYPE html><html>� <head>� � <title>CS147 Portfolio, Day 1</title>� � <meta name="viewport" content="width=device-width, user-scalable=no" />� � <link rel="stylesheet" href="week02.css" type="text/css" media="screen" title="no title" charset="utf-8">� �� </head>� <body>� � <div class='content'>� � � <div id="info">� � � � <div id='fullname'>Joe <span id='last-name'>Student</span></div>� � � � <div id="tagline">[email protected]<br/>Interface Designer</div>� � � </div>� � � <div id='bio'>� � � <h2>Bio</h2>� � � � Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>� � � <div id='assignments'>� � � � <h2>Course work</h2>� � � � <ul>� � � � � <li><a href="how-might-we.html">How Might We?</a></li>� � � � � <li><a href="inspiration.html">Inspiration</a></li>� � � � � <li><a href="discovery.html">Discovery</a></li>� � � � </ul>� � � </div>� � � <!-- we need this for our float layout -->� � � <div class='clear'></div>� � </div>� </body></html>
Friday, October 2, 2009
![Page 172: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/172.jpg)
Looks like...
Friday, October 2, 2009
![Page 173: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/173.jpg)
body {� font-family: Georgia;� margin: 0px;}
#assignments {� float: left;� width: 130px;� margin-top: 25px;� padding: 5px 5px;� -webkit-border-radius: 10px;� background-color: #e4d18f;� font-size: 0.9em;� position: relative;� top: 40px;}
#assignments h2 {� position: absolute;� top: -19px;� color: #e4d18f;
}
#assignments a {� text-decoration: none;� color: #8a000e;}
.content {� border: 1px solid gray;� background: #8a000e;� color: white;� margin: 0px auto;� width: 315px;� padding: 5px 10px;}
#info {� width: 140px;� float: left;
�}
#last-name {� font-weight: bold;� position: relative;� top: 10px;}
#tagline {� font-size: 0.8em;� position: relative;� left: 1px;� font-style: italic;� top: 14px;
}
h2 { margin-top: 0px; font-size: 1.0em; }
#bio {� float: right;� width: 155px;;� font-size: 0.9em;}
ul {� margin-left: 0px;� padding-left: 0px;� margin-top: 0px;� list-style-type: none;}
li { margin-bottom: 5px; margin-top: 5px; }.clear { clear: both; }
Friday, October 2, 2009
![Page 174: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/174.jpg)
Looks like...
Friday, October 2, 2009
![Page 175: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/175.jpg)
body {� background-color: white;� color: white;� font-family: Helvetica;� margin: 0px;
}
.content {� background-color: #AAA;� margin: 0px auto;� width: 300px;� padding: 10px 20px;� height: 480px;}
#info {� width: 280px;� margin: 0px auto;� border-bottom: 1px solid white;}
#last-name {� font-family: Zapfino;� font-weight: bold;}
#fullname {� float: left;� font-family: Zapfino;}
#tagline {� font-size: 0.8em;� position: relative;� left: 14px;� top: 14px;�}
h2 { font-size: 1.4em; }
#bio { clear: both; }
ul {� margin-left: 0px;� padding-left: 0px;� list-style-type: none;}li {� background-color: #cacaca;� padding: 10px;� margin-bottom: 5px;}
a {� text-decoration: none;� color: white;}
Friday, October 2, 2009
![Page 176: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/176.jpg)
Looks like...
Friday, October 2, 2009
![Page 177: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/177.jpg)
body {� background-color: white;� color: white;� font-family: Helvetica;� margin: 0px;
}
.content {� background-color: #7a7cab;� margin: 0px auto;� width: 300px;� padding: 10px 20px;� height: 480px;}
#info {� width: 280px;� margin: 0px auto;� border-bottom: 1px solid white;�}
#last-name {� font-family: Zapfino;� font-weight: bold;}
#fullname {� width: ;� float: left;� font-family: Zapfino;}
#tagline {� font-size: 0.8em;� position: relative;� left: 14px;� top: 14px;�}
h2 {� font-size: 1.4em;}
#bio {� clear: both;}
ul {� margin-left: 0px;� padding-left: 0px;� list-style-type: none;}li {� background-color: #8aa5cb;� padding: 10px;� margin-bottom: 5px;}
a {� text-decoration: none;� color: white;}
Friday, October 2, 2009
![Page 178: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/178.jpg)
Looks like...
Friday, October 2, 2009
![Page 179: CSS, part 1 · Playing with selectors All work and no play makes](https://reader035.fdocuments.in/reader035/viewer/2022062917/5ed5cf5dd48e3c5e0c2a9cd2/html5/thumbnails/179.jpg)
What we did today
- How to add CSS to your HTML
- What CSS looks like
- How the "cascade" works
- How to style fonts & boxes
- How to position elements
Friday, October 2, 2009