CSS layout

CSS layout
The 3 core concepts to understand about CSS layout are:
1. The CSS box model
2. Floating
3. Positioning
These 3 concepts control the way elements are arranged and
displayed on a page.

2
CSS Box Model
CSS Box Model
 When a browser draws an object on a page, it
places it into an invisible rectangular space called
a “bounding box.”
 You can specify the size, look, and feel of the
margins, the padding, the border, and the
contents of that bounding box.
 Internet Explorer interprets CSS box styles
differently than most other web browsers.
 CSS: Box Model

The margin is the area outside of the element. It never has color; it is
always transparent.
The border extends around the element, on the outer edge of any
padding. The border can be of several types, widths, and colors.
The padding exists around the content and inherits the background
color of the content area.
The content is surrounded by padding.

Padding
element

Border

Margin
 The CSS Box Model
 The Box Model control the way elements are arranged and displayed
on a page.
 Every block element in CSS is divided into regions consisting:
1. Content
2. Padding
3. Border
4. Margins

6
 Understanding the Box Model
 The CSS box model describes the boxes that are formed
around elements in a Web page
 The content area is the area that contains the box content
 The box properties are used to add white space and a border around
the content
 Padding is the white space that surrounds the box content
 A border can be placed around the padding
 The margin is white space outside the border

7
 The CSS Box Model
 Every element in HTML is considered a “box,” whether it is a paragraph, a
<div>, an image, or so on.
 Boxes have consistent properties.
 The box model describes the way in which every HTML block-level element
has the potential for a border, padding, and margin and how the border,
padding, and margin are applied.

<ul>
<ol> gkkkg </ol>
<ol> gkkkg </ol>
</ul>
<p> The box model <strong>describes</strong> the way in which every HTML
block-level element has the potential for a border, padding, and margin and
how the border, padding, and margin are applied.
</p>
 Understanding the Box Model
 The CSS box model describes the boxes that are formed
around elements in a Web page
 The content area is the area that contains the box content
 The box properties are used to add white space and a border around
the content
 Padding is the white space that surrounds the box content
 A border can be placed around the padding
 The margin is white space outside the border

9
 Settings
 The core border properties are:
 Width: absolute (px, in, cm, or ‘thin’, ‘medium’, ‘thick’), or
relative (ems)
 Style: dotted, dashed, solid, double, groove, ridge, inset, outset,
hidden, etc
 Color: ‘blue’, ‘red’, #FF9900, etc
 You can also create the effect of a border by using a graphic
image in a CSS background property, instead of the border
property

10
 Margins & Padding
 Margins
 Margins define the space around elements outside the border
 Margin properties can have negative values in order to deliberately
overlap content
 Margin properties will affect the position of background elements
(graphics and/or colours) in relation to the edges of the containing
block element
 Margin properties can be defined independently on top, right,
bottom and left, or all-at-once using CSS shorthand

11
 Margins & Padding
 Padding
 Padding defines the space around elements inside the border; i.e
between the border and the content itself
 Padding properties cannot have negative values
 Padding properties do not affect the position of background
elements (graphics and/or colors) in the containing block element;
only the position of content.
 Padding properties can be defined independently on top, right,
bottom and left, or all-at-once using CSS shorthand

12
Margin
 the margin property works with space outside of the
element.
 Following are the style properties for setting margins:
 margin-top—Sets the top margin
 margin-right—Sets the right margin
 margin-bottom—Sets the bottom margin
 margin-left—Sets the left margin
 margin—Sets the top, right, bottom, and left margins as a
single property
 How to set Margin
 To set a margin of 15 pixels on all sides.
 First method:
margin-top:15px;
margin-right:15px;
margin-bottom:15px;
margin-left:15px;

 Second method: short hand form:

margin:15px 15px 15px 15px;
 Three Short hands for Setting
Margins, Padding or Borders
 To set a margin of 15
pixels on all sides.
1. One value—The size of all
 margin:15px;
the margins
2. Two values—The size of
the top/bottom margins  margin:15px 15px;
and the left/right margins
(in that order)
 margin:15px 15px 15px
