Original subtitles

1 1

The box model is one 2

2

of the most fundamental parts of CSS. 3

3

That's because it's the main factor that defines 4

4

how elements are displayed on a webpage 5

5

and also how they are sized. 6

6

So according to the box model, 7

7

each and every element on a webpage can be seen 8

8

as a rectangular box and each box can have a width, 9

9

a height, padding, margins and a border. 10

10

And we can specify all these using CSS properties, 11

11

but note that they are all optional. 12

12

So there can be boxes with no margins 13

13

or no paddings or no border at all. 14

14

Now this image here shows us how the box model works. 15

15

And so let's break it down, first the content of a box 16

16

is where all the text images 17

17

and other content that we specify goes. 18

18

We can easily define its height and with using 19

19

the corresponding CSS properties. 20

20

Next, the padding is a transparent area 21

21

around the content but still inside of the box. 22

22

And we use paddings to create white space inside of a box. 23

23

And we can define the padding 24

24

by specifying the padding property in CSS. 25

25

Next, we can specify a border for any box 26

26

and that border then goes around 27

27

the padding and the content. 28

28

And this actually we already did in the last lecture, right? 29

29

Then similar to the padding, we have the margin, 30

30

but instead of being inside the box, 31

31

the margin is white space 32

32

that's actually outside of the box itself. 33

33

So we can think of margin as the space between boxes. 34

34

So for instance, 35

35

if we want to create some space between two elements, 36

36

we will simply use their margin properties and CSS. 37

37

And finally, there is something called the fill area. 38

38

So remember how the text content 39

39

and images go inside the content box, 40

40

well, the same does not apply for background images 41

41

or the background color of a box. 42

42

These properties will actually be applied not only 43

43

to the content box, but to the entire fill area, 44

44

which also includes the padding and the border, 45

45

but not the margin, okay? 46

46

Alright, so let's go back to our code 47

47

and implement some of these properties. 48

48

Now, if we take a look at our page here, 49

49

we will see that actually there's already 50

50

a lot of space here, right? 51

51

For example, between this heading and this paragraph, 52

52

and here is space and here, 53

53

and there's also a lot of space 54

54

around this h2 element here. 55

55

And that's because by default, 56

56

some elements get some margin automatically 57

57

if we don't define them, okay. 58

58

Now that can create some problems 59

59

when we're trying to style our page. 60

60

And so usually what we do is that 61

61

we reset all of the margins and all of the paddings 62

62

on all elements before doing anything else. 63

63

So this is called a global reset. 64

64

And so to do that, we need to select all the elements. 65

65

And for that, we have a special selector 66

66

and that is a star selector, okay? 67

67

So again, with this, 68

68

we can select all the elements on the page. 69

69

So what we do then is to set the margin to zero pixels. 70

70

And when we use zero, 71

71

we don't even need to specify the unit. 72

72

So just a zero like this, 73

73

and the same for padding set to zero as well. 74

74

If I give it a save now, it looks like this. 75

75

So all the paddings and all the margins 76

76

are effectively gone. 77

77

And that's exactly what we wanted. 78

78

Now, we also need to add another property here. 79

79

I mean, we do not have to, but we usually always do, 80

80

which is the box sizing property set to border box, okay. 81

81

Now this will not change anything here, 82

82

and I'm not gonna go into detail what this does. 83

83

I'm just putting it here so that you know, 84

84

that we always use it, okay. 85

85

So essentially what this does is that 86

86

it will include paddings and borders into the width 87

87

or the height that we specify for an element. 88

88

So for example, if we specify the width of an element 89

89

to 100 pixels, and then add a padding of 20 pixels 90

90

on each side, then 100 plus 20 plus 20 91

91

would be a total width of 140 pixels, 92

92

which could create problems, 93

93

if all we wanted was a width of 100 pixels. 94

94

And so to fix this, we use box sizing set to border box. 95

95

And so in this case, if we specify the width to 100 pixels, 96

96

it will always be 100 pixels, 97

97

no matter how much the padding, okay. 98

98

And if that doesn't make a lot of sense 99

99

to you at this point, then you can always Google around 100

100

how it works, if you want to go into more detail. 101

101

But since this is just a crash course, 102

102

I'm not gonna go into a lot more detail. 103

103

So now what I want to do is to add back some margins 104

