Voiceover: 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.