Placeholder Image

字幕表 動画を再生する

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

  • Hello again.

  • As you know, I am Eli the computer guy, and in today's class, we're going to be going over the basic syntax for C.

  • S s cascading style sheets.

  • So again, all CSS does all cascading style sheets do is they basically format the HTML that you will be printing to a page so you can use the basic H one tags et tu tags P tags so on and so forth to print text to a page in a female.

  • But if you want that text to have colors, if you want that text toe, have borders.

  • If you want that text to be underlined, any kind of formatting like that you're going to need to use CSS in order to be able to do that with CSS or simply going to need to understand the basics of the syntax.

  • And so that's what I'm going to be teaching you today in today's class.

  • So a bit of a warning warning here for today's class.

  • We're at that point in CSS when I am teaching you things and you kind of have to understand multiple different subjects before any of those subjects fully makes sense again in the technology world, when they think that things could be a paint that could be a pain in the butt is that I have to explain this.

  • But when I'm explaining this, if you don't understand this, you're not gonna fully understand the first thing.

  • So I have to explain this so that it then I can teach you this.

  • And then once I've taught this, then the first thing actually makes a hell of a lot more sense, right?

  • We're kind of in that area with CSS.

  • So what?

  • I'm going to be explaining to you the basic syntax for today.

  • I'm going to showing you basically how you can define how tags are supposed to look in the HTML documents.

  • But the thing with CSS is there's multiple ways to call C.

  • S s you can call CSS from an external some style sheet so you can have a style sheet that all your HTML documents reference back to you.

  • You can have your CSS actually in the B in the head of your HTML document, or you can even have your C s as in a line.

  • So when you have your P tag, your H one tag or whatever, what else?

  • You can actually have the CSS in line to define how the font is supposed to look.

  • So I'm not actually going to be getting to that in this particular class.

  • And that will be in the next video what I got when I will talk about external style sheets and how to actually insert CSS into your HTML document.

  • So for today, all I'm showing you is the basic syntax so that when you get to the next class, everything is going to make a lot more sense.

  • So if at the end of today's class you kind of understood what stand a little bit, you're like, OK, so that's what a selector is, and that's what a property is, and that's what a value is.

  • But I'm not really sure how this Foley works.

  • That's okay.

  • That is completely okay with the next class.

  • When I show you how to actually put the CSS into an HTML document, all of this should come together and make a lot more sense for you.

  • So with that, let's go over the computer and I can explain how this works.

  • So here we are at my demonstration system again, I'm using a Mac book pro.

  • So I'm using text edit.

  • In order to write out this CSS and HTML again to write out CSS html.

  • All you need is a text editor.

  • So if you're in the Windows World, you can use note pad again.

  • The Mac world.

  • You can use text edit in the Lenox world.

  • You can use G et at nano of them or whatever else for this particular project.

  • Today I have saved this as a dot html.

  • So all of the CSS and all of the HTML are contained in one document s.

  • When you look at this document here, basically we're going to open up with the HTML tags.

  • We're then going to open up with the head tag and inside the head tag is going to be the style tag s so basically everything within the style tags is going to define what the C s s should look like for the rest of the document.

  • Then you're going to go down here, you're going to close the head, you're then going to open the body and then basically, you're going to simply type out your HTML like you normally do.

  • But before matting for this HTML is now going be controlled by what you have written up here again.

  • If you don't fully understand this style tag and how this works, don't worry.

  • We will talk about this more in the next class.

  • But I just want to give you a bit of an overview.

  • Here s so when we go down here, basically, we're going to open up the style tag again.

  • We'll talk about that later on, and then we have the different what are called selectors that we're going to modify for the day.

  • So again, in the HTML world, everything is defined by a tag.

  • And so when we're talking about a selector and CSS, essentially, what we're talking about is the name of the tag.

  • So this is the body tag.

  • Right.

  • So we're talking about the body tag.

  • This is going to modify what the body tag looks like.

  • Now you will notice there is no little arrow brackets or anything else here.

  • All you're going to do is just the name of the tag itself.

  • And this is going be called a selector past that you're going to open the squiggly bracket, then you're going to go down to the next line and from here, what you're going to do is you're going to put in the property that you want to modify eso whether you're dealing with the body, whether you're dealing with an image, whether you're dealing with the the heading tags or whatever else, there are going to be different properties that you can modify.

  • Basically, just have to do a Google search where we're looking your paper or looking, you're booked to see what properties you can modify, but they're predefined properties and modify.

  • So for here, the property that we want to modify is the background color.

  • So the property is called background.

  • Ah, hyphen color.

  • Then you're going to separate this with a colon so normal colon and then after that, you're going to say what the value of that property should be.

  • So the background color for body, we want this to be orange for this particular example than what we're gonna do is we're going to use a semi colon as a delimit erso delimit er basically says this is one value.

  • This is one set and then you can go to the next.

  • You could go to the next.

  • You can go to the next.

  • You can go next.

  • If you forget to put the semi colon there, you can run into problems, I guess.

  • Like PHP and all the other coding languages know what the hell you're eliminators are and make sure that you actually write them out.

  • Then from there we're going to close the squiggly bracket.

  • And so basically, what this is going to say is the selector body, the tag body, we want the background color to be or that's it.

  • They were going to go down to the H one tag beheading one tag.

  • We're going to open this squiggly bracket.

  • So for the h one tag, we want the color to be colon white.

  • So this will make 81 white now again.

  • We use the semicolon deal emitter.

  • We go to the next property that we want to modify, and we're going to do text hyphen a line.

  • So we're going to align the text and we're going to align it to the center again.

  • We do the deal emitter of a semi colon, and then we close the squiggly bracket.

  • Then we go down here for the eighth to tag again.

  • The selector of eight to the H to tag.

  • What I've done is I've actually modified the background color for where that text is actually printed out.

  • So there's a background color for the entire page and then behind the lines that are written in age, too.

  • We want to modify the background color to be something else a background, a hyphen color due soon, my colon.

  • And then we're going to say yellow.

  • You will not notice Here I put a space in between.

  • You should put a space, but with things like this, the white space doesn't matter that much.

  • So you put yellow and then you do the semi colon, and you close that for 83 So the selector of the tag for 83 were opening up again and you could do a border again.

  • I just want to show you that there are a lot of things you could do.

  • A CSS CSS opens up a massive world of what you could do with with formatting on html document.

  • So for this just for craps and giggles, I just want to show you could do a border.

  • So we're going to do a border, and that's going to be a five pixel border of solid blues.

  • There's gonna be a border around the lines of text that age three again, we're going to that semi colon, the limiter, and we're gonna close these squiggly They were gonna come down here to pee.

  • We're just gonna modify this a little bit.

  • You can modify the font family.

  • So that's a big thing for a lot of people.

  • Is they don't like whatever the default font is for HTML.

  • So you can modify what you want that fun to be.

  • Ariel times new Roman.

  • There's a number of different fonts that comes standard with CSS.

  • You can modify it so you have a hyphen family colon again.

  • So we're just going to say that for p here should baby Ariel, we're going to do the semi colon, the limiter.

  • Then you can go down.

  • You can actually modify the size of the font.

  • So forward p tags here.

  • We want to say how big the techs should be for the P tags on.

  • So for this, we're just going to say 40 pixels just because again, we're going to close it.

  • The clothes that with the DL emitter, and they're gonna close the p tag with the squiggly bracket.

  • We're then going to close style.

  • And again, for this point, we're not really gonna worry about that a lot.

  • Then we're just simply going to come down here in the body.

  • Now all we're going to do is we're going to print out a tch one.

  • This is what h one looks like.

  • Eight to this is what age, too looks like a three.

  • This is what age three looks like.

  • And p this is what he looks like.

  • So again, the html itself, when you're referencing an external style sheet or styles that are in the head of the Jerome at Mel document, you were literally just going to simply type out the normal tag.

  • And then your Web browser will know what to do with as normal tax from there.

  • We're going to Dio is I have the CSS syntax, not html document sitting on my desktop, I'm going to double click.

  • And when I do, this is what the text looks like based off of this C C s s s o we go here again.

  • Let me just, uh, put this over a little bit.

  • And, uh, what we can see is S o the background color lips.

  • Let me modify this a little bit.

  • It's always a pain to show things.

  • Okay, here we go.

  • Eh?

  • So what we can see is we have here style, body background color equals orange.

  • And so what we can see here is the body.

  • The background color is now or h one.

  • We want the color to be white.

  • We want the text to be aligned to center H one text is white.

  • The Texas Aligned to center 82.

  • We want the background color to be yellow.

  • So what you'll notice here is the default.

  • HTML formatting stays in place.

  • So since I'm not saying what color the two should be because I'm not saying what font it should be.

  • Whatever the default is, that remains how it is.

  • The only things that get modified is whatever I've stated within the CSS.

  • So it's still in black.

  • It's still aligned to left so on and so forth.

  • But because I've said background hyphen, color is yellow.

  • Then I get this yellow bar behind the age to text.

  • We then go down to the three.

  • This just shows us we have a border that's five pixels of solid blue.

  • So this is a three week in a border of five pickles, five pixels that solid blue, and then we go down to pee.

  • The font family is Ariel.

  • So if you take a look at this, you'll notice you'll notice this font looks different than what the default font is.

  • So that's the aerial funt on.

  • Then the font size is 40 so you can see again.

  • Even at normal size.

  • It is a large font size of this is P.

  • That's what you have printed out.

  • And so this is the basic syntax of how you're going.

  • Be writing out C.

  • S s.

  • So this is called a selector again in CSS world is to call the selector.

  • Just think of it is attack again?

  • The body tagged the H one town gate three, tag P tag the image tag.

  • Whatever else.

  • Basically.

  • So what you're saying is this is the tag.

  • Then you're gonna open up a squeal squiggly bracket.

  • Then you're going to say what property you want to modify.

  • So there's a whole bunch of different properties that are available to you again.

  • Do a Google search for whatever else to see what properties are available to you on.

  • Then you do colon, and then you do the value.

  • And again, this is one of those things you just again.

  • It's paint by numbers, right?

  • You see what property you can modify?

  • You can see what values are available to you, and then you plug in the one you want.

  • That's really all there is to it.

  • Then you close with a semi colon, and then then you're going to close with that squiggly bracket.

  • And this is the basic syntax of C.

  • S s for you.

  • So there you go.

  • Now you know the basic syntax for CSS.

  • If you don't fully understand how to U.

  • C s s yet That is completely fine.

  • In the next class, I will talk about external style sheets and that type of thing.

  • But now at least you know what?

  • The basics and taxes You have the selector or basically what the tag name is.

  • You have the property.

  • You have the value again.

  • It's all paint by number.

  • This is not You're not pulling stuff out of your, but you're not like you're not imagining things on the fly.

  • This is paint by numbers.

  • You have a tag, you do a Google search.

  • You see what properties they're available for.

  • The tag you pick one of those properties, you see what values are available for that property.

  • You pick one of those, and that's all you do.

  • This is one of those places where a lot of people try to be like two.

  • Creative.

  • They try to get to be too smart, and it's no, it's paint by numbers.

  • You gotta tag, got properties, got values.

  • Just plug in the ones that work best for you.

  • One of the ways that CSS can become very interesting for you, though, is do remember whenever you're dealing with a Web application or a website you're having multiple coding languages actually all come together in order to create that site.

  • So one of the interesting things with CSS is you can have C s S b written by things like PHP or some kind of a back and programming language.

  • So when you're talking about things like font size, when you're talking about other other properties and values on your HTML page, remember that a back end coding language can actually dynamically right an HTML page for you and as it dynamically rights at HTML page for you.

  • It can also do things such as dynamically, right, your CSS.

  • So if people are going to your website and let's say they want fonts to be bigger, they could do things like select a larger font size.

  • And then whenever they go to a new Web page on your on her site, when the PHP goes to write that html page, it can then modify what the font size should be when it's dynamically printing it out.

  • So, uh, the default might be, I don't 12 pixels for text on the page, but if you're dealing with older people, they might be able to modify and say, I want a larger text size.

  • And so when that text is printed out on the page, it is something like a 20 or a 40 pixels again, whatever the hell it is that you decide.

  • So that's one of the ways that CSS, because can become even more valuable.

  • There are a lot of properties and values that you can add your HTML document to make it look a lot more prettier and a lot more functional.

  • But beyond that, do you remember that HTML document can be a written dynamically by a back and programming language?

  • PHP, Python Something like that.

  • And so then you can even have even Maur interesting things that you can do with the formatting to make your sight or your Web application even Maur usable for your end users.

  • So those are some of the things that think about but again, with a lot of this stuff in the coding world, it's all paint by numbers.

  • So if you want to modify a tag, whatever it is, do Google, sir.

  • See what the properties are, see what the values are.

  • Plug it in and go from there.

  • As always, I enjoy doing this video and look forward to 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 walk 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.

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

B1 中級

CSS と HTML 5 - 基本的な CSS 構文 (CSS and HTML 5 - Basic CSS Syntax)

  • 1 1
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語