3. Four values—The size of 15px;
the top, right, bottom, and
left margins (in that order)
Example1: Simple Code to Produce Four Color <div>s with Borders and Margins

<html>
<head>
<title>Color Blocks</title>
<style type=”text/css”>
body {
margin:0px;
}
div {
width:250px;
height:100px;
border:5px solid #000000;
color:black;
font-weight:bold;
text-align:center;
}
Example1: Simple Code to Produce Four Color <div>s with Borders and Margins (Cont.)

Div#d1 {
background-color:red;
margin:15px;
}
div#d2 {
background-color:green;
margin:15px;
}
div#d3 {
background-color:blue;
}
div#d4 {
background-color:yellow;
margin:15px;
}
</style>
</head>
Example1: Simple Code to Produce Four Color <div>s with Borders and Margins (Cont.)

<body>
<div id=“d1”>DIV #1</div>
<div id=“d2”>DIV #2</div>
<div id=“d3”>DIV #3</div>
<div id=“d4”>DIV #4</div>
</body>
</html>
Class Exercise 1: Simple Code to Produce Four Colored <div>s with Bordersand Margins

Modify the above css code to produce the following:

1. No margin around the first color block.
2. A left-side margin of 15 pixels, a top margin of 5
pixels, and no bottom margin around the second color
block.
3. A left-side margin of 75 pixels and no top margin or
bottom margins around the third color block.
4. A left-side margin of 250 pixels and a top margin of 25
pixels around the fourth color block.
Example 2: changing the style of example 1
<html> div#d3 {
<head>
border-width:3px 6px 6px 6px;
<title>Color Blocks</title>
<style type=”text/css”> border-style:solid;
body { border-color:#000000;
margin:0px; background-color:blue;
}
margin:0px 0px 0px 75px;
div {
width:250px; }
height:100px; div#d4 {
color:black; border:5px solid #000000;
font-weight:bold;
background-color:yellow;
text-align:center;
} margin:25px 0px 0px 250px;
div#d1 { }
border:5px solid #000000; </style>
background-color:red;
</head>
margin:0px;
} <body>
div#d2 { <div id=”d1”>DIV #1</div>
border-width:6px 6px 3px 6px; <div id=”d2”>DIV #2</div>
border-style:solid;
<div id=”d3”>DIV #3</div>
border-color:#000000;
background-color:green; <div id=”d4”>DIV #4</div>
margin:5px 0px 0px 15px; </body>
} </html>
 Exercise: CSS Margin & Padding
#container { 0
margin-top: 0; 12
margin-right: 5px;
margin-bottom: 6px;
margin-left: 5px; Content Area
padding-top: 20px;
5 5
padding-right: 10px; 12 10

padding-bottom: 30px;
padding-left: 12px; 30
}
6

CSS Shorthand: Margin & Padding

#container {
padding: 20px 10px 30px 12px;
21 margin: 0px 5px 6px 5px;
}
 The Padding Element
 Padding is similar to margins in that it adds extra space to
elements, but the big difference is where that space is located.
 Margins are added to the outside of elements.
 Padding adds space inside the rectangular area of an element.

 Example, if you create a style rule for an element that establishes a

width of 50 pixels and a height of 30 pixels, and then sets the
padding of the rule to 5 pixels, the remaining content area will be 40
pixels by 20 pixels.
 Also, because the padding of an element appears within the
element’s content area, it will assume the same style as the content
of the element, including the background color.
How to set Padding
 padding-top—Sets the top padding
 padding-right—Sets the right padding
 padding-bottom—Sets the bottom padding
 padding-left—Sets the left padding
 padding—Sets the top, right, bottom, and left padding as a
single property
 Three Short hands for Setting
Margins, Padding or Borders
1. One value—The size of all  To set a padding of 20
the margins pixels on all sides.
2. Two values—The size of
 padding:20px;
