Original subtitles

0 So in the last lesson we looked at how we're able to change the background color of the body of our 1

web page by simply injecting CSS code in the same line as our body HTML element. 2

Now in this lesson we're going to look at how we can implement CSS code across the entire web page 3

so we won't have to copy and paste the style attribute each time we want to change a particular element. 4

So in order to do this we're going to go into the head section of our HTML page and just below the 5

title, 6

I'm going to add a style tag and I'm going to close it off as well. 7

Now in between the style tag I'm going to select the HTML element that I want to affect. 8

So let's first try this with our body element. 9

So in order to select an HTML tag all you have to do is specify the name of the element you want 10

to change which in this case is the body. 11

And then you're going to create a set of curly braces inside which you're going to write your CSS code 12

that will affect the style of the body element. 13

So let's hit enter and give ourselves a bit more space. 14

And let's also indent this so that it's nested inside our style tag. 15

So here I can copy this line of code straight in like so. 16

So the essential elements of any CSS code that you're going to write is going to be something that 17

you want to affect. 18

So in this case it’s the body of the page that we want to change and then it's what you want to change 19

about it. 20

So in this case it's the background color property that we want to affect. 21

And finally what is the value that you're going to change it to which in this case is that nice color 22

from our color palette. 23

So I want to go ahead and just change this to a more obvious color. 24

So back to that pretty ugly blue looking color that we had before. 25

And I'm going to delete our inline CSS here and make it go back to just a simple body tag just so 26

that we can confirm that our code is in fact working. 27

So now if we hit save and we go back to our Web site and we hit refresh you can see that that change 28

has worked. 29

So we know that our CSS code is functional and it is working. 30

Now sometimes when you're linking up CSS with your html file you might have forgotten a closing tag 31

or you might have put it into the wrong place. 32

For example you accidently had it inside the body instead of the head section and there's all sorts 33

of reasons why your CSS and your HTML might not be linked together. 34

So it's always a good idea just to change something really really dramatic so that you can just confirm 35

that the entire style tag is working and it's affecting the appearance of your webpage. 36

So now let's change this back to that prettier color that we had. 37

And let's check to make sure that it's working. 38

And the next thing that we're going to change is what we mentioned before, we want to change the style 39

of something that occurs repeatedly in our code which is the horizontal rule. 40

Now instead of having to write the style attribute inside each and every single one of these tags what 41

I can do is I can simply select it here by saying let's change the style of all the horizontal rules 42

and the property of the horizontal rule that I want to change is also it's background color. 43

I don't like this gray ish thing that we've got here and I want it to just be pure white. 44

So I want it's background color to be simply just white a CSS color that we can have access to just by 45

writing the keyword white. 46

So if we hit save and we head over to our website you'll notice that nothing changes when you refresh 47

it. 48

It hasn't changed in its appearance at all. 49

So why is that? Well, it's really really important to realize that no website is completely unstyled. 50

So what does that mean? 51

Even before we've added any CSS code to our index.html, there is already some default CSS 52

being applied by your browser. 53

Now you can find out what the default CSS looks like 54

by again searching for it. 55

So let's search for browser default CSS and hit enter. 56

And you can see that the first thing that we get is actually from W3 Schools. 57

So I'm pretty agnostic towards which sources we use as long as they're useful. 58

And Google's always pretty good at picking out which is the most used or rather most useful links and 59

put them at the top of your searches. 60

So if we look inside W3 Schools you can see that all these elements have default CSS values being 61

applied by your browser. 62

Now if we hit command F to find the horizontal rule then you can see all the default CSS that it has. 63

Now let me just talk you through what all of this does. 64

Now the first thing is that it sets a margin for a horizontal rule and then it sets the type or the 65

style of our border to something called inset. 66

And then it gives the border a width of one pixel. 67

So what is this border style inset. 68

Well let's take a look at border style CSS using MDN and you can see that there's a whole bunch 69

of different keywords that you can use that changes the border style. 70

Now you'll also find the default one which has the inset border style and this displays a border that 71

