Placeholder Image

Subtitles section Play video

  • Please remember that the complete information for the class that you are about to view is at Eli, the computer guy dot com.

  • Not only do we have our videos there, but we have part lists, diagrams, pictures and even complete code examples.

  • So if you are watching this video and you want more information, please go to Eli the computer guy dot com.

  • Welcome back.

  • As you know, I am Eli the computer guy.

  • And in today's class, I'm going be showing you how to add your C S s formatting onto an HTML document.

  • So CSS is very nice because it is a way that you are able to basically format eight email text and be able to reuse that formatting on multiple different pages.

  • So this could be very important.

  • Imagine something like a content management system, something like a WordPress site.

  • And so if somebody's writing, blawg posts right, that one website may have hundreds or thousands of different HTML pages, and you want the text to all look the same across all of those pages.

  • If you had to simply write out the CSS on each individual page, then if you ever needed to modify the CSS.

  • That means you'd have to go back to 100 or 1000 different pages and be able to mock a man, really modify it in all those different pages.

  • Well, one of the nice things about CSS is you can have something called an external style sheet.

  • So basically within your HTML document within the head of the female dog document, you can reference an external style sheet where all your CSS styling is.

  • And then everything that is printed out in your HTML document in the Web browser will use the formatting from that external CSS style sheet.

  • So that's one very useful things that CSS offers you.

  • But it is important, understand, when you're going to be interacting with CSS.

  • There's actually three different ways in order to bring the CSS styling into your Web page.

  • The first way that a lot of people know about is again that external style sheet.

  • You have a style sheet where all of the CSS is written out, and then simply whenever the Web pages displayed, the Web browser will go to that style sheet C with the H one tagged the image tag.

  • All those things are supposed to look like, and then that's what will be presented to the end user.

  • But you also can actually add C S s to the head of an HTML documents.

  • You can use something called the style tag and actually add a whole bunch of CSS to the head of the document.

  • Uh, let's say you have a web page that is only gonna be one a single web page.

  • You don't want to deal with an external style sheet for For whatever reason, you can actually dump it all into the head beyond that.

  • The third way you can add CSS to your HTML document is, in fact, in a line, eh?

  • So it looks a lot like the old html four formatting.

  • Look where you do whatever tag you're gonna D'oh the p tag VH one tag Whatever else, then you do space, and right after that, you do style equals.

  • And then you put in all of the properties and all the CSS values that you want for whatever goes between between the tags that you're creating on, then that will form at the the HTML that way s oh, there are three different ways that you were able to add CSS to your document.

  • Now it is important to understand this, and it's important to also understand that you can use all three ways of doing CSS actually at the same time.

  • So let's say you want certain defaults for for your website, but you don't want to define every single thing about how far or how text will be formatted on your website.

  • So let's say you want all of the text on your website to be a certain font, but you're not necessarily going to say what color it should be or something like that.

  • What you could actually do is you could have an external style sheet, and all that external stress style she will do is define what the fonts are for whatever gonna be printing out on your came out documents.

  • So Miranda or aerial or times new Roman or whatever else.

  • So you may just simply say I wanted to be this font.

  • Maybe I wanted to be the size and leave it at that.

  • Then what you can do is then you can add CSS to the head of your page to possibly flesh out what you've already put in that external style sheet.

  • So for this particular patient, not only do I want everything coming in from that external style sheet, but I also want to text to be this color.

  • And I wanted to have this border so on and so forth.

  • And then one of the things that you could do is then in a line.

  • Then what happens is you can actually add additional C S s.

  • So you can say OK, this text that is Ariel from me at the external style she that is, you know, 40 pixels from the external style sheet.

  • That is whatever color I said in the head of this document.

  • Now here I wanted to be underlying so in the line.

  • I can then add that I want this particular text to be underlined and all of those things come together and now the text will be formatted.

  • It will be Ariel.

  • It'll be 40.

  • It'll be a certain color and it will be underlying.

  • They all come together to give you that formatting so you can use all three different types of actually being able to bring CSS end.

  • Now it is important.

  • Understand that the lower levels of CSS can overwrite the higher levels of C.

  • S s.

  • So let's say, in the external style sheet you set colors.

  • You set certain values that, for whatever reason, you want to negate down at the line level.

  • So literally what you could do is you would basically overwrite those values at the line level.

  • So let's say you put the font as again Ariel in that external style sheet.

  • Well, then in line.

  • You could actually set the font for the tag in that particular line as New Times, Roman.

  • And that would actually overwrite what you put into the external style sheet.

  • So basically, the things on the lowest levels trump everything else.

  • So whatever you put in line that will trump what's in the head of the document.

  • And that will trump what's in the external style sheet.

  • If you put something in the head of the document that will trump what's in the external style sheet, so basically having an idea of how this works could be pretty valuable, and so this is what I'm going to be explaining to you how to do today.

  • I'm gonna be showing you how to add your CSS into your HTML documents.

  • As with everything in this world, it's really simple as long as you type out everything properly and you don't think fat finger anything.

  • So here we are at my demonstration computer again, I'm using a Mac book pro, and I'm using text edit in order to write out the CSS again for a CSS and HTML.

  • All you need is an asking text editor.

  • So if you're in the Windows world, you can use no pad again in the Max Macro.

  • Deacon just texted him.

  • In the Lenox world, you can use G edit them nano or whatever else again.

  • I just do this because I think it's I think it shows people how easy it is to be able to write this coat.

  • Now I'm gonna be showing you a lot of things today.

  • So if you get confused, please do a reference of the examples.

  • Basically, all of these examples will be printed at Eli, the computer guy dot com.

  • So if you get confused, even you don't get confused, I would highly recommend you actually take a look at the at.

  • The examples actually printed out Eli, the computer guy dot com Then I think everything will make a lot of sense to you again.

  • I'm having to dump a lot of text at you.

  • And if you print things improperly, it won't work.

  • So actually, being able to see this when you're typing out your code, I think will be valuable.

  • But let's walk through this s o.

  • The first thing that I'm going to show you is an example of inline C s s.

  • So this is where we put CSS in actual line.

  • So again we're here.

  • We're calling the H one tag, and then we're saying what this style should be S o for this.

  • I've simply called this in line CSS dot html So it is important with us.

  • This is a dot HTM or dot html document.

  • So when we open this up in a web browser, it'll actually just simply open up again as an HTML document.

  • So here what we have again, I've stripped out all the other tags like I do in a lot of projects so that you can simply see what I'm showing you again.

  • If you're actually writing a normal document, you should you should write everything out properly, but here we go.

  • So we have the H one tag, then what we're going to do for the inline C S s styling is we're going to say style equals and they're going to double quotation marks on.

  • Then what we're going to do is we're going to put in the properties and the values of how we want this text within the H one tag to be styled eso for this, we're going to say text hyphen, a line colon, a center.

  • So we want to align this text to the center.

  • And then again, we going to do semi colon.

  • So we remember that delimited eliminators.

  • Whenever you're dealing with CSS, make sure to put that semi colon end or things won't work.

  • And so that's the first.

  • So that's that's the first value and property.

  • Then we want the colors on with the color to be read.

  • So color colon red and then again, even for the end one, we're going to do the semi colon.

  • Then we're going to close the double quotation marks.

  • Then we're going to close that side of the tag.

  • We're going to print out the text that we want to print out and then we're going to close the H one tag.

  • We go over here, we find in line CSS dot html and we double click on it.

  • And there we go.

  • That's basically all there is to it.

  • So this is in line CSS again.

  • Text hyphen, Align to the center so we can see It's a line in the centre.

  • Color is red.

  • We can see that it's red.

  • So that is how you do inline C s s.

  • So for a lot of you folks out there, if you're not actually building websites, let's say you're doing things like maintaining WordPress blog's or whatever.

  • This may be how you interact with a lot of CSS, right?

  • So you most likely if you're not actually administering the full sight or doing a lot of work on the full sight.

  • Ah, lot of times you're not actually gonna be modifying the external style sheet that you know that's gonna be the master of style sheet.

  • So a lot of times, what you're going to do if you just need to do simple tweaks on a page again on a block post or on a page, a lot of times.

  • The way that you're going to do that is simply with this in line CSS suits.

  • If we do style equals double quotation, then you're going to put the values and such here, that you're going to close the double quotation.

  • And then that is what's going to show up for the HTML document.

  • Now, from there, let's go and actually take a look at what's in the head.

  • So if we go to the on page C S s.

  • So this is when you do see s CSS and all of the CSS is actually in the head of the document.

  • So if we go down here and we actually look at when the HTML text is printed out, we can see that these air clean tags So it's simply the h one.

  • Tag it simply p tag.

  • There's no additional CSS down here.

  • The reason is is because these tags are referencing what you have put in the head of the document.

  • So this is on Page C.

  • S S s.

  • So you open up the HTML here, You then open up the head tag.

  • You then open up the style tag.

  • So basically, what is between the opening and the closing of the style tag.

  • This is This is where you're gonna put your CSS formatting.

  • It's over here.

  • What I've done is I've said the body tag.

  • So this is called the selector.

  • But basically the body tag.

  • I want the background color, background, hyphen color.

  • I want that to be a yellow.

  • Then for the h one.

  • I want that color to be orange again.

  • Do you remember the delimit er that I want to align h one to center?

  • Then I want to go down to the P.

  • I simply won't make the fought size here.

  • I'm gonna make the font size here 30 pixels again.

  • Use the dilemma, ter, that I'm going to close the squiggly brackets and then I'm going to close the style tag that I'll close the head tag.

  • I'll open the body tag.

  • And so that body tag is going to take on the attributes that I coded up here.

  • Then I'm going to print out a tch one on paid CSS and then I'm going to print out with P.

  • Is an example of on pay CSS.

  • I'm going close the body.

  • I'm going to close the HTML So we go over and again, we just simply double click on on Page C S s.

  • So again, this is on page C s s dot html.

  • So this is still on a T.

  • M or HTML file.

  • If we double click on this apps what clicked on the wrong one?

  • If we double click on this, then we can see.

  • Okay, so on page C.

  • S s, we can see the background is yellow.

  • We can see that the H one text it is orange on.

  • It is centered on the page and we can see that the p the p tag that is in that like that 40 pixels or that 30 pixels that I showed you before So we can go here.

  • Let me just bring this up again.

  • And so again, life we take a look.

  • So we have the style.

  • So we create the body here body background, hyphen color is yellow so you can see the background color is in fact, yellow.

  • We go to the H one tag color is orange, so we can see that the color for the H one tag is orange text hyphen.

  • A line is center and we can see that it's centered the P tag.

  • Then we can see here.

  • We simply want the font size for the P tag to be 30 pixels.

  • And as you can see, you get the idea that it's a lot larger than it normally should be.

  • S O, that's 30 pixels.

  • So this is an example of the on page CSS now past this.

  • Then we get to the interesting thing of using Eggen external style.

  • Shoot.

  • So my clothes this close, this actually close this and then we're going to open up to documents, actually, so we're going to open up the external style the external sheet dot html file.

  • So this is the document that were actually going to be opening up in a Web browser?

  • Uh, what we're going to see here is we're going to open up the HTML tags like we normally do.

  • We're going to open up the head tag like we normally d'oh.

  • But then here.

  • What we're going to dio is we're actually going to a reference and external style sheet.

  • So we're going to say is four hour CSS go over to this different file, so we do link.

  • Relation equals, and we're going to say that is a style sheet.

  • Then we're going to say Herath equals double quotation.

  • And then whatever the name or whatever the path to that style sheet iss So this style she is actually sitting in the exact same directory as this HTML document, so I could just reference it by style dot CSS.

  • But if it's in a different folder, it's up.

  • A couple levels are down a couple of levels or whatever else.

  • Basically, you simply put in the path to that CSS style sheet there, uh, and basically passed that we go down, we closed the head.

  • We open the body again, we're going to have an H one tag.

  • This is H one right at the P tag.

  • This is bold.

  • A text we're going to close the body were in close the HTML.

  • So you'll notice here again.

  • There is.

  • There is no additional CSS and you'll also notice when you do it like this.

  • This page is very clean because you don't have all of the CSS kind of the being a visual distraction.

  • So we can do then is we go over, we could take a look at that style dot CSS page.

  • You go take a look at this.

  • And so with this what you're going to d'oh as you're going Thio, create a dot C s S files.

  • If you're gonna create a style sheet, it has to be our neither should be.

  • You know, it should end with a dot CSS.

  • So the front of it could be whatever name you want.

  • Billie Bo Bob.

  • Nazi SS, right, my style dot CSS front page Got CSS again.

  • Remember, For one website you might have multiple external CSS sheets for different for different parts of the website.

  • So let's say you're doing a newspaper website essentially and so the sports section should have a certain look and feel and the news section should have a certain look and feel and the opinion section should have a certain look and feel.

  • So what you might do there is you might have news have its own CSS file.

  • You may have sports have its own CSS, and you may have opinion, have it C s own CSS.

  • So this may be you may actually end up having multiple external CSS files that you may have to manually modify now and then.

  • But But again, you can have different ones you could have sent.

  • Simply news dot C s s, you know, again sports Nazi SS.

  • Whatever.

  • House.

  • So here all you're going to do is you're going to plug in all of the CSS.

  • So, for here, all I've done is 81 MP, cause I don't wanna make this too complicated, but I'm gonna have the body I could have aged.

  • Wanna could have 8 to 8 h There have all the way down to 86.

  • I could have p I could have image or could have tables.

  • I could have all kinds of stuff here and lots of really cool stuff.

  • We'll talk about later, right?

  • So this CSS document could theoretically be a massive write this that this theoretically could be 1000 lines of CSS, especially with, you know, every selector, every tag you put in multiple attributes.

  • This can get very large very quick.

  • So just understand that what I am showing you now again simply h one n p.

  • This is as I've shown you before.

  • Open the squiggly.

  • We're going to do color Colon.

  • We're gonna make the color blue text alignment is going to be center.

  • We close the squiggling p open the squiggly fault.

  • Wait, is going to be bold.

  • Uh, we close again.

  • We do the deal emitter.

  • Then we close the squiggles, and that's all you do again.

  • You don't have to do any additional tags.

  • You don't have to do any additional things here.

  • Basically, all you do is you simply point out that CSS information here and from that, um, all we're going to do is we're going to go to that external sheet, not html, and want to simply double click this and my Web browser.

  • And now we can see you know, this is a tch one.

  • So it is blue and it is centered.

  • This is bold a text.

  • So that is that bold attacks, right?

  • So basically, that's we're looking at here.

  • So this is the H one on.

  • This is the P, as I've created.

  • And so that's how an external style sheet works.

  • Now, from that, lets go and actually just take a look at a mixed source, C s S s.

  • So let's open up the style CSS again.

  • We're going to open this up again with text at it.

  • We're gonna have this here and then we're going to open up the mixed source CSS dot html.

  • So basically, with this, what we're going to be doing is we're going to be bringing in.

  • We're going to be bringing in values from the external style.

  • She and we're going to be putting things in the head and we're gonna be putting things in line, right?

  • We've already seen the style sheet.

  • This is the exact same style sheet we just used H one p color blue textile line center fought.

  • Wait, Bull.

  • Yeah, whatever.

  • Us.

  • Okay, So here's what we're going to do is again we're going to reference multiple different ways of being able to bring in CSS within one single document.

  • So here, going to open up the html, we're going to open up the head, and then we are going to link to that style sheet that we created, just like in the previous example Link.

  • A relation is a style sheet.

  • HRH f equals and again you do the path to the style sheet, the name of the style sheet and whatever the path is.

  • So if it's up a couple folders down a couple folders in an entirely different server.

  • Whatever you put that path in there, Um oh, and then do make sure you put this little forward slash here, then we're going to go down and we're going to add some additional styling for this particular page.

  • So for this, we're gonna say P and we're gonna do text decoration, colon.

  • And so we're going to make it underlies, right?

  • So it's gonna be underlined.

  • So not only is the text going to be bold in, but it's also going to be underlined.

  • Then we're going to do is we're gonna then close the style tag here or not Closed head.

  • We're going to go down the body and then from here, what?

  • We're going to d'oh as we're going to add some ends in line styling here.

  • So we're going to call that p tag.

  • So the P, the P is already bold from the external style sheet, and then we've underlined it within the head of this particular HTML page.

  • And now what we're going to say is we also want it to be aligned to the center, so all of these things will come together.

  • So this is text created from multiple C.

  • S s sources.

  • I go over Oh, when I double click on the mixed source CSS dot html, What we can see is Okay, so it's bold ID that comes from the external style sheep.

  • It's underlined and it is now centered.

  • Now one of things I do want to show you is again things that are on the lower level again in the line.

  • Trump's things like what's on the external style sheet.

  • So we take a look at the external style sheep we can see fought Wait, Cole and bold.

  • So what I could do is I could simply do control, see, And I could go here.

  • And so I'm saying in line I wanted to be centered and Space Control V.

  • I wanted to be set say normal.

  • So now what this is going to be do is is going to make the fought wait normal.

  • And so even though this has been defined in the external style sheet since I'm doing this in line in the end line is going to trump what's in the external Stop.

  • She save that.

  • I go up here and I do refresh, and now you can see it's normal.

  • The reason that it's normal is even though it was set bold and the external style sheet down here in a line, I have said it to normal and there you go.

  • So these are the basic ways that you can add C.

  • S s to your HTML document again.

  • You can use an external style sheet.

  • You can do it in the head of the document, or you can do it in line.

  • New remember and line trumps the head.

  • It trumps the external style sheet head trumps the external style sheet and in the external style sheet again, that's a good way.

  • You can create a default styling for all of your documents and simply have all of your HTML documents reference back to that one style sheet.

  • So there you go now, and you have a basic understanding of how to bring c.

  • S s into your a female documents.

  • On a previous class, I showed you how to do the basic syntax of using the selector, having the property, having the value again, using the squiggly and using the DL emitters where need be.

  • And so now I have been showed you how to actually bring in that CSS into your came out documents.

  • So again you can have that external style sheet that again is going to be a very valuable thing if you're going to have a Web page with multiple different pages on it.

  • Basically, all of those pages can go back and simply reference that one style sheet.

  • You modify something in that style.

  • She all 10,000 pages are modified auto magically.

  • You don't have to go to every single one of those pages to modify things past that again.

  • If you want to do styling for a document, for whatever reason, let's say you're not gonna have a lot of different pages.

  • You want everything to be in one document.

  • You can put all the CSS in the head of your document.

  • It makes a big, ugly Masti document, but you can do it works.

  • It's functional, I would recommend for most people.

  • Don't do that.

  • Maybe do like a couple of tweaks again if you if you want the text on a particular page to be printed in a particular color, like maybe doing that in the head makes sense right.

  • But in general, I would argue you should probably have that external style sheet in order to deal with things on the page on then pass that you could do in line.

  • And I would argue for most people again, unless you're actually fully building websites.

  • You know, for most people that are modifying blawg posts, you know, sometimes they go from a wheezy wig editor.

  • Do they have to go down the HTML and tweak things most of time?

  • They're gonna be modifying things basically using inline CSS.

  • Oh, I want this text to be bold.

  • Okay, let me let me do the weight of bull.

  • Oh, I needed to be centered.

  • Let me let me make it to be centered.

  • So I would actually argue for most people.

  • They're gonna be using CSS in line, even though again, if you're going be building websites, especially large websites, you would want to be using that external style.

  • She So this is one of those things you just get in there.

  • Well, you play with again with all this stuff.

  • You have the properties.

  • You have the values again to be clear.

  • This is paint by numbers, tags or selectors.

  • As they're called.

  • They have certain properties.

  • Those properties have certain values again.

  • You just pick and choose and you type things out.

  • You're not.

  • You're not being creative at this point in time, you know, pulling completely new whatever is, you know, properties out of your butt or anything like that.

  • You basically it's paint by numbers.

  • This is a selector.

  • This is These are the options that are available to you.

  • This is what you do.

  • Go on from there.

  • So I hope that makes it makes a little sense about basically how CSS works.

  • So as always, I enjoy doing this class and look forward to see what the next one.

  • If you like the content that I create, please think about going to align the computer guy dot com and becoming a member or donating.

  • Please understand that all the educational videos are in front of the pay wall that includes the videos that includes the notes, the diagrams and the code.

  • Example.

  • All of that is freely available and in front of the pay wall.

  • But if you want to watch opinion videos, or if you want to be able to comment, you do need to become a member.

  • Membership is $5 a month or $60 a year and gives you access to those opinion videos and the ability to comment.

  • If you don't want to become a member, you just want to give a one time donation.

  • There is also a donate button where you can do that.

  • Please understand.

  • In order to provide the education that I am.

  • It does cost money, servers, cost money, equipment costs, money, travel costs, money.

  • All of these things cost a reasonable amount of money.

  • And the fact of the matter is, is YouTube's advertising program no longer supports creators the way that it used to.

  • So if you want to these classes to continue to stick around and you find them to be valuable, please think about either becoming a monthly member or donating a few dollars for this project.

Please remember that the complete information for the class that you are about to view is at Eli, the computer guy dot com.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it