CSS Boc model

WDS CS KKU

322 432 Web Design Technology By Yaowaluck Promdee, Sumonta Kasemvilas

Computer Science Khon Kaen University

CSS Box Model Margin, Padding and Border

Web Design Technology -2015 1

WDS CS KKU


Index •  CSS Border •  Outline •  Box model •  Margin •  Padding •  Example

LAB#7

WDS CS KKU


margin-bottom

ma

rgin

-righ

t m

arg

in-l

eft

margin-top

border-bottom

bo

rde

r-righ

t

border-top

bo

rde

r-le

ft

pa

dd

ing

-le

ft

padding-top pa

dd

ing

-righ

t

padding-bottom

Clears an area outside the border. The margin is transparent

Border – A border that goes around the padding and content

Clears an area around the content. The padding is transparent

ß------------ width---------------à

ß--

----

he

igh

t---

----

-à

The content of the box, where text and images appear

CSS Box Model

WDS CS KKU


Border border-width is used to set the

width of the border

border-style The border-style property specifies what kind of border to display

none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

value {!

WDS CS KKU


Border •  border-top-width •  border-top-style •  border-top-color •  border-top •  border-bottom-width •  border-bottom-style •  border-bottom-color •  border-bottom

Sets all the top border properties

Sets all the bottom border properties

WDS CS KKU


Border

•  border-right-width •  border-right-style •  border-right-color •  border-right

•  border-left-width •  border-left-style •  border-left-color •  border-left

Sets all the left border properties

Sets all the right border properties

WDS CS KKU


CSS3 Border •  border-radius •  box-shadow

box-shadow: 10px 10px 5px #888888;

WDS CS KKU


CSS3 Border •  border-image

border-image:url(border.png) 30 30 round; -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */ -o-border-image:url(border.png) 30 30 round; /* Opera */

WDS CS KKU

9

Outline

p { border: 1px solid red; outline-style: dotted; outline-color: #00ff00; }

Web Design Technology -2015

WDS CS KKU


Outline p { border: 1px solid red; outline: green dotted thick; }

Sets all the outline properties in one declaration

outline-color outline-style outline-width inherit


WDS CS KKU

Example1 This is output. How to code like this?

WDS CS KKU


Lists Lists •  unordered lists (<ul>) - the list items are marked with bullets •  ordered lists (<ol>) - the list items are marked with numbers or letters

ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha;}

ul.a {list-style-type: circle; } ul.b { list-style-type: square;}

o  CSS o  HTML

I.  CSS II.  HTML

§  CSS §  HTML

a.  CSS b.  HTML

Try it more

WDS CS KKU


Margin The CSS margin properties define the space around elements.

p { margin: 10px 20px 30px 40px; } /* shortcut margin changed the top 10px, right 20px, bottom 30px and left margin 40px. */

h1 { margin: 10px; }

h2 { margin: 10px 20px 30px; }

h2 { margin: 10px 20px; }

top right bottom

set all top and bottom 10px

right and left 20px


WDS CS KKU

Example2 Use the margin property to set the top and bottom margins for <h1> to “10%", and left and right margins to “30%". p set margin all 10% and border width 3px solid.

WDS CS KKU


Padding The CSS padding properties define the space between the element border and the element content.

p { padding: 10px 20px 30px 40px; } /* shortcut padding changed the top 10px, right 20px, bottom 30px and left margin 40px. */

h1 {padding: 10px; }

h2 { padding: 10px 20px 30px; }

h2 { padding: 10px 20px; }

top right bottom

set all top and bottom 10px

right and left 20px

WDS CS KKU


Example3


WDS CS KKU

Create four web pages by display results as shown in example 1-4. - You have to finish this assignment in lab hour. -- Zip All Files > Example 1-4 and name “Lab7_YourID_Section.zip”

Example4

CSS Boc model

Education

Transcript of CSS Boc model