CSS Course - 3: A bit deeper into CSS

• The Box Model
• Height & Width
• The "display" Property
• Properties worth to remember
• Pseudo classes & elements

CSS Box Model

Margin

   border

      padding

         content

• The Box Model
• Height & Width
• The "display" Property
• Properties worth to remember
• Pseudo classes & elements

CSS Box Model

Margin

   border

      padding

         content

Margin Collapsing - Bigger Margin “wins”

In general: Use either margin-top or margin-bottom

Shorthand Properties - Combine values of multiple properties in a single property (the shorthand property)

Example: 

border-width: 2px;

border-style: dashed | solid

border-color: orange

Shorthand property:

border: 2px dashed orange

margin: 5px 10px 5px 10px;  // top right bottom left

margin: 5px 10px; //top & bottom;  left & right

margin: 10px; //all sides

Height & Width properties

Block element default to 100% width

box-sizing: content-box (default) |border-box

Display Property

Display: none|block|inline|inline-block

Pseudo Classes & Pseudo Elements

Pseudo class - Defines the style of a special state of an element, eg: hover, active

Pseudo element - Defines the style of a specific part of an element, eg: ::after, ::selection, ::first-line

Check MDN standard pseudo-classes

Properties Worth to Remember

color:

background-color:

display:

padding:

border:

margin:

width:

height: