All language subtitles for 0001 - CSS Introduction and Tutorial for Beginners.en.clean

[Music]

hello and welcome hi i'm dave this

tutorial series is for you if you're

just beginning your journey towards

learning web development the only

prerequisite is that you learn html

first because css is applied to html

this course is also for you if you're

looking for a resource to share with a

friend that's just beginning their

journey towards learning web development

or you may be looking for a refresher

course because you previously learned

some css but it's been a few semesters

or even years since you worked with it

or maybe you have another reason that i

haven't even thought of no matter you're

welcome and i hope i help you on your

journey throughout the tutorial i will

mention references and tools and i'll

provide links to everything i mention in

the description below so let's get

started learning css

what is css

css is an acronym that stands for

cascading style sheets so css is a

stylesheet 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

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

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

from google.com

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 so that is 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 image

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 stylesheet 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 so if you

don't have that click on the extension

icon over here on the left

and then in the search extensions type

live

server

and when those options come up we should

see one from ritwik day and you want to

select that and then you want to go

ahead and install

and i already have it installed so i

don't need to do that but this will let

us not only launch our html and css but

anytime we make a change and save it

will immediately reload just as if it's

on a web server you don't want to load

these files into your browser directly

from your hard drive you want to

really kind of have a development

environment that simulates a web server

and that's what live server does for you

so go ahead and install that

once you have that installed and i'll

click on the explore icon over here to

look at our files again but now you'll

have some options in visual studio code

you could click go live down here at the

bottom right

and it says

click to run live server when we mouse

over or you can right click just in the

file and you can choose open with live

server and i'll go ahead and do that now

and there we have our very very basic

web page but we can see it is super

small i don't know if you can even see

that i would have to zoom in and enlarge

that but it says i'm learning css so we

could add another style in our style

sheet

and let's just go ahead and put it above

the color style

and i will put font dash size and i'm

going to change this to 64 pixels it

should be pretty big now so i'll save

resize visual studio code

much better so we've got a purple i'm

learning css with large font now let's

go back to the html file

and i'm going to expand visual studio

code again so we have a little more room

now in this head section

directly underneath our link element i'm

going to type style and press tab and

there is such a thing as a style element

now inside of the style element here

between the opening and closing tags

that is we can write css so i'm also

going to style a paragraph

and here i'm going to put the color

as lime green

now i'll save this and let's go back and

look at our page and see what we've got

now we have i'm learning css and it is

lime green notice it's still large font

though so the other style sheet i'll

press ctrl b to hide the file tree for a

second so we can see this better the

other style sheet is still being applied

but we have overwritten the purple rule

for the color with green

now does one take precedent over the

other does the

internal style sheet which is what we

just built right here with the style

elements that's the internal does it

take precedence over the external not

really

just it's interpreted as another style

sheet either way now normally i use

external style sheets but there is no

difference as far as the browser is

concerned what is the different is the

cascade or the order in which they're

read so it read this style sheet

first

and then it read this one last so the

last color that it saw for our paragraph

was lime green we can further highlight

that

by highlighting our link element and

cutting it with ctrl x

and then pasting it with control v

underneath

our internal style sheet

and so now our external style sheet is

read last and i will save

and now we've got a purple i'm learning

css again and the final way to apply css

inside an html document is with inline

css this is really not the way to do it

though you really want to avoid inline

css if you can i just want to

demonstrate what it is

because you can use style as an

attribute and now we don't need a

selector which is what the p is up here

this is selecting the paragraph we

already know it's being applied to a

paragraph so here i'll just say color

and i'm going to say blue i really don't

need a semicolon because i don't have

any other declaration here if i had more

than one i'd have a semicolon in between

now if i save this

notice it's now blue over here

this does take precedent over either

type of style sheet internal or external

because it's applied directly to the

element itself but what we want is a

separation of concerns so the best way

the way that is commonly used is the

external style sheet it keeps your css

code completely separate from your html

okay let's remove our inline styling

from the paragraph

and let's also remove the style element

because we will be focusing on using

external style sheets for the rest of

the course so we can save that

and let's go ahead and scroll up to the

top of the html document and now let's

move over to the external style sheet

and then in the browser notice of course

this is already back to purple now let's

go to another mdn page that's the

mozilla developer network and we get an

anatomy of a css rule set so let's break

this down and we can look at our own

example to the left as well but we have

our selector that means we're selecting

the paragraph or paragraphs if we had

more than one

now we have a property and a property

value so the property being the color

the value being read and then the

declaration

is the property and the property value

together so we have the same thing over

here just color

and purple and the full declaration is

both now it says the whole structure is

called a rule set but also notice it

says the term rule set is often referred

to just as rule so you could consider

this a css

rule if you will okay let's go back to

our html document in the browser and

something i need to note here about css

is it's using the american spelling of

color there could be other english words

that are different but notice how visual

studio code knows there's already a

problem here and if i save this

purple is not applied to our document

it's back to the default black text so

we need to spell things with american

english i guess is the best way to put

it our dialect without the u in color

and there could be some other words as

well but notice we didn't get an error

or anything if we do put in color the

wrong way

it's just ignored and that is something

about css and sometimes it's hard to

detect when you've done something wrong

because you're not getting an error

thrown like programming languages the

rule or the declaration i should say not

the entire rule but this declaration is

just being ignored because we didn't

spell color in the way css expects so if

i change that back once again we have

purple text now one way we can detect

problems in our css is to validate our

css files so let's pull up a page that

will do that

and we go to

css validation service from w3c that's

the world wide web consortium and we

want to choose

file by upload where we can select the

css style.css from our folder and you

need to choose file and then browse to

the folder where your css is which

should be in the folder you created and

then if you created a css folder it

would be in there here's my style.css so

i'll select it

and choose open

and now we'll just click the check

button and this page will show us if

there are any errors but if there's not

you should get this congratulations no

error found message just like i did so i

will put a link to this css validator in

the description of the video or with the

resources and then in the next video

we're going to learn all about css

selectors remember to keep striving for

progress over perfection and a little

progress every day will go a very long

way

please give this video a like if it's

helped you and thank you for watching

and subscribing you're helping my

channel grow have a great day and let's

write more code together very soon