Lecture CSS

CSS Magic ⚡

Example #1

Example #2

CSS: Cascading Stylesheets It tells a markup file (usually HTML) how it should be presented. This includes:

• Layouts and Grids
• Typography
• Color
• Positioning
• Image size
• Width/Height

http://dontfeartheinternet.com/05-from-scratch/

Recap:

Three ways you can write it

1. Inline
2. Internal CSS
3. Externally

We will be using external stylesheets, which is considered best practice for most website projects.

How it works

1. Tell HTML where to look for styles
2. Assign classes and/or IDs to HTML elements
3. Reference those selectors in CSS file
4. Add styles for each selector

Step 1: Point HTML to CSS

Good news. You've already done this in A9. However, every single HTML file must be told where that CSS file lives.

<link rel="stylesheet" src="/assets/css/application.css">

Step 2: Assign classes/IDs to HTML

IDs must be unique, meaning they can only be used one time per HTML document. Classes can be used on as many elements as you'd like.

Can't use spaces in your names. Use hyphens or underscores to breakup words. Whichever you choose, be consistent.

I tend to use:

• hyphens for classes
• underscores for IDs

This makes it easy to see at a glance if something is an ID or class.

Step 3: Classes and IDs

• Classes are referenced by .
• IDs are referenced by #

---

Step 4: Selectors and declarations

Think of it as selecting what you want and declaring what it will do.

Cascading

Cascading stylesheets

---

Example

Common pitfalls

• Scope

• Browser comes with different set of predefined styles [Tweet of devices] I've found the trick is to work with the quirks of each browser; not against them.

• Chaining selectors

• Targeting elements

• max-width: 100%;

Element, attributes, rule, selector and declaration

Debugging:

Resources:

• CSS Tricks
• Semantic UI
• CSS Validator
• WTF HTML CSS*

• Warning explicit

body {
    background-color: hotpink;
}