the top/bottom margins
and the left/right margins
(in that order)  padding:20px 20px;
3. Four values—The size of
the top, right, bottom, and  padding:20px 20px 20px
left margins (in that order)
20px;
Simple Code to Produce Four Colored <div>s with Borders,
Margins, and Padding
div#d1 {
<html>
background-color:red;
<head>
<title>Color Blocks</title> text-align:center;
<style type=”text/css”> padding:15px;
body { }
margin:0px; div#d2 {
} background-color:green;
div {
text-align:right;
width:250px;
height:100px; padding:25px 50px 6px 6px;
border:5px solid #000000; }
color:black; div#d3 {
font-weight:bold; background-color:blue;
margin:25px; text-align:left;
}
padding:6px 6px 6px 50px;
Simple Code to Produce Four Color <div>s with Borders,
Margins, and Padding (Continued)

div#d4 {
background-color:yellow;
text-align:center;
padding:50px;
}
</style>
</head>
<body>
<div id=”d1”>DIV #1</div>
<div id=”d2”>DIV #2</div>
<div id=”d3”>DIV #3</div>
<div id=”d4”>DIV #4</div>
</body>
</html>
CSS Float
Understanding the float property
 The float property allows elements to be moved around in
the design such that other elements can wrap around them.
 used in conjunction with images, etc.
 Elements float horizontally, not vertically, thus, two possible
values: right and left.
 example,
 if you have three <div>s float values of left, they will all line up
to the left of the containing body element.
 If you have your <div>s within another <div>, they will line
up to the left of that element, even if that element itself is
floated to the right.
 Floats
 Syntax: inline
text text text text text text text text text text text

float: position; text text text text text text text text text text text
text text text text text text text text text text text
text text text
inline
text text text text text text text text
 where position is left, right, text text text text text text text text text text text
text text text text text text text text text text text
or none. text text text text text text text text text text text
text text text text text text text text text text text
text text text text text text text text text text text
block text text text text text text text textinline
text text text
text text text text text text text text text text text
 Setting the float text text text text text text text text text text text
text text text text text text text text text text text
property to left or right text text text text text text text text text text text
text text text text text text text text text text text
causes a box to be text text text text text

taken out of its

position in the
normal flow and
moved as far left or
right as possible.
29
 Float Values
 The Float property has inline
text text text text text text text text text text text
three value options: text text text text text text text text text text text
text text text text text text text text text text text
text text text
inline
text text text text text text text text
 float: left; text text text text text text text text text text text
text text text text text text text text text text text
 float: right; text text text text text text text text text text text
text text text text text text text text text text text
text text text text text text text text text text text
 float: none; block text text text text text text text textinline
text text text
text text text text text text text text text text text
text text text text text text text text text text text
text text text text text text text text text text text
text text text text text text text text text text text
text text text text text text text text text text text
text text text text text

30
 Restoring the Normal Flow: “Clear”
 To restore the “normal flow”,
inline
text text text text text text text text text text text
we can use the clear property. text text text text text text text text text text text
text text text text text text text text text text text
 The clear property has text text text
inline
text text text text text text text text
text text text text text text text text text text text
three value options: text text text text text text text text text text text
text text text text text text text text text text text
 clear: left; text text text text text text text text text text text
text text text text text text text text text text text
 clear: right; block text text text text text text text textinline
text text text
text text text text text text text text text text text
 clear: both; text text text text text text text text text text text
text text text text text text text text text text text
 These specify which text text text text text text text text text text text
text text text text text text text text text text text
side of the element’s box text text text text text
may not have a float
next to it.

block

31
 Example1: Using float to Place <div>s
<html> div#d2 {
<head> background-color:green;
<title>Color Blocks</title> float:left;
<style type=”text/css”> }
body { div#d3 {
margin:0px; background-color:blue;
} float:left;
div { }
width:250px; div#d4 {
height:100px; background-color:yellow;
border:5px solid #000000; float:right;
color:black; }
font-weight:bold; </style>
margin:25px; </head>
} <body>
div#d1 { <div id=”d1”>DIV #1</div>
background-color:red; <div id=”d2”>DIV #2</div>
float:left; <div id=”d3”>DIV #3</div>
} <div id=”d4”>DIV #4</div>
</body> </html>
CSS Positioning (CSS-P)
• CSS-P was released by W3C in 1997

