Original subtitles

1 1

Let's now learn about the very basics of CSS, 2

2

and make our webpage look a little bit nicer. 3

3

So as you probably already know, 4

4

we use CSS to style elements, 5

5

and to create a layout for the overall page. 6

6

And we can write CSS right here 7

7

in the HTML file using the style element. 8

8

Okay, and that style element is not for visible content, 9

9

here on the page, 10

10

and so it would go right here into the head. 11

11

Okay, because remember the head is basically, 12

12

like for settings of the page. 13

13

And the style definitely counts as a setting. 14

14

So style, 15

15

and now to style elements, 16

16

we need to first select them. 17

17

And there are different types of selectors in CSS. 18

18

And we're gonna learn about a couple of them, 19

19

in this video and the next one. 20

20

But the most basic one, 21

21

is the element selector. 22

22

And with the element selector, 23

23

we can simply select all elements of a certain type. 24

24

For example, the body. 25

25

So we write body, 26

26

and then curly braces, 27

27

and then in here we can write or CSS declarations. 28

28

So each CSS declaration has a property name, 29

29

and then a value. 30

30

For example, we can style the background color. 31

31

So background color, 32

32

and let me actually autocomplete it here. 33

33

So background color is the property, 34

34

and then let's say, green. 35

35

So in CSS there are a couple of predefined color names, 36

36

and we can then use this. 37

37

Give it a safe, and bam. 38

38

Our page is green now. 39

39

So that's CSS for you. 40

40

So, we have the body element selector, 41

41

then all of this here is our declaration block, 42

42

and this here is a simple declaration, 43

43

where background color is the property in green, 44

44

is the specified value. 45

45

Now usually we write or CSS in an external CSS file. 46

46

So just like we write JavaScript, 47

47

in an external script, 48

48

we do the same basically with CSS. 49

49

So let's create that separate CSS file. 50

50

So I'm bringing back the sidebar here, 51

51

using Command or Control B, 52

52

and then, let's call this one the style dot CSS. 53

53

Close the sidebar, 54

54

and now we need to connect these two. 55

55

So again, just like we had to connect 56

56

the JavaScript file to the HTML, 57

57

we also have to select the CSS. 58

58

But it works a bit differently. 59

59

So let's get, 60

60

we'll actually let's copy this here, 61

61

or cut it here. 62

62

So when I save it now, of course it's gone, 63

63

Okay. 64

64

And that's because the style file, 65

65

is not yet linked to the HTML. 66

66

So, we link it by using the link element. 67

67

So that's not very creative, 68

68

so here we use href again, 69

69

which remember is the same attribute, 70

70

as in the anchor element here. 71

71

Okay, but don't confuse anchor with link. 72

72

So link does not create a clickable link, 73

73

so like this, 74

74

instead we use it only to basically 75

75

link CSS files to HTML files. 76

76

So here, we say style dot CSS, 77

77

because that's the name that we gave to the file. 78

78

Okay. 79

79

And then we also need to specify 80

80

the rel attribute and set it to Stylesheet. 81

81

Give it a safe and here we go. 82

82

The green color is back. 83

83

Okay. 84

84

And so now we can write all our styles, 85

85

in the separate file here, 86

86

and so we separated the presentation from the content. 87

87

So let's actually make this like yellow, 88

88

and we should probably give it a little bit a nicer color, 89

89

and then VS code when you hover a color like this, 90

90

you see this pop up which then allows you to select a color. 91

91

And this is very handy. 92

92

So let's do this, 93

93

and then maybe just very subtle color like this. 94

94

All right, this looks a lot better already. 95

95

Okay, so let's now explore some more CSS properties. 96

96

For example, we can set the font family. 97

97

And here we can start by setting it 98

98

to a font that you probably have on your computer, 99

99

and so Arial is probably one that you have, 100

100

now in practice we use web fonts, 101

101

for example from a service like Google fonts, 102

102

okay? 103

103

But in this case it doesn't really matter. 104

104

So let's just give it a save, 105

105

and so, saw this font here changing. 106

106

And on your system, that should work too, 107

107

and if you don't have Arial, 108

108

then just use some other fonts that you have available. 109

109

But now you might ask, 110

110

we set the font family on the body, right? 111

111

So why did all these elements like this h1 here 112

112

and this P element, 113

113

and this h2 element, 114

114

why did all of them get the Aria font as well? 115

115

Well, that's because the font family property 116

116

is a property that gets inherited. 117

117

Okay. So all the Child Elements of the body element, 118

118

will automatically get this font family assigned to them. 119

119

And that makes it very handy, 120

120

So that we don't have to go ahead, 121

121

and set the font families separately on all these elements. 122

122

So just setting this on the body, 123

123

will then set it on all the Child Elements. 124

124

Now, most properties to actually not inherit. 125

125

But generally, all the properties 126

126

that are related to funds will inherit. 127

127

