Scribd
Upload
13 views52 pages

Css Box Model

Uploaded by

mirandathiago
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
13 views52 pages

Css Box Model

Uploaded by

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