104

and some paddings so that you can see how exactly they work. 105

105

And let's actually add with the body 106

106

and here we will set some padding, okay. 107

107

And why do we use padding? 108

108

Well, it's because we want to add some space 109

109

inside of this body element. 110

110

So basically to create some space 111

111

between the border of the browser, 112

112

so of this view part and the content. 113

113

So let's set it to 75 pixels. 114

114

And by the way, there are also other units in CSS. 115

115

We don't always have to use pixels. 116

116

We can use percentages or other more weird units like em 117

117

or rem or points or anything like that. 118

118

But to start out it's easier 119

119

to just understand with pixels, okay. 120

120

So give it a save. 121

121

And so now you see that it added this nice space 122

122

between the sides, okay. 123

123

It's maybe a bit too much, put it back to a 50, okay. 124

124

And now let's move on and add some space 125

125

between this heading here and this paragraph. 126

126

And to do that, we can simply add some margin 127

127

to the bottom of this h1, okay. 128

128

So we can specify paddings and margins like this. 129

129

Or as we did here margin and padding 130

130

and that will then apply them 131

131

to the four sides of the element, 132

132

but we can also do that selectively 133

133

to only the left side or the right side 134

134

or the top side or the bottom side. 135

135

And so let's now add margin to the bottom of each one. 136

136

So margin and then bottom, and I'd say 25 pixels, 137

137

give it a save. 138

138

And here we have, okay. 139

139

Now, if we did padding here, 140

140

it would actually look the exact same way. 141

141

Let me show that to you. 142

142

And indeed it works the same way, 143

143

but now this space is inside of the h1. 144

144

Let me show that to you using the inspector. 145

145

So this is the h1 and two green part is the padding. 146

146

You can also see that here. 147

147

So this is the content, 148

148

and then we have 25 of padding 149

149

and here you also have to border 150

150

and then the margin outside of the border. 151

151

So outside of the element. 152

152

And essentially this is what we learned 153

153

at the beginning of this video, right? 154

154

But it makes more sense for this space actually 155

155

to be outside of the element. 156

156

And so a margin in this case makes more sense. 157

157

And so you see that now this 25 158

158

is here painted in red, right? 159

159

And so it's now outside of the element, okay. 160

160

So this elements tab here in the developer tools 161

161

is pretty useful to inspect the styles 162

162

of all the elements and also to check out the markup. 163

163

So the HTML in here. 164

164

We can turn on and off these different properties. 165

165

And in general, this is really helpful to work 166

166

with HTML and CSS in the browser. 167

167

Next up, we should probably also add some spacing 168

168

after the h2 elements. 169

169

So let's say margin bottom 20 pixel, okay. 170

170

And we can also do another thing 171

171

that I didn't show you before, 172

172

which is to set the text-align property. 173

173

So text-align, 174

174

and now we can set it to a left right or center. 175

175

And I wanna set it to center here. 176

176

And then as you expect the text will get centered here. 177

177

So basically centered inside this whole box. 178

178

So the h2 box, and again, 179

179

we can see the box using the inspector, okay. 180

180

So the box itself is this whole blue space 181

181

that we can see up there. 182

182

And so the text of the h2 is then centered 183

183

inside the h2 box, okay. 184

184

And remember that this is a block element. 185

185

And so that's why it creates a box basically. 186

186

So block elements are the elements 187

187

that create their own line and inline elements. 188

188

Remember, it's like the link here. 189

189

So if we inspect this one, 190

190

you see that the box only occupies the space 191

191

of the text itself, right? 192

192

It doesn't create a whole box on a whole line. 193

193

So that's the big difference between inline 194

194

and block elements now, right? 195

195

Okay. 196

196

So this form here, of course is also a block element. 197

197

And so let's make it a little bit more narrow. 198

198

And so, as we learned, by the beginning of the lecture, 199

199

we can do that using the width property. 200

200

So let's set it to 400 pixels 201

201

and that looks a lot nicer, okay. 202

202

Now we also want to create some space 203

203

between all this content and the border. 204

204

And so how do we do that? 205

205

Well, that's right. 206

206

We have to use padding because padding creates space 207

207

inside of the box and yes, indeed it does. 208

208

And now let's also create some space between the image 209

209

and this form here, okay. 210

210

