learn-css-basics.md

Learning CSS Basics

Introduction

• CSS declarations (Property and Value)
• Inline styles - HTML style attribute
• Pixel: 1/96th of an inch

Basic Properties

• color
• font-family
• font-size
• font-style
• font-weight
• text-transform
• text-decoration
• line-height
• vertical-align
• text-align
• background-color
• background-image

Values and Units

• Percentage
• Color
• Hexadecimal RGB values
• Pre-defined keyword values
• URL
• initial, unset and inherit

Box Model

Source: developer.mozilla.org

• Box Model
• height, width
• min-height, min-width
• max-height, max-width
• padding-top, padding-right, padding-bottom, padding-left
• margin-top, margin-right, margin-bottom, margin-left
• border-width, border-style, border-color, border-radius

Other Common Properties

• visibility
• display
• overflow-x, overflow-y

Shorthands

• background
• font
• border
• margin and padding
• overflow

Stylesheets

• CSS declaration blocks
• Internal stylesheet - HTML style tag
• Class selectors
• External Stylesheet
• CSS rulesets
• How CSS works

Basic Selectors

• Type Selectors
• Class Selectors
• ID Selectors

Formatting tips from Airbnb (Published under The MIT Licence)

• Use soft tabs (2 spaces) for indentation.
• Prefer dashes over camelCasing in class names.
• Do not use ID selectors.
• When using multiple selectors in a rule declaration, give each selector its own line.
• Put a space before the opening brace { in rule declarations.
• In properties, put a space after, but not before, the : character.
• Put closing braces } of rule declarations on a new line.
• Put blank lines between rule declarations.

Bad

.avatar{
    border-radius:50%;
    border:2px solid white; }
.no, .nope, .not_good {
    // ...
}
#lol-no {
  // ...
}

Good

.avatar {
  border-radius: 50%;
  border: 2px solid white;
}

.one,
.selector,
.per-line {
  // ...
}

Note

• There are hundreds of CSS properties and thousands of different combinations of values. No need to remember the properties or values.
• You'll remember most of the most frequent properties and values once you start using CSS.
• Just a basic understanding of how to apply CSS on an element/type/class/id is sufficient when you start.
• Google and learn whenever there is a situation when you don't know how to do something using CSS. MDN is a guide that you should follow.
• Understanding the Box Model is important as without a proper understanding things might be confusing when you need to use padding or margin.
• Follow the best practices as mentioned above.

Next Steps

• Experiment with the all the properties from above
• Skim CSS Common Usecases
• Skim Debugging CSS