declare

6: How Do We Include CSS In Our HTML | Basics Of CSS | Learn HTML and CSS | HTML Tutorial



Sharing buttons:

today we're going to learn how to use

CSS when we want to make a website and

in the first episode of this course here

I talked a bit about what HTML and CSS

actually was so just to do a recap it's

- most actual content and put inside the

website which you can see right here

right now have a index.html file which

is front page and inside this file we

have a bit of tags and some content so

we're texaco inside the browser refresh

you guys can see we have a header that

says this is the title and then we have

a piece of text saying norm Epsom so as

you guys can see right now the text

doesn't look very pretty and what we can

do in order to teams of how this text

looks like or any other kind of elements

inside the website is we can go ahead

and add some styling to it now a styling

is basically used to change up how to

HTML is going to look like inside the

browser and we do that using CSS so the

first thing we're going to do in this

episode is I'm going to go to insert

gasp how to actually create CSS inside

your HTML file then afterwards I'm going

to show you guys how to create something

called a style sheet which is an excel

CSS file that we use inside the website

and this is how we mostly create

websites using a style sheet and we

don't really create styling directly

inside the HTML file so basically in the

future episodes we will be using a style

sheet and we won't be styling directly

inside the HTML file because that's not

the typical way we do it inside real

projects now after we talked about

styling also want to show guys something

called a research style sheet which is

something we need to have inside any

kind of web projects because basically

when we have a browser such as Chrome or

Firefox or edge or Internet Explorer

they're all going to have some default

styling inside the browsers right now if

you guys will actually look at this you

may notice the different ways to zoom in

that we do actually have some spacing

right before the text you know from the

top of the browser and the left side of

the text and that's because right now

chrome has some default styling inside

the browser meaning that if we were to

go and set my developer tool which is

sure the guys in the previous episode by

right-clicking on the text go down to

inspect you guys can see the right now

we have these weird orange boxes on top

of the text and below it which basically

means that right now the text has been

posed to have some spacing on the top

and the bottom and we want to reset all

this inside out

before we actually do get started on any

kind of web projects we're going to go

and learn about that at the end of this

episode so what we're going to do first

is we're going to go ahead and just exit

out here go back and set our code and

the first thing we can do no taxes down

something directly inside the HTML file

is if I were to go up inside my head tag

up here can actually go inside the head

tag and create something called a style

HTML element so right now you guys can

see you have a pair of style tags and

inside the style text we can actually go

ahead and create CSS code now we haven't

really talked about CSS code yet so just

a few basics and what the syntax is when

it comes to CSS code and by the way

before you get frustrated that we have

to learn CSS also it is really the most

easy language you can learn inside

coding because it's so simple to

actually use so the first thing we're

going to do here is I want to style my

h2 tag down here which has the title

inside of it that says this is the title

so inside my style sheet I'm going to go

ahead and say that we have a 8/2 tag so

we're just going to say h2 space then

I'm going to say we have curly brackets

opening and closing brackets and then

I'm going to go and go in between these

brackets here so now you guys can see we

have the closing tag at the bottom here

and we have the opening tag right after

the tag - h2 definition here so right

now we actually told the code we want to

style the h2 tag and we did that by

actually putting the h2 tag inside the

style elements we have here so inside

the curly brackets I'm going to define

what I want to change about the h2 tag

so right now we could actually say I

want to change the color of the text so

I can say color Col 1 and then I can go

ahead and define what the color the text

should be inside the code here so can

actually say that I want to have a red

text then after I define the color I

want to say semicolon so the basic thing

here is that each time you want to style

a specific thing we type the keyword for

that specific styling then we say colon

which means that now we need to tell

what we want to do with the styling such

as changing the color to red and then

once we're done with this line we're

going to go ahead and close off the line

with a semicolon and it's very important

that you guys remember to put a

semicolon after each line here because

see a lot of people saying that the code

doesn't work or something

and chains inside the processor always

make sure you add a semicolon after the

end of the line here okay before you go

up to the next line so now we will just

save the code go inside my browser

refresh you guys consider the color

teams to read okay so what we could also

do is we could go back inside the code

go down below the color and say that we

want to change the font size so I can

actually save fonts - sighs : and now we

need to define what the font size should

be so right now we could say we want to

have 70 pixels which is quite a lot

inside the browser and remember to add

the semicolon then I'm going to go and

open up the browser refresh and nine

guys consider much bigger font inside

the browser now let's actually go and

try to manually remove the the margin

that we talked about when I did actually

right-click and inspect the text so as

you guys can see we have all the aren't

stuff on top of and below the actual

text so if we were to go back inside the

code and say we want to also change the

margin colon semicolon and say that ones

have zero pixels of margin on the top

left right bottom but just saying zero

pixels and go back inside my browser

refresh my guys can see that the spacing

disappeared now what we can also do here

just to kind of mess around with the

code that's actually going to add a

background color inside this text is it