makes the element look embedded and if you look really closely at our border it's kind of got 72

that effect right. 73

Even though it's not that nice looking that happens to be the default style that's specified by our 74

browser. 75

So let's change it to something that we want. 76

Well we actually don't really want a border. 77

All we want is just to have a single line without a border that is white in color. 78

Right. 79

So we can change the border style to none and we can override the default browser value by specifying 80

a new value for it using CSS. 81

So we're going to set border style to none. 82

And if we hit save something surprising is going to happen when you refresh your website. 83

Your horizontal rules have disappeared. 84

Now why is that? 85

Well one of the most important concepts in learning CSS is realizing that pretty much everything that 86

exists on the web page are essentially just boxes and I can make those boxes appear by using the Chrome 87

plugin I've got which is called pesticide and it highlights all of the boxes that we have on screen. 88

Now the horizontal rule is no exception. 89

It's also just a rectangle and that rectangle used to have a border specified by this border style and 90

that border had a width. 91

So it was one pixel on the top one pixel on the bottom one pixel on the left and one pixel on the right. 92

Now by getting rid of that border by setting border style to none our rectangle now has no size. 93

It's literally 0 pixels high. 94

So in order to change this situation we need to change some of the CSS for the box to give it a height. 95

So if you head over to devdocs.io and you search for height, 96

the first one, the blue icon here, shows you that this is CSS related documentation. 97

And if you click on it it takes you to this height CSS property. 98

And this specifies the height of an element and you can read that as this thing changes the height of 99

your box. 100

So if we now give a horizontal rule a height let's say 2 pixels and we hit save. 101

Once we hit refresh our box now has an actual dimension and you can see that here as well you can see 102

that that tiny box now has a little bit of height associated with it whereas previously had zero pixels 103

in height because only the border had a dimension to it. 104

Now that height property isn't unique to just the horizontal rule. 105

And this is the really interesting thing about CSS. 106

Now once you realize that essentially everything in your web page is just a whole bunch of boxes and 107

the properties of these boxes can be affected by changing the CSS code, 108

then you can pretty much apply the same rules or the same changes to any of these boxes you choose. 109

So for example if I wanted to select my image HTML element, then I could write img and I can change 110

its height to something less extreme maybe something like 20 pixels and if I hit save and refresh 111

then you'll see that the box for my image has now become super tiny and it is now only 20 pixels high. 112

Now some of you might have tried to change the height of the body and you might have gotten stuck and 113

wondered why did it not work for the body. 114

Well it's down to the fact that the body has some default values that prevents our changing the height 115

and we're going to look at some of those things like display block in later lessons in this module to 116

understand why that is. 117

But for now let's get rid of this style that we apply to the image and let's hit save and let's see 118

our web site as it is. 119

Now if you go into Dev Docs and you go to the CSS section, then you can look at all of these subsections 120

of how you can change the appearance of any element. One of the things that you can change 121

in addition to the height is actually the width of your element. 122

So we can go and say the width of our horizontal rule should only ever be 100 pixels and we hit save 123

and we refresh. 124

And you see that this is 100 pixels wide. 125

Now sometimes you might want the width to change depending on whether you're viewing your web site on 126

a smartphone or whether you're viewing on a browser or if somebody is viewing it maybe on an iPad. 127

So you might not want to specify a straight up hard coded value such as hundred pixels. 128

You can also specify a percentage. 129

So you can say the width should be 30 percent of the entire width of the web page. 130

Now when you hit refresh you can see that that line is much wider when our entire page is wider. 131

And when our page gets narrower it always remains 30 percent of the entire width. 132

So that's another way that you can specify a size. 133

Now as a challenge I want you to use this page on MDN, the border style property, 134

and looking at all the different types of border styles I want you to be able to make this line similar 135

to what Sean has here, which is just a few gray dots, maybe three or four or maybe just 10 percent of 136

the page. 137

So pause the video and see if you can change the CSS in order to make that line look like this. 138

All right. 139

So how did that go? 140