• Completely supported by IE9, FX3, and

Chrome
 CSS Positioning
 The third core concept to understand in CSS layout (after the ‘box model’
and ‘floats’), is positioning.
 Element Positioning:
 let you manually position elements using specific Coordinates.
 advanced positioning lets you place element where ever on the page.
 E,g, “Put that box 20 pixels above and 50 pixels to the right of its parent’s
origin.”
 The possible values of position are:

34
 CSS Positioning
 There are different types of positioning that can be applied to CSS
boxes:
• Relative Positioning
• Absolute Positioning
• Static Positioning
• Fixed Positioning
 Understanding the differences between the two is difficult at first, but
important!
property value description
position static default position
relative offset from its normal static position
absolute a fixed position within its containing element
fixed a fixed position within the browser window
top, bottom, positions of box's corners
left, right
35
 CSS Positioning: Relative Positioning
 A relatively positioned element will stay exactly where it is, in
relation to the normal flow.
 You can then offset its position “relative” to its starting point in the
normal flow:

Box 1 Box 2 Box 3

Containing box

36
 CSS Positioning: Relative Positioning
 In this example, box 2 is offset 20px, top and left. The result is the box
is offset 20px from its original position in the normal flow.
 Box 2 may overlap other boxes in the flow, but other boxes still
recognise its original position in the flow.

top: 20px

#myBox { Left: 20px

position: relative; Box 1 Box 3
Position: relative
left: 20px;
top: 20px; Box 2
}
Containing box

37
 CSS Positioning: Absolute Positioning

 An absolutely positioned box is taken out of the normal flow, and

positioned in relation to its nearest positioned ancestor (i.e. its
containing box).
 If there is no ancestor box, it will be positioned in relation to the initial
containing block, usually the browser window.

top: 20px

Left: 20px

Box 1 Box 3
Position: absolute

Box 2

Containing box (relatively positioned ancestor)

38
 CSS Positioning: Absolute Positioning
 An absolutely positioned box can be offset from its initial position
inside the containing block, but other boxes within the block (and still
within the normal flow) act as if the box wasn’t there.

top: 20px

#myBox {
Left: 20px
position: absolute;
Box 1 Box 3
left: 20px; Position: absolute

top: 20px;
Box 2
}
Containing box (relatively positioned ancestor)

39
 CSS Positioning: Fixed Positioning
 Fixed Positioning is a sub-category of Absolute Positioning
 Allows the creation of floating elements that are always fixed in the
same position in the browser window, while the rest of the content
scrolls as normal
 (rather like the effect of fixed background attachments)
 PROBLEM: fixed positioning is not supported in IE5 and IE6(!), but
can be made to work with JavaScript for those browsers

Div #ad {
position: fixed;
right: 10%;
top: 45%;
}
40 CSS
 Fixed positioning
 “Fixed positioning” has a lot in common with
absolute positioning:
 the element is removed from the normal flow of the
page, and the coordinate system is relative to the
entire browser window. The key difference is that
fixed elements don’t scroll with the rest of the page.
 removed from normal flow (like floating ones)
 positioned relative to the browser window
 even when the user scrolls the window,
element will remain in the same place
 Floats & Positioning
 Summary:
 Floats (also a form of positioning) takes boxes out of the normal flow and
“floats” them left or right edges of the containing block
 Relative Positioning is “relative” to the element’s initial position in the
normal flow.
 Absolute Positioning is “relative” to the nearest positioned ancestor, or (if
one doesn’t exist) the initial container block (usually the browser
window)
 Fixed Positioning is fixed in one position “relative” to the browser window
only — does not scroll with content (Not supported in IE5, IE6)

42
Internal Style sheet

43
 External Style Sheets
 Save the CSS file with a .css filename extension.
 In the <head> section of the XML file, enter the following code
to link to the external CSS file:

<link rel="stylesheet" href="default.css"

type="text/css">

where filename.css is the name of the external style sheet file.

