Original subtitles

1 1

In this lecture, we're going to start 2

2

to write CSS for text formatting, so you can see 3

3

how CSS works. 4

4

It's really easy. 5

5

So, we'll jump right into the CSS file here, 6

6

to start write some code. 7

7

CSS is written in rules. 8

8

Each rule consists of a selector, and a declaration block. 9

9

To exemplify that, we'll start formatting the main heading. 10

10

So, H1 is the selector 11

11

because it will select all H1 elements. 12

12

This means that all H1 elements will be formatted 13

13

with the code we will write in the declaration block, 14

14

here in curly brackets. 15

15

So, I will start with the text color. 16

16

We will choose green in this example. 17

17

So, color... 18

18

And I just write, green 19

19

and then semicolon. 20

20

And you see the H1 element actually changed 21

21

its color to green. 22

22

So, to sum this up, 23

23

the property here is color, 24

24

and the value of the property here is the name, green. 25

25

Next, we want to change the text size, right? 26

26

So just write font size 27

27

and brackets gives us some suggestions as we write. 28

28

And now I will choose just 40 pixels. 29

29

You see, it changed? 30

30

Maybe 50 pixels. 31

31

No, 40 pixels was better. 32

32

You see we are already designing in the browser, 33

33

we're changing the values of the attributes, 34

34

and see which looks best. 35

35

Now suppose we wanted to change the font family. 36

36

Let's say, to Helvetica New. 37

37

Let's do that. 38

38

It's font family, right? 39

39

And now just type, Helvetica New. 40

40

And again, the H1 element changed its family. 41

41

Now if that font is not available on your system, 42

42

which is likely, if you're on windows. 43

43

Let's tell the browser to use Arial instead. 44

44

And to do so, we just write Arial after a comma here, 45

45

and then the semicolon, as before. 46

46

So Helvetica is the first choice, 47

47

and Arial is the second choice. 48

48

And now, let's go do the same thing for the H2 elements. 49

49

We want them to look the same, but a smaller font size. 50

50

So let's copy this H1 rule, 51

51

and paste it down here, and change this to H2. 52

52

Now these two look exactly the same. 53

53

The H1 looks exactly the same as the H2 54

54

elements down here. 55

55

Because for now we didn't change anything. 56

56

So let's change this here to, let's say, 25. 57

57

And that's a much better font size. 58

58

Now, we repeated some rules here. 59

59

You see? 60

60

The H1 and the H2 have the same color 61

61

and the same font family. 62

62

And we should actually avoid that, 63

63

because repeating code is bad practice. 64

64

Instead of repeating, we can just group 65

65

the common rules together. 66

66

This is something we will be doing a lot, 67

67

so just showing it to you. 68

68

So, write H1 and H2, 69

69

and the declaration block. 70

70

So everything that is common here, 71

71

I will cut and paste it up here. 72

72

And the font family is also the same for these two. 73

73

So, did you see what I did here? 74

74

Now I can delete this from here, 75

75

because it's already declared here 76

76

in the common declaration. 77

77

Now let's quickly format the paragraphs. 78

78

I will first go back to the HTML file 79

79

and delete this random text we put here, 80

80

just to see how strong, and emphasize and underline works. 81

81

As you can imagine, we'll use the P selector here. 82

82

And I'll show you another bracket secret here. 83

83

Instead of switching to the CSS file, 84

84

you can edit CSS right here in the HTML file. 85

85

Just click on the P tag, 86

86

and then hit Command+E, or Control+E. 87

87

Command+E. 88

88

And this opens a CSS editing section 89

89

right here in this file. 90

90

This is called Quick Edit. 91

91

Now hit new rule. 92

92

Now it automatically puts the P selector 93

93

and the declaration block here for us. 94

94

OK, I want the font size... 95

95

To, let's say, 18 pixels. 96

96

Great. 97

97

And let's justify this text. 98

98

And for that, we use a text align property 99

99

and set it to justify. 100

100

Very well. 101

101

We could also use right, center or left, 102

102

but we want to justify here. 103

103

I will also adjust the font family. 104

104

Do you remember how to do that? 105

105

It is font family 106

106

and it was Helvetica New 107

107

or as a second choice, Arial. 108

108

All right. 109

109

Maybe you noticed that the link text is still 110

110

in original format down here. 111

111

Now we could go ahead and format the A tag, right? 112

112

That will show you a much better solution. 113

113

So let's switch back to the CSS file. 114

114

And at the beginning, I will add a rule for the body. 115

115

And since everything is inside the body, 116

116

this rule will apply to everything visible on the web page. 117

117

So this means all elements that have no defined styles. 118

118

So this is like a global rule. 119

119

So, body, and that's it. 120

120

So first thing, I could go ahead and copy the font family 121

121

right into the body. 122

122

Like this. 123

123

OK, now you see that everything 124

124

has the Helvetica New font family. 125

125

Even the links, which I didn't even style yet. 126

126

If I delete this font family declaration down here 127

127

for the P element, 128

128

it still looks the same because we defined that everything 129

129

inside the body will have Helvetica New as font family. 130

130

And I will do the same thing with the font size. 131

131

We'll cut it here, 132

132

paste it here in the body. 133

133

So the paragraph is back to the 18 pixels, 134

134

but now the links are also at 18 pixels. 135

135

Now the reason this works, is because of CSS inheritance, 136

136

which is a very important concept in CSS. 137

137

We changed the font size in the body, 138

138

and so the elements that are inside of the body 139

139

inherit its style. 140

140

So child elements inherit the properties 141

141

from their parent elements. 142

142

Unless we overwrite their styles, 143

143

as we did right here in the H1 and H2. 144

144

Sorry, in the H2 declarations. 145

145

All right, I think this was a good introduction to CSS code. 146

146

So, congratulations. 147

147

You have created some nice, clean CSS code here 148

148

without repetitions and have made the text 149

149

look pretty good for now. 150

150

Isn't that great? 151

151

Now this was a lot of stuff to absorb, 152

152

so feel free to go through it again 153

153

and make sure you understand exactly what we did. 154

154

Because it's very important 155

155

that you understand everything from here 156

156

because from now we will use these concepts 157

157

for the next lectures.