forked from Oluwasetemi/css-v3
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathrendering.html
292 lines (250 loc) · 7.05 KB
/
rendering.html
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fundamental CSS 101</title>
<link rel="stylesheet" href="css/rendering.css" />
</head>
<body>
<h1>
<a href="https://github.com/Oluwasetemi/css-v3" target="_blank">
Check the class note on GitHub
</a>
</h1>
<style>
a {
color: unset;
}
</style>
<div class="container">
<p>
This paragraph contains <a href="#">a hyperlink</a>!
</p>
<p style="color: red;">
This is a red paragraph with <a href="#">another link</a>.
</p>
</div>
<!-- exercise on negative margin -->
<style>
body {
background: #222;
padding: 32px;
}
.card_negative {
margin-top: -48px;
}
.card {
background-color: white;
padding: 32px;
border-radius: 8px;
margin-block-end: 16px;
}
h1 {
background: deeppink;
padding: 16px 32px;
margin-bottom: 24px;
font-size: 2rem;
text-align: center;
border-radius: 4px;
}
</style>
<div class="card">
<h1 class="card_negative">An Otter Essay</h1>
<p>
Otters have long, slim bodies and relatively short limbs. Their most striking anatomical features are the
powerful webbed feet used to swim, and their seal-like abilities holding breath underwater.
</p>
</div>
<!-- stretched out image -->
<style>
body {
background: #222;
padding: 32px;
}
.card {
background-color: white;
padding: 32px;
border-radius: 8px;
}
.stretched-out {
/* margin: 0 -32px; */
margin-inline: -32px;
}
.card img {
display: block;
width: 100%;
}
p,
img {
margin-bottom: 16px;
}
</style>
<div class="card">
<p>
Otters have long, slim bodies and relatively short limbs. Their most striking anatomical features are the
powerful webbed feet used to swim, and their seal-like abilities holding breath underwater.
</p>
<div class="stretched-out">
<img alt="A cute otter in water" src="https://courses.joshwcomeau.com/cfj-mats/otter.jpg" />
</div>
<!-- <img class="stretched-out" alt="A cute otter in water" src="https://courses.joshwcomeau.com/cfj-mats/otter.jpg" /> -->
<p>
More importantly, otters are glorious water dogs, playful and curious. The otter, no other, is the best animal.
</p>
</div>
<!-- understanding inline element and magic space -->
<style>
.inline-lesson img {
border: 5px solid red;
display: block;
}
.inline-lesson {
line-height: 0;
display: block;
}
</style>
<div class="inline-lesson">
<img src="https://courses.joshwcomeau.com/cfj-mats/placekitten-100.jpg" width="100" alt="Cat photo" />
<!-- duplicate img 3 times -->
</div>
<!-- dealing with inline block
NB inline block does not line-wrap so avoid using it on a tag in a paragraph. -->
<style>
strong {
/* display: inline-block; */
color: white;
background-color: red;
width: 100px;
margin-top: 32px;
text-align: center;
}
strong:hover {
/* transform: scale(1.2); */
scale: 1.2;
}
</style>
<p>
<strong>Warning:</strong> Alpaca may bite.
</p>
<!-- understanding width -->
<!-- % is based on the parent elements content space, block element width is auto, not 100% works similarly to margin: auto (hungry space) keywords - auto and fit-content, measurements (100%, 200px, 5rem) -->
<!-- relationship with min-width and max-width
The specified value of width applies to the content area so long as its value remains within the values defined by min-width and max-width.
1. If the value for width is less than the value for min-width, then min-width overrides width.
2. If the value for width is greater than the value for max-width, then max-width overrides width.-->
<!-- min-content(element children with line breaking) -->
<!-- max-content(smallest value that contains the content, without breaking it up) -->
<!-- fit-content(combine min and max with line break as need never exceed available space) -->
<!-- min-width -->
<!-- max-width -->
<style>
.box {
width: 50%;
min-width: 170px;
max-width: 300px;
margin: 0 auto;
border: solid hotpink;
}
</style>
<div class="box">
Hello World
</div>
<!-- reproduce the fit-content with any other css properties
display: table,
OR
min-width: min-content;
max-width: max-content;
build a max-width wrapper
.max-width {
max-width: 500px;
margin: 0 auto;
}
-->
<!-- understanding height -->
<!-- default - as small as possible (to contain its children) -->
<!-- height and body : 100% and min-height: 100% -->
<!--
.element {
height: 100vh; /* Fallback for older browsers */
height: 100svh;
}
-->
<!-- setting up a footer with margin and height -->
<style>
html, body {
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
footer {
border: solid hotpink;
padding: 8px;
margin-top: auto;
}
</style>
<!-- margin collapse -->
<div class="margin-collapse-lesson">
<div class="box">
<p>
This is a paragraph.
</p>
</div>
<div class="box">
<p>
This is a paragraph.
</p>
</div>
</div>
<style>
.margin-collapse-lesson {
display: flex;
flex-direction: column;
/* justify-content: space-between; */
}
.box {
width: 100px;
height: 100px;
background-color: hotpink;
margin: 16px;
}
p {
margin: 0;
}
</style>
<div class="wrapper">
<p>
I fill the viewport!
</p>
<footer>I'm at the bottom</footer>
</div>
<!-- https://www.figma.com/file/6hGqKA5scrZJScb9KW3Hj2/Huckleberry?type=design&node-id=0-1&mode=design&t=tu3A2tnzktp0rSVN-0 -->
<div class="special">
<figure>
<img src="https://courses.joshwcomeau.com/cfj-mats/wall-art.jpg"
alt="A bar graph showing the number of cats per capita" />
<figcaption>
Source: Photo by Efe Kurnaz in Camp Nou, Barcelona, Spain. Found on Unsplash.
</figcaption>
</figure>
</div>
<style>
figure {
padding: 8px;
border: 2px solid;
margin-block-start: 32px;
margin-block-end: 32px;
color: #fff;
/* magic source */
width: min-content;
}
figcaption {
text-align: center;
color: #fff;
}
</style>
</body>
</html>