Name: CSS と HTML 5 - HTML に CSS を追加する (外部、内部、インライン) (CSS and HTML 5 - Adding CSS to HTML (External, Internal, Inline))
Uploaded: 2021-01-14T10:13:00.000Z
Duration: 25 min 43 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

命令形

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.

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.

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'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.

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

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.

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.

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

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.

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.

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.

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.

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.

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.

字幕リスト動画再生

CSS と HTML 5 - HTML に CSS を追加する (外部、内部、インライン) (CSS and HTML 5 - Adding CSS to HTML (External, Internal, Inline))

multiple

basically

bold

opinion