Intro to CSS

An Introduction to Web Development Styling

Created by Tyler Blake / @TylerBlakeLOU

Agenda

  • What is CSS?
  • Why you should will use it.
  • Syntax
  • Methods of Styling
  • Targeting Elements
  • Code Examples

What is CSS?

  • Cascading Style Sheets
  • Set of rules to edit styling of elements called styles
  • Multiple styles can infuence a single element, called cascading

Why use it?

  • Separation of content from markup
  • Cleaner code
  • Easier to maintain
  • Faster loading times, if done right
  • Can you imagine how boring the internet would be without it?!

Syntax

Rule Syntax

Grouping Rules

Methods of Styling

Inline

Embedded

Linked

Order of Priority

  1. Inline
  2. Embedded
  3. Linked

Targeting Elements

ID's

  • Elements can be given ID's
  • ID's are referenced by a # sign

Classes

  • Elements can also be given classes
  • Classes are referenced by a .

Can references overlap?

  • Cascading Style Sheets
  • Styles overlap or cascade

Nesting Selectors

Value Types

Word Values

Note: Absolute values are BAD!

Numeric Values

Note: Relative values are GOOD!

Color Values

  • Can be word or hexadecimal
  • #RRGGBB or #RGB

Hexadecimal System

Examples

Fonts

Spacing

DOM

  • Document Object Model
  • Hierarchy of how elements are rendered on a webpage

Padding vs Margin

  • Margin = outside the element.
  • Padding = inside the element.

Questions?