Learning the basics of css3 for entrepreneurs Lecture by - Banjo Mofesola Paul, Co-founder, Planet Nest assisted by - Oluwagbuyi Abimbola

1. Hi again

2. This is Codepreneur
2016

3. BANJO MOFESOLA PAUL
CHIEF DEVELOPER,
PLANET NEST
good to see you again
mofesolapaul@live.com

4. Last week, we went through
HTML5, remember?

5. Exercise
create an HTML page

6. Week 2.
CSS & Other Pretty Things

7. CSS – THE SECRET
See all those wonderful faces?
Appreciate the power of makeup!

8. SYMBIOSIS
HTML describes the content, CSS
describes the layout

9. CSS – A whole new world

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

11. THE TRICK
Selectors define ‘where’, rules
describe ‘what’ – selectors contain
rules (attributes)

12. BRACES
They enclose style rules particular
to each selector

13. RULES
aka attributes; they link up with
their values with a colon ( : )

14. Colors.
paint bucket and acrylic

15. TWO WAYS
Name them or code them

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

17. SO WE CODE THEM
Introducing hex codes color
representation – the world is RED,
GREEN, BLUE [, AND ALPHA]

18. Hex color values
Some weird geeky stuff

19. DOT COLORATION
The computer’s screen is just many
colored light bulbs – think of stage
lights

20. THE RANGE
0 is off, 255 is fully on

21. THE DIFFERENCE
Each color component’s brightness
determines the resulting visible
color

22. A LITTLE BIT OF MATH
Binary and Hexadecimals

23. 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
… … …

24. HEX COLOR
A color requires six hex digits, and
a pound (hash) sign

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

26. Exercise
play with hexes a bit

27. Text.
face, size, and others

28. PLAYING SAFE WITH FONTS
There are maybe tens of millions of
fonts worldwide, not everyone has
them all

29. GENERIC FONTS
Serif, sans-serif, cursive, fantasy,
monospace

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

31. Exercise
Make a greeting card

32. QUICK ONE
HTML special chars begin with
ampersand ( & ) and end with
semicolon ( ; )

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

34. Pseudo-classes
Case study – links

35. More CSS jargon
sibling, child, attribute, nth,
and more pseudo

36. The box model

37. Content
border
margin
padding

38. Levels of CSS
inline, document, external

39. To the Lab
and we’ll stay there

40. O dabo!