Lebanese University

Faculty of Sciences -Section I

BS-Computer Science

Info 2201

Client-Side Web Development

Semester: 1
Academic year: 2020/2021
Credits: 4
Dr. Abed Safadi
Chapter 5

Page Layout

2
Chapter Objectives
• Describe and apply the CSS Box Model
• Configure margins with CSS
• Configure float 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 older browsers to be compatible with HTML5

3
 5.1 The Box Model
Each element in a document is considered to be a rectangular box. As shown in Figure 5.1,
this box consists of a content area surrounded by padding, a border, and margins. This is
known as the box model.

Figure 5.1 :
The CSS box model

4
 5.1 The Content
The content area can consist of a
combination of text and web page
elements such as images, paragraphs,
headings, lists, and so on. The visible
width of the element on a web page is
the total of the content width, the
padding width, and the border width.
The CSS box model

5
 5.1 The Padding
The padding area is between the
content and the border. The default
padding value is zero. When the
background of an element is
configured, the background is applied
to both the padding and the content
areas.
The CSS box model

6
 5.1 The Border
The border area is between the
padding and the margin. The default
border has a value of 0 and does not
display. Use the border property to
configure an element’s border.

The CSS box model

7
 5.1 The Margin
The margin determines the
empty space between the element
and any adjacent elements. The
solid line in Figure 5.1 that
contains the margin area does
not display on a web page.
Figure 5.1 The CSS box model

8
 5.1 The Margin property
Use the margin property to configure margins on all sides of an
element. The margin is always transparent—the background color
of the web page or parent element shows in this area. Browsers
have default margin values set for the web page document and for
certain elements such as paragraphs, headings, forms, and so on.
Use the margin property to override the default browser values.
Figure 5.1 The CSS box model
To configure the size of the margin, use a numeric value (px or em)
or a percentage. To eliminate the margin, configure it to 0 (with no
unit). Use the value auto to indicate that the browser should
calculate the margin. In Chapters 3 and 4, you used margin-left:
auto; and margin-right: auto; to configure a centered page layout.

Table 5.1 (next slide) shows CSS properties that configure

margins.

9
 Table 5.1 Configuring margins with CSS
Property Description and Common Values
Shorthand notation to configure the margin surrounding an element

A numeric value (px or em) or percentage; for example, margin: 10px;

The value auto causes the browser to automatically calculate the margin
for the element

Two numeric values (px or em) or percentages: The first value configures
the top margin and bottom margin, and the second value configures the
margin left margin and right margin; for ex, margin: 20% 10%;

Three numeric values (px or em) or percentages: The first value configures
the top margin, the second value configures the left margin and right
margin, and the third value configures the bottom margin; for example,
margin: 10% 20% 5px;

Four numeric values (px or em) or percentages; the values configure the
margin in the following order: margin-top, margin-right, margin-bottom,
and margin-left; for example, margin: 10% 30px 20% 5%; 10
 Table 5.1 Configuring margins with CSS

Property Description and Common Values

Margin-bottom Bottom margin; a numeric value (px or em),
percentage, or auto
Margin-left Let margin; a numeric value (px or em),
percentage, or auto
Margin-right Right margin; a numeric value (px or em),
percentage, or auto
Margin-top Top margin; a numeric value (px or em),
percentage, or auto

11
 The Box Model in Action
The web page shown in Figure 6.2 depicts the box model in action with an h1 and a div element.

12
 5.2 Normal Flow
Browsers render your web page code line by line in the order it appears
in the .html document. This processing is called normal flow. Normal
flow displays the elements on the page in the order they appear in the
web page source code.

Figures 5.3 and 5.4 (next slide ) each display two div elements that
contain text content. Figure 6.3 shows a screenshot of two div elements
placed one after another on a web page. In Figure 6.4, the boxes are
nested inside each other. In both cases, the browser used normal flow
(the default) and displayed the elements in the order that they appeared
in the source code.

13
5.2 Normal Flow
<div class="div1">
This is the first box.
</div>
<div class="div2">
This is the second box.
</div>
.div1 { width: 200px;
height: 200px;
background-color: #D1ECFF;
border: 3px dashed #000000;
padding: 5px; }

.div2 { width: 100px;

height: 100px;
background-color: #FFFFFF;
border: 3px ridge #000000;
margin: 10px;

Figure 5.3
padding: 5px; }
14
5.2 Normal Flow
<div class="div1">
This is the outer box.
<div class="div2">
This is the inner box.
</div>
</div>
.div1 { width: 200px;
height: 200px;
background-color: #D1ECFF;
border: 3px dashed #000000;
padding: 5px; }

