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 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,