with an axis a background - color colon

then we could actually say blue

semicolon go in and refresh the browser

you guys can see that now we have a blue

background color behind the text here so

we can do a bunch of stuff when it comes

to styling and if I want to send to the

text inside the website I can also say

something called text - a line Col one

Center semicolon save it refresh the

browser and now you guys can see we have

the text centered inside the website so

now we just out the h2 tag inside the

browser and we're not going to talk too

much today about all the different

styles that we have inside CSS but as

you move on this course here I will show

you guys more code when it comes to CSS

know to change different things such as

text or boxes inside the website but

we're not going to do today because it's

quite a lot of code that would have to

go through in just one episode so what

I'm going to do here

go ahead and change the styling of my

paragraph tag as well so if you want to

add more stylings inside our website

what we can do is after the curly

bracket the closest of the h2 tag up

here and go down to next line and say I

want to style the paragraph tag then

again we add the curly brackets go in

between the brackets and then we can do

the exact same thing now if I want to

change the color of my paragraph text

what we can actually do here instead of

using red because that is not very

professional to use is we can go ahead

and use a couple of different formats

now we could use RGB we could use hex so

let's actually go to add a hex code to

this paragraph so I can access a hash

tag and then to give it maybe a dark

gray color we can go ahead and say nine

nine nine nine nine nine which is six

nines I'm going to save it go inside the

browser then refresh and as you guys can

see now we have a very darkest Gray's

color inside the text too instead of

just black we can also go back inside

the code instead I want to have maybe a

white color for the text and go and say

ffffff now do you want to point out that

if we're using a color that has the same

letters or numbers all the way through

it we don't need to put 6ss inside the

hex color we can actually go ahead and

just stick with three so if I save it go

inside the browser refresh you guys

considered the text disappear but it

didn't really because it's just white so

we can't really see it inside the

browser on a white background okay now

another color table you could also use

this RGB so we were to go down give it a

background color we can go and say RGB

parentheses semi-colon because we need

to end off each line with the semicolon

and then inside the parentheses when go

and say they want to change the red

value so we can go ahead and say zero

comma then the green value which is zero

comment and then the blue value which is

going to be zero as well in order to

save this go inside the browser you guys

can see that we have a black background

and that's because the RGB value we just

gave it by saying zero zero zero is

going to be black you can also change

the first one to 255 go back inside the

browser nine guys can see it turns red

so now I just learned how to add styling

inside the HTML file but let's go and

talk about how to add styling directly

inside any kind of HTML element so we'll

go down inside the h2 tag here save

space we can actually go to add an

attribute called style so essay style is

equal to double quotes then inside the

double quotes we can actually go ahead

and write CSS code just like we did

inside the style tags so we want to

change the background color I can save

backgrounds - color colon semicolon I

can go and say I want this one to be the

hex color of a very light gray color so

I can actually say f3f3f3 save it go

inside my browser I'm going to go and

refresh the browser and you guys will

notice that the background of the text

here will actually turn into a light

gray color so when i refresh you guys

can see not turns light gray so we can

actually go ahead and add styles

directly inside HTML elements but like I

said this is not really the way we

usually do within size a typical web

site typically we would actually create

a CSS file that has all the CSS code

inside of it so what I can do is I can

actually go ahead and say we have a new

file save it inside a root folder and

I'm going to go and save this one as

style dot CSS now one thing I want to

mention here is that you don't have to

call it style for CSS but if you want to

create some websites in the future that

might have a CMS system inside of it

which some of you guys may not know what

is yet then I recommend you make it a

habit to call it style the CSS because

you will be required inside WordPress at

least to call us now that CSS later on

if you want to use the CMS system so

just make it a habit to call it style

the CSS then we're going to go and save

it and one thing I want to point out

here before we actually start creating

styling inside the stylesheet is that he

can in fact have multiple style sheets

inside your website now typically at

least my cases that don't use more than

one style sheet because it makes it too

confusing having to have multiple

documents open just team styling inside

a website okay so what I'm going to go

and do here is now that we have a style

sheet inside the website if I were to go

and say we want to style the h2 tag open

up the curly brackets and then say I

want to style the h2 tag for example

giving it a different color I'm going to

say color colon red semi

: and save it you guys will notice that

inside the browser it doesn't actually

change the color and that's because

right now even though we have a

stylesheet inside the root folder we

haven't linked to it inside the HTML

file so if I were to go inside my

headset here we can actually go ahead

and go to the next line and we're going

to go and create an HTML element called

link so I'm going to open up my tag here

I'm going to say link space then I'm

going to say grill and set it equal to

style sheet just to define what kind of

link this is then I'm going to go

afterwards and add a second attribute

which is going to be the link to the

actual stancy so I can actually say href

which stands for Hyper reference equal

to double quotes and then we need to

create the actual path to the stylesheet

now right now for were to go inside my

root folder you guys can see this down

seems actually right next to the index

file so we don't need to tell to go