.div2 { width: 100px;

height: 100px;
background-color: #FFFFFF;
border: 3px ridge #000000;
margin: 10px;
Figure 5.4 padding: 5px; }
15
 5.3 CSS Float
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.
The browser renders these elements using normal flow and then shifts them to either the
right or left as far as possible within their container (usually either the browser viewport
or a div element).

Use float: right; to float the element on the right side of the container.

Use float: left; to float the element on the left side of the container.

Other elements and web page content will flow around the floated element.

16
 5.3 CSS Float example
Figure 5.5 shows a web page with an image configured with float: right; to float on the right side of
the browser viewport. When floating an image, the margin property is useful to configure empty
space between the image and text on the page.

The CSS is :
h1 { background-color: #A8C682;
padding: 5px;
color: #000000; }
p { font-family: Arial, sans-serif; }
#yls { float: right;
margin: 0 0 5px 5px;
border: 1px solid #000000; }
The HTML source code is:
<h1>Wildflowers</h1>
<img id="yls" src="yls.jpg" alt="Yellow Lady Slipper" height="100" width="100"/> Figure 5.5
The heading and paragraph follow normal flow. The Yellow Lady Slip….
17
 5.4 CSS: Clearing a Float
The clear property is often used to
terminate, or clear, a float. You can set the
value of the clear property to left, right, or
both, depending on the type of float you
need to clear.

Notice that although the div element

contains both an image and the first
paragraph, the light background color of the
div only displays behind the screen area
occupied by the first paragraph—it stops a
bit earlier than expected. Clearing the float
will help take care of this display issue.

18
 5.4 CSS: Clearing a Float
Clear a Float with a Line Break
Common technique to clear a float within a container element is to add a line break element configured
with the clear property.
CSS class is configured to clear the left float:
.clearleft { clear: left; }

Also, a line break tag assigned to the clearleft class is

coded before the closing div tag.

The code for the div element is

<div>
<img class="float" src="yls.jpg" alt="Yellow Lady Slipper"
height="100" width=“100”>
The Yellow Lady Slipper grows in wooded areas …….
<br class="clearleft">
</div> 19
 5.5 CSS Box Sizing
The box-sizing property causes the browser calculation of the
width or height to include the content’s actual width or height
in addition to the width or height of any padding and border
that may exist.

Valid box-sizing property values include content-box (the

default) and border-box.

Use the CSS box-sizing: border-box; declaration to configure the

browser to also include the values of the border and padding
when calculating the width and height properties of an element.
20
 5.5 CSS Box Sizing

Each have floated elements configured with 30% width, 150px height, 20px padding, and 10px
margin. 21
 5.5 CSS Box Sizing
It is common practice for web developers to apply border-box
box-sizing when they plan to use floated elements or
multicolumn layouts.

It’s also - common practice to apply box-sizing by configuring

the * universal selector, which will target all HTML
elements. The CSS style rule to apply - border-box box-sizing
to all elements with the universal selector is :

* { box-sizing: border-box; }
22
 5.6 CSS Two-Column Layout
A common design for a web page is a two-column layout. This is accomplished with CSS by
configuring one of the columns to float on the web page. Coding HTML is a skill and skills are best
learned by practice.

Figure 5.6.1 Single-column layout. Figure 5.6.2 Two-column layout. 23

5.6 Hands-On Practice
1. Review single-column layout. Launch a text editor, and open the singlecol.html file
from the chapter 5/Student files folder in the class material (Microsoft teams). Take a
moment to look over the code. Notice the structure of the HTML tags correspond to
wireframe in Figure 5.6.1 (Previous slide).

<body>
<div id="wrapper">
<header> </header>
<nav> </nav>
<main> </main>
<footer> </footer>
</div>
</body>

Save the file as index.html. When you display index.html in a browser, your display
should be similar to Figure 5.6.3 (Next slide).

24
5.6 Hands-On Practice

Figure 5.6.3 Web page with single-column layout. 25

 5.6 Hands-On Practice
2. Configure a two-column layout. Launch a text editor and open the index.html file. You will
edit the HTML and CSS to configure a two column layout as shown in Figure 5.6.2 wireframe.

a) Edit the HTML. The single-column navigation is horizontal but the two-column navigation
will be displayed in a vertical orientation. Later in this chapter, you’ll learn how to configure
navigation hyperlinks within an unordered list but for now, a quick adjustment is to code a
line break tag after each of the first two hyperlinks in the nav area.

