CSS - Quiz #3
Lecture Code: 170375
http://decal.aw-industries.com
Web Design:
Basic to Advanced Techniques
Today’s Agenda
 Quiz & Attendance
 Announcements
 Revisit Absolute / Relative URLs
 CSS Selector Motivation
 CSS / Photoshop Layouts – Part 1
 Finish Quiz & Attendance
 Lab
Web Design:
Basic to Advanced Techniques
Announcements
 Mini Project 2 due tonight by 11:59PM
 Battleship or Instant Messenger?
 Need help? Post in the Chatroom!
 Did you finish a project early? Help others in the
Chatroom!
 Confused about course material? Email me and take
advantage of lab after class.
Web Design:
Basic to Advanced Techniques
Absolute vs. Relative URLs
Are you linking to a different domain?
yes
http://B.com/redSmiley.jpg
Use absolute URL
no
B.com
A.com
Is the item you’re linking to
in a sub-folder of or in the same
folder as the html document?
Absolute
URL
folderN/redSmiley.jpg
Use relative URL
A.com
no
yes
A.com
/folderA
…
/folderN
/folderB/redSmiley.jpg
Use root relative URL
/folderA
/folderB
Relative URL
Root
Relative URL
CSS Selector Motivation
 Say we want to style all the links that appear inside
paragraphs of class .myPara
HTML
<p class=“myPara”>
<a class=“pLink”></a>
<a class=“pLink”></a>
<a class=“pLink”></a>
<a class=“pLink”></a>
<a class=“pLink”></a>
</p>
HTML
<p class=“myPara”>
<a ></a>
<a></a>
<a></a>
<a></a>
<a></a>
</p>
CSS
.pLink {
}
CSS
.myPara a {
}
We want to be as efficient as possible with our coding to keep file sizes down.
Web Design:
Basic to Advanced Techniques
Spring 2010
Tuesdays 7-8pm
200 Sutardja-Dai Hall
CSS/Photoshop Layouts – Part 1
Web Design:
Basic to Advanced Techniques
Building Our Layout Toolbox
 HTML Element:
 <div></div>
 CSS Attributes:
 display: block;
 block
 inline
 inline-block
 position: absolute;
 absolute
 relative
 Also top/bottom, left/right
 margin: 10px 10px;
 Also padding
 border: 1px solid #000000;
 background-color: #000000;
 background-image: url(image.gif);
 background-repeat
 background-position
 height: 10px;
 Also width
 float: left;
 clear: right;
 z-index: 100;
div Element
Without CSS
With CSS
How exactly is CSS doing this? What’s being styled?
div Element …continued
View Source
<div >
Source Code for Menu
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div >
</div>
div Element …continued
 div’s are our general layout building blocks/containers
 Used to logically group HTML elements
 Separate regions of code into functional regions
 “these HTML elements make up the menu system”
 Like span’s they have no visual effect on our HTML
documents by themselves
 span’s are inline elements
 div’s are block elements
 What happens when we wrap a set of elements in div tags?
div Element …continued
<h3>Menu</h3>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
<a>print story</a>
<h1>News Story</h1>
<p>
<a></a>
</p>
<div id=“menu”>
<h3>Menu</h3>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
</div>
<div id=“newsStory”>
<a>print story</a>
<h1>News Story</h1>
<p>
<a></a>
</p>
</div>
Spot the div’s
Whenever you see multiple HTML elements behaving in unison, suspect a div.
CSS’n div’s
<div id=“everything”>
<div id=“arrow”></div>
<div id=“menu”>
…many links
</div>
<div id=“content”>
<div class=“message”></div>
…more messages
</div>
</div>
CSS’n div’s …continued
 After we break up our layout into div’s we use CSS to
position and style them.
CSS Property: display
 Example:
 a { display: block; }
block
 Common Values:
 block
 inline
 none
inline
inline
 Hides object
 inline-block (not supported in IE 6, inconsistent IE 7)
 Allows block level elements to be placed next to each other
 For compatibility: use floats instead
 Valid HTML: Still don’t nest block elements in inline
elements. HTML syntax independent of CSS.
CSS Properties: height, width
 Can only be set on block level elements and a few inline
elements such as <img />
 Example:
height: 100px;
 div { width: 100px; height: 100px; }
 div { width: 100%; height: 100%; }
 Common Values:
 Pixels: 20px
 Percentage of parent: 100%
 Not set/auto: width of contents