Now in order to make our horizontal rule look similar to this we know that we can change the border style. 141

And one of those styles is the dotted style and MDN very helpfully 142

has this interactive box where we can change the properties of these borders. 143

So we already know that we can have a border to be set to none. 144

We're going to need it to be dotted. 145

But if we simply change this border style to dotted and hit save then you can see if I zoom in 146

that yes I have a border that's dotted around my horizontal rule but this looks nothing like what he's 147

got over here. 148

So how can we change this? 149

Well if we only want to have a single border then we have to turn our height down to zero again. 150

So we have a box that's 0 pixels high that only has a border. 151

So you can either change the height to zero pixels or delete it outright and that will also make it 152

zero pixels high. 153

Now if I refresh you can see that we've now got a horizontal rule that's 0 pixels high. 154

And we've got a border around it. 155

So if we have a look here the syntax section it says that when one value for border style is specified 156

then it applies the same style to all four sides and that's pretty much what we're getting here. 157

We’re getting that dotted style across all four sides. 158

Now when we specified two values then the first styles applied to the top and bottom borders and the 159

second to the left and right when three values are specified then the first one applies to the top the 160

second to the left and the right and the third the bottom. 161

Or you can also specify all four values of all four sides. 162

So knowing this we can actually change our border style to dotted. 163

So that gets applied to the top border. 164

And then we can specify none for the rest of the borders. 165

And if we hit save, we go back over here, we refresh, 166

you see that we now only have the top border showing. 167

Now an alternative way that you might have worked out is by simply changing the border top style so 168

we could say that the entire border style is none but the border top style is going to be dotted and 169

if you hit save and you refresh you can see that it's exactly the same effect. 170

Because we're specifying something that is more specific than this property we're affecting only this 171

particular thing. 172

And now our background color is redundant because our main box has no background because it has no height. 173

So we can get rid of that. 174

Now in order to make this line look more like this line we have to change the size of the dots and also 175

the color of the dots and you can see that we can change the color by simply changing the border color 176

property so we can change it to grey and we can also change the border width. 177

So if we say 20 pixels then the dots get a lot bigger whereas five pixels you only get very tiny dots. 178

So let's go over here and add some more properties that we want to change so we're going to change the 179

border color to grey and we're going to change the border height the border and then we're going to 180

change the border width to 181

let’s try 20 pixels and let's see what that now looks like. 182

Oh that's absolutely massive. 183

And our border is still black. 184

So what's going on here is because we have a typo in the word grey. 185

And you can see that using our packages that we've installed in Atom, when it’s actually a valid color 186

code, 187

it gets highlighted in a different color compared to something that doesn't exist. 188

So let's change that down to maybe let's try 10 pixels and that is now looking pretty similar to that 189

size maybe smaller still maybe 5 pixels. 190

That looks pretty similar. 191

And we can change it down to be a lot smaller in width as well. 192

So let's say maybe put the width as maybe 10 percent or even smaller maybe 5 percent yeah that looks 193

pretty decent. 194

So we've now more or less implemented what we see over here simply by changing the CSS style of our 195

horizontal rule. 196

Now there's still a bit of a problem though because we've changed our horizontal rule to look exactly 197

the way that we wanted to. 198

And we of course want this to be consistent across our web site. 199

And we also want our background color to carry over to all our other web pages on our web site. 200

But if we look inside My Hobbies or Contact Me it still looks exactly the same way as it did before. 201

And we're going to have to copy this entire style section over to the Contact Me header as well as the 202

Hobbies header. 203

So that's kind of a lot of work especially if you end up with a web site with you know 200 pages then 204

it's not a good idea to have to copy this over and change it in every single place. 205

This might be easier than using inline CSS as we did in the last lesson but it's still quite repetitive. 206

What we really want is to have a single location where when we change the CSS styles in that one location 207

then everything gets reflected across our web site in all of the pages. 208

So that is what we're going to learn about in the next lesson where we look into how we can create external 209

CSS for our web site. 210

So stay tuned and I will see you in the next lesson.