Download - CodePreneur Week2 -Introduction to css3
![Page 1: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/1.jpg)
Hi again
![Page 2: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/2.jpg)
This is Codepreneur2016
![Page 4: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/4.jpg)
Last week, we went through HTML5, remember?
![Page 5: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/5.jpg)
Exercisecreate an HTML page
![Page 6: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/6.jpg)
Week 2.CSS & Other Pretty Things
![Page 7: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/7.jpg)
CSS – THE SECRETSee all those wonderful faces? Appreciate the power of makeup!
![Page 8: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/8.jpg)
SYMBIOSISHTML describes the content, CSS describes the layout
![Page 9: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/9.jpg)
CSS – A whole new world
![Page 10: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/10.jpg)
OUR NEW FRIENDS<style> tag, {curly braces} and semicolons;
![Page 11: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/11.jpg)
THE TRICKSelectors define ‘where’, rules describe ‘what’ – selectors contain rules (attributes)
![Page 12: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/12.jpg)
BRACESThey enclose style rules particular to each selector
![Page 13: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/13.jpg)
RULESaka attributes; they link up with their values with a colon ( : )
![Page 14: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/14.jpg)
Colors.paint bucket and acrylic
![Page 15: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/15.jpg)
TWO WAYSName them or code them
![Page 16: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/16.jpg)
HEADS UP!While naming them is cool, it’s problematic
![Page 17: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/17.jpg)
SO WE CODE THEMIntroducing hex codes color representation – the world is RED, GREEN, BLUE [, AND ALPHA]
![Page 18: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/18.jpg)
Hex color valuesSome weird geeky stuff
![Page 19: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/19.jpg)
DOT COLORATIONThe computer’s screen is just many colored light bulbs – think of stage lights
![Page 20: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/20.jpg)
THE RANGE0 is off, 255 is fully on
![Page 21: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/21.jpg)
THE DIFFERENCEEach color component’s brightness determines the resulting visible color
![Page 22: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/22.jpg)
A LITTLE BIT OF MATHBinary and Hexadecimals
![Page 23: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/23.jpg)
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
… … …
![Page 24: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/24.jpg)
HEX COLORA color requires six hex digits, and a pound (hash) sign
![Page 25: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/25.jpg)
WHY USE THEM?Precision, Objectivity, Portability, Predictability, Ease of use
![Page 26: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/26.jpg)
Exerciseplay with hexes a bit
![Page 27: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/27.jpg)
Text.face, size, and others
![Page 28: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/28.jpg)
PLAYING SAFE WITH FONTSThere are maybe tens of millions of fonts worldwide, not everyone has them all
![Page 29: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/29.jpg)
GENERIC FONTSSerif, sans-serif, cursive, fantasy, monospace
![Page 30: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/30.jpg)
SELECTOR TYPESELEMENT, .CLASS, #ID – they all define ‘what’, but are somewhat different
![Page 31: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/31.jpg)
ExerciseMake a greeting card
![Page 32: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/32.jpg)
QUICK ONEHTML special chars begin with ampersand ( & ) and end with semicolon ( ; )
![Page 33: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/33.jpg)
QUICK ONE<div>s & <span>s : block-level and inline.
![Page 34: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/34.jpg)
Pseudo-classesCase study – links
![Page 35: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/35.jpg)
More CSS jargonsibling, child, attribute, nth,
and more pseudo
![Page 36: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/36.jpg)
The box model
![Page 37: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/37.jpg)
Content
bordermargin
padd
ing
![Page 38: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/38.jpg)
Levels of CSSinline, document, external
![Page 39: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/39.jpg)
To the Laband we’ll stay there
![Page 40: CodePreneur Week2 -Introduction to css3](https://reader031.vdocuments.us/reader031/viewer/2022030314/5888ef511a28ab87728b62f1/html5/thumbnails/40.jpg)
O dabo!