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

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.