FORMATTING LAYOUT
WITH CSS
BOX MODEL
To understand layout using CSS, you have to use the box model where each element
on a page exists in its own box wherein each box aligns with other boxes on the page.
The box model consists of margins, borders, padding and the actual content.
CSS will allow you to control the dimension of the box using the height and the width
properties. You can define the boxes for your content using the block-level tags. Some
block-level tags are <p>, <h1>, <table>, and the generic level tag <div> which is
placed around others tags to organize the contents’ layout.
Heading
Text Video
Image Image Image
2 Sarah Marie Joy A. Dela Vega, MIT 05.30 2022
ELEMENT POSITIONING
Position property allows placing an object or element precisely on a page. There are
four position schemes that you can use: static, relative, absolute and fixed. The position
can also follow or inherit the specified position of the body.
Default position
Absolute Fixed
Top: 100px; Top: 100px;
Relative Left: 100px Left: 300px
Top: 100px;
Left: 100px
3 Sarah Marie Joy A. Dela Vega, MIT 05.30 2022
CSS POSITION PROPERTY
PROPERTY VALUE DESCRIPTION
position: static The default or normal position of an object if one would not
specify a position.
position: relative The position of the box relative to where the default or normal
position of an object.
position: absolute The position is defined by the values where the position of the
element would be from the specified reference point (from left,
from the top)
position: fixed The same as the absolute position, the only difference is that the
object is “fixed” and will not move with the scroll action of the
page.
4 Sarah Marie Joy A. Dela Vega, MIT 05.30 2022
OFFSET
Offset property allows you to set up the distance of the specified element from another
element. This will allow you to place the contents of your page in a precise position
within the browser window. The offset property works together with the position
property. Before you can use an offset property, you have to set up the position
property first. Below is the list of the different offset properties.
CSS OFF PROPERTY
PROPERTY VALUE DESCRIPTION
top: <value> Sets how far the box’s top content is offset from another
element which may be the edge of the page.
right: <value> Sets how far the box’s right content is offset from
another element
bottom: <value> Sets how far the box’s bottom content is offset from
another element
left: <value> Sets how far the box’s left content is offset from another
element
5 Sarah Marie Joy A. Dela Vega, MIT 05.30 2022
Using the position and offset property one can actually create a table purely in CSS
even without using HTML table set up commands.
div#left {
width: 200px;
height: 600px;
position:absolute;
top: 120px;
left: 20px; }
div#right {
width: 400px;
height: 700px;
position:absolute;
top: 125px;
left: 25px; }
6 Sarah Marie Joy A. Dela Vega, MIT 05.30 2022
FLOAT
Float property will allow you to control where a specified block element will be located
or placed on the web page and where the other elements will be positioned in relation
to the said block. When using the float property, it is important to set the width of the
block for better control of the float.
CSS FLOAT PROPERTY
PROPERTY VALUE DESCRIPTION
float: left The specified block element “floats” to the left and all
the other elements near it will float away from the block.
float: right The specified block element “floats” to the right and all
the other elements near it will float away from the block.
float: none The option, specified block element will take the space
it requires and nothing flows to the right or left of it. The
other elements will be placed below it.
7 Sarah Marie Joy A. Dela Vega, MIT 05.30 2022
FLOAT
Email is the transmission of electronic messages over the internet.
Email is the transmission of electronic messages over the internet. float:right
Email is the transmission of electronic messages over the internet.
Email is the transmission of electronic messages over the internet.
Email is the transmission of electronic messages over the internet.
float:left
Email is the transmission of electronic messages over the internet.
Email is the transmission of electronic messages over the internet.
Email is the transmission of electronic messages over the internet.
float:none
Email is the transmission of electronic messages over the internet. Email is the transmission of
electronic messages over the internet. Email is the transmission of electronic messages over the
internet. Email is the transmission of electronic messages over the internet.
div#left {
width: 300px;
float: left; }
div#right {
width: 300px; }
8 Sarah Marie Joy A. Dela Vega, MIT 05.30 2022
WRAPPING TEXT AROUND AN ELEMENT
You can wrap text around an element by using float property in CSS
codes
9 Sarah Marie Joy A. Dela Vega, MIT 05.30 2022
WRAPPING TEXT AROUND AN ELEMENT
You can wrap text around an element by using float property in CSS.
output
10 Sarah Marie Joy A. Dela Vega, MIT 05.30 2022
BACKGROUND
The background-repeat property indicates if the background image is to be tiled all
throughout (repeat value), repeated horizontally only (repeat-x value), repeated
vertically only (repeat-y value) or will not be repeated nor tiled (no-repeat value).
The background-position property indicates where background image will be placed.
This only works when image is not tiled.
The background property is a shorthand notation for all the other properties
(background-color, background-image, background-repeat, background-attachment
and background-position). It can be used to style the background using only a single
property
11 Sarah Marie Joy A. Dela Vega, MIT 05.30 2022
BACKGROUND
Notice that the values for the background property are separated by spaces and not by
commas.
CSS BACKGROUND COLOR PROPERTY
PROPERTY Example DESCRIPTION
Background-color: Red Set color to a specific value
Background-color: #ff0000 Set color in hex-notation
Background-color: Rgb (255,0,0) Set color in values from 0 to 255
Background-color: Rgb (100%,0%,0%) Set color in percentages from 0% to 100%
Background-color: inherit Inherit color from parent
12 Sarah Marie Joy A. Dela Vega, MIT 05.30 2022
BACKGROUND
The background image property allows you to add a background image to the entire
Web page or to a single element.
CSS BACKGROUND IMAGE PROPERTY
PROPERTY VALUE DESCRIPTION
background-image: url (“location”) Set the background to the image selected by the url
background-image: none No background
:
background-image: inherit Background will be the same as the parents
13 Sarah Marie Joy A. Dela Vega, MIT 05.30 2022
ADDING BACKGROUND COLOR Embedded
14 Sarah Marie Joy A. Dela Vega, MIT 05.30 2022
ADDING BACKGROUND COLOR External
15 Sarah Marie Joy A. Dela Vega, MIT 05.30 2022
External
ADDING BACKGROUND COLOR &
Embedded
05.30 2022
16 Sarah Marie Joy A. Dela Vega, MIT
ADDING BACKGROUND IMAGE
Background Repeat
05.30 2022
17 Sarah Marie Joy A. Dela Vega, MIT
ADDING BACKGROUND IMAGE
Background Repeat
Image
repeated on
the left side of
the page
05.30 2022
18 Sarah Marie Joy A. Dela Vega, MIT
You can control how an image background should repeat in order to cover the whole
area of a web page or the desired area.
CSS BACKGROUND REPEAT PROPERTY
PROPERTY VALUE DESCRIPTION
background-repeat: repeat Repeats background (default)
background-image: repeat-x Repeats background horizontally
:
background-repeat: repeat-y Repeats background vertically
background-repeat no repeat Do not repeat the background
background-repeat inherit Follow the parent’s repeat setting
19 Sarah Marie Joy A. Dela Vega, MIT 05.30 2022
BACKGROUND POSITION
Background can be located where the image will be positioned on the web page by
specifying a certain value or a keyword location.
CSS BACKGROUND POSITION PROPERTY
PROPERTY VALUE DESCRIPTION
background-position: x y Repeats background (default)
For example: 100px
50px or 20% 10%
background-position: For example: top left Keyword is used to set the position on the page
or center or bottom
right or top right or
bottom center
20 Sarah Marie Joy A. Dela Vega, MIT 05.30 2022
BACKGROUND ATTACHMENT
This property allows you to control how the background scrolls with the web page.
There are three types: scroll, inherit and fixed.
CSS BACKGROUND ATTACHMENT PROPERTY
PROPERTY VALUE DESCRIPTION
background-attachment: scroll Background scrolls with document (default setting)
background-attachment: inherit Follow parent’s attachment
background-attachment: fixed Background is steady and does not follow scroll
action
21 Sarah Marie Joy A. Dela Vega, MIT 05.30 2022
SETTING MARGIN
You can set the margins of your Web page using the margin property in CSS. You can
use the values for the top, bottom, left and right margins around an element.
Margin
22 Sarah Marie Joy A. Dela Vega, MIT 05.30 2022
SETTING MARGIN
You can also place margins on both the left and the right side of the page.
CSS MARGIN PROPERTY
PROPERTY VALUE DESCRIPTION
margin-top: <value> margin-top:10px
margin-bottom: <value> margin-bottom:10px
margin-left: <value> margin-left:5px
:
margin-right: <value> margin-right:10px
margin: <top><right> margin: 15px
<bottom><left>
If you place only one value on the margin: <value>, that value will be applied to all sides of the
specified element. If you do not specify a margin, the default value is zero or no margin. You
can also set a negative margin value to get special effects on you web. Ex: p {margin-left: -5px; }
23 Sarah Marie Joy A. Dela Vega, MIT 05.30 2022
ACTIVITY
Create you own product image. Position the elements and
add background. Be creative in designing your page using
CSS.
