Scribd
Upload
9 views

Css Box Model

Uploaded by

mirandathiago
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Css Box Model

Uploaded by

mirandathiago
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 52

CSS – Box Model

by Susan L. Miertschin
Based on:
http://www.html.net/tutorials/css/
Lessons 9 through 14
Positioning Elements ‐ Layout
• Before CSS – tables were used to position
elements and lay out pages
• CSS introduced
– the position property
– and
d absolute
b l positioning
ii i
Absolution Positioning
• Normally content of elements flows onto page
sequentially
• Absolute positioning removes the element
from the normal flow
• Instead
I d positions
ii iit relative
l i to the
h top, lleft,
f
right, or bottom margins of its containing
bl k l l element
block‐level l (e.g.
( <p></p>
/ or
<body></body>)
Absolute Positioning
Example
Things to note:
¾This is an XHTML document
¾This is an example of an embedded
style sheet
¾The style definition is in the
<head></head> section
¾Z‐index property controls layering –
when items overlap, which one do you
want on top?
Absolute Positioning Example

• Things to note:
¾ Each <p></p>
p /p element is usingg its class attribute
¾ Change the z‐index element values in the style
definition and observe the results
Result
Relative Position
• Elements are positioned relative to other
elements in the flow of the page
• Keeps elements in the general flow of
elements on the page
Relative Positioning
Example
Things to note:
¾Embedded style sheet (again)
¾ex refers to x‐height
¾X‐height is a relative‐length
measurement equal to the height of a
lowercase x in the applied font
Inline versus Block
Block‐Level
Level Elements
Inline‐Level Elements Block‐level Elements
¾ Do not change the flow of • Displayed on its own line
elements within the • Has a virtual “box”
box around it
document • div
¾ span • p
¾ img • h1 through h6
¾a
¾ em
¾ strong
Relative Positioning
Example
Things to note:
¾Embedded style sheet (again)
¾ex refers to x‐height
¾X‐height is a relative‐length
measurement equal to the height of a
lowercase x in the applied font
Relative Positioning
Example
Things to note:
¾Span is a grouping element
¾It does not imply any structure to its
contents
¾Its purpose is to apply CSS rules or id
attributes to its contents
¾Span is an inline‐level element
Result
The Box Model in CSS
Example Markup
<h1>Article 1:</h1>
<p>Allll human
h beings
b i
are born free and equal
in dignity and rights.
Theyy are endowed with
reason and conscience
and should act towards
one another in a spirit of
brotherhood</p>
What the Browser Does
• Each element is in its
own box
• Each box has top,
margin, border,
b d padding dd
properties ‐ and content
• Each element has four
sides – right, left, top,
and bottom
• Property values are set
with css
Example ‐ Set Margins of the
<body></body>
b d /b d Element
l Withh CSS

body
{
margin‐top: 100px;
margin‐right:
margin right: 40px;
margin‐bottom: 10px;
margin‐left:
margin left: 70px; }

body { margin: 100px 40px 10px 70px; }


Example – Set Margins of the <p></p>
Element
l Withh CSS

body { margin: 100px 40px 10px 70px; }


p { margin:
g 5pxp 50px
p 5px
p 50px;
p ;}
Padding
• Think of it as "filling“
filling
• Does not affect the distance of the element to
other elements
• Defines the inner distance between the
b d and
border d the
h content off the
h element
l
What Effect From Padding?
Heading Elements Without
Padding Heading Elements With Padding
Example – Set Padding With CSS
h1
{
b k
background:
d yellow;
ll
padding: 20px 20px 20px 80px; }
h2
{
background: orange;
padding‐left:120px;
padding left:120px; }
Borders
• decorative element
• to underline
• separation
i off two things
hi
• many options
– Width with border‐width
– Color with border‐color
– Style with border‐style
Example – Set Up Borders With CSS
h1
{ border
border‐width:
width: thick; border‐style:
border style: dotted; border‐
border
color: gold; }
h2
{ border‐width: 20px; border‐style: outset; border‐
color: red; }
p
{ border‐width: 1px; border‐style: dashed; border‐
color: blue; }
ul
{ border‐width: thin;; border‐style:
y solid;; border‐
color: orange; }
What it Looks Like – <h1></h1>
element
l
h1
{border‐width: thick;
b d
border‐style:
t l dotted;
d tt d
border‐color: gold; }
What it Looks Like ‐ <h2></h2>
element
l
h2
{border‐width: 20px;
b d
border‐style:
t l outset;
t t
border‐color: red; }
What it Looks Like ‐ <p></p> element

p
{border‐width: 1px;
b d
border‐style:
t l
dashed;
border‐color: blue; }
What it Looks Like ‐ <ul></ul> element

ul
{border‐width: thin;
b d
border‐style:
t l solid;
lid
border‐color:
orange; }
Get Complicated if You Like
h1
{ border‐top‐width:
border top width: thick;
border‐top‐style: solid;
border‐top‐color: red;
border‐bottom‐width:
thick; border‐bottom‐style:
solid;; border‐bottom‐color:
blue; border‐right‐width:
thick; border‐right‐style:
solid; border‐right‐color:
border right color:
green; border‐left‐width:
thick; border‐left‐style:
solid; border‐left‐color:
orange; }
Element Dimensions
• Width and Height
Make a Box With a Div and CSS
div.Box
{ height: 500px; width: 200px;
border: 1px solid black;
background: orange; }

<div class=
class="box">volgus
box >volgus rectum videt,
videt …
plagosum mihi parvo Orbilium </div>
What the Browser Does
Floating Elements
• Float to the right
• Float to the left
• Property: float
fl
• The element box with contents floats either
right or left in the containing element’s box
Float a Box Within a Box With CSS
#picture
p
{ float:left; width: 100px; }
<body>
<div id="picture">
p <imgg src="bill.jpg"
jpg
alt="Bill Gates"> </div>
<p>causas naturales et antecedentes,
antecedentes
idciro etiam nostrarum
voluntatum...</p>
l t t </ >
</body>
What the Browser Does
Create Structure with XHTML
<div id="column1">
id= column1 > <p>Haec disserens
qua de re agatur et in quo causa consistat
non videt...</p>
videt </p> </div>
<div id="column2"> <p>causas naturales
et antecedentes,
antecedentes idciro etiam nostrarum
voluntatum...</p> </div>
<div id="column3">
id column3 > <p>nam nihil esset in
nostra potestate si res ita se
haberet </p> </div>
haberet...</p>
Layout Columns with CSS Floats
#column1
{ float:left;width: 33%; }
#column2
{ float:left;width: 33%; }
#column3
{ float:left;width: 33%;}
Clear Property
• Used to control how the elements that follow
floated elements behave
• By default,
default elements that follow are moved up to
fill available space resulting from the float
• Clear values: left,
left right,
right both or none
• The principle is, if clear, for example, is set to
both for a box,
box the top margin border of this box
will always be under the lower margin border for
possible floating boxes coming from above.
above
Example of Clear
<div id="picture"> <img src="bill.jpg"
alt "Bill Gates"> </div>
alt="Bill
<h1>Bill Gates</h1>
<p class="floatstop">causas naturales
et …etiam nostrarum voluntatum...</p>

#picture
{ float:left; width: 100px; }
.floatstopp
{ clear:both; }
What the Browser Does
Positioning Elements With CSS
• Place an element exactly where you want it on
your page
• Positioning + Floats = many possibilities
• Basic Principle: top‐left coordinates with (0,0)
b i the
being h upper lleftf corner
Example – Position a Heading Element

h1
{ position:absolute;
top: 100px;
left: 200px; }
Absolute Positioning
• An element which is positioned absolute does
not leave empty space after being positioned
Example – Absolute Position
#box1
{position:absolute;
p 50px;
top: p left: 50px;
p }
#box2 { position:absolute;
top: 50px; right: 50px; }
#box3 { position:absolute;
bottom: 50px; right: 50px; }
#box4 { position:absolute;
B
Bottom:50px;
50 lleft:
f 50
50px; }
What the Browser Does
What the Browser Does
Relative Positioning
• The difference between absolute and relative
positioning is how the position is calculated
• An element which is positioned relative has its
position calculated from the original position
in the document (think text document here)
• The element obtains a space in the document
after
f it i iis positioned
ii d
Example – Relative Position With CSS