inside any kind of folders anything so

we just go ahead and write style dot CSS

and then I'm going to go to end off the

tag here now the link tag is actually an

empty element meaning that we're not

going to have a closing tag so I'm going

to going to save it and now go inside my

browser refresh and now I guys can see

we have the text read so we can actually

go ahead and go inside the stylesheet

here and create a bunch of styling for

example for the paragraph tag if you

wanted to and we can go ahead and create

all bunch of Sonic's inside the

stylesheet now right now showed you guys

how to target specific elements inside

the website with the taxi called h2 and

the paragraph tag so right now if we

were to just say that we want to style

the h2 if I were to have another h2 tag

below here somewhere and start the

website right now both of these tags if

we were to save it refresh the browser

are going to be red and we don't want to

have all the different h2 tags inside

our website to be red so we can in fact

using styling change the path to the

actual element so right now it is this

h2 meaning that all eight to text inside

the website are going to be red so what

I can also do inside my styling is if I

were to put the second age two inside

and div box and just go ahead and paste

it in here so I'm going to say copy and

move it and then go and stop my styling

here can actually go ahead and say that

we have

a paragraph tag but inside the website

somewhere we have a div tag and inside

the div tag we have an h2 tag so I say

space h2 and then I hope maps occur in

the brackets mean that inside the

website if we have an h2 tag inside a

div then it's going to apply the styling

here so I can execute a color it's going

to be green semicolon save it refresh

the browser and now you guys considered

this one down here turns green now you

might be asking well we're just going to

go to new stems each time we're going to

go and target specific elements inside

the website with styling and know that

that's not really the optimal way to do

it instead we usually use something

called classes and ID's in order to

target specific elements inside our HTML

files so if we were to actually go

inside my HTML file we're not going to

learn too much about in this episode but

just to demonstrate what I mean that we

can actually target specific elements

using classes and ID's I'm going to go

and show you guys one example here so

we'll delete the div tag and go inside

my h2 tag say space and then I can go

and add an attribute called a class

equal to double quotes and then I can

give this h2 tag some kind of name I can

choose whatever want to so in this case

I'm going to go and say title so right

now we have an h2 tag inside our HTML

file called title so we go inside my

stylesheet I can actually define that I

want to target this specific h2 tag by

saying I want to target the tag that has

a class by saying punctuation

called title so now for were to go back

inside the website you guys can see that

the title is still green but like I said

don't worry too much about it because we

will be talking about classes and ID's

and how they affect the website in a

couple episodes from now now the last

thing I want to talk about here before

we actually end of this episode is

something called a reset stylesheet

because right now if I were to go inside

the website like I said inside different

browsers we will have some default

styling inside the website such as

spacing or font sizes or something else

and the problem with this is that right

now we were to create a website that

looks the way 1 & 2 inside chrome if we

were to use inside Firefox then

some things might change inside the

styling of the website so it does

actually change how it looks like and I

don't want to have that inside different

browsers so we need to make sure we

reset the default browser styling we

have inside any kind of browser so the

way I'm going to go and create a reset

stylesheet is that I'm going to go and

go up inside my tab here just create a

new tab and I'm going to go to search

for reset stylesheet then inside google

here we can go down to at least a second

link inside my search here I will leave

a link in the description for this

specific page here and as you guys can

see inside this page to your called

html5 doctor we have a person here

called Ritter Clark and he did actually

create a reset code so what I can do

here is I can actually go to copy the

code he has and scroll all the way down

to the bottom here so I can actually say

we want to copy till here copy it go

inside my stylesheet go to the top of

the stylesheet and paste it in here I'm

going to go and save it and then as you

guys can see now we have a bunch of

styling inside our style C and don't

worry you don't need to know what this

means you just need to have them inside

your stance each so don't worry too much

about it if you don't understand some of

the code which is pasted in okay so at

the bottom here we do actually have our

own code that we just created and then

at the top here we have the reset

styling now one thing that is really

important to point out here is that we

need to actually load up a website

inside the browser it's going to load

your files by looking at it from the top

to bottom meaning that the reset styling

inside the stylesheet has to be the

first code inside your stance is because

if we were to create my own code down

here in the bottom and instead of having

it at the top instead then it's going to

load up my code and then afterwards of

my receptor code by actually loading up

the styling that we haven't set the

reset starseed afterwards so we don't

want to have that okay so the reset

styling has to be the first thing inside

your style sheet now if we were to go

back inside the browser go inside our

website refresh you guys can see that

all the content jumps up together in the

top left corner and even the font size

has changed inside our text meaning that

right now everything inside our code

here doesn't have a default styling

inside my Chrome browser okay and we

want to have that in order to make sure

that everything looks

inside all browsers so this is basically

what I want to show you guys today we're

going to go and talk more about the

difference ESS dialing so we're going to

go and use inside our websites a bit

later on in this course here so I hope

you guys enjoyed I want to see you guys

next time