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