Client-Side Web TechnologiesCSS Part II

Topics

• Box model and related properties

• Visual formatting model and related

properties

The CSS Box Model• Describes the rectangular boxes generated

for elements in the document tree

• Each box has:

• Content area

• Padding (optional)

• Border (optional)

• Margins (optional)

The CSS Box Model (continued)

Source: http://www.w3.org/TR/CSS2/box.html#box-dimensions

Width Property• Specifies the width of the content area of boxes

• width

• Value: length | percentage | auto | inherit

• Initial: auto

• Inherited: no

• Does not apply to non-replaced inline-level elements (width

of non-replaced inline elements is determined by the

rendered content within them)*

• When set to auto, the width depends on the value of other

properties

* We will discuss what is meant by inline-level later

Height Property• Specifies the height of the content area of boxes

• height

• Value: length | percentage | auto | inherit

• Initial: auto

• Inherited: no

• Does not apply to non-replaced inline-level elements*

• When set to auto, the height depends on the value of other

properties

* We will discuss what is meant by inline-level later

Margin Properties• Specify the width of the margin area of a box

• The value can be a negative value

• margin-top, margin-bottom, margin-right,

margin-left

• Value: length | percentage | auto | inherit

• Initial: 0

• Inherited: no

• margin shorthand property

• Value: [ length | percentage | auto ]{1,4} | inherit

• 1 value: applies all sides

• 2 values: top and bottom set to 1st, left and right set to 2nd

• 3 values: top is set to 1st, left and right set to 2nd, bottom set to 3rd

• 4 values : apply to top, right, bottom, left respectively

Padding Properties• Specify the width of the padding area of a box

• padding-top, padding-bottom, padding-right,

padding-left

• Value: length | percentage | inherit

• Initial: 0

• Inherited: no

• padding shorthand property

• Value: [ length | percentage ]{1,4} | inherit

• 1 value: applies all sides

• 2 values: top and bottom set to 1st, left and right set to 2nd

• 3 values: top is set to 1st, left and right set to 2nd, bottom set to 3rd

• 4 values : apply to top, right, bottom, left respectively

Border Properties

• Border width properties

• Border color properties

• Border style properties

• Border radius properties

Border Width Properties• Specify the width of the border area of a box

• border-top-width, border-bottom-width, border-

right-width, border-left-width

• Value: thin | medium | thick | length | inherit

• Initial: medium

• Inherited: no

• border-width shorthand property

• Value: [ thin | medium | thick | length ]{1,4} | inherit

• 1 value: applies all sides

• 2 values: top and bottom set to 1st, left and right set to 2nd

• 3 values: top is set to 1st, left and right set to 2nd, bottom set to 3rd

• 4 values : apply to top, right, bottom, left respectively

Border Color Properties• Specify the color of the border area of a box

• border-top-color, border-bottom-color, border-

right-color, border-left-color

• Value: color | transparent | inherit

• Initial: computed color property value

• Inherited: no

• border-color shorthand property

• Value: [ color | transparent ]{1,4} | inherit

• 1 value: applies all sides

• 2 values: top and bottom set to 1st, left and right set to 2nd

• 3 values: top is set to 1st, left and right set to 2nd, bottom set to 3rd

• 4 values : apply to top, right, bottom, left respectively

Border Style Properties• Specify the line style of the border area of a box

• <border-style> = none | hidden | dotted | dashed |

solid | double | groove | ridge | inset | outset

• border-top-style, border-bottom-style, border-

right-style, border-left-style

• Value: <border-style> | inherit

• Initial: none

• Inherited: no

• border-style shorthand property

• Value: [ <border-style> ]{1,4} | inherit

• 1 value: applies all sides

• 2 values: top and bottom set to 1st, left and right set to 2nd

• 3 values: top is set to 1st, left and right set to 2nd, bottom set to 3rd

• 4 values : apply to top, right, bottom, left respectively

Border Shorthand Properties• border-top, border-bottom, border-right,

border-left

• Value: [ border-width || border-style || border-color ] | inherit

• Examples

