4.page sections CSS box model

(4.1.1)a section or division of your HTML page (block)

Spatula City! Spatula City!See our spectacular spatula specials!We'll beat any advertised price!a tag used to indicate a logical section or area of a pagehas no appearance by default, but you can apply styles to it

Inline sections: (4.1.2)an inline element used purely as a range for applying styles

Spatula City! Spatula City!

See our spectacular spatula specials!

We'll beat any advertised price!

Spatula City! Spatula City!See our spectacular spatula specials!We'll beat any advertised price!has no onscreen appearance, but you can apply a style or ID to it, which will be applied tothe text inside the span

CSS context selectors (4.1.3)selector1 selector2 { properties}applies the given properties to selector2 only if it is inside a selector1 on the page

selector1 > selector2 { properties}applies the given properties to selector2 only if it is directly inside a selector1 on the page(selector1 tag is immediately inside selector2 with no tags in between)

Context selector example

Shop at Hardwick's Hardware...

• The best prices in town!
• Act while supplies last!

li strong { text-decoration: underline; }Shop at Hardwick's Hardware...The best prices in town!Act while supplies last!More complex example#ad li.important strong { text-decoration: underline; }Shop at Hardwick's Hardware...The best prices in town!Act while supplies last!4.2: Introduction to Layout4.1: Styling Page Sections4.2: Introduction to Layout4.3: Floating Elements4.4: Sizing and PositioningThe CSS Box Model (4.2.1)for layout purposes, every element is composed of:

the actual element's contenta border around the element

padding between the content and the border(inside)

a margin between the border and other content(outside)

width = content width + L/R padding + L/R border+ L/R margin

height = content height + T/B padding + T/B border+ T/B margin

IE6 doesn't do this right

Document flow - block elementsDocument flow - inline elementsDocument flow - a larger exampleCSS properties for bordersh2 { border: 5px solid red; }This is a heading.propertyborder

description

thickness/style/size of border on all 4 sides

thickness (specified in px, pt, em, or thin, medium, thick)style (none, hidden, dotted, dashed, double, groove, inset,outset, ridge, solid)color (specified as seen previously for text and background colors)More border propertiesproperty

border-color, border-width,border-style

border-bottom, border-left,border-right, border-top

border-bottom-color, border-bottom-style,border-bottom-width, border-left-color,border-left-style, border-left-width,border-right-color, border-right-style,border-right-width, border-top-color,border-top-style, border-top-width

description

specific properties of border on all 4 sidesall properties of border on a particular side

properties of border on a particular side

Complete list of border properties

Border example 2h2 { border-left: thick dotted #CC0088; border-bottom-color: rgb(0, 128, 128); border-bottom-style: double;}This is a heading.each side's border properties can be set individually

if you omit some properties, they receive default values (e.g. border-bottom-widthabove)

CSS properties for paddingpropertypadding

padding-bottompadding-leftpadding-rightpadding-top

descriptionpadding on all 4 sidespadding on bottom side onlypadding on left side onlypadding on right side onlypadding on top side only

Complete list of padding properties

Padding example 1p { padding: 20px; border: 3px solid black; }h2 { padding: 0px; background-color: yellow; }This is the first paragraphThis is the second paragraphThis is a headingPadding example 2p { padding-left: 200px; padding-top: 30px; background-color: fuchsia;}This is the first paragraphThis is the second paragrapheach side's padding can be set individually

notice that padding shares the background color of the element

CSS properties for marginspropertymargin

margin-bottommargin-leftmargin-rightmargin-top

descriptionmargin on all 4 sidesmargin on bottom side onlymargin on left side onlymargin on right side onlymargin on top side only

Complete list of margin properties

Margin example 1p { margin: 50px; background-color: fuchsia;}This is the first paragraphThis is the second paragraphnotice that margins are always transparent

(they don't contain the element's background color, etc.)

Margin example 2p { margin-left: 8em; background-color: fuchsia;}This is the first paragraphThis is the second paragrapheach side's margin can be set individually

CSS properties for dimensions (4.3, 4.4.1)p { width: 350px; background-color: yellow; }h2 { width: 50%; background-color: aqua; }This paragraph uses the first style above.An h2 headingpropertywidth, height

max-width, max-height,min-width, min-height

description

how wide or tall to make this element(block elements only)

max/min size of this element in given dimension

Centering a block element: auto marginsp { margin-left: auto; margin-right: auto; width: 750px;}Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magaliqua.works best if width is set (otherwise, may occupy entire width of page)

to center inline elements within a block element, use text-align: center;