Shaping up with CSS
<understanding how true CSS layouts are built />
Advanced CSS Stephen Ireland

Understanding Elements
• HTML elements
• Marked up as <tags />
• Two types of HTML elements
Block level elements Inline elements
<h1>, <h2>, <h3> etc <span>
<p> <strong>
<div> <em>
<blockquote> <a>
<ul> and <ol>
Advanced CSS Stephen Ireland

Block level Elements
• Fundamental differences in use
• Identified as normally displayed on its own line
• Other elements appear above or below - not either side
• Can be used as a container for one or more other elements
The rules
• A block level element can contain other block-level elements,
as well as inline elements.
• An inline element cannot contain block-level elements.
Advanced CSS Stephen Ireland

Block Element Rule
The rule
x
<div>
<a href=”#”><h1>My link</h1></a>
</div>
✓
<div>
<h1><a href=”#”>My link</a></h1>
</div>
Advanced CSS Stephen Ireland

Inline Element Rule
The rule
It’s okay to nest one inline element inside another;
<div>
✓
<h1>
<a href=”#”><span>My link</span></a>
</h1>
</div>
Advanced CSS Stephen Ireland

Element Symmetry
Opening & closing XHTML tags
<div>
x
<h1>
<a href=”#”>
<span>My link</span>
←
</h1>
</a> h1 element should not close before a
</div>
Can be checked using online validators (validator.w3.org)
Advanced CSS Stephen Ireland

Styling Elements
Inline elements
• Changing colour (text and background)
• Changing font styles (size, typeface, bold, underline, etc.)
Block-level elements
• Set fixed width or height
• Set padding or margin values
• Position a block to any location on a web page, regardless
of where it appears in the XHTML markup
This is why block-level elements are more powerful
Advanced CSS Stephen Ireland

Sizing Defaults
Block-level elements
• Will take 100% of available width
• Available width could be parent element
• Or could be browser window
• Takes whatever height it needs
Advanced CSS Stephen Ireland

Setting Heights & Widths
Setting a width
This CSS declaration will adjust a paragraph with the class
value of ‘highlight’. The paragraph will become 50% the width
of its containing element.
CSS declaration
p.highlight {
width: 50%;
}
Advanced CSS Stephen Ireland

Units of Measurement
When sizing and positioning elements we can use different
units of measurement. Each unit type have their benefits and
drawbacks. Although different unit types can be mixed within
layouts, problems may occur.
Units
• Pixels (px) for fixed sizing / positioning
• Percentages (%) for sizes relative to containing elements
• Ems (em) for sizes relative to base font size
• Points (pt) for print based styles
Advanced CSS Stephen Ireland

Fixed Block-Level Sizing
Setting a height as well as a width to a block-level element is
just as simple, although be wary of possible consequences.
CSS declaration
#navigation {
background-color: #cccccc;
width: 200px;
height: 400px;
}
Advanced CSS Stephen Ireland

Browser Behaviour
If you set a height that is less than the room needed for the
content of the element, that content will overflow.
Firefox Internet Explorer
Advanced CSS Stephen Ireland

Other Occurances
If a visitor to your
website increases the
font-size, text may
overflow the containing
element of a fixed size.
Advanced CSS Stephen Ireland

Overflow:Hidden
There is a way to stop elements escaping the bounds of
their containing element - set the CSS overflow property
to ‘hidden’. Bad practice in this situation as text becomes
unreadable anyway...
#navigation {
background-color: #cccccc;
width: 200px;
height: 300px;
overflow: hidden;
}
Advanced CSS Stephen Ireland

Positioning Elements
Full CSS layouts
• Without intervention from CSS, a web
browser will display elements in the
order they appear in the source file.
• By full CSS layouts, we mean layouts
that use CSS entirely for positioning
elements in the web browser window.
• There are many different ways to create CSS layouts.
• Best practice methods often harder to achieve.
Advanced CSS Stephen Ireland

Full CSS Layouts
Conventional layouts
• Comprise of
• A header
• Two or three columns
• A footer
• Use <div> tags for layout hooks
• Use XHTML property ‘id’ to style div elements individually
XHTML CSS
<div id=”banner”></div> #banner { width: 760px; }
Advanced CSS Stephen Ireland

Layout Options
Debate
• Fixed-width
• Fluid-width
• Semi-fluid (one fixed width column, one fluid width)
• Zoom (entire layout relative to font size)
• Resolution-dependent (Made possible with Javascript)
All types of layouts are dependent on methods of sizing and
positioning of the block-level elements.
Advanced CSS Stephen Ireland

Positioning Block-Level Elements
CSS ‘position’ property
• Static
• Relative
#banner { position: absolute; }
• Absolute
• Fixed
CSS ‘float’ property
• Left
• Right #left-col { float: left; }
• None
Advanced CSS Stephen Ireland

Easiest positioning Method
CSS ‘position’ property
• Static
• Relative
←
#banner { position: absolute; }
• Absolute
• Fixed Its absolute positioning
CSS ‘float’ property
• Left
• Right #left-col { float: left; }
• None
Advanced CSS Stephen Ireland

Position:Absolute
Absolute positioning gives you total control where a
block-level element appears in the browser window. This
declaration positions a div with id of ‘banner’ 10 pixels
from the top and left of the browser window.
←
#banner {
position: absolute;
top: 50px;
left: 50px;
}
Advanced CSS Stephen Ireland

Top, right, Bottom, Left
• Absolute positioning relies on a
position being set.
• If you don’t provide positions, your
elements will overlap one another.
• Make sure to set one or two values
• In most cases you will work from the
top-left corner of the browser window.
Therefore, most commonly used
properties are ‘top’ and ‘left’.
Advanced CSS Stephen Ireland

Handy Tips
• Before moving on to more complex positioning schema,
experiment with the control absolute positioning gives you.
• Set background-color on the different main elements, or
give each element a border temporarily until you have
your layout how you intended. You’ll be able to see where
each element starts and ends, without holding a ruler in
front of the screen!
• Nothing is ever nothing unless specified - most browsers
have default margins and paddings which could upset
your design. If in doubt - specify them with zero value.
Advanced CSS Stephen Ireland