Week 7: Box Model, Pseudo-Classes and Pseudo-Elements

1. WEBD 162
Week 7: Box Model, Pseudo-Classes and
Pseudo-Elements

2. The Box Model
Inspect tool (Dreamweaver): Yellow: margins, Purple: padding, Blue: content
Web Developer: Inspector

3. Picture Frame Analogy
Source: Cathey Ihms www/catheywithane.com
Frame = Border
Mat = Padding

4. Art Gallery Wall Analogy
Source: Cathey Ihms www/catheywithane.com
Distance
between frames
= Margin

5. Content
• May be images
• May be text
• May be other elements
• e.g. <p> within a <div>
• Width: sets the width of the content
• If no content width specified, then the element will expand
to fill the width of its container

6. Padding
• Distance between Content and Border
• Padding Width: Adds to the total Box Width

7. Borders
• 3 properties: Width, Style and Color
• Border Width adds to total Box width

8. Margins
• Distance between the element and adjacent elements
• Fixed width, e.g. 3px
• Percentage, e.g. 5%
• Elastic width, e.g. 1em
• Auto
• Can use negative values
• Margin adds to width of box

9. Box Width
Box Width = Content Width
+ padding-right
+ padding-left
+ border-right
+ border-left
+ margin-right
+ margin-left
Box Width
Fitz – Preppy cat by Budi Satria Kwan, society6.com

10. Box Height
Box Height =
Content Height
+ padding-top
+ padding-bottom
+ border-top
+ border-bottom
+ (the larger of margin-top
or margin-bottom of box above)
+ (the larger of margin-bottom
or margin-top of box below)

11. Boxes = Containers
• Boxes may nest inside other boxes
• Boxes may not overlap!
Color Block Nesting Boxes, containerstore.com

12. Boxes = TRouBLe
• Top
• Right
• Bottom
• Left
Top
Bottom
RightLeft
RIBBA Frame, ikea.com

13. Pseudo-Classes
• Structural: A classification of an element based on its
current status, position, or use in a document
• Dynamic: The class can change state based on actions
of the user
• Used with hypertext links
• Pseudo-Classes have only one colon (:)
• No spaces before or after colon
• CSS Rule Syntax:
selector:pseudo-class { declaration block; }

14. Structural Pseudo-Classes
:root
:empty
:only-child
:first-child
:first-of-type
:last-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:only-of-type
:lang(code)
:not(s)

15. Structural Pseudo-Class example:
body
article
header
h1 p p
p p p
aside
h1 p
article > p:nth-of-type(2)

16. Dynamic Pseudo-Classes
:link
:visited
:active
:hover
:focus

17. Dynamic Pseudo-Class Example
• Example: Rollover effect based on state of hypertext link
• Syntax:
selector:pseudo-class { declaration block; }
a : hover { color : blue ; }

18. Pseudo-Elements
• Object that exists only on the rendered page
• Not accurately represented in the hierarchy of page elements
• For example, applying small caps to the first line of a p element
• Actual letters affected will vary based on the web browser window size
• Pseudo-Elements have 2 colons (::)
• No spaces before or after each colon
• CSS Rule Syntax:
selector::pseudo-element { declaration block; }
aside > p :: first-line { color : blue ; }

19. Pseudo-Elements
::first-letter
::first-line
::before
::after

20. Example: Pseudo-Element
body
article
header
h1 p p
p p p
aside
h1 p
aside > p::first-line
Actual letters of line that are affected by
this selector will vary based on size of
browser window