CodePreneur Week2 -Introduction to css3
-
Upload
oluwagbuyi-abimbola -
Category
Software
-
view
305 -
download
0
Transcript of CodePreneur Week2 -Introduction to css3
Hi again
This is Codepreneur2016
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!