HTML/CSS Tutorial

8/18/2019 HTML/CSS Tutorial

1/29

The Box Model

Module 5


2/29

http://www.lipsum.com/


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


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


5/29

Normal Flow ro%ser displa& of elements in the order the& are coded

o#es can be nested

Box odel !r"ctice


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 " %%%%%%%%


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


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/


10/29

CSS padding Property

"on*gures 00000000000000

Default value is 1p#

h2 { border: 2px solid #f00;

padding: 5px; }


11/29

CSS padding Property

padding+bottom padding+left padding+right padding+top


background-color: #ccc;

padding-left: 5px;

padding-bottom: 10px;

padding-top: 10px;}


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;}


13/29

padding shorthand: four values

Four numeric values or percentages

"on*gure top, right, bottom, and left padding


idth: 250px;background-color: #ccc;

padding: !0px 10px 5px 20px;}


14/29

CSS margin Property

margin+bottom margin+left margin+right margin+top

!argin uses the same shortcut rules aspadding -2 or 3 values


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/


16/29

Centering Page Content with margins

#container { margin-left: auto;

margin-right: auto; idth:%0&; }


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/


18/29


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;

}


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.


21/29

Float Property


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;}


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/


24/29

Clear Property

6nd the 8oat for the ne#telement.

#footer {clear: both;}


25/29

CSS for Page Layout & Formatting

xcept 1or imagelogo4 "ll elementson this p"ge 1ollow norm"l 1low


26/29



27/29


%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:


28/29



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

HTML/CSS Tutorial

Documents

Transcript of HTML/CSS Tutorial