So in the last lesson, we looked at how we're able to change the background color of the body of our
web page by simply injecting CSS code in the same line as our body HTML element.
Now in this lesson, we're going to look at how we can implement CSS code across the entire web page
so we won't have to copy and paste the style attribute each time we want to change a particular element.
So in order to do this, we're going to go into the head section of our HTML page and just below the
title
I'm going to add a style tag and I'm going to close it off as well.
Now, in between the style tag, I'm going to select the HTML element that I want to effect.
So let's first try this with our body element.
So in order to select an HTML tag, all you have to do is specify the name of the element you want to
change, which in this case is the body,
and then you're going to create a set of curly braces inside which you're going to write your CSS
code that will affect the style of the body element.
So let's hit, enter and give ourselves a bit more space.
And let's also indent this so that it's nested inside our style tag.
So here I can copy this line of code straight in like so.
So the essential elements of any CSS code that you're going to write is going to be something that
you want to affect,
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
about it,
so in this case, it's the background color property that we want to effect.
And finally, what is the value that you're going to change it to, which in this case is that nice color
from a color palette.
So I want to go ahead and just change this to a more obvious color.
So back to that pretty ugly, blue looking color that we had before.
And I'm going to delete our inline CSS here and make it go back to just a simple body tag just so that
we can confirm that our code is in fact working.
So now if we hit save and we go back to our website and we hit refresh, you can see that that change
has worked.
So we know that our CSS code is functional and it is working. Now
sometimes when you're linking up access with your HTML file, you might have forgotten a closing tag
or you might have put it into the wrong place.
For example, you accidentally had it inside the body instead of the head section.
And there's all sorts of reasons why your CSS and your HTML might not be linked together.
So it's always a good idea just to change something really, really dramatic so that you can just confirm
that the entire style tag is working and it's affecting the appearance of your webpage.
So now let's change this back to that prettier color that we had,
and let's check to make sure that it's working.
And the next thing that we're going to change is what we mentioned before.
We want to change the style of something that occurs repeatedly in our code, which is the horizontal
rule.
Now, instead of having to write the style attribute inside each and every single one of these tags,
what I can do is I can simply select it here by saying, Let's change the style of all the horizontal
rules and the property of the horizontal rule that I want
to change is also it's background color.
I don't like this greyish thing that we've got here, and I wanted it to just be pure white.
So I want it's background color to be simply just white, a CSS color that we can have access to just
by writing the keyword white.
So,
if we hit save and we head over to our website, you'll notice that nothing changes when you refresh
it.
It hasn't changed in its appearance at all.
So why is that?
Well, it's really, really important to realize that no website is completely unstyled.
So what does that mean?
Even before we've added any CSS code to our index.html,
there is already some default CSS being applied by your browser.
Now you can find out what the default CSS looks like by again searching for it.
So let's search for browser default CSS and hit enter.
And you can see that the first thing that we get is actually from w3schools, so I'm pretty agnostic
towards which sources we use
as long as they're useful and Google's always pretty good at picking out which is the most used
or rather most useful links and put them at the top of your searches.
So if we look inside w3schools, you can see that all these elements have default
CSS values being applied by your browser.
Now, if we hit Command F to find the horizontal rule, then you can see all the default CSS that it
has.
Now let me just talk you through what all of this does.
Now, the first thing is that it sets a margin for our horizontal rule and then it sets the type or the
style of our border to something called inset.
And then it gives the border a width of one pixel.
So what is this border style inset?
Well, let's take a look at border-style CSS using MDN.
And you can see that there's a whole bunch of different keywords that you can use
that changes the border style.
Now you'll also find the default one which is the inset border style, and this displays a border
that makes the element look embedded and it,
and if you look really closely at our border, it's kind of got that effect, right?
Even though it's not that nice looking.
That happens to be the default style that's specified by our browser.
So let's change it to something that we want.
Well, we actually don't really want a border.
All we want is just to have a single line without a border that is white in color,
right?
So we can change the border style to none
and we can override the default browser value by specifying a new value for it using CSS.
So we're going to set border-style
to none.
And if we save something surprising is going to happen when you refresh your website, your horizontal
rules have disappeared.
Now why is that?
Well, one of the most important concepts in learning CSS is realizing that pretty much everything
that exists on the web page are essentially just boxes.
And I can make those boxes appear
by using this chrome plugin I've got, which is called Pesticide. Now in order to get hold of this Pesticide
for Chrome extension,
head over to the course resources and you'll see a link that takes you directly to this extension on
the Chrome web store.
And this is an extension that we've published and all you have to do to get it is just click add to
Chrome, add Extension
and then final step that you need to do is to go here in the top right corner,
click on the three dots and then go to your chrome settings.
And then here I want you to go into extensions,
find the Pesticide for chrome extension
and I want to you to go to details. Inside details
make sure that this part "Allow access to file URLs" is turned on.
This is going to allow you to develop your website locally and to allow you to use Pesticide on your
local web sites.
Now finally, if you want to pin the Pesticide extension so that it shows up up here, click on the
extensions and then go ahead and click PIN.
So that it shows up right here, and then you're ready to go.
Now, back in your web site, if you click on the Pesticide button, then it will highlight all the
boxes that we have on screen.
Now, the horizontal rule is no exception.
It's also just a rectangle, and that rectangle used to have a border specified by this border style,
and that border had a width.
So it was one pixel on the top, one pixel on the bottom, one pixel on the left and one pixel on the
right.
Now, by getting rid of that border, by setting border style to none, our rectangle now has no size.
It's literally zero pixels high.
So in order to change the situation, we need to change some of the CSS for the box to give it a
height.
So if you head over to devdocs.io and you search for height, the first one, the blue icon
here shows you that this is CSS related documentation.
And if you click on it, it takes you to this height CSS property and this specifies the height of an
element, and you can read that as this thing changes the height of your box.
So if we now give our horizontal rule a height, let's say 2px, and we hit save, once we hit refresh,
our box now has an actual dimension.
And you can see that here as well.
You can see that that tiny box now has a little bit of height associated with it, whereas previously
had zero pixels in height because only the border had a dimension to it.
Now that height property isn't unique to just the horizontal rule, and this is the really interesting
thing about CSS.
Now, once you realize that essentially everything in your web page is just a whole bunch of boxes and
the properties of these boxes can be affected by changing the CSS code, then you can pretty much apply
the same rules or the same changes to any of these boxes you choose.
So, for example, if I wanted to select my image HTML element, then I could write image and I can
change its height too to something less extreme, maybe something like 20 pixels.
And if I hit save and refresh, then you'll see that the box for my image has now become super tiny,
and it is now only 20 pixels high.
Now, some of you might have tried to change the height of the body, and you might have gotten stuck
and wondered, why did it not work for the body?
Well, it's down to the fact that the body has some default values that prevents our changing the height,
and we're going to look at some of those things like display block in later lessons in this module to
understand why that is.
But for now, let's get rid of
this style that we played to the image and let's hit save and let's see our website as it is. Now,
if you go into devdocs and you go to the CSS section, then you can look at all of these subsections
of how you can change the appearance of any element.
So one of the things that you can change in addition to the height is actually the width of your element.
So we can go and say the width of our horizontal rule should only ever be 100 pixels and we hit save
and we refresh.
Then you see that this is 100 pixels wide.
Now, sometimes you might want the width to change depending on whether if you're viewing your website
on a smartphone or whether if you're viewing on a browser or if somebody is viewing it, maybe on an
iPad.
So you might not want to specify a straight up hardcoded value, such as 100 pixels.
You can also specify a percentage, so you can say the width should be 30% of the entire width
of the webpage.
Now, when you hit refresh, you can see that that line is much wider
when our entire page is wider, and when our page gets narrower, it always remains 30% of the
entire width.
So that's another way that you can specify a size.
Now, as a challenge, I want you to use this page on MDN, the border style property, and looking
at all the different types of border styles
I want you to be able to make this line similar to what Sean has here, which is just a few grey dots,
maybe three or four, or maybe just 10 percent of the page.
So pause the video and see if you can change the CSS in order to make that line look like this.
All right, so how did that go?
Now, in order to make our horizontal rule look similar to this, we know that we can change the border
style.
And one of those styles is the dotted style. And MDN very helpfully has this interactive box where
we can change the properties of these borders.
So we already know that we can't have a border to be set to none.
We're going to need it to be dotted.
But if we simply change this border style to
dotted and hit save,
then you can see if I zoom in
that, yes, I have a border that's dotted around my horizontal rule, but this looks nothing like what
he's got over here.
So how can we change this?
Well, if we only want to have a single border, then we have to turn our height down to zero again.
So we have a box that's 0px high that only have a border.
So you can either change the height to zero pixels or delete it outright, and that will also make it
0px high.
Now, if I refresh, you can see that we've now got a horizontal rule that's zero pixels high
and we've got a border around it.
So if we have a look here, the syntax section, it says that when one value for border-style is specified,
then it applies the same style to all four sites.
And that's pretty much what we're getting here.
We're getting that dotted style across all four sides.
Now we specified two values,
then the first style is applied to the top and bottom borders, and the second to the left and right.
When three values are specified, then the first one applies to the top,
the second to the left and the right,
and the third to the bottom.
Or, you can also specify all four values of all four sides.
So knowing this, we can actually change our border style to dotted so that gets applied to the top
border,
and then we can specify none for the rest of the borders.
And if we hit save, we go back over here, we refresh,
you see that we now only have the top border showing. Now an alternative way that you might have worked
out is by simply changing the border top style.
So we could say that the entire border-style is none, but the border-top style is going to be dotted.
And if you hit save and you refresh, you can see that it's exactly the same effect because we're specifying
something that is more specific than this property, we're affecting only this particular thing.
And now our background color is redundant because our main box has no background because it has no height.
So we can get rid of that. Now in order to make this line look more like this line,
we have to change the size of the dots
and also the color of the dots.
And you can see that we can change the color by simply changing the border-color property. So we can
change it to gray, and we can also change the border width.
So if we say 20px, then the dots get a lot bigger, whereas 5px
you only get very tiny dots.
So let's go over here and add some more properties that we want to change.
So we're going to change the border color to grey.
And we're going to change the
border-height... and then we're going to change the border-width to let's try 20px. And
let's see what that now looks like.
Ooh, that's absolutely massive and our border is still black.
So what's going on here? Ahh... it's because we have a typo in the word grey.
And you can see that using our packages that we've installed in Atom when it's actually a valid color
code, it gets highlighted in a different color compared to something that doesn't exist.
So let's change that down to maybe let's try 10px, and that is now looking pretty similar to that
size,
maybe smaller, still, maybe 5px.
Yeah.
That looks pretty similar, and we can change it down to be a lot smaller in width as well.
So let's say maybe put the width as maybe 10% or even smaller, maybe 5%.
Yeah, that looks pretty decent.
So we've now more or less implemented what we see over here simply by changing the CSS style of our
horizontal rule.
Now there's still a bit of a problem, though, because we've changed our horizontal rule to look exactly
the way that we want it to.
And we, of course, want this to be consistent across our website, and we also want our background
color to carry over to all our other web pages on our website.
But if we look inside my hobbies or contact me, it still looks exactly the same way as it did before.
And we're going to have to copy this entire style section over to the contact me header, as well as
the hobbies header.
So that's kind of a lot of work, especially if you end up with a website with, you know, 200 pages,
then it's not a good idea to have to copy this over and change it in every single place.
This might be easier than using inline CSS, as we did in the last lesson, but it's still quite
repetitive.
What we really want is to have a single location where when we change the CSS styles in that one
location, then everything gets reflected across our website in all of the pages.
So that is what we're going to learn about in the next lesson where we look into how we can create external
CSS for our website.
So stay tuned and I will see you in the next lesson.