44
End
 The CSS Box Model
div {
width: 250px;
height: 100px;
background-color: #ff0000;
border: 1px solid #000000;
}
div#d2 {
width: 250px;
height: 100px;
background-color: #ff0000;
border: 5px solid #000000;
margin: 10px;
padding: 10px;
}
 How to justify the content with CSS
The HTML attribute is used to justify-content Example
is align attribute. The align attribute of <p> <!DOCTYPE html>
tag is used to justify the text on a web page. <html>
This can be done by assigning the value to the
aligned attribute as justified. <head>
<title>Justified content</title>
</head>

<body>
<h3>The content is justified</h3>
Syntax
text-align: start; <p align="justify">
text-align: end; Welcome to Geeks for Geeks. It is a
computer science portal for geeks.
text-align: left;
It contains well written, well thought articles.
text-align: right; We are learning how to justify content on a
text-align: center; web page.
text-align: justify; </p>
</body>

</html>
3.11 Background Images <style>
body {
- The background-image property background-image: url('img_girl.jpg');
background-repeat: no-repeat;
→ SHOW back_image.html and background-attachment: fixed;
display background-size: cover;
}
- Repetition can be controlled </style>
- background-repeat property

- Possible values: repeat (default),

no-repeat,
repeat-x, or repeat-y Background Stretch
Example
- background-position property <style>
body {
- Possible values: top, center, background-image: url('img_girl.jpg');
bottom, left, or right background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
<p align="justify"> </style>
Span and Div
 There are two tags that are particularly useful when using
CSS: <span> and <div>. They are both container tags
that have minimal formatting associated with them.
 The <span> tag is an inline element that simply holds
text without doing anything special to it.
 The <div> tag is a block element and causes the text it
encloses to start on a new line.
 Using <span> and <div> tags in conjunction with classes
and IDs allows for great flexibility in creating pages.
 Example: SPAN, DIV, Class, and ID
 Here’s an example of a web page using a class, an id, and the span and div tags:
3.12 The <span> and <div> tags
- One problem with the font properties is that they apply to whole elements, which are
often too large

- Solution: a new tag to define an element in the content of a larger element - <span>

- The default meaning of <span> is to leave the content as it is

<p>
Now is the <span> best time </span> ever!
</p>

- Use <span> to apply a document style sheet to its content

<style type = "text/css">

.bigred {font-size: 24pt;
font-family: Ariel; color: red}
</style>

...

<p>
Now is the
<span class = "bigred">
best time </span> ever!
</p>
 3.12 The <span> and <div> tags (continued)

- The <span> tag is similar to other HTML tags, they can be nested and they
have id and class attributes

- Another tag that is useful for style specifications:

<div>

- Used to create document sections (or divisions) for which style can be
specified

- e.g., A section of five paragraphs for which you want some particular
style
CSS Float
 If you want to wrap content around other content (such as
text around a picture), you can use the float property.

 The float property determines on which side of the

bounding box the element aligns so that the other content
wraps around it.

Slide 51 (of 54) CS 22: Enhanced Web Site Design - Cascading Style
Sheets
3.10 CSS Float
- Margin – the space between the border of an element and its
neighbor element

- The margins around an element can be set with margin-left,

etc. - just assign them a length
value

<img src = "c210.jpg " style = "float: right;

margin-left: 0.35in;
margin-bottom: 0.35in" />
Positioning
 Using CSS, you can place elements exactly on a page using a
technique called “positioning.” Positioning is determined by
an X axis and Y axis. To specify a point on the screen, you can
use the X and Y coordinates for that point.
 There are several ways to specify position in CSS: absolute,
relative, fixed, inherit, and static.
 The three most often used are absolute, relative, and fixed.
 Internet Explorer 6 only recognizes absolute and relative
positioning.
 Internet Explorer 7 recognizes fixed positioning in standards-
compliance (strict HTML/XHTML) mode.
 Absolute, Relative, Fixed, Inherit, and Static
Positioning

 Absolute positioning defines the position of a given bounding box from the top and left
side margins of the web page. This not only allows objects to be placed in an exact
location, it also allows objects to be placed one on top of another.
 Relative positioning defines the positioning in such a way that elements are offset from
the previous element in the HTML code. This allows objects to be placed in relation to
one another.
 Fixed positioning defines the position of a given box relative to the window and remains
in its specified location even as the content scrolls underneath it. This value does not
work in Internet Explorer 6 or earlier. In IE 7, the browser must be in “standards-
compliance mode”.
 Inherit positioning explicitly sets the value to that of the parent (if the parent is
position:absolute, the child will be position:absolute; if the parent is position:fixed, the child
will be position:fixed).
 Static positioning is the default. It defines the position of a given box essentially as an
unpositioned element – it flows in the normal rendering sequence of the web page.
Example: position:absolute
Example: position:relative
 Example: position:fixed (Code View)
<!DOCTYPE html> <div id="main">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
<html> elit. Quisque ultrices, nibh ac rhoncus fermentum,
orci sem dapibus nisi, sed tincidunt lectus lectus at
<head> augue. In consectetuer vehicula enim. In hac habitasse
platea dictumst. Donec a nisl vitae tortor tristique
<title>Untitled Document</title> viverra. Sed at lorem a ante lobortis molestie. Nulla
ullamcorper urna accumsan diam. Aliquam non eros.
<style type="text/css"> Pellentesque egestas ultricies enim. Aenean lobortis.
Nulla interdum commodo turpis. Sed ut mi id elit
<!-- vehicula sollicitudin. Sed lobortis, ligula sit amet
euismod egestas, mi ante iaculis nunc, ut rhoncus
#links { magna lectus ac arcu. In hac habitasse platea
dictumst. Proin quis ligula vitae quam pharetra
position:fixed; adipiscing. Pellentesque tincidunt suscipit nibh. Ut
fermentum suscipit justo. </p>
border:dotted;
<p>Fusce purus lectus, ultricies nec, aliquam at,
border-color:#000000; facilisis id, arcu. Vestibulum quis mi vel massa
porta hendrerit. Nulla ullamcorper ligula nec lectus.
width:20%; Quisque tempor, augue in molestie gravida, eros arcu
luctus tortor, eu dignissim diam urna sed urna. Ut
height:100%; dictum ultrices lacus. In hac habitasse platea
dictumst. Suspendisse sed purus blandit metus
z-index:1; ultricies suscipit. Proin diam justo, consequat id,
rhoncus eget, facilisis ut, lacus. Vivamus dignissim
left: 0px; dui in justo. Suspendisse elit. Nam nulla tortor,
fringilla sed, faucibus quis, ullamcorper a, leo.
top: 0px; Fusce blandit condimentum turpis. Pellentesque vel odio
et odio suscipit egestas. Nullam ullamcorper sagittis
background-color: #FFFFCC; ipsum. Maecenas fringilla malesuada pede. Duis ut
quam. </p>
} </div>
#main { <div id="links">
position:absolute; <p>This area is fixed and will never move. It's good for
things like navigation bars.</p>
left:25%; <ul>
top:0px; <li><a href="page1.html">Page 1</a></li>
width:70%; <li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
}
<li><a href="page4.html">Page 4</a></li>
-->
<li><a href="page5.html">Page 5</a></li>
</style> </ul>
</head> </div></body></html>
Example: position:fixed (in Firefox)
 Relative Or Absolute Positioning

 type of positioning (relative or absolute, etc.) used by a particular

