8/18/2019 HTML/CSS Tutorial
1/29
The Box Model
Module 5
8/18/2019 HTML/CSS Tutorial
2/29
http://www.lipsum.com/
8/18/2019 HTML/CSS Tutorial
3/29
The Box Model
Sed pharetra lobortis leo, eu aliquam nulla dictumgravida. Nullam gravida sem id justo pharetra inlacinia dolor cursus. Pellentesque porttitor, libero egetinterdum commodo, mi magna fermentum nibh, acornare sem nulla non nisi. Ut id magna lorem. In nullaquam, pretium quis hendrerit in, semper nec ipsum.Fusce enim nisi, pretium a scelerisque et, lacinia intortor. Donec ac risus orci. Ut ut dui venenatis lacus
ultricies lobortis vel ornare ligula.
Paddingorder
!argin
http://www.w3.org/TR/CSS2/box.html#box-dimensions
http://www.w3.org/TR/CSS2/box.htmlhttp://www.w3.org/TR/CSS2/box.html
8/18/2019 HTML/CSS Tutorial
4/29
The Box Model
"ontent
te#t in the container Padding
area b$% the border of the container and the content
order
edge of the containers solid dashed, dotted
!argin
the empt& space b% the container element and
adjacent elements al%a&s transparent
'hese t%o areas are
a(ected b&bac)ground color
8/18/2019 HTML/CSS Tutorial
5/29
Normal Flow ro%ser displa& of elements in the order the& are coded
o#es can be nested
Box odel !r"ctice
8/18/2019 HTML/CSS Tutorial
6/29
The CSS border Property
"on*gures a border on the top, right, bottom, and leftsides of an element
border+%idth
border+st&le
border+color
hr is an element
border is a propert&
h2 { border: 2px solid #ff0000; }
hr /$ is "n %%%%%%%%
Border is " %%%%%%%%
8/18/2019 HTML/CSS Tutorial
7/29
Configuring Specific Sides of a Border
Use "SS to con*gure a line on one or more sides of an
element border+bottom
border+left
border+right
border+top
h2 { border-bottom: 2px solid #ff0000; }
8/18/2019 HTML/CSS Tutorial
8/29
CSS Borders: Block / Inline Elements
orders behave di(erentl& depending on the element
loc) element
default %idth of element e#tends to bro%ser margin -orspeci*ed %idth
begin on a ne% line
The heading is a block element
Inline element
order closel& outlines the element content /n anchor is an inline element
Background
border
http://smb//ad.jmu.edu/IT-File/UserA-F/atkinslc/366General/ExampleFiles/5_borderexamples.htmlhttp://smb//ad.jmu.edu/IT-File/UserA-F/atkinslc/366General/ExampleFiles/5_backgroundcolorexamples.htmlhttp://smb//ad.jmu.edu/IT-File/UserA-F/atkinslc/366General/ExampleFiles/5_borderexamples.htmlhttp://smb//ad.jmu.edu/IT-File/UserA-F/atkinslc/366General/ExampleFiles/5_borderexamples.htmlhttp://smb//ad.jmu.edu/IT-File/UserA-F/atkinslc/366General/ExampleFiles/5_backgroundcolorexamples.htmlhttp://smb//ad.jmu.edu/IT-File/UserA-F/atkinslc/366General/ExampleFiles/5_borderexamples.html
8/18/2019 HTML/CSS Tutorial
9/29
Browser Display Can Vary
&lw"'s test in multiplebrowsers ( things don)t loo*
the s"me in e+er' browser,
http$$border+radius.com$
http://border-radius.com/http://border-radius.com/http://border-radius.com/http://border-radius.com/
8/18/2019 HTML/CSS Tutorial
10/29
CSS padding Property
"on*gures 00000000000000
Default value is 1p#
h2 { border: 2px solid #f00;
padding: 5px; }
8/18/2019 HTML/CSS Tutorial
11/29
CSS padding Property
padding+bottom padding+left padding+right padding+top
h2 { border: 2px solid #f00;
background-color: #ccc;
padding-left: 5px;
padding-bottom: 10px;
padding-top: 10px;}
8/18/2019 HTML/CSS Tutorial
12/29
padding shorthand: two values
'%o numeric values or percentages
*rst value con*gures top and bottom padding
the second value con*gures left and right padding
h2 { border: 2px solid #f00;background-color: #ccc;
padding: 20px 10px;}
8/18/2019 HTML/CSS Tutorial
13/29
padding shorthand: four values
Four numeric values or percentages
"on*gure top, right, bottom, and left padding
h2 { border: 2px solid #f00;
idth: 250px;background-color: #ccc;
padding: !0px 10px 5px 20px;}
8/18/2019 HTML/CSS Tutorial
14/29
CSS margin Property
margin+bottom margin+left margin+right margin+top
!argin uses the same shortcut rules aspadding -2 or 3 values
8/18/2019 HTML/CSS Tutorial
15/29
CSS box-sizing Property
o#+si4ing helps control the actualsi4e of the bo#, including padding andborder
!argin %ould be added
" ":before ":after {
box-si$ing: border-box; }
https$$css+tric)s.com$bo#+si4ing$
n !r"ctice pp -02
https://css-tricks.com/box-sizing/https://css-tricks.com/box-sizing/https://css-tricks.com/box-sizing/https://css-tricks.com/box-sizing/
8/18/2019 HTML/CSS Tutorial
16/29
Centering Page Content with margins
#container { margin-left: auto;
margin-right: auto; idth:%0&; }
8/18/2019 HTML/CSS Tutorial
17/29
Positioning
5elative
/bsolute Float
http://www.b"rel'1it.com/screenc"st/html-tr"ining/css/positioning/
http://www.barelyfitz.com/screencast/html-training/css/positioning/http://www.barelyfitz.com/screencast/html-training/css/positioning/http://www.barelyfitz.com/screencast/html-training/css/positioning/
8/18/2019 HTML/CSS Tutorial
18/29
8/18/2019 HTML/CSS Tutorial
19/29
Absolute Positioning
Precisel& speci*es the location of an element in
the bro%ser %indo%
h1 { background-color:#ccc;
padding:5px;
color: #000;
}
#content {position: absolute;
left:200px;top:100px;
font-famil':*rialsans-serif;
idth:!00px;
}
8/18/2019 HTML/CSS Tutorial
20/29
Combining Relative and Absolute Positioning
#tiger+section {
position: relati)e;
top: 50px;
}
#tiger+rock{
position: absolute;
top:15px;
right: 15px;
}
!aec enas aliquetvarius posuere.
/enean at dui nunc.Prae sent malesuada,lectus sed faucibusullam corper, mauris justo adipiscing erat,a dapibus dui auguesed turpis. Donec idaugue sit amet tortor
sagittis porta vel quislorem. Proin pharetralorem risus, sed
"ontrol elements
absolutel& in relation totheir parent element.
8/18/2019 HTML/CSS Tutorial
21/29
Float Property
8/18/2019 HTML/CSS Tutorial
22/29
Float Property
6lements seem to 78oat9
on one side of either the%indo% or anotherelement.
h1 { background-color:#ccc;
padding:5px;
color: #000;}
p { font-famil':*rialsans-serif;}
#'ls {float:right;
margin: 0 0 5px 5px;
border: solid;}
8/18/2019 HTML/CSS Tutorial
23/29
Float Property
/l%a&s 2 parts 8oat left: %idth ;11p#:
8oatleft or 8oatright < no center
6lement %ill 8oat as far left or right as
possible within its containing box
http://css.maxdesign.com.au/foatutorial/
http://css.maxdesign.com.au/floatutorial/http://css.maxdesign.com.au/floatutorial/
8/18/2019 HTML/CSS Tutorial
24/29
Clear Property
6nd the 8oat for the ne#telement.
#footer {clear: both;}
8/18/2019 HTML/CSS Tutorial
25/29
CSS for Page Layout & Formatting
xcept 1or imagelogo4 "ll elementson this p"ge 1ollow norm"l 1low
8/18/2019 HTML/CSS Tutorial
26/29
CSS for Page Layout & Formatting
8/18/2019 HTML/CSS Tutorial
27/29
CSS for Page Layout & Formatting
%rapper contains the t%o
columns < sets defaultbac)ground color
left+column navigation
8oat left
%idth;11p#
right+columcongtect
margin+left ;11p#
8oatright -8o%er photo 8aot right:
8/18/2019 HTML/CSS Tutorial
28/29
CSS for Page Layout & Formatting
8/18/2019 HTML/CSS Tutorial
29/29
CSS Debugging Tips
!anuall& chec) s&nta# errors Use Developer 'ools in the bro%ser "on*gure temporar& bac)ground colors "on*gure temporar& borders Use comments