basics-docs/CSS Basics.txt at master · lwooden/basics-docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109


Basic Element Types
----------------------------

[ Block Elements ]
- always appear on a new line
- automatically fill the width of their container

// Common Block Elements
div form footer
h1 li ol section main
nav p table
ul


[ Inline Elements ]
- flow along with the text of the page from left -> right
- will wrap if they reach the edge of their container

// Common Inline Elements
a button br img
input script span
textarea


Identifiers
------------
. == class
# == id


Defining Variables
-------------------------
// define variables in a root object to be referenced elsewhere throughout the CSS file
:root {
--brand-color: #0072b0;
--column-width: 1080px;
}

.page-header {
max-width: var(--column-width); //reference
margin: 0 auto;
}

.container {
backgound-color: var(--brand-color); // reference
margin: 0 auto;
}


Common Tailwind CSS References
-----------------------------------------------
min-h-[px]
min-w-[px]
px
py
mt
flex
flex-col
justify-between
gap-
items-center


Box Model
---------------

Content
  Padding
    Border
      Margin


High Page Structure
--------------------------

[ Defining Containers ]

<body>
<div class=outer-container>

<div class=inner-container-1>

children...

</div>

<div class=inner-container-2>
children....


</div>

</div>

</body>


Mastering Layout
------------------------


[ Flexbox ]


[ Grid ]