Cascading Style
Sheets (CSS) – Part II
Hamid Zarrabi-Zadeh
Web Programming – Fall 2013
2
Outline
• CSS Display
• Box Model
• Page Layout
• Pseudo-Classes
• CSS3 New Features
• Summary
3
CSS Display
• HTML elements:
 Block
 div, p, h1, pre
 Inline
 span, a, code
• Changing display:
li { display: inline; }
code { display: block; }
4
CSS Visibility
• We can hide elements in two ways:
 display: none;
 Completely hide, taking no space
 visibility: hidden;
 Still takes space
• Example
p.hidden { display: none; }
Box Model
6
CSS Box Model
• Every block is rendered as a box
7
Margin and Padding
• Transparent space outside/inside a box
• Controlled by margin and padding properties
#content {
margin: 10px;
padding: 5px;
padding-top: 1px;
margin: 10px 4px 6px;
}
8
Box Border
• Box border is controlled by border property
 border-width
 border-style:
 none, hidden, dotted, dashed, solid, double, groove,
ridge, inset, outset
 border-color
#content {
border: 1px solid #333;
border-bottom-style: dotted;
}
9
Box Size
• Controlled by width and height properties
 Can be auto, a percentage, or a length
• Related properties
 min-width, max-width, min-height, max-height
• Total box width
 width + (left/right) [padding + border + margin]
200px;
• width:
Example:
padding: 10px;
border: 2px solid gray;
margin: 5px;
Total width = 234px
CSS Positioning
11
Positioning
• The position property:
 static: normal position
 relative: relative to the normal position
 the left and top properties specify offsets from the
normal position
 absolute: relative to first non-static parent (or html)
 The element's position can be specified with the left,
top, right, and bottom properties
 fixed: relative to the browser window
12
Positioning Tips
• When elements overlap, use z-index property to
specify which one is in front
• For absolute placements, the left, right, bottom,
and top properties specify the distance of a box
side from its enclosing box
• Setting bottom to 0 can be used to force a box
to fill the enclosing box
13
Position Example
#content1 {
position: absolute;
left: 0;
right: 50%; bottom: 0;
}
#content2 {
position: absolute;
left: 50%;
right: 0; bottom: 0;
}
<div id=”content1”>
The left column text goes here
</div>
<div id=”content2”>
The right column text goes here
</div>
14
CSS Floating
• Pushes elements to the left or right, allowing
other elements to wrap around it
• The elements after the floating element will flow
around it.
div.cell {
width: 20px;
float: left;
}
#last-div {
clear: both;
}
Pseudo-Classes
16
Pseudo-Classes
• Anchor Pseudo-classes
 a:link {color:#FF0000;}
/* unvisited link */
 a:visited {color:#00FF00;} /* visited link */
 a:hover {color:#FF00FF;} /* mouse over link */
 a:active {color:#0000FF;} /* selected link */
• Other Pseudo-classes
 p:first-child {color:blue;} /* any <p> that is first child */
 p:lang(fa) {direction: rtl;} /* any <p> with lang="fa" */
17
Pseudo-Elements
• Text Pseudo-elements
 p:first-letter {color:blue;} /* first letter of <p> */
 p:first-line {color:blue;} /* first line of <p> */
• Text/Image Insertion
 h1:before {content: url(bullet.png);}
 h1:after {content: "Read this!";}
18
Example: Navigation Bar
• A navigation bar is basically a list of links
• So, we use <ul> and <li> to define it
<ul class="menu">
<li><a href="about/">About</a></li>
<li><a href="contact/">Contact Us</a></li>
<li><a href="news/">News</a></li>
</ul>
19
Example: Navigation Bar
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
a {
display: block;
width: 60px;
}
20
Image Sprites
• A collection of images put into a single image
• Reduces the number of server requests
#home { height:32px; width:32px; }
#home { background: url('nav.png') 0 0; }
#home:hover { background-position: 0 -45px; }
21
Media Types
• Allows different rules for different media
@media screen
{
#main { background-color: gray; }
}
@media print
{
#nav { display: none; }
}
@media only screen and (max-width: 600px)
{
#main { width: 400px; }
}
CSS3 New Features
CSS3 Main Modules
• Selectors
• Box Model
• Backgrounds and Borders
• Text Effects
• 2D/3D Transformations
• Animations
• User Interface
24
New Selectors
• Pseudo-Classes
 :last-child
 :only-child
 :nth-child(n)
 :nth-of-type(n)
 :disabled
 :checked
 :target
 :not(selector)
25
Box Features
• New box properties
 border-radius
 box-shadow
 border-image
div {
border: 2px solid;
border-radius: 25px;
box-shadow: 10px 10px 5px #888888;
}
26
Colors
• Color definitions:
 RGBA
rgb(255, 0, 0, .5)
 HSL
hsl(60, 100%, 50%)
 HSLA
hsl(60, 100%, 50%, .5)
• Gradients:
 Linear
 Radial
27
Font Embedding
• Allows using web fonts
@font-face {
font-family: 'Droid';
font-style: normal;
font-weight: 400;
src: local('Droid'), local('DroidSans'),
url(fonts/droid.woff) format('woff');
}
28
2D Transforms
• Some 2d transform methods
 translate()
 rotate()
 scale()
 skew()
div {
transform: rotate(30deg) scale(2, 1)
translate(10px, 0) skew(20deg, 10deg);
}
29
3D Transforms
• Some 2d transform methods
 rotateX(), rotateY(), rotateZ()
 translate3d(x, y, z)
 scale3d(x, y, z)
 perspective()
div {
transform: rotateY(180deg);
}
30
Transitions
• Adds effect when changing style
 transition: property time;
#box {
transition: transform 2s, border 2s;
border: 0px solid yellow;
}
#box:hover {
transform: rotateY(180deg);
border: 10px solid orange;
}
31
Summary
• You can use CSS positioning and floating
mechanism to control the layout of your page
• CSS3 adds lots of new features for styling the web
• Even major browsers may not support all CSS3
features at present
32
References
• W3Schools
 http://www.w3schools.com/html
• Internet Programming by Pat Morin
 http://cg.scs.carleton.ca/~morin/teaching/2405/