And so here we can add some margin to the top. 211

211

So margin top, and let's say, well, 50 pixels. 212

212

Might be a bit too much now let's just edit to a 30, 213

213

so we can see it. 214

214

And now let me actually just show you what happens 215

215

if we take out this property here, okay. 216

216

So we comment it out, 217

217

just like we comment out code in JavaScript. 218

218

So let's hit Comment slash. 219

219

And so you see in CSS, the comments are like this. 220

220

So slash star star slash and not slash slash, okay. 221

221

And so as I save now, 222

222

take a close look here at this form 223

223

and you see that it now get wider. 224

224

So let's inspected here. 225

225

So the form, we need to select the form here 226

226

and then scroll down. 227

227

And so now you see what I explained earlier. 228

228

So we define the width as 400, 229

229

but then we have a padding of 25 here, right? 230

230

And so that gets added 231

231

to the total width of the element. 232

232

So we have 400 plus 25 plus here 25 here, 233

233

and then also five pixels border on each side. 234

234

So five here and five here. 235

235

And so that makes it then that the whole element, 236

236

adds up to 460 pixels, I would guess. 237

237

So you can see that here on the screen. 238

238

So up here that it says that the width 239

239

is actually 460, okay. 240

240

And so again, that's because it adds up all the borders 241

241

and the paddings to the width. 242

242

And that's what happens without box sizing to border box. 243

243

But as I put it back on, so again, comment slash. 244

244

If I save it now, 245

245

now we are back to what we expected. 246

246

So 400, so we set it here to 400. 247

247

And so we wanted it to be exactly 400 248

248

and not for all the other stuff to be added. 249

249

And so now, as you see here, it says 400. 250

250

And so automatically CSS then changed the width 251

251

of the content here to just 340 252

252

to accommodate the rest of the width. 253

253

Basically that's needed for the padding 254

254

and the border, okay. 255

255

So I said, I wouldn't go into a lot of detail, 256

256

(instructor laughs) 257

257

but I guess I just did anyway. 258

258

But anyway, let's now also add some margin 259

259

to these paragraphs here. 260

260

So I used the first class to select 261

261

this paragraph and this paragraph, 262

262

but now we want to select all three paragraphs. 263

263

And so for that, we can simply use the P selector 264

264

and that will then select all of them, 265

265

regardless of any class names, okay. 266

266

So margin bottom, and let's set it to 10 pixels or 20, 267

267

so we can see it a little bit better. 268

268

And so you'll see that, in fact, 269

269

the margin now got applied 270

270

to all three of these paragraphs, just as we wanted. 271

271

Next up, we can also select the input and the button. 272

272

So here we have to input and button elements 273

273

and we can also style them a little bit too. 274

274

So let me actually show you another cool thing. 275

275

So we have the input selector, 276

276

but now we want these rules that we're gonna write here 277

277

to apply to both the input and the button. 278

278

And so we can write input, comma, button. 279

279

And so this rule here will then apply 280

280

to both of these selectors. 281

281

So let's add a padding of 10 pixels 282

282

and increase the font size. 283

283

Let's say two 16 pixels. 284

284

So look at them now. 285

285

And indeed they got bigger 286

286

and they got this nice padding in there now. 287

287

And once more, you can see it that these two elements, 288

288

so input and button are inline elements. 289

289

So this one and this one, 290

290

they both don't create a box that occupies the whole line. 291

291

So again, just like the link 292

292

and I can actually show that to you 293

293

by styling just this link. 294

294

So let's say, a background color, 295

295

and set it to yellow. 296

296

And then here you see, and at least I hope you can see it. 297

297

Or let's actually set it to yellow green, 298

298

I think that's another. 299

299

Yes. 300

300

And so now you can see it. 301

301

And so the box now is only this element itself, 302

302

but not the whole width of the screen, okay. 303

303

So actually, yeah, let's leave it like this. 304

304

So you can have this as a reference and now to finish, 305

305

I just want to show you one final, 306

306

but very important selector. 307

307

And this one is actually pretty important for you to know, 308

308

because we're also gonna use this all the time 309

309

in JavaScript to select elements 310

310

when we do DOM manipulation, 311

311

because in fact, all the selectors, 312

312

the way they work in CSS, for example, 313

313

the dot first or here, the ID selector, 314

314

