All language subtitles for 025 Internal CSS-en

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 CSSA code in the same line as our body HMO elements.

Now in this lesson we're going to look at how we can implement CSSA 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 e-mail 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 age HTML element the I want to affect.

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

So in order to select and a shameful 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 CSSA 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 CSSA code that you're going to write is going to be something that

you want to affect.

So in this case is 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 affect.

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 all in line CSSA 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 Web site and we hit refresh you can see that that change

has worked.

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

Now sometimes when you're linking up CSSA with your email file you might have forgotten a closing tag.

Or you might have put it into the wrong place.

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

of reasons why your CSSA and you H.C. mail 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 all say it's background color.

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

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

writing the keyword wipes.

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 and styled.

So what does that mean.

Even before we've added any CSSA code to our index our age hemol there is already some default CSSA

being applied by your browser.

Now you can find out what the default yes s looks like.

BI again searching for it.

So let's search for browser default see SS and hit enter.

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

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 three schools you can see that all these elements have defaults CSSA values being

applied by your browser.

Now if we hit command F to find the horizontal rule then you can see all the default CSSA 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 a 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 Forder style see SS using MDA MT-NW 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 has the inset border style and this displays a border that

makes the element look imbedded 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 synapsis.

So we're going to say Borda style to none.

And if we hit 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 C Ss 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 the chrome

plugin I've got which is called pesticide and it highlights all of 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 or rectangle now has no size.

It's literally 0 pixels high.

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

So if you have to dev dogs don't EIEIO and you search for height.

The first one the blue icon here shows you that this is CSSA related documentation.

And if you click on it it takes you to this height CSSA 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 a horizontal rule a height let's say 2 pixels 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 C Ss.

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 CSSA 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 HVM l element then I could write image and I can change

its height to 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 Munjal to

understand why that is.

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

our Web site as it is.

Now if you go into dev docs and you go to the CSA section then you can look at all of these subsections

of how you can change the appearance of any element to 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.

And you see that this is 100 pixels wide.

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

a smartphone or whether 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 hard coded value such as hundred pixels.

You can also specify a percentage.

So you can say the width should be 30 percent 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 percent 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 MDI in the Boulder 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 Shawn has here which is just a few gray dots maybe three or four or maybe just 10 percent of

the page.

So pause the video and see if you can change the CFS 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 board style.

And one of those styles is the dotted style and empty and very helpfully.

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

So we already know that we can 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 say you've then you can see if I Zeeman

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 0 pixels high that only has a border.

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

zero pixels high.

Now if I refresh you can see that we've now got a horizontal rule that's 0 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 plies the same style to all four sides and that's pretty much what we're getting here.

Well getting that dotted style across all four sides.

Now when we specified two values then the first styles 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 the bottom.

Or you can also specify awful 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 with.

So if we say 20 pixels then the dots get a lot bigger whereas five pixels 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 gray and we're going to change the border height the border and then we're going to

change the border with two.

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

Oh that's absolutely massive.

And our border is still black.

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

And you can see that using our packages that we've installed an atom which is 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 10 pixels and that is now looking pretty similar to that

size maybe smaller still maybe 5 pixels.

That looks pretty similar.

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

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

pretty decent.

So we've now more or less implemented what we see over here simply by changing the CSR 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 wanted to.

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

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

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

hobby's header.

So that's kind of a lot of work especially if you end up with a web site 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 in line CSSA 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 CSA styles in that one location

then everything gets reflected across our Web site 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

CSX for our website.

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