style rule is determined by the position property
 left—The left position offset
 right—The right position offset
 top—The top position offset
 bottom—The bottom position offset

In relative positioning, content is displayed according to the flow of a

page, with each element physically appearing after the element preceding it in
the HTML code.
Absolute positioning, on the other hand, allows you to set the exact position of
content on a page.
 Example1: Relative Positioning with Four Color Blocks
<html> div#d3 {
<html background-color:blue;
<head> }
<title>Positioning the Color div#d4 {
Blocks</title> background-color:yellow;
<style type=”text/css”> }
div { </style>
position:relative; </head>
width:250px; <body>
height:100px; <div id=”d1”>DIV #1</div>
border:5px solid #000; <div id=”d2”>DIV #2</div>
color:black; <div id=”d3”>DIV #3</div>
font-weight:bold; <div id=”d4”>DIV #4</div>
text-align:center; </body>
} </html>
div#d1 {
background-color:red;
}
div#d2 {
background-color:green;
}
 Example1: Using Absolute Positioning of the Color Blocks
<html> div#d3 {
<head>
background-color:blue;
<title>Positioning the Color
Blocks</title> left:150px;
<style type=”text/css”> top:50px;
div { }
position:absolute; div#d4 {
width:250px; background-color:yellow;
height:100px; left:225px;
border:5px solid #000; top:75px;
color:black; }
font-weight:bold;
</style>
text-align:center;
} </head>
div#d1 { <body>
background-color:red; <div id=”d1”>DIV #1</div>
left:0px; <div id=”d2”>DIV #2</div>
Top:0px; <div id=”d3”>DIV #3</div>
} <div id=”d4”>DIV #4</div>
div#d2 { </body>
background-color:green; </html>
left:75px;
top:25px; }
 Layers and the Bounding Box
 When the browser draws an object on a page, it places it into an
