1. Web Development & Design Foundations with H T M L 5
Ninth Edition
Chapter 4
Visual Elements and Graphics
If this PowerPoint presentation contains mathematical equations, you may need to check that your computer has the following installed:
1) MathType Plugin
2) Math Player (free versions available)
3) NVDA Reader (free versions available)
Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links by using INSERT+F7
Copyright © 2019, 2017, 2015 Pearson Education, Inc. All Rights Reserved

2. Horizontal Rule Element
Configures a horizontal line
<hr>

3. HANDS-ON PRACTICE 4.1 (page 136)
chapter4/4.1/hr.html

4. CSS border Property
Configures a border on the top, right, bottom, and left sides of an element
Consists of
border-width
border-style
border-color
h2 { border: 2px solid #ff0000 }

5. CSS Borders: Block / Inline Elements
Block display element
Default width of element content extends to browser margin (or specified width)
Inline display element
Border closely outlines the element content
h2 { border: 2px solid #ff0000; }
a { border: 2px solid #ff0000; }

6. Border Display Can Vary by Browser
Firefox:

7. Configuring Specific Sides of a Border
Use CSS to configure 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. C S S Padding Property
Configures empty space between the content of the H T M L element and the border
Set to 0px by default
No padding property configured:

9. Configure Padding on Specific Sides of an Element
Use C S S to configure padding on one or more sides of an element
padding-bottom
padding-left
padding-right
padding-top

10. C S S Padding Property Shorthand: Two Values
Two numeric values or percentages
first value configures top and bottom padding
the second value configures left and right padding

11. C S S Padding Property Shorthand: Four Values
Four numeric values or percentages
Configure top, right, bottom, and left padding

12. Hands-On Practice 4.2 (pages 140-1)

13. HANDS-ON PRACTICE 4.2 (Page 140-1)
chapter4/4.2/border.html