CSS和HTML 5 - CSS和HTML 5簡介 (CSS and HTML 5 - CSS and HTML 5 Introduction)

字幕列表影片播放

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 clients, I'm going to give you a brief introduction to CSS.
And this will be the first class in the C.
S s track.
So as I've talked about before in the A.
T m l track, whenever you're going be building a website, you're going to need multiple different languages.
Actually, make that website, do whatever it is that you need to dio sa.
I did an entire Siris on an introduction to a female, and as I talked about in that series, HTML is basically the building of blocks for your website.
Think about think about it as the foundation.
I think about it as the beams as the rafters, that type of thing, then you're going to use on their languages to fill out the Web page that you're going to create.
So if you want real time interactivity, then you're going to be using a programming language called Java script.
If you want to create an HTML form and then be able to send that the data in that form somewhere, then you're going to need a back and programming language such as a PHP python or possibly ruby on rails.
Now one of the important things if you're going to be building a Web page or Web application is you're going to what?
That what paid your Web application to look pretty?
I know.
I know a lot of geeks out there, a lot of technology professionals out there like Why does it have to look pretty?
It doesn't.
It doesn't actually have to look nice.
But in fact, if you want to be able to sell your Web projects to customers and clients and get your boss to continue paying your paycheck and your website and your Web application is in fact going to need to look pretty, and that is where C.
S s comes in cascading style sheets.
So basically what CSS does is it allows you to format your A t M l.
That you will be right now, right?
So in the introduction to HTML Siri's we talked about using 81 tags heading tags, P tags.
We talked about tables, all of those types of things.
And in that introductory, Siri's.
Basically, we were able to print things out with any Web browser, and it was rather basic.
It was rather plain.
Here's a heading.
Here's your paragraph.
Here's your table.
Well, what if you want to make it pretty?
What if you want you're headings to be in color?
What if you want your headings to be allied either in the center or possibly over actually aligned on the right of the screen?
Something like that.
What do you want borders around your tables?
What if you want individual cells to be toe have borders and that type of thing That is where CSS comes in, so cascading style sheets.
What this allows you to do is actually four.
Matt.
The text that you will be printed out with a came out, so it is important to understand what we're talking about.
CSS.
You cannot use CSS on its own again With HTML, you can build an HTML Web page on its own.
You don't actually need JavaScript.
You don't actually need CSS.
You don't actually need any other coding language to create a website With HTML.
You can have a very basic, very ugly but probably also pretty fast website.
Just building with HTML.
If you have static Web pages again, multiple static Web pages that linked to each other, a couple of pictures, that type of deal, you can code at all in HTML.
And you can actually create a website that you can put on the Internet and people can go to it and then laugh at it because it looks so bloody ugly.
The important thing to understand with CSS is you cannot do that with CSS.
All CSS allows you to Dio is say how the text that you're printing out in HTML is supposed to look.
So if all you have is CSS without HTML, then you can't really do anything.
So it is important.
Understand that CSS is the style sheet.
It's the styling for the female that you're going to printing out eso normally if you're going to be hearing about CSS you normally hear about CSS three and HTML five.
So again, whenever we're talking about coding languages, as with all times of technology, there have been multiple versions of all these different languages.
Eso html is now up to html five.
It's been an HTML five for somewhere around about 10 years now on C.
S s has been up to version three since, actually about 1999.
I was surprised.
I thought CSS three had come along a little bit later than that.
But they've been actually working on CSS three since 1999.
So the important thing to understand whenever you start thinking about CSS and HTML five is that now they're kind of sort of synonymous.
So it's important, understand, when you were dealing with a t.
M.
L four so html Version four.
There was a lot of formatting that was built into a T m l for the tags themselves.
If you wanted a text to be a certain color, you could actually code that with HTML.
If you wanted text to be aligned, you could actually code that with HTML again with borders and all that types of things and tables in a T m.
L four.
You would actually do that within a km l And then if you wanted to do fancier things, then you would do CSS.
So again you go back about 10 or 15 years.
If you want to do basic formatting with html four, you would actually do that within 80 ml four And then if you wanted to do fancier things, then you would use something like CSS.
Well, as time went by, people started using CSS more and more and more and more and more to the point when html five came out, they said, Well, why don't we just use C S S for the HTML formatting instead of having a cama formatting in html and also use CSS Since everybody's using CSS anyway, why don't we all kind of combine it into one thing?
And so that's one of things you'll notice whenever you start dealing with html five.
The difference between HTML four html five is CSS and a number the number of different types of functionality were actually built into html five from the get go again.
They've been working on HTML for almost 20 years.
They've been figuring out what did worked, what didn't work.
And as they figured out what did work, they started combining things more and more and more.
So once you start using HTML five, you will you will use by default.
You will use CSS in order to format your HTML five documents.
So that's important thing to understand.
And that's why a lot of times again now, like like back in the day.
Back in the day, if you picked up some kind of study guide, you might get a HTML study guide and a CSS study guide.
And those were two different things.
One of the reasons why Now, whenever you pick up a study guide, you normally see CSS and HTML is basically with HTML five.
They're Maur or less synonymous.
In order to be able to write html five code decently.
It's not gonna look ugly as hell.
You're gonna need to know CSS.
And if you come, Lord CSS need to know HTML because that's the only way to actually print anything out.
So today we're going to be doing this introduction to see S s.
So you get an idea of what you're dealing with with cascading style sheets and we can go ahead with this track.
Now, the important thing to understand about CSS is basically in order to make CSS work, you're simply going to be typing out code.
You have to think about how you want a font toe look and basically, then you're just going to go do a little bit of research to figure out what CSS you have to right to make your fault.
Look that way.
So for the series was entire CSS Siri's.
I'm going to be using this person this book visual Quick start guide If you follow me for any length of time, you know I like the series again.
They do not support me.
They do not give me any money.
I just This is one of those Siri's, I guess, genuinely, Really like Esso.
If you're looking for a paper book to actually follow along with on be able to look at different examples Visual Quick start guide HTML and CSS.
This would be a good way to go again when you're dealing with HTML five and CSS.
You don't necessarily have to get the latest edition.
One thing to be thinking about if you're learning and PHP if you're learning python, If you're learning a lot of different coding languages, it is vital you get the latest edition of a book, right, because there could be massive changes.
If you take all the time and energy to learn Python, too, that's not going to do very good for you in a Python three world.
The cool part about HTML five and CSS is Maur or less.
It's been the same for a decade now.
So this is one of the few languages this is one of the few books where you go to the bargain bin at your local Barnes and Noble and pick it up for a dollar.
And it actually should be good enough for you, eh?
So that's just something to be thinking about it.
If you're thinking about learning CSS again Ah, lot of things that will be showing you a lot of the demonstrations.
I'll be showing you are very basic.
Okay.
You want text to look this way?
You wouldn't image to look this way.
What?
Your tables to look this way.
Okay, This is how you write out the CSS and voila!
Again with this Siri's.
Whenever I'm teaching you anything.
I have no limit how much I teach you folks.
I'm not trying to teach you everything that CSS has to offer.
When I generally do the Siri's I can't really do somewhere between 10 40 different classes, showing you the large examples of what you can.
D'oh.
The important thing for you to understand is if I don't get to a particular subject in the Siri's, literally, all you have to do is a Google search and to figure out that's like, Okay, I wantto I want to be able to dynamically resize images in my HTML page and just type that in and see what pops up and what you What you normally find out is, you know, with a couple of lines of code with CSS, you'll be able to do whatever it is that you want to dio, and it should be relatively simple as long as you understand the basic concepts of CSS.
So this is a study guide that we would be using for the series, but again, with this, it's not a lot of it is basically like a lot of memorization.
It's one of those things, either.
Memorization, copy and paste where you go?
Okay, this is what I want to d'oh!
You figure out how to do it.
Copy paste, modify a couple things and go on with it.
So now that you have a little bit of an understanding, let's go over to my demonstration system.
I'm actually going to show you an example from a website called W three schools dot com.
If you have not been to W three schools dot com, and you plan to continue learning how to do Web app development, I would highly recommend that you go there.
Not only do they give you a lot of useful information, a lot of references, but they also give you the ability to test and play around with what they're showing you with their particular examples.
So let's go over the computer.
I'll show you a little bit about W three schools dot com on.
Then I'll show you the difference between how things used to be written in HTML four without CSS and then how things were written now with HTML five and CSS.
So here we are at my demonstration computer, and I've pulled up W three schools dot com just give you a little bit of an example of CSS.
And also just to show you that this exists again.
If you do not want to buy a book, you do not have to buy a book in order.
Learn CSS maybe three schools has a lot of good references for HTML CSS, JavaScript sequel, python, PHP and more.
And basically, you can go through and you can just select one of their tutorials and they spell everything out.
One things that I really like about 93 schools, especially for new people, is if you do not know how to spin up a Web server basically don't understand how to do a servers in that type of thing, you can actually try the demonstrations within their website without actually messing, actually having to spend up a server or whatever s O.
They have an example here of CSS just kind of give you an example of what CSS looks like.
And so this is what C s s is going to look like for us, eh?
So for here, a background hyphen color, it's going to be a light blue for H one again when we're going to be formatting these particular tags, the color is going to be white.
The text alignment is going be center.
And for the P tag, the font families, you can do things like change.
The font family is going be veranda and fought.
Size is going be 20 pixels.
We go over here, we can actually do this.
Try it yourself and we can see what this looks like It again.
This is one of the reasons I like W three schools s so we can see what the HTML document looks like.
We can see body background.
Color equals light blue, so we can see that this is light blue.
H one color is white.
So this is an H one here.
Color is white textile line center.
We can see that it's a line in the center.
P fought family equals Verdana So this is the red verdana font family.
And the font size equals 20.
We go down here, we can then see this is where the tags were actually used.
So, basically, with CSS, what you do is you see what the four Manning should look like, and then within the normal html, that's the formatting that will be used.
So we're We're saying what the h one should look like.
We're saying what the P tag should look like and then when we're actually writing things out with the H one tag and the P tag that will come out here, Right?
So my first c s s example that is in the H one tag If we look up here, H one is white text line equal center.
So my first CSS example will be white and it will be in the center p.
This is a paragraph again for Don f font family font size 20.
So it'll be the verdana family and font size will be 20.
We take this and we say font size will be 40 and then we click Run.
We can see now that the font size is 40 that it's nice and big.
We want the color for the H one do I don't know, be red again.
You just change this and now you can see that it's red.
So this gives you a basic example of how CSS works.
So basically, what you're gonna be doing is there going to be setting up the style for the different tags and for the background again for the black background here we can simply do blue.
You do run now it's gonna be blue.
So basically, we set up all the styling and then when we're writing out the HTML document that styling will be used for the tags so on and so forth, so that one of the things I want to show you is what the old html four formatting looked like versus the new CSS formatting.
So if we minimize this, we can take a look on.
Basically, I have created a crappy little html Paige called CSS versus html dot html.
Again, if you want to do this example, I'm doing this on my Mac book pro.
So I'm using text edit.
But all you need is a basic text editor.
So if you're in the Windows world, you can use no pad in the Mac world, you can use text at it.
If you're in the Lenox world, you can use G ETA, nano them whatever else.
The important thing is that when you save the file, you save it as a dot HTM or dot html file on.
So what I've done here is this first line is old school html formatting.
And the second line is new school CSS formatting, eh?
So what we have here And so we have the h one tag like you would have learned if you took my introduction to HTML course and then we're going to say here is a lying equals center.
So this is how you would align formatting or you would align text.
In the old days, you would say say a line equal center.
And then if you want to give text something like color, you then use this tag called font You then say color and then you say what you want the color to be.
So you want this color to be read.
You then have to close the fox tag.
So basically, anything in between these two fought tags that will be whatever you you've set it up to be.
So you do have to close that and then you close the h one tag.
So that is how old school a key Ml four would look, if you're writing it out for formatting new school with CSS.
Basically what you dio is you would do H one now This is something called in line CSS.
We'll talk about this and and another class.
But for inline CSS, what we're going to say is style equals and then we're going to give the formatting for this particular text.
So for here we're going to do text hyphen a line and then we use colon instead of equals.
And so we're going to align it to center.
We then do a semi colon as a D limiter, eso again and CSS.
There's things like Kilometers you have to pay attention to so we're going to use a semi colon is a the limiter.
Then we're going to say the color is colon and that's going be read and then we're going to limit with the semi colon there and then we're going to close with the double quotation marks and we're gonna close the H one tag that I'm simply pointing out.
This is CSS and then I'm closing the H one tag again.
You'll notice here I'm not using the fought tag.
So in many ways this comes out to be a lot simpler.
If we go over on, I double clicked CSS first html.
This then opens up and basically what you can see here is this is a key Ml four coating, so we can see that it is red and it is in the center, and then we can see the bottom one.
This is C.
S s.
So this is red and it is in the center.
So this just goes to show you that what you're doing with CSS many of the things you could do previously with html four.
But CSS makes it easier and especially makes it a lot easier when you're dealing with large projects and we'll talk about that in class is to come.
One important things understand, though, is even though theoretically the html for formatting has been deprecate ID, you're not supposed to use it anymore.
You can see that even now, in 2020 you can still use the old HTML for four formatting if you want.
The reason for this is Web browsers are expected to be above open just about any Web page that they're presented with.
So if somebody designed a Web page back in 1998 and they've never updated it then, then the browser still needs to be able to open it up and still needs to make it viewable.
So even though you're not supposed to use HTML for Cody, you do still have some people that are using it.
And you may run across it in projects simply because it does work.
It is important.
Understand, though, is if you're gonna be developing Web projects, especially for customers, clients, for your boss.
Even though html four coding still works for formatting, you really do need to go over to see SS again, at least for the at least for a decade, at least for a decade, this has been the standard way to do it.
So if you d'oh html four is just gonna cause annoying problems for people that have to go behind you.
But this is it kind of gives you an idea of what you're gonna be dealing with with CSS.
So there you go.
Now you have a brief understanding of what CSS is cascading style sheets.
So this is how you're going to be formatting the HTML text that you're going to printing out again with HTML.
You write the H one tag and you do the titles and do the paragraphs, and you do the the tables and you insert the images and you do all of that.
But then to actually make all of that look pretty, you're now going to be using CSS again.
You can theoretically use HTML for formatting.
It does work even though you're not supposed to use it.
But again, 2020 and beyond.
You really need to be using CSS when you start looking at the versions for CSS against where?
At version three for CSS.
But we've been a version three of CSS for a long time now.
I'm not sure specifically when everybody transferred over to it, but CSS three They started developing in 1999 and it has been the standard again for about 10 years.
There is no big new CSS on the horizon.
So this is not one of those things where you have to worry about and go.
Oh, I'm learning CSS three now.
But what about when they change?
Things were CSS four.
They make a some stuff when CSS four comes out, but again, that's kind of one of those things and not to worry about now when you are dealing with CSS and you are dealing with HTML five.
Now, do you realize that there are more or less synonymous again?
In the old days, you had a t m l four and you had CSS You didn't necessarily have to u C s s again.
There was formatting that was actually built into html four.
But now, with HTML five, some of the improvements with a key Ml five is a lot of this other functionality has been brought in from other technologies to make it easier to code html five website.
So again, we're talking about things like C.
S s CSS is now basically built into html five.
So you will simply use a CSS whenever you're you're developing an HTML five Web page.
So don't realize again whenever you're going out there to buy a book a genuinely 10 15 years ago, you would buy a CSS book and you're buying HTML book in order to learn this material now again just by one book, because they're more or less synonymous with html five again.
If you're gonna be going out there and you're looking for education material, this is one of the few times isn't one of the few times you can get something out of the bargain bin and actually get a book that is probably worthwhile again.
Html five and CSS three.
He's have been around for a decade at this point, unless you're trying to do something incredibly specific if you get something from a book from 2012 honestly, it's It's probably gonna be fine for you.
So again, feel free to go to the library, get a book out library so on and so forth.
Even if you get one that's like a previous version.
Everything should be good enough if you're worried about anything again.
That website W three schools dot com is an absolutely terrific resource for CSS came out PHP and a lot of other coding languages.
So with that, as always, I enjoy doing this video and look for to seeing 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.
The 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.