GRADE

TLE-ICT
COMPUTER PROGRAMMING
QUARTER 3 – MODULE 5-6
Formatting Layout with CSS

1
 COMPUTER PROGRAMMING
QUARTER 3 MODULE 5-6

Box Model
 To understand 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 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 block level tag
<div> which is placed around other tags to organize the contents’ layout.

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.

2
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, e.g. form the
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.

3
Offset
 Offset property allows you to set up the distance of the specified element from another element. This will also 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 Offset 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.

4
Float
 Float property will allow you to control where a specified block element will be located or placed on the 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 “float” to the right and all the other
elements near it will float away from the block
float: none This 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.

Background
With CSS, you can design so many things; you can choose what to display as the background and how it will be displayed. You
can place a background not only on a Web page but also in a table or a cell.
The background-repeat property indicates if the background image is to be tied all throughout (repeat, value), repeated
horizontally only (repeat-x value), repeated vertically only (repeat-y value) or will not be repeated nor tiled.
The background-position property indicates where the 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.
Notice that the values for the background property are separated by spaces and not by commas.

5
 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

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 parent’s

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

Background Position
 Background can be located where the image will be positioned on the web page by specifying a certain value or
keyword location.

CSS BACKGROUND POSITION PROPERTY

Property
background-position:
background-position:
Value Description
xy Position is specified by a value or
for example: 100px percentage
50 px or 20% 10%
for example: top left Keyword is used to set the
or center or bottom position on the page
right or top right or bottom center

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

7
Setting Margins
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.

ACTIVITIES

PERFORMANCE TASK WEEK 5 (By group)

1. CSS POSITION PROPERTY – Select 4 logos of different businesses and apply each position property
element positioning on each logo to be seen on only 1 webpage.

2. CSS float property - Using the given business logo from item number 1, provide a background history of
each business while applying each CSS float property on each business.

3. CSS background color – Create 1 web page for each business logo and its history with a background
color. Each business must have different background colors.

PERFORMANCE TASK WEEK 6 (By group)

1. CSS background image - Create 1 web page for each business logo and its history with a background
image. Select a background image that is related to the business. Each business must have different
webpage.

2. CSS Background repeat – Select a poem or a short story and create a web page for that piece. Then
select an appropriate background image for the story or poem and apply the background repeat on the
webpage.

3. CSS Setting margins – Apply margins on the activity number 2 by adding 90px margins on the top, left
and right margins.