Scribd
Upload
12 views11 pages

COMP1223: Web Development Fundamentals

The document discusses the CSS box model and how to set heights, widths, margins, padding, borders, background colors and images for elements. It also covers liquid and fixed layouts.

Uploaded by

yash
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views11 pages

COMP1223: Web Development Fundamentals

The document discusses the CSS box model and how to set heights, widths, margins, padding, borders, background colors and images for elements. It also covers liquid and fixed layouts.

Uploaded by

yash
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

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::

[Link]

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

Common questions

Powered by AI

The CSS box model is a fundamental concept in web design used to control the spacing, borders, and formatting of HTML elements. It consists of the content edge, padding edge, border edge, and margin edge, which encase each HTML block element in a box. This model makes it easy to manage layout and design consistency across headers, sections, footers, headings, and paragraphs as well as inline elements like images .

Fixed layouts use specific units like pixels to define element dimensions, resulting in static page sizes irrespective of browser window changes. In contrast, liquid layouts employ percentage values, making them adaptable as they scale according to the browser window's current size, allowing content to flex and occupy available space dynamically .

Browser prefixes play a critical role in maintaining CSS compatibility by enabling developers to leverage newer features across different browsers, despite their varying support levels. However, they complicate development as they require additional lines of code for each property variation, increasing maintenance efforts and clutter in stylesheets .

The border-radius property in CSS3 allows designers to add rounded corners to borders directly via code. This capability eliminates the need for external images or additional graphic elements to achieve aesthetically pleasing rounded effects, simplifying implementation and maintaining cleaner, resource-efficient web designs .

The min-width and max-width properties in CSS enable greater design flexibility by constraining the resizing of elements. Min-width ensures that an element cannot shrink below a specified width, while max-width prevents it from stretching beyond a certain width. Together, they help maintain the aesthetic integrity and usability of elements even as screen sizes or content amounts vary .

Using CSS features such as linear gradients can lead to backward compatibility issues due to differing levels of browser support. Older versions of browsers may not support CSS3 features natively, requiring browser-specific prefixes like -webkit-, -moz-, or -o-. Without these prefixes, browsers might ignore unsupported features, altering the intended design presentation and user experience .

Padding and margins in CSS play crucial roles in determining the space occupied by elements on a web page. Padding refers to the space between the content and its border, affecting the size of the element's box and hence, the placement of content. Margins provide the space between the element's border and adjacent elements, influencing overall page spacing and layout flow .

Background gradients offer benefits such as reducing file size and load times compared to images, enhancing performance. They allow dynamic transitions and a high degree of customization. However, not all browsers may support CSS3 gradients similarly, which can lead to inconsistencies if fallback mechanisms are absent. This limitation affects compatibility and may necessitate alternative design strategies .

Shorthand properties in CSS enhance coding efficiency by allowing multiple style properties to be set simultaneously in a single line, reducing code verbosity and improving maintainability. By consolidating individual property values for borders, padding, and margins, shorthand properties simplify adjustments and accelerate stylistic changes across designs .

Defining a max-height for web elements is crucial to avoid excessive scrolling and maintain a coherent design layout. This property constrains how much a component can expand, preventing overflow issues, ensuring content remains visually anchored, and maintaining predictable page structure .

You might also like