#dog1
#d 1 { position:relative;
ii l i left:
l f 350
350px;
bottom: 150px; }
#dog2 { position:relative; left: 150px;
bottom: 500px;
p ;}
#dog3 { position:relative; left: 50px;
bottom: 700px; }
<body>
<h1>The Tinder‐Box</h1>
<p><strong>By Hans Christian Andersen</strong></p>
<p>A soldier came … home. </p>
<p>As he walked … </p>
<p>&quot;Thank you, old witch,&quot; said the soldier. </p>
<p>&quot;Do you see that large tree, …</p>
<p>&quot;But what am I to do, down there in the tree?&quot; asked the soldier. </p>
<div id="dog1"><img src="dog1.gif"></div>
<p>&quot;Get money,&quot; she replied;… </p>
<p>&quot;This is not a bad story,&quot; said the soldier; …</p>
<div id="dog2"><img src="dog2.gif"></div>
<p>&quot;No,&quot; said the witch; … </p>
<p>&quot;Very
& V well; ll I promise.
i …</p>
/
<p>&quot;Here it is,&quot; replied the witch; …</p>
<p>As soon as the rope was tied, … </p>
<p>&quot;You're
p q ; apprettyy fellow,&quot;
, q ; said the soldier,, … </p>
/p
<p>&quot;You had better not look at me in that way… </p>
<div id="dog3"><img src="dog3.gif"></div>
<p>Then he went into the third room, …</p>
</body>
What the Browser Does

For live use: http://www.html.net/tutorials/css/lesson14_ex2.asp


Complete the Tutorial
• Here is a link to a tutorial about how to
validate CSS
• http://www.html.net/tutorials/css/lesson16.php
http://www html net/tutorials/css/lesson16 php
Hands On
Hands‐On
Get the content of the tinderbox page and find three dog images.
• http://www.uh.edu/~smiertsc/2336itec/tinderbox.zip
http://www.uh.edu/ smiertsc/2336itec/tinderbox.zip
• The page will contain pointers to three dog images –
find yyour own
Add the CSS

• Add the CSS (either embedded or in an external style


sheet)
• Add the dog divs
Copy the Page (and,
possibly a style sheet) to
possibly,
Your Web Folder
Compare and Be Amazed!
• http://www.tech.uh.edu/faculty/miertschin/outtabox/index_wo_css.
ht l
html

• http://www.tech.uh.edu/faculty/miertschin/outtabox/index.html

• Validate your css at W3C!!!!

You might also like