WEEK
10
COMP1223
Web Development Fundamentals
L E C T U R E
N O T E
Book: Murach's HTML5 and CSS3
Week: 1
Chapters: 1
Author/s: Maziar Masoudi
2014
External Sources::
http://webdesign.about.com/od/layout/i/aa060506.htm
COURSE NAME: Web Development Fundamentals
COURSE CODE: COMP 1223
PAGE: 1
Table of Contents
Contents
An introduction to box model....................................................................................................................... 3
How the box model works ........................................................................................................................ 3
Fixed Layouts......................................................................................................................................... 3
Liquid Layouts ....................................................................................................................................... 3
Summary ............................................................................................................................................... 4
How to set heights and widths ..................................................................................................................... 4
With and height additional properties ..................................................................................................... 4
min-width .............................................................................................................................................. 4
max-width ............................................................................................................................................. 4
min-height ............................................................................................................................................. 4
max-height ............................................................................................................................................ 4
Summary ............................................................................................................................................... 5
How to set margins ....................................................................................................................................... 5
Summary ............................................................................................................................................... 6
How to set padding ....................................................................................................................................... 6
How to set borders ....................................................................................................................................... 7
Rounded corners and Shadow ...................................................................................................................... 8
Backward compatibility............................................................................................................................. 9
Summary ................................................................................................................................................... 9
How to set background colors and images ................................................................................................... 9
Background Gradients................................................................................................................................. 10
What if these values are undeclared? .............................................. Error! Bookmark not defined.
The Default Width of Block Level Boxes ......................................... Error! Bookmark not defined.
COURSE NAME: Web Development Fundamentals
COURSE CODE: COMP 1223
PAGE: 2
An introduction to box model
When a browser display a web page, it places each HTML block element in a box. That makes it easy to
control the spacing, borders, and other formatting for elements like headers, sections, footers, headings
and paragraphs. Some inline elements like images are placed in a box as well. To work with boxes, you
use the CSS box model.
How the box model works
Fixed Layouts
In most cases, you will use pixels (you may use any other units you learned) to set the width and/or
height. That way, the size of the page wont change if the user changes the size of the browser window.
This is referred to as a fixed layout.
Liquid Layouts
Liquid layout are layouts that are based on percentages of the current browser windows size. They flex
with the size of the window, even if the current viewer changes their browser size as theyre viewing the
site.
The size of the box itself is calculated like this:
Width
width + padding-left + padding-right + border-left + border-right
Height
height + padding-top + padding-bottom + border-top + border-bottom
COURSE NAME: Web Development Fundamentals
COURSE CODE: COMP 1223
PAGE: 3
Summary
How to set heights and widths
By default, the width and height of an element are set to a value of auto. As a result, the size of the
content area for the element is automatically adjusted so its as wide as the element that contains it and
as tall as the content it contains.
With and height additional properties
In addition to the width and height properties, you can use the min-width, max-width, min-height, and
max-height properties to specify the minimum and maximum width and height of the content area.
min-width
The min-width property is used to set the minimum width of an element. This prevents the
value of the width property from becoming smaller than min-width.
max-width
The max-width property is used to set the maximum width of an element. This prevents the value of the
width property from becoming larger than max-width.
min-height
The min-height property is used to set the minimum height of an element. This prevents the
value of the height property from becoming smaller than min-height.
max-height
The max-height property is used to set the maximum height of an element. This prevents the value of
the height property from becoming larger than max-height.
COURSE NAME: Web Development Fundamentals
COURSE CODE: COMP 1223
PAGE: 4
Summary
How to set margins
Margin property allows you to specify the margin of all four sides of a box by using margin-top, marginright, margin-left, and margin-bottom. You may also use shorthand property to specify one, two, three
or four values for a box margin.
COURSE NAME: Web Development Fundamentals
COURSE CODE: COMP 1223
PAGE: 5
Summary
How to set padding
Padding property allows you to specify the padding of all four sides of a box by using padding-top,
padding-right, padding-left, and padding-bottom. You may also use shorthand property to specify one,
two, three or four values for a box padding.
COURSE NAME: Web Development Fundamentals
COURSE CODE: COMP 1223
PAGE: 6
How to set borders
Border property allows you to specify the border of all four sides of a box by using border-top, borderright, border-left, and border-bottom. You may also use shorthand property to specify one, two, three
or four values for a box border. The property lets you set the width, style, and color for the borders.
COURSE NAME: Web Development Fundamentals
COURSE CODE: COMP 1223
PAGE: 7
Rounded corners and Shadow
You may use CSS3 features for adding rounded corners to a borders. This let you supply these graphic
effects without using images. To round the corners, you use the border-radius property.
COURSE NAME: Web Development Fundamentals
COURSE CODE: COMP 1223
PAGE: 8
Backward compatibility
Safari 5.1+ requires the prefix -webkitChrome 10 to 25 require the prefix -webkitOpera 11.1 to 12.0 require the prefix -oFirefox 3.6 to 15 require the prefix -moz-.
Summary
How to set background colors and images
COURSE NAME: Web Development Fundamentals
COURSE CODE: COMP 1223
PAGE: 9
Background Gradients
Linear gradients lets you provide interesting background without using images. And if a browser doesnt
support this feature, it just ignores it, which is usually okay.
COURSE NAME: Web Development Fundamentals
COURSE CODE: COMP 1223
PAGE: 10
COURSE NAME: Web Development Fundamentals
COURSE CODE: COMP 1223
PAGE: 11
