PAGE LAYOUT WITH CSS
Overview
2
¨ Styling Page Sections
¨ Introduction to Layout
¨ Floating Elements
¨ Sizing & Positioning
3 Styling Page Sections
Why do we need page sections?
4
¨ Style individual elements, groups of elements,
sections of text or of the page
¨ Create complex page layouts
Sections of a page <div>
5
<div class="shout">
<h2>Coding Horror! Coding Horror!</h2>
<p class="special">See our special deal on Droids!</p>
<p>We'll beat any advertised price!</p>
</div> HTML
Coding Horror! Coding Horror!
See our special deal on Droids!
We’ll beat any advertised price!
output
¨ Tag used to indicate a logical section or area of a page
¨ Has no appearance by default, but you can apply styles to it
Inline Sections <span>
6
<h2>Coding Horror! Coding Horror!</h2>
<p>See our <span class="special“>spectacular</span> deal
on Droids!</p>
<p>We'll beat <span class="shout“> any advertised price</
span>!</p>
HTML
Coding Horror! Coding Horror!
See our spectacular deal on Droids!
We’ll beat any advertised price!
output
¨ has no onscreen appearance, but you can apply a style or ID
to it, which will be applied to the text inside the span
CSS context selectors
7
selector1 selector2 {
properties
}
CSS
¨ applies the given properties to selector2 only if it is inside a
selector1 on the page
selector1 > selector2 {
properties
}
CSS
¨ applies the given properties to selector2 only if it is directly
inside a selector1 on the page
Context selector example
8
<p>Eat at <strong>Greasy's Burger</strong>...</p>
<ul>
<li>The <strong>greasiest</strong> burgers in town!</li>
<li>Yummy and greasy at the same time!</li>
</ul>
HTML
li strong { text-decoration: underline; }
CSS
Eat at Greasy’s Burger…
• The greasiest burgers in town!
• Yummy and greasy at the same time!
output
More complex example
9
<div id="ad">
<p>Eat at <strong>Greasy's Burger</strong>...</p>
<ul>
<li class="important">The <strong>greasiest</strong> burgers in town!</li>
<li>Yummy and <strong>greasy at the same time </strong>!</li>
</ul>
</div>
HTML
#ad li.important strong { text-decoration: underline; }
CSS
Eat at Greasy’s Burger…
• The greasiest burgers in town!
• Yummy and greasy at the same time!
output
10 Introduction to Layout
The CSS Box Model
11
¨ Every element composed of:
¤ content
¤ a border around the element
¤ padding between the content and the border
¤ a margin between the border and other content
The CSS Box Model (cont.)
12
width = content width + L/R padding + L/R border + L/R margin
height = content height + T/B padding + T/B border + T/B margin
Document Flow – block elements
13
Document flow - inline elements
14
Document flow - a larger example
15
CSS properties for borders
16
h2 { border: 5px solid red; }
CSS
This is a heading.
output
property description
thickness/style/size of border on all 4
border
sides
¨ Thickness: px, pt, em, or thin, medium, thick
¨ Style: none, hidden, dotted, dashed, double,
groove, inset, outset, ridge, solid
¨ color
More border properties
17
property description
border-color, border-width, specific properties of border on all 4
border-style sides
border-bottom, border-left, all properties of border on a
border-right, border-top particular side
border-bottom-color, border-bottom-
style,
border-bottom-width, border-left-
color, properties of border on a particular
border-left-style, border-left-width, side
border-right-color, border-right-style,
border-right-width, border-top-color,
border-top-style, border-top-width
Complete list of border properties http://www.w3schools.com/css/
css_border.asp
Another border example
18
h2 {
border-left: thick dotted #CC0088;
border-bottom-color: rgb(0, 128, 128);
border-bottom-style: double;
}
CSS
This is a heading.
output
¨ each side's border properties can be set individually
¨ if you omit some properties, they receive default
CSS properties for padding
19
property description
padding padding on all 4 sides
padding-bottom padding on bottom side only
padding-left padding on left side only
padding-right padding on right side only
padding-top padding on top side only
Complete list of padding properties
http://www.w3schools.com/css/css_padding.asp
Padding example 1
20
p { padding: 20px; border: 3px solid black; }
h2 { padding: 0px; background-color: yellow; }
CSS
This is a first paragraph.
This is a second paragraph.
This is a heading
output
Padding example 2
21
p {
padding-left: 200px; padding-top: 30px;
background-color: fuchsia;
}
CSS
paragraph
This is a first paragraph.
This is a second paragraph
output
¨ each side's padding can be set individually
¨ notice that padding shares the background color of the
element
CSS properties for margins
22
property description
margin margin on all 4 sides
margin-bottom margin on bottom side only
margin-left margin on left side only
margin-right margin on right side only
margin-top margin on top side only
Complete list of margin properties
http://www.w3schools.com/css/css_margin.asp
Margin example 1
23
p {
margin: 50px;
background-color: fuchsia;
}
CSS
This is a first paragraph
This is a second paragraph
output
¨ notice that margins are always transparent
Margin example 2
24
p {
margin-left: 8em;
background-color: fuchsia;
}
CSS
This is a first paragraph
This is a second paragraph
output
¨ each side's margin can be set individually
CSS properties for dimensions
25
p { width: 350px; background-color: yellow; }
h2 { width: 50%; background-color: aqua; }
CSS
This paragraph uses the first style above
An h2 heading
output
property description
how wide or tall to make this element
width, height
(block elements only)
max-width, max-height, max/min size of this element in given
min-width, min-height dimension
26 Floating Elements
The CSS float property
27
img.headericon {
float: right; width: 130px;
} CSS
Ghostbusters is a 1984 American science fiction comedy
film written by co-stars Dan Aykroyd and Harold Ramis
about three eccentric New York City
parapsychologists-turned-ghost capturers.
output
property description
side to hover on; can be left, right, or none
float
(default)
removed from normal document flow; underlying text wraps
around as necessary
Floating elements diagram
28
Common float bug: missing width
29
¨ often floating block elements must have a width
property value
The clear property
30
p { background-color: fuchsia; }
h2 { clear: right; background-color: yellow; }
CSS
Mario
Mario isis aa fictional
fictional character
character in in his his video video game game series. series.
Serving
Serving asas Nintendo's
Nintendo's mascot
mascot and and the the main main protagonist protagonist of
of
thethe series,
series, Mario
Mario hashas appeared
appeared in in over over 200 200 video video games
games since
since his his creation.
creation
Super Mario Fan Site!
output
The clear property (cont.)
31
property description
disallows floating elements from
overlapping this element;
clear
can be left, right, or none
(default)
Clear diagram
32
div#sidebar { float: right; }
p { clear: right; } CSS
Common error: container too short
33
<p><img src="images/mario.png" alt=“super mario" />
Mario is a fictional character in his video game
series.....</p> HTML
p { border: 2px dashed black; }
img { float: right; } CSS
Mario is a fictional character in his video game series.
Serving as Nintendo's mascot and the main protagonist
of the series, Mario has appeared in over 200 video
games since his creation.
output
The overflow property
34
p { border: 2px dashed black; overflow: hidden; }
CSS
Mario is a fictional character in his video game series.
Serving as Nintendo's mascot and the main protagonist
of the series, Mario has appeared in over 200 video
games since his creation.
output
The overflow property (cont.)
35
property description
specifies what to do if an
element's content is too large;
overflow
can be auto, visible, hidden, or
scroll
Multi-column layouts
36
<div>
<p>first paragraph</p>
<p>second paragraph</p>
<p>third paragraph</p>
Some other text that is important
</div> HTML
p { float: right; width: 25%; margin: 0.5em;
border: 2px solid black; }
div { border: 3px dotted green; overflow: hidden; }
CSS
Some other text that is important
third paragraph second paragraph first paragraph
output
37 Sizing and Positioning
The position property (examples)
38
div#ad {
position: fixed;
right: 10%;
top: 45%;
} CSS
property value description
static default position
offset from its normal
relative
static position
position a fixed position within its
absolute
containing element
a fixed position within
fixed
the browser window
top, bottom,
positions of box's corners
left, right
Absolute positioning
39
#menubar {
position: absolute;
left: 400px;
top: 50px;
} CSS
¨ removed from normal flow
¨ positioned relative to the block
element containing them
¨ actual position determined by
top, bottom, left, right
¨ should often specify a width
property as well
Relative positioning
40
#area2 { position: relative; }
CSS
¨ absolute-positioned elements
are normally positioned at an
offset from the corner of the
overall web page
¨ to make the absolute element to
position itself relative to some
other element's corner, wrap the
absolute element in an element
whose position is relative
Fixed positioning
41
#menubar {
position: fixed;
left: 400px;
top: 50px;
} CSS
¨ removed from normal flow
¨ positioned relative to the
browser window even when the
user scrolls the window, element
will remain in the same place
Alignment vs. float vs. position
42
¨ If possible, lay out an element by aligning its content
¤ horizontal alignment: text-align
¤ vertical alignment: vertical-align
¨ If alignment won't work, try floating the element
¨ If floating won't work, try positioning the element
¤ absolute/fixed positioning are a last resort and
should not be overused
Details about inline elements
43
¨ Size properties (width, height, min-width,
etc.) are ignored
¨ margin-top and margin-bottom are ignored,
¨ but margin-left and margin-right are not
ignored
Details about inline elements
44
¨ the containing block element's text-align
property controls horizontal position of inline elements
within it
¤ text-align does not align block elements within the page
¨ each inline element's vertical-align property
aligns it vertically within its block element
The vertical-align property
45
property description
specifies where an inline element
should be aligned vertically, with
vertical-align
respect to other content on the same
line within its block element's box
¨ can be top, middle, bottom, baseline (default), sub,
super, text-top, text-bottom, or a length value or %
(baseline means aligned with bottom of non-hanging letters)
The display property
46
h2 { display: inline; background-color: yellow; }
CSS
output
property description
sets the type of CSS box model
display
an element is displayed with
¨ values: none, inline, block, run-in,
compact, ...
¨ use sparingly, because it can radically alter the page layout
The display property
47
<ul id="topmenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul> HTML
#topmenu li {
display: inline;
border: 2px solid gray;
margin-right: 1em;
} CSS
output
¨ lists and other block elements can be displayed inline
¨ flow left-to-right on same line
¨ width is determined by content
The visibility property
48
p.secret {
visibility: hidden;
} CSS
output
¨ hidden elements will still take up space onscreen, but will not
be shown
¤ to make it not take up any space, set display to none instead
¨ can be used to show/hide dynamic HTML content on the page
in response to events