• h1 { border-top: thick solid red }

• h1 { border-top: 1px solid }

• border

• Value: [ border-width || border-style || border-color ] | inherit

• Sets values on all 4 borders

Box-Sizing Property• Controls whether border and padding are included in

width/height

• box-sizing

• Value: content-box | border-box | inherit

• Initial: content-box

• Inherited: no

• content-box: padding and border are drawn outside content area

• border-box: padding and border are drawn inside content area

• https://www.w3.org/TR/css3-ui/#box-sizing

• See:

• http://codepen.io/jmussitsch/pen/bdff7f3418c6225141132d1d0d73faa2

• http://codepen.io/jmussitsch/pen/8edb8afc2fccad14a7b8710045fbe1b5

Border Radius Properties• Specify the shape of the corner of the border

• border-top-left-radius, border-top-right-radius,

border-bottom-right-radius, border-bottom-left-radius

• Value: [ length | percentage ]{1,2} | inherit

• Initial: 0

• Inherited: no

• The 2 length or percentage values define the radii of the quarter ellipse

that defines the shape of the corner of the outer border edge

• 1st value: horizontal radius

• 2nd value: vertical radius

Source: http://www.w3.org/TR/css3-background/#the-border-radius

border-top-left-radius: 55pt 25pt

Border Radius Shorthand Property• border-radius

• Value: [ length | percent ]{1,4} [ / [ length | percent ]{1,4} ]? | inherit

• Values before the “/” set horizontal radius and values after

set the vertical radius

• If there is no “/” then both radii are set equally

• The 4 values for each radii are given in the order:

• top-left

• top-right (if omitted, same as top-left)

• bottom-right (if omitted, same as top-left)

• bottom-left (if omitted, same as top-right)

• See https://codepen.io/jmussitsch/pen/b4b14e1e1f5543df3e28d970ddfa0369

Box Shadow Property• Attaches one or more drop-shadows to the box

• <shadow> = inset? && [ length{2,4} && color? ]

• box-shadow

• Value: none | <shadow> [, <shadow> ]*

• Initial: none

• Inherited: no

• Length values:• The 1st length is the horizontal offset of the shadow (+ is right, - is left)

• The 2nd length is the vertical offset (+ is down, - is up)

• The 3rd length is the blur radius (the > the value the more blur)

• The 4th length is spread distance (+ causes expansion, - contraction)

• Color is the color of the shadow

• The inset keyword causes an inner shadow as opposed to an outer

• See https://codepen.io/jmussitsch/pen/d15d9e95326606ee2f7a539d3c61cdd1

Visual Formatting Model• How user agents (browsers) process the

document tree for visual media

• Each element generates zero or more boxes

according to the box model with layout based on:

• Box dimensions and type

• Positioning scheme

• Relationships between elements in the tree

• External information (e.g. Browser viewport size)

Visual Formatting Model (continued)

• Replaced element:

• Any element whose appearance and

dimensions are defined by an external source

• E.g. images, form elements

• Non-replaced element

• Any element that is not a replaced element

Visual Formatting Model (continued)

• Canvas

• Space where the formatting structure is rendered

• Viewport

• Window offered by user agents (browsers) that

allows users to view a document

• When smaller than the canvas area, a scrolling

mechanism should be provided

Visual Formatting Model (continued)

viewport

Visual Formatting Model (continued)• Containing block

• Rectangular box that establishes the context by

which descendant boxes’ positions and sizes

are calculated from

• Every element box has a containing block

• The root element’s (html) containing block is called

the initial containing block and has the dimensions

of the viewport

• For other elements, the containing block depends on

the positioning scheme of the element and its

relationship with other elements in the document tree

Visual Formatting Model (continued)

• Block formatting contexts

• Boxes are laid out one after the other, vertically,

beginning at the top of the containing block

• Vertical distance between sibling boxes is

determined by margin properties (vertical

margins between adjacent boxes collapse)

Block formatting contexts

Containing Block

Visual Formatting Model (continued)

• Inline formatting contexts

• Boxes are laid out one after the other,

