CSS Basics

Shai Mesisterano

Web Developer

"קוד נקי"
בלוג למפתחי ווב

What we're going to do today?

(45 Minutes) Theory:

• Part 1: Introduction.
• Part 2: Deep dive into CSS.
• Part 3: Selectors.
• Part 4: CSS Syntax.
• Part 5: Tips.

(45 Minutes) Exercise...

• Bingo!

Part 1

Introduction

We're going to talk about:

Designing web pages using CSS

Turning this...

Into this!

What is CSS?

• The most rich, fast & popular way to design web pages.
• Alternatives:
  • Adobe Flash (not supported in iPhone).
  • Microsoft Silverlight (not supported by Microsoft).
  • Java Applet (not supported by Search Engines).

Why do we want to learn CSS?

Mobile Revolution

• Mobile devices have modern browsers.
• Mobile websites - Cross Browser & Cross Device - Save Time. Save Money.

Dynamic Revolution

• From static images - to dynamic animations.
• Great capabilities - 3D, animations, fonts and more...
• Example: Make the page dance!

Background

What can we do with CSS?

• Create cool games.
• Create fancy websites.
• Create interactive presentations.
• Examples:
  1. Mona Lisa
  2. Hello Racer

We already know...

HTML Syntax

Check out this Pen!

CSS in 3 steps...

• From HTML Syntax:

  Check out this Pen!

• Through dummy CSS syntax:

  Check out this Pen!

• To real CSS syntax:

  Check out this Pen!

Part 2

Deep dive into CSS

Adding CSS to a page:

• Style tag

  Check out this Pen!

CSS Smiley

Hello (red) CSS!

• WHO (body) does WHAT (Background Color = Red)

  Check out this Pen!

Part 3

Selectors

Type Selectors

• Who? body
• What? background-color: red;

  Check out this Pen!

Class Selectors

• A Class can be assigned to MULTIPLE elements.
• Who? .big
• What? font-size: 90px;

  Check out this Pen!

ID Selectors

• An ID can be assigned to a SINGLE element.
• Who? #logo
• What? letter-spacing: 20px;

  Check out this Pen!

Who's stronger?

Check out this Pen!

Check out this Pen!

http://overAPI.com/CSS

Styles dictionary

CSS Fallback

What happens when we don't define CSS?

Who, What and... WHERE?!

Embedded Styles

• We already know that!

Check out this Pen!

Inline Styles

Check out this Pen!

External Styles

Check out this Pen!

• Cached by browsers

Location Comparison

Check out this Pen!

Check out this Pen!

Check out this Pen!

Part 4

CSS Syntax

Comments

Check out this Pen!

• To answer the unquestioned

Colors

• Can be:
  1. Names: Red, Blue, Green...
  2. Hexadecimal: #000000, #ff0000.. Index
  3. Uses: color , background-color , border-color ...

Check out this Pen!

Check out this Pen!

Check out this Pen!

Units

• Can be:
  1. Pixels: 48px, 24px...
  2. Percentage: 100%, 50%... (Relative)
  3. Ems: 1em, 0.5em... (Relative)
  4. Uses: font-size , width , height ...

Check out this Pen!

Check out this Pen!

Check out this Pen!

Images

• Uses: background-image , list-style-image .

Check out this Pen!

Check out this Pen!

Check out this Pen!

Font

Check out this Pen!

Check out this Pen!

Check out this Pen!

Text

Check out this Pen!

Check out this Pen!

Check out this Pen!

Links

Check out this Pen!

Check out this Pen!

Check out this Pen!

Part 5

Tips

Shorthands

Check out this Pen!

Check out this Pen!

Check out this Pen!

Use the most specific element!

Check out this Pen!

Check out this Pen!

Define multiple elements, by separating them with a comma!

Check out this Pen!

Check out this Pen!

Be consistent with names!

Check out this Pen!

Check out this Pen!

That's it folks...

Register

http://bit.ly/openacademy4