So let's check out another one, font size, 128

128

and let's set it to 20 pixels. 129

129

Give it a save, 130

130

and you'll see that everything got a little bit bigger now. 131

131

However, not all the elements 132

132

have a font size of 20 pixels now. 133

133

And that's because the elements like this h1, 134

134

and this h2 have predefined font sizes 135

135

that automatically are applied from the browser, 136

136

if we do not specify them on our own. 137

137

Okay. 138

138

But of course we can overwrite them 139

139

with our own selectors. 140

140

So let's say h1, 141

141

and so this is another element selector, 142

142

and in this case of course it selects the h1 element. 143

143

So let's say font size 50 pixels. 144

144

And so take a look at this now, 145

145

and well that's huge. 146

146

Let's make it a little bit smaller maybe 40, 147

147

now that looks about right. 148

148

All right. 149

149

And now let's actually use the class names 150

150

and DIDs that we set in the previous lecture 151

151

to now select elements based on these classes. 152

152

So, remember that here we set this paragraph 153

153

to first and this one to second. 154

154

So we basically named them like this. 155

155

And in fact, let's go ahead, 156

156

and add another class here to this other paragraph. 157

157

So class, and I will call this one first two. 158

158

Okay. 159

159

So remember, IDs have to be unique, 160

160

so we can only use them once. 161

161

But classes can be used multiple times. 162

162

And so that's what we did here. 163

163

And so now I can go ahead 164

164

and select all the elements, 165

165

which have the first class, 166

166

so this paragraph and this paragraph, 167

167

and then style them however I want. 168

168

And this will then only affect these two paragraphs, 169

169

but not this one. 170

170

Okay, because this one has the second class. 171

171

So let me show that to you. 172

172

And so the class selector is using the dot. 173

173

So dot first. 174

174

Okay, and so this is our selector. 175

175

Dot is for the class. 176

176

And then first is the class name. 177

177

And so we set the text color, 178

178

using the color property. 179

179

And let's set it to red. 180

180

Give it a safe, 181

181

and what do you think will happen now? 182

182

That's right. 183

183

This paragraph and this one, 184

184

which are the two paragraphs, 185

185

which have the first class are now red. 186

186

But this other paragraph, is of course not read, 187

187

because we didn't select it here. 188

188

Okay. 189

189

And so this CSS rule here does not apply to it. 190

190

Finally, that's also format or form. 191

191

So, let's check that out, 192

192

and so here we have this your name ID, right? 193

193

So we already know how to select based on the class name, 194

194

and so let's now learn how to select based on ID. 195

195

And it's very similar but instead of the dot, 196

196

we use the hash. 197

197

So hash, your name, 198

198

I think that was the ID, right? 199

199

Yes, your name. 200

200

So let's set a different background color here, 201

201

and I will again use this trick 202

202

where I can now set the color 203

203

using this pop up window, 204

204

so that's the trick I like to use. 205

205

Let's make it similar but a little bit darker. 206

206

Yes, that looks nice. 207

207

And we will make it even nicer in the next lecture, 208

208

after we learned about the box model, 209

209

but for now this looks good already. 210

210

So another one that we can use here 211

211

is the border property, 212

212

and the border property, 213

213

is so called shorthand property. 214

214

Because here we can set multiple values 215

215

for just one property. 216

216

So for the border we can set the width, 217

217

so basically the thickness of the border, 218

218

so let's say five pixels, 219

219

then we can set the style of the border, 220

220

and let's make it solid, 221

221

but we could also make it dotted or dashed, 222

222

but that would look a little bit like weird, 223

223

and then the color. 224

224

So until now, we have always used CSS color names, 225

225

or this RGB format like this, 226

226

But of course CSS also accepts RGB colors. 227

227

So for that we use the hash, 228

228

and then let's use 444 as this dark gray. 229

229

So you see it as dark gray, 230

230

but we could of course change it, 231

231

again using this pop up. 232

232

Okay. 233

233

But let's leave it here with the RGB code, 234

234

give it a save and here you see, 235

235

this nice border around the form. 236

236

Okay. 237

237

So again, this border is a shorthand property, 238

238

because it allows us to specify 239

239

multiple values here like this. 240

240

You can also notice that this property 241

241

is not inherited, right? 242

242

So unlike the font family or the font size. 243

243

'Cause if it was inherited, 244

244

then now all these Child Elements here 245

245

would have a five pixel border around them as well. 246

246

Right? 247

247

So this one and this one, 248

248

but they do not. 249

249

And while in this case it wouldn't make sense. 250

250

And so that's why border is not inherited. 251

251

Okay, and this would be enough for one lecture. 252

252

In the next one, we will learn about the box model, 253

253

so that we can then add some spacing here. 254

254

For example some spacing here inside of this box, 255

255

to give it some space here, 256

256

and also some space between these elements. 257

257

So stay tuned for that, 258

258

and see you in the next lecture.