width: 100px;
CSS Properties: height, width
…continued
width: 100px;
width: 100px;
height: auto;
height: 100px;
height: 100px;
width: 100px;
height: 100px;
width: 100%;
height: 100%;
height: 100%;
width: 100%;
width: auto;
CSS Property: border
 Example:
 div { border: 1px solid #000000; }
 div { border-top: 1px solid #000000; border-right: 1px solid
#000000; border-bottom: 1px solid #000000; border-left:
1px solid #000000; }
 Common Values:
 Border width: 1px
 Border style: solid
•solid
•dotted
•dashed
•double
•groove
•ridge
•inset
•outset
 Border color: #000000
div
div { border: 1px solid #000000; }
CSS Properties: margin, padding
 Margin: space between this object and others
 Padding: space between the objects border and contents
 Example:
 div { margin: 5px 10px; }
 div { margin: 5px 10px 5px 10px; }
 Order: top, right, bottom, left
 div { margin-top: 5px; margin-bottom: 5px;
 margin-left: 10px; margin-right: 10px; }
 Padding has same syntax
margin
Div_1
 Common Values:
 Pixels: 10px
Div_2
padding
CSS Properties: position
 Example:
 div { position: absolute; }
 Common Values:
 absolute
 Removes object from flow of document. Object takes up no space.
 Relative to closest parent who has its position set. If no parent qualifies,
relative to document boundaries.
 relative
 Relative to the objects natural location.
 fixed
 Removes object from flow of document. Object takes up no space.
 Relative to browser window’s boundaries.
 static
 Don’t typically use this because it is already the default behavior.
CSS Properties:
top/bottom, left/right
 Used in conjunction with position
 Example:
 div { position: absolute; top: 0px; left: 0px; }
 Common Values:
 Pixels: 10px
code:
position Document Flow
<span>A</span><div>B</div><span>C</span>
div { position: static; }
div { position: relative; }
span: “A”
span: “A”
div { position: absolute; }
or
div { position: static; }
span: “A”
div: “B”
div: “B”
div: “B”
span: “C”
span: “C”
span: “C”
top & left Effects
div {
div {
position: static;
top: 10px;
left: 10px;
}
position: relative;
top: 10px;
left: 10px;
}
top: 0px; left: 0px;
div {
position: absolute;
top: 10px;
left: 10px;
}
top: 0px; left: 0px;
top: 0px; left: 0px;
span: “A”
span: “A”
10px
div: “B”
span: “C”
div: “B”
10px div: “B”
span: “C”
10px
span: “A”
10px div: “B”
div: “B”
span: “C”
code:
absolute References
<div id=“A”><div id=“B”></div></div>
top: 0px; left: 0px;
top: 0px; left: 0px;
A AB
B
div {
position: absolute;
top: 10px; left: 10px;
}
div { position: absolute; }
#A { top: 10px; left: 10px; }
#B { bottom: 10px; right: 10px; }
absolute vs. fixed
 Please see included absolute_vs_fixed.html file for demo.
CSS Properties: float
 Effect on itself:

A floated object moves left or right (depending on the value of float) until it encounters
another floated object or its container’s boundaries.
 Effect on others:

Like water flows around a floating item, adjacent objects flow around an object that has
its float property set
 Also a type of positioning but not set with position.

Can only be set if the position is relative, static or not set.
 Should set width and height of object when using float, else behavior can be
unpredictable.
 Example:

div { float: left; width: 100px; height: 100px; }
 Common Values:



left
right
none
CSS Properties: clear
 Used to specify behavior of object interacting with a floated
object
 clear forces the object to appear after the floated object ( if it’s
a left float, right float, or both types )
 Example:
 p { clear: left; }
 Common Values:




left
right
both
none
float & clear Demo
 Please see included float.html file for demo.
CSS Property: z-index
 Object must have position set to relative, absolute, or fixed.
 If not set, later elements have higher z-index’s that earlier
ones.
 Higher numbers on top of lower numbers.
 Example:
 div { position: absolute; z-index: 100; }
later
 Common Values:
 positive integers
default
default
earlier
100
99
99
100
CSS - Quiz #3
Lecture Code: 170375
Then… Lab
http://decal.aw-industries.com
Web Design:
Basic to Advanced Techniques