invisible rectangular space called a “bounding box.” You can set
the box’s exact location on the page or offset it from other
objects on the page. As mentioned in the previous slides, you can
also specify the size of the box.
 With CSS, these boxes can be stacked one on top of another as
layers. Horizontal and vertical positioning happen along the X
and Y axes, and the layered positioning happens along the Z axis.
 The Z axis is set using the CSS style z-index, which allows
you to specify which layer appears on top of the others. By
setting the z-index higher or lower, an object can move up
and down a stack. The higher the z-index, the more “on top”
it is.
 Layers and the Bounding Box
 To get layers overlapping each other you need to use the z-index
command.
 The higher the index, the closer the div will appear to the front of
the page.
 Z-index Illustration:
Layering Example 1
Layering Example 2
 Example1: z-index to Alter the Display of Elements in the Color Blocks Sample

<html>
<head>
<title>Positioning the Color Blocks</title>
<style type=”text/css”>
div {
position:absolute;
width:250px;
height:100px;
border:5px solid #000;
color:black;
font-weight:bold;
text-align:center;
}
div#d1 {
background-color:red;
left:0px;
top:0px;
z-index:0;
}
 Example1: z-index to Alter the Display of Elements in the Color Blocks Sample (Continued)

div#d2 {
background-color:green;
left:75px;
top:25px;
z-index:3;
}
div#d3 {
background-color:blue;
left:150px;
top:50px;
z-index:2;
}
Example1: z-index to Alter the Display of Elements in the Color Blocks Sample (Continued)

div#d4 {
background-color:yellow;
left:225px;
top:75px;
z-index:1;
}
</style>
</head>
<body>
<div id=”d1”>DIV #1</div>
<div id=”d2”>DIV #2</div>
<div id=”d3”>DIV #3</div>
<div id=”d4”>DIV #4</div>
</body>
</html>
 Practice
 Read the following case study and give reasons for asking certain question in relation to style
sheets.
 A school wishes to design a website. The function of this website is to let its
students know when assignments are due, the dates of exams, timetables,
subjects taught, syllabuses and the teachers who teach them.
 The school wishes to have quality controls over the Web design, since the
teachers themselves will be responsible for updating the information on the
Web.
1. The school has approached you to advise them on how this may be possible.
2. The school wants you to explain the process you wish to use, and why it is
better than letting every teacher write their own style.
3. Write a list of ten or more HTML tags and classes that may be used for the
website. Consider the attributes that may have to be used, such as background
colour, departmental style, tables (for timetable, exam, curriculum and annual),
headers and so on.
4. After choosing the HTML tags, consider the CSS code required to style them.
Additional Resources
1. https://webdesign.tutsplus.com/articles/what-you-may-
not-know-about-the-z-index-property--webdesign-16892
2. https://www.w3schools.com/cssref/pr_pos_z-index.asp