b) Configure the float with CSS. Locate the style tags in the head section of the document and
code the following style rule as embedded CSS to configure a nav element with a width of
90px that floats to the left.
nav { float: left;
width: 90px; }

Save the file and test it in the Firefox or Chrome browser. Your display will be similar to Figure
5.6.4 (next slide) . Notice that the content in the main area wraps around the floated nav element.

26
5.6 Hands-On Practice

Figure 5.6.4: The nav is floating on the left 27

 5.6 Hands-On Practice
c) Configure two columns with CSS. You just
configured the nav element to float on the left.

The main element will be in the right side column

and will be configured with a left margin (the
same side as the float). To get a two-column look,
the value of the margin should be greater than the
width of the floated element. Open the index.html
file in a text editor and code the following
style rule to configure a 100px left margin for the
main element.

main { margin-left: 100px; }

Save the file and test it in the Firefox or Chrome

browser. Your display will be similar to Figure
5.6.5 with a two-column layout.
Figure 5.6.5 28
 5.7 Hyperlinks in an Unordered
List
• Recall that the default display for an unordered list is to
show a disc marker in front of each list item. The default
display for an ordered list is to show a decimal number in
front of each list item.

• When you configure navigation hyperlinks in an unordered

list, you may not always want to see those list markers. It’s
easy to configure them with CSS.

• Use the list-style-type property to configure the marker

for an unordered or ordered list. 29
5.7 CSS properties for ordered
and unordered list markers
Property Description Value List Marker Display
List-style-type Configures the None No list markers display
style of the list Disc Circle
marker Circle Open circle
square Square
decimal Decimal Numbers
upper-alpha Uppercase letters
lower-alpha Lowercase letters
lower-roman Lowercase Roman
No numerals
List-style-image Image The url keyword with Image displays
replacement parentheses in front of each list item
for the list marker surrounding
the file name or path for
the image

30
 5.7 CSS properties for ordered and
unordered list markers Example

ul { list-style-type: square; }

ul {list-style-image: url(trillium.gif); }

31
5.7 CSS properties for ordered and
unordered list markers Example

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

nav a { text-decoration: none; }

32
 5.8 CSS Interactivity with Pseudo-
Classes
Have you ever visited a website and found that the text
hyperlinks changed color when you moved the mouse pointer
over them? Often, this is accomplished using a CSS pseudo-
class, which can be used to apply a special effect to a selector

Pseudo- When Applied

Class
:link Default state for a hyperlink that has not been clicked (visited)
:visited Default state for a visited hyperlink
:hover Triggered when the mouse pointer moves over the hyperlink
:active Triggered when the hyperlink is actually clicked

33
 5.8 CSS Interactivity with Pseudo-
Classes example

a:link { color: #ff0000; }

a:hover { text-decoration: none;
color: #000066; }

34
 5.9 CSS Buttons
In addition to configuring an interactive text hyperlink, another use of CSS and pseudo-classes
is to configure a hyperlink that looks like a button. This coding technique saves on the
bandwidth used by button image files. The following Figure depicts a web page with a “button”
configured with CSS instead of with an image.

<a class="button" href="signup.html">Sign Up</a>

.button { border-radius: 60px;
padding: 1em;
color: #FFFFFF;
background-color: #E38690;
font-family: Arial, sans-serif;
font-size: 2em;
font-weight: bold;
text-align: center; .button:link { color : #FFFFFF; }
text-decoration: none; } .button:visited { color : #CCCCCC; }
.button:hover { color : #965251;
background-color: #F7DEE1; } 35
 5.10 HTML5 Compatibility with
Older Browsers
Current versions of Chrome, Firefox, Safari, Edge, and Opera offer good support for the HTML5
elements you’ve been using. However, not everyone has a recent browser installed on their
computer. Some people still use Internet Explorer and earlier versions of other browsers for a
variety of reasons.

Although this issue will decrease in importance over time as people update their computers, your
clients will most likely insist that their web pages are usable to as broad of an audience as
possible. The most basic way to provide for backward compatibility of HTML5 with older,
outdated browsers is to configure block display with CSS.

Add one style rule to your CSS to inform older browsers to display HTML5 elements such as
header, main, nav and footer as block display (with empty space above and below).

Example CSS follows:

header, main, nav, footer { display: block; }

This technique will work well in browsers including Internet Explorer 9 and later versions.
36