Chapter 4: Shaping Up with CSS

Block-level Elements vs Inline Elements

Block-level Elements
- on its own line or multiple lines
- container for one or more elements
- h1, h2, h3, and so on, through to h6
- p
- div
- blockquote
- ul and ol
- form
Inline Elements
- em
- strong
- cite
- a
Inline Begets Inline
Inine Elements can Never Contain Block-level Elements
Recap:Block-level and Inline Elements
Styling Inline and Block-level Elements
- changing colors (text and background)
- changing font properties
- give a block of text a fixed width or height
- create padding effects
- move a block

Sizing Up the Blocks

Setting a Width
Setting a Height

Adding Borders to Block-level Elements

Border dimensions
- border-width
- border-style
- border-color
Border types
- Simple Black Border
- Inset Border
- Colored Ridge Border
- Bold Border Effects
- Simple Gray Border
- Dotted Red Border
- Dashed Gray Border
- Double Borders
Styling Individual Borders
Shorthand Border Styles
Border Styles you can Use
- border thickness
- border style
  - solid
  - double
  - dotted
  - dashed
  - grooved
  - ridge
  - inset
  - outset
- border color

Recap: what Have w Learned?

Shaping and Sizing our Diving Site

Adding Padding
Introducing Padding to the Project Site
Margins
The Box Model

Positioning Elements Anywhere you Like!

Showing the Structure
Absolute Positioning

What we've Achieved: Full CSS Layout

Other Layout Options

More Absolute Positioning
Relative Positioning
Floating Positioning

Styling Lists