codepreneur week2 -introduction to css3

Hi again

This is Codepreneur2016

BANJO MOFESOLA PAULCHIEF DEVELOPER,PLANET NEST

good to see you again

mofesolapaul@live.com

Last week, we went through HTML5, remember?

Exercisecreate an HTML page

Week 2.CSS & Other Pretty Things

CSS – THE SECRETSee all those wonderful faces? Appreciate the power of makeup!

SYMBIOSISHTML describes the content, CSS describes the layout

CSS – A whole new world

OUR NEW FRIENDS<style> tag, {curly braces} and semicolons;

THE TRICKSelectors define ‘where’, rules describe ‘what’ – selectors contain rules (attributes)

BRACESThey enclose style rules particular to each selector

RULESaka attributes; they link up with their values with a colon ( : )

Colors.paint bucket and acrylic

TWO WAYSName them or code them

HEADS UP!While naming them is cool, it’s problematic

SO WE CODE THEMIntroducing hex codes color representation – the world is RED, GREEN, BLUE [, AND ALPHA]

Hex color valuesSome weird geeky stuff

DOT COLORATIONThe computer’s screen is just many colored light bulbs – think of stage lights

THE RANGE0 is off, 255 is fully on

THE DIFFERENCEEach color component’s brightness determines the resulting visible color

A LITTLE BIT OF MATHBinary and Hexadecimals

Decimal Binary Hexadecimal

0 0000 0

1 0001 1

2 0010 2

3 0011 3

4 0100 4

5 0101 5

6 0110 6

… … …

Decimal Binary Hexadecimal

… … …

10 1010 A

11 1011 B

12 1100 C

13 1101 D

14 1110 E

15 1111 F

… … …

HEX COLORA color requires six hex digits, and a pound (hash) sign

WHY USE THEM?Precision, Objectivity, Portability, Predictability, Ease of use

Exerciseplay with hexes a bit

Text.face, size, and others

PLAYING SAFE WITH FONTSThere are maybe tens of millions of fonts worldwide, not everyone has them all

GENERIC FONTSSerif, sans-serif, cursive, fantasy, monospace

SELECTOR TYPESELEMENT, .CLASS, #ID – they all define ‘what’, but are somewhat different

ExerciseMake a greeting card

QUICK ONEHTML special chars begin with ampersand ( & ) and end with semicolon ( ; )

QUICK ONE<div>s & <span>s : block-level and inline.

Pseudo-classesCase study – links

More CSS jargonsibling, child, attribute, nth,

and more pseudo

The box model

Content

bordermargin

padd

ing

Levels of CSSinline, document, external

To the Laband we’ll stay there

O dabo!