CSS concept, design rule, and layout methods Example Repository: https://bitbucket.org/webiseasy/demo-examples/

2. Title1 Title2 Title3 Title4 Title1 Title2 Title3 Title4

5. No need to select

6. Need to select
No need to select

7. Need to select
No need to select
Put everything in
<style> into a .css file

8. Need to select
No need to select
Put everything in
<style> into a .css file

9. Need to select
No need to select
Put everything in
<style> into a .css file

10. Need to select
No need to select
Put everything in
<style> into a .css file

11. <div class=“box”></div>

12. <div class=“box”></div>
Selector

13. <div class=“box”></div>
Selector
Style

16. Selector example
* All
E E tags input
E F F tags inside E tags input textarea
E>F F tags as child of E div>p
E+F F tags adjacent to E H1+p
E.C E tags with C class p.warning
E#I E tag with id as I input#name
E[A=V] ~ attribute A equals V input[type=‘text’]
E[A^=V] ~ attribute A starts with V div[title^=‘my’]
E[A$=V] ~ attribute A ends with V a[href$=‘.pdf’]
E[A!=V] ~ attribute A not equal to V form[method!=‘POST’]
E[A*=V] ~ attribute A contains V a[href*=‘google.com’]

17. Filter example
:hover when element being hovered a:hover
:first-child As first child in its parent element li:first-child
:last-child As last child in its parent element li:last-child
:nth-child(n|even|odd) As nth-child ~
li:nth-child ( 2 )
li:nth-child ( odd )
:nth-child(Xn+Y) li:nth-child ( 5n+1 )
:even
:odd
:not(selector)
Elements that is not selected by
the selector
:not( img [ src*=‘dog’ ] )

23. .thumb img
.pic-container > img

26. .info .vislble-data:last-child
.visible-data[data-type=‘gender’]

33. Content

34. Padding
Content

35. Border
Padding
Content

36. Margin
Border
Padding
Content

37. Margin
Border
Padding
Content
Top
Bottom
RightLeft

38. Hi~~~
<div class=“box”></div>

44. 123123 123213hahaha

46. .container

47. .container
.nav

48. .container
.content
.nav

49. .container
.content
.content
.nav