they're gonna work just the same 315

315

to select elements in JavaScript. 316

316

And so that's one of the reasons why it's very important 317

317

to learn how these selectors work. 318

318

So anyway, the selector that I wanted to show you 319

319

is the child selector. 320

320

So the example I have here 321

321

is that we have these two h2 headings. 322

322

So this one and this one. 323

323

But let's say I only wanted to select the h2 elements 324

324

that are inside of this form here, okay. 325

325

So of course I could go ahead and add an ID 326

326

or a class to this one. 327

327

So here I could add an ID or a class, 328

328

but I could also tell CSS to simply select this h1 329

329

that is inside of the element with the ID of your name. 330

330

And so this is how it works. 331

331

So again, we use the ID, your name, 332

332

so in just what we have here, and then a simple space, 333

333

and then another selector. 334

334

So in this case, that's simply the h2 selector, 335

335

but it could be any other selector. 336

336

So this here could also be a class selector 337

337

or another ID selector, alright? 338

338

But in this case, I just want to select the h2. 339

339

And so let's change the color of this one 340

340

and let's change it to, I think there's one called olive 341

341

or let's use this one, olive drab 342

342

and yeah, indeed. 343

343

Now this one is green and this one is not 344

344

because this one is not inside the element 345

345

with the ID of your name, right? 346

346

And so this one here is very useful 347

347

and we use it all the time in CSS. 348

348

And so that's why I wanted to show you 349

349

this one here as well. 350

350

Finally, just to make this a little bit smaller, 351

351

let's also change the size of the image 352

352

because that's also something very important. 353

353

So if we do not specify any sizes on the image, 354

354

it will simply be as large as it can, okay. 355

355

Or as large as the source image really is. 356

356

But usually we don't want that. 357

357

So on the image, it's pretty common to always set 358

358

either a height or a width attribute. 359

359

So let's do that here. 360

360

So this one doesn't have, or maybe it does have a class. 361

361

So, or actually, it has an ID, okay. 362

362

So we can of course use the image selector, 363

363

like I was just writing, but we can also use the ID. 364

364

So the difference is that with the ID, 365

365

if we add multiple images 366

366

then we would only select this one. 367

367

So let's actually copy this one and use this. 368

368

So ID, and then the name of the ID. 369

369

And let's set the width here to 200 pixels. 370

370

So what do you think will happen then to the height? 371

371

Well, it scaled proportionally, okay. 372

372

So that's very nice. 373

373

Let's make it a bit bigger 300 pixels. 374

374

And so we don't have to worry about the height. 375

375

We can still set it, but with that, 376

376

we will then change the aspect ratio. 377

377

So if we set the height to also 300 pixels, 378

378

it would then become a square (laughs). 379

379

Yeah, that's right. 380

380

Okay? 381

381

And if we now turned off the width, 382

382

so let's comment it out 383

383

then it will again scale proportionately. 384

384

So the height is now 300 385

385

and then the width is calculated automatically. 386

386

Let's set it back. 387

387

And usually it's easier to simply specify the width, okay. 388

388

That looks nice. 389

389

Let's change the h1 a little bit to 35 390

390

to make it fit all in one line. 391

391

And yeah, we have a nice little page here. 392

392

It's not the best looking, 393

393

but I think it taught you some things about HTML and CSS, 394

394

at least to the very fundamentals. 395

395

So of course we only scratched the surface here. 396

396

So probably this is less than like 5% 397

397

of everything that there is to learn about CSS. 398

398

So we didn't really talk about positioning. 399

399

We didn't talk about flexbox or CSS grid 400

400

or many other important topics, 401

401

but it wasn't also really the goal here. 402

402

I just wanted to get you up to speed 403

403

with the fundamentals of HTML and CSS 404

404

so that you can understand a little bit of the code 405

405

of projects that are included here in the course, 406

406

and also so that you can learn how these selectors work, 407

407

because as I mentioned, 408

408

we will use them in JavaScript to select elements as well. 409

409

So I hope you liked this small crash course. 410

410

And I also hope I got you interested in HTML and CSS 411

411

so that you now go ahead and research 412

412

maybe a little bit more about it. 413

413

Anyway, and with that being said, 414

414

let's now go straight into DOM manipulation 415

415

in the next section, 416

416

because that's really exciting and really cool.