CSS Full Course for Beginners | Complete All-in-One Tutorial

 

Hello and Welcome to over 11 hours of CSS tutorials and instruction. This video is made up of 24 tutorials that build upon each other much like the chapters of a book throughout the lessons. in this video I will mention the links being available in the description below. I've compiled all of these links into one github resource that you will find in the description.  Let's get started learning css with chapter one.

What is CSS ?

CSS is an acronym that stands for Cascading Style Sheets, So CSS is a style sheet language that's used to describe the presentation of a document. It's most known for being used with HTML, although it can be applied to other media like you see here. I've got xml svg , mathml , xhtml and other things listed here for on paper in speech other media. but we will be working with html, now when we think about the difference between html and css, so consider html as the foundation and structure, so if you think about a new building or a house that is being built and you see that structure go up that is the foundation that's everything holds it together, however the CSS is the paint and the carpet and the wallpaper or anything any decorations anything that makes it look good, so the structure holds it all together it's the foundation the CSS is really what makes the appearance that actual presentation of the building or in our case we're working with documents. Pease watch the video below to know more clearly:

Okay now before we start writing CSS, let's get the tools, we need and first of all I will be using the chrome browser in this course, so you can download chrome if you don't have it just click this link google.com slash chrome and it should be available for every platform and it will probably identify what platform you have here as well after that we're going to use an integrated development environment really a code editor and what we will use is visual studio code. Also You can download at code.visualstudio.com.

It should also recognize what platform you're on already, but if it doesn't you can click other platforms and you can find it for all the different platforms that We're probably using. Okay go ahead and download the version you need and if you need chrome download that as well install the software and then come back to the video. Okay at this point, I'm going to assume you've got everything downloaded and installed, and now I've got visual studio code open right here. You may have a welcome screen I closed that out already but what you need to do if you haven't already is create a folder on your computer for your project for this lesson you'll probably want to create a new folder for each lesson or at least build upon the lesson in the same folder either way you need a folder and the first thing we want to do is create an index.html file because once again we will apply our css to html. Now if you're not familiar with emit shortcuts we can take an image shortcut here to quickly create an html document just type the exclamation mark and press enter and now this gives us a very basic html document and of course it has a title just of document. it has a couple of meta tags up here you might not have seen but they're handy to go ahead and leave in the page for now what we want to do is just put some content, so let's put a paragraph here and let's say i'm learning css with an exclamation mark and save and really that's all we need in our html document right now now there are three different ways to apply css to our document there is an external style sheet we could have an internal style sheet or we could apply css inline with

an element let's look at each option and i'll start out with the external style sheet so i want to create a link element here and i'll press tab and visual studio code helps us out it already gives us the rel attribute that says it's a style sheet and we need to link to a style sheet but we haven't created one yet so over here in the file tree let's create a new directory and name it css now inside the css directory let's go ahead and create a new file named style.css and now we have our style sheet file and inside of this let's put a p for our paragraph element a curly brace. now one return and we'll go ahead and put a style here this will be a rule actually or a declaration if you will and let's just change the color of our paragraph and let's make it purple and end with a semicolon and save this is a very very simple style sheet right now and now back in our html we can go ahead and link to that style sheet by putting in the css directory and you can see visual studio code wants to help us out so we'll click on that and then it knows the style.css is in there so we can click on that and now that should link you may see some older code that has a type attribute here but mozilla now points out that this is no longer required and is actually kind of frowned upon so we do not want to include that but you may see older code with it it doesn't break the code if it's there it's just not the modern way of doing that so there is our link to the style sheet and now one thing we haven't done yet is add the live server extension .

Post a Comment

0 Comments