horizontally, beginning at the top of the

containing block

• Horizontal margins, borders, and padding are

respected between boxes

• Boxes may be aligned vertically in different

ways

• The rectangular area that contains the boxes

that form a line is called a line box

Inline formatting contexts

Containing Block

Line Box

Visual Formatting Model (continued)• Block-level elements

• Elements that are formatted visually as blocks

• Each generates a block-level box

• Block-level boxes

• Boxes that participate in a block formatting context

• Usually are also block container boxes

• Block container boxes

• Contain either only block-level boxes or establish an

inline formatting context and thus contain only inline-

level boxes

• Not all block container boxes are block-level boxes

Visual Formatting Model (continued)• Inline-level elements

• Elements that do not form new blocks of content

• Each generates an inline-level box

• Inline-level boxes

• Boxes that participate in an inline formatting context

• Inline boxes

• Inline-level boxes that are both inline level and whose

contents participate in its containing inline formatting context

• Atomic inline-level boxes

• Inline-level boxes that are not inline boxes because they

participate in their inline formatting context as a single

opaque box

Visual Formatting Model (continued)• Anonymous inline boxes

• Any text directly contained inside a block container

box must be treated as an anonymous inline element

• Anonymous block boxes

• If a block container box has a block-level box inside

it, then it must only have block-level boxes inside it

• An anonymous block box will wrap any non-block

content • See http://codepen.io/jmussitsch/pen/c1dc9567498651d5e4860de4f15886a1

Display Property• Specifies how an element is displayed with respect to the

visual formatting model

• display

• Value*: inline | block | inline-block | inherit

• Initial: inline

• Inherited: no• inline causes an element to generate one or more inline boxes

• block causes an element to generate a block-level box that is also a block

container box

• inline-block causes an element to generate an inline-level block container

box (is an atomic inline-level box)

• none causes an element to not appear in the formatting structure (creates no

box for itself and descendant elements do not generate any boxes either)

• See http://codepen.io/jmussitsch/pen/176db2297c811c6fe1f0df133942d60d

* This is not the complete list of possible values (we will not discuss the various table-* values; we will talk about flex shortly)

Calculating Widths and Margins• Values used for layout depend on several factors

• Lots of rules that we will not cover

• Specification details here:• http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins

• Inline-level, non-replaced elements:

• width property does not apply, auto margin values become 0

• Block-level, non-replaced elements in normal flow

• margin-left + border-left-width + padding-left

+ width

+ padding-right + border-right-width + margin-right

= width of the containing block

Minimum and Maximum Width Properties• Constrain widths to a certain range

• min-width

• Value: length | percentage | inherit

• Initial: 0

• Inherited: no

• max-width

• Value: length | percentage | none | inherit

• Initial: none

• Inherited: no

• The none value (max only) means there is no limit

• Do not apply to non-replaced, inline-level elements

Calculating Heights and Margins• Values used for layout depend on several factors

• As with widths, lots of rules that we will not cover

• Specification details here:• http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins

• Inline-level, non-replaced elements:

• height property does not apply

• Block-level, non-replaced elements in normal flow

• An auto value for margin-top or margin-bottom becomes 0 (you

cannot vertically center boxes like you can horizontally)

• If height is auto, the value used depends on its children

Minimum and Maximum Height Properties• Constrain heights to a certain range

• min-height

• Value: length | percentage | inherit

• Initial: 0

• Inherited: no

• max-height

• Value: length | percentage | none | inherit

• Initial: none

• Inherited: no

• The none value (max only) means there is no limit

• Do not apply to non-replaced, inline-level elements• See http://codepen.io/jmussitsch/pen/0517c494bcb03d2607e2efce18692e16

Flexible Box Layout• Current support across browsers is pretty good

• Useful for creating responsive layouts

• https://www.w3.org/TR/css3-flexbox/

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/

• https://developer.mozilla.org/en-

US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_fl

exible_boxes

• See http://codepen.io/jmussitsch/pen/817abaf7d83e31c8115558c292db48aa

Positioning

• Normal flow

• Block formatting of block-level boxes, inline formatting of

inline-level boxes, and relative positioning of block-level

and inline-level boxes

• Absolute

• Boxes are removed from the normal flow entirely and

assigned a position with respect to its containing block

• Floats

• Boxes are laid out according to normal flow, then taken

out of normal flow and shifted to the left or right as far as

possible

Position Property• Specifies how to position a box (float positioning has

separate properties)

• position

• Value: static | relative | absolute | fixed | inherit

• Initial: static

• Inherited: no

• static: normal box, laid out according to normal flow – this is the only

positioning we have dealt with so far

• relative: box’s position is calculated according to normal flow but is

then offset relative to its normal position using the box offset properties

• absolute: box is taken out of normal flow and its position, with respect

to its containing block, is specified with the box offset properties

• fixed: same as absolute but positioned with respect to the viewport (for

screen media)

Containing Blocks Revisited• Relative and static position elements

• The containing block is formed by the content edge of the

nearest block container box

• Fixed position elements

• The containing block is established by the viewport

(screen media)

• Absolute position elements

• The containing block is established by the nearest

ancestor with an absolute, relative, or fixed position

Box Offset Properties• Specifies offsets for positioned (not static) boxes

• top, right, bottom, left

• Value: length | percentage | auto | inherit

• Initial: auto

• Inherited: no

• For absolutely positioned boxes, specifies how far the box’s

corresponding margin edge is offset from the corresponding edge of the

box’s containing block

• For relatively positioned boxes, specifies how far the box is offset with

respect to the corresponding edge of the box itself

• See:

• http://codepen.io/jmussitsch/pen/a0e08c7c8a509a5108d1a63cb9595507

• http://codepen.io/jmussitsch/pen/5d79e92ce68644a6ee9283f3b9d7ca18

• http://codepen.io/jmussitsch/pen/d7b7fd3e42671d82552a8a9c9896256a

Float Property• Specifies whether a box should float to the left, right, or not at

all

• float

• Value: left | right | none | inherit

• Initial: none

• Inherited: no

• left: the element generates a block box that touches the left edge of the

containing block or the right edge of another floating block

• right: the element generates a block box that touches the right edge of

the containing block or the left edge of another floating block

• There are all kinds of rules for floats:

http://www.w3.org/TR/CSS2/visuren.html#propdef-float

Clear Property• Specifies which sides of an element’s box may not be

adjacent to an earlier floating box

• clear

• Value: none | left | right | both| inherit

• Initial: none

• Inherited: no

• left: the left edge of the element may not adjoin a floating element

• right: the right edge of the element may not adjoin a floating element

• both: neither edge of the element may adjoin a floating element

• See http://codepen.io/collection/81101b92f534224b445f1afa25fa1b8c/

Z-Index Property• Specifies the relative front-to-back order of an element

• z-index

• Value: auto | integer| inherit

• Initial: auto

• Inherited: no

• Only applies to positioned elements (absolute, relative, fixed)

• auto = 0

• Elements with higher z-index values will be “on top of”

elements with lower values• See http://codepen.io/jmussitsch/pen/43693cbd10caa0abc18ce049b1aedec5

Overflow Properties• Specifies whether content of a block container element is

clipped when it overflows the element’s box

• overflow-x, overflow-y

• Value: visible | hidden | scroll | auto | inherit

• Initial: visible

• Inherited: no

• overflow

• Value: visible | hidden | scroll | auto | inherit

Clip Property• Specifies what portion of an element’s box is visible

(absolutely positioned elements only)

• <shape> = rect(top, right, bottom, left)

• clip

• Value: <shape> | auto | inherit

• Initial: auto

• Inherited: no

• See http://codepen.io/jmussitsch/pen/8f1487763b2cbc76b3cc0f31d9e0d6c3

Visibility Property• Specifies whether boxes generated by an element are

rendered (invisible boxes still affect layout, unlike display:

none)

• visibility

• Value: visible | hidden | collapse | inherit

• Initial: visible

• Inherited: yes

• collapse is used for table rows and columns