Cascading Style

Sheets (CSS) -
Layouts
WIF2003 WEB PROGRAMMING
Objectives

 Describe and apply the CSS Box Model

 Configure margin with CSS
 Configure float with CSS
 Configure fixed, relative, and absolute positioning with
CSS
 Create two-column page layouts using CSS
 Configure navigation in unordered lists and style with CSS
 Add interactivity to hyperlinks with CSS pseudo-classes
 Configure web pages with HTML5 structural elements,
including section, article, and aside
Box Model

“In a document, each element is represented as a

rectangular box. In CSS, each of these rectangular
boxes is described using the standard box model.
Each box has four edges: the margin edge, border
edge, padding edge, and content edge.”
- MDN
 The Box Model

 Content
 Text & web page elements in
the container
 Padding
 Area between the content
and the border
 Border
 Between the padding
and the margin
 Margin
 Determines the empty space
between the element and
adjacent elements
Configure Margin with CSS

 The margin property

 Related properties:
 margin-top, margin-right, margin-left, margin-bottom
 Configures empty space between the element and
adjacent elements
 Syntax examples
 h1 { margin: 0; }
 h1 { margin: 20px 10px; }
 h1 { margin: 10px 30px 20px; }
 h1 { margin: 20px 30px 0 30px; }
Configure Padding with CSS

 The padding property

 Related properties:
 padding-top, padding-right, padding-left,
padding-bottom
 Configures empty space between the content of
the HTML element (such as text) and the border
 Syntax examples: numeric values or percentages
 h1 { padding: 0; }
 h1 { padding : 20px 10px; }
 h1 { padding : 10px 30px 20px; }
 h1 { padding : 20px 30px 0 30px; }
Configure Border with CSS

 Configures a border on the top, right, bottom,

and left sides of an element
 Consists of
 border-width
 border-style
 border-color
 h2 { border: 2px solid #ff0000 }
 CSS Borders: Example

HTML <h2> Heading with border </h2>

<a href =“https://www.w3schools.com”>This anchor tag
has a border</a>
CSS h2 { border: 2px solid #ff0000; }

a { border: 2px solid #ff0000; }

Result
Browser Display Can Vary
Configuring Specific Sides of a
Border

 Use CSS to configure a line on one or more sides

of an element
 border-bottom
 border-left
 border-right
 border-top
 h2 { border-bottom: 2px solid #ff0000 }
Box model in Action
The CSS box-sizing Property

 Default value for width or height is the value for

ONLY the content (not including border and
padding).
 The box-sizing property is used to selector to direct
the browser to calculate the width and height of an
element to include the value for content, padding,
and border.
 Use the universal selector (*) to apply this to all the
element on the page
 Example:
 * { box-sizing: border-box; }
Normal Flow

 Browser display of elements in the order they are

coded in the web page document
 float Property

 Elements that seem to “float" on the right or left side of

either the browser window or another element are often
configured using the float property.

h1 { background-color:#cccccc;
padding:5px;
color: #000000;
}
p { font-family:Arial,sans-serif;
}
#yls {float:right;
margin: 0 0 5px 5px;
border: 1px solid #000000;
}
 clear Property

 Useful to “clear” or terminate a float

 Values are left, right, and both clear: left;
was applied to
the h2.
The h2 text Now the h2 text
is displayed displays AFTER the
in normal floated image.
flow.
 overflow Property

 Intended to configure the display of elements on a Web page.

 However, it is useful to “clear” or terminate a float before the
end of a container element overflow: auto;
was applied to the div
 Values are auto, hidden, and scroll that contains the image
and paragraph.
The Now the background
background extends and the h2 text
does not displays AFTER the floated
extend as far image.
as you’d
expect.
HTML5 Structural
Elements
HTML5 Compatibility with Older
Browsers

 CSS
header, main, nav, footer, section, article,
figure, figcaption, aside {
display: block;
}
 HTML5 Shim (aka HTML5 Shiv)
<!--[if lt IE 9]>
<script src="
http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
 HTML5 Structural Elements REVIEW

 Header Element
 block display; contains the headings of either a web page document
or an area in the document such as a section or article
 Nav Element
 block display; contains a section
of navigation hyperlinks
 Main Element
 block display; contains main page content
 Footer Element
 block display; contains the footer
content of a web page or specific
area (such as a section or article) on a web page
 More HTML5 Elements

Aside Element
 block display; contains a sidebar, a note, or other
tangential content
Section Element
 contains a “section” of a document, such as a chapter
or topic
 block display
Article Element
 contains an independent entry, such as a blog
posting, comment, or e-zine article that could stand
on its own
 block display
Time Element
 represents a date or a time
 could be useful to date articles
or blog posts
 inline display
Page Layout with CSS
Page Layout:
Single Column -> Two Column

Single Column Two Column

Wireframe Wireframe
Basic Two-Column Layout

<body>
<div id="wrapper">
<header> <header>
<nav> </nav>
<main> </main>
<footer> </footer>
</div>
</body>
 Basic Two-Column Layout
#wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;
background-color: #EAEAEA; }
header { background-color: #CCCCFF;}
h1 { margin: 0; padding: 10px; }
nav {
float: left;
width: 90px;
padding: 10px; }
main {
margin-left: 100px;
padding: 10px;
background-color: #FFFFFF; }
footer { text-align: center;
font-style: italic;
background-color: #CCCCFF; }
CSS Page Layout:
Two Columns (left nav)
Three Column Page Layout

 A common web page layout consists of a

header across the top of the page with three
columns below: navigation, content, and
sidebar.
 Three Column Layout

Container sets default

background color, text color,
font typeface, and a minimum
width
 Left-column navigation
 float: left; width:150px;
 Right-column content
 float: right; width: 200px;
 Center column
 Uses the remaining screen room
available room after the floating
columns display
 margin: 0 210px 0 160px;
 Footer – clears the float
 clear: both;
Navigation with CSS
 Vertical Navigation

HTML <nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
CSS CSS removes the list marker and underline:

nav ul { list-style-type: none; }

nav a { text-decoration: none; }
 Horizontal Navigation

HTML <nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
CSS CSS removes the list marker, removes the underline,
adds padding, and configures the list items for inline display.

nav ul { list-style-type: none;}

nav a { text-decoration: none;
padding-right: 10px; }
nav li { display: inline; }
 CSS Pseudo-classes

 Pseudo-classes and the anchor

element
 link – default state for a hyperlink a:link {color:#000066;}
 visited – a hyperlink that has a:visited {color:#003366;}
been visited a:focus {color:#FF0000;}
a:hover {color:#0099CC;}
 focus – triggered when the a:active {color:#FF0000;}
hyperlink has focus
 hover – triggered when the
mouse moves over the hyperlink
 active – triggered when the
hyperlink is being clicked
CSS Pseudo-classes: Example

a:link { color: #ff0000; }

a:hover { text-decoration: none;
color: #000066; }
 Header Text Image Replacement

 Useful when a non

web-safe font
must be used in the
header logo banner area
Displaythe banner image but also configure text in the h1 for use by search engines
and assistive technologies.
1. Configure styles for the header element set the header banner image as the
background of the header or h1 element.
2. Code the company or website name with the h1 element.
3. Configure the placement of the h1 text to be beyond the browser viewport:
h1 { text-indent: 100%;
white-space: nowrap;
overflow: hidden; }
SOURCE: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-
replacement/
Configure Position with
CSS
Position Property
Fixed Positioning

 nav { position: fixed; }

 Relative Positioning

 Changes the location of an element in relation

to where it would otherwise appear in normal
flow
p { position: relative;
left: 30px;
font-family: Arial, sans-serif; }
 Absolute Positioning

 Precisely specifies the location of an element

outside of normal flow in in relation to its first
parent non-static element
p { position: absolute;
left: 200px;
top: 100px;
font-family: Arial, sans-serif;
width: 300px; }
Summary

 This lecture introduced you to the box

model, CSS pseudo-classes, configuring
two-column page layouts with CSS, and
additional HTML5 structural elements.