YouTube Transcript:
CSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours

Skip watching entire videos - get the full transcript, search for keywords, and copy with one click.

Video Transcript

[Music]

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

hi i'm dave gray and i'm the creator of

these css tutorials you can subscribe to

my youtube channel for more tutorials

like this one you can also follow me on

twitter and if you're feeling generous

you can even buy me a cup of coffee

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

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

shortcuts we can take an image shortcut

here to quickly create an html document

just type the

exclamation mark and press enter

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

css

now inside the css directory

let's go ahead and create a new file

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

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

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

red so it read this style sheet first

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

that

by highlighting our link element and

cutting it with control x

and then pasting it with ctrl v underneath

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

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

selectors

today we're working with css selectors

and there are three levels of selectors

that are the most common now i've got

visual studio code open here on the left

and i have a blank style.css file that

is linked to our html file and the html

file is open in chrome already i'm using

the live server extension with visual

studio code so we will instantly see our

changes in our page

the structure of the html page has an h1

heading and after that we have three

articles each article has its own h2

heading and paragraph inside

so as we talk about the three different

types of basic selectors in css let's

start with the most common which is an

element selector and i'm going to select

the body element now there is only one

body element per page but we have some

very small font and i will get into more

properties for each of the declarations

as we go through tutorials but i'm going

to use a few today just for examples and

i'm going to set the font size to 22

pixels and save now we can see this made

all of our text on our page larger and

this is due to inheritance so these

other elements actually inherited from

the body element and we'll get more into

inheritance in just a little bit too but this

this

in itself is an element selector now

there's only one body element per page

but say i went ahead and selected the

paragraph using the paragraph selector

and now i can set the color of the text

and i'm going to set the color of the

text to purple

and i'll save and notice it changed all

three of our paragraphs to purple so

element selectors select all of the

elements of that type so just specifying

p for the paragraph element selects

all paragraph elements now the second

type of selector is a class

and so let's define a class selector and

i'm going to call this class gray note

that a class starts with a period before

whatever you name the class and you can

choose the name of the class but make

sure it makes sense

and remember your writing code for

others to read not just yourself okay

inside of this i'm going to set the

color to gray that makes sense to me

now i'll save that and notice paragraphs

2 and 3 turn the gray color and if we

look at our html which is a little

crowded over here but if i scroll down

to the second paragraph here we have a class

class

set equal to gray on that paragraph

likewise we have a class set equal to

gray on the third paragraph as well so

classes can be used more than once and

they're very useful that way you're

creating styles that you can apply

throughout your project or throughout

your page

and then they can be reused with more

than one element and note classes are

more specific than selecting all

paragraphs for example and because

they're more specific they overruled the

purple setting that we had for all

paragraphs and now gray applied to these

last two paragraphs here and we will

also discuss specificity in more detail

in just a few minutes as well now

classes are the most common type of

selector with css

but the more specific

selector yet is an id selector and i

have an id named second an id attribute

inside of the html and here i'm going to

apply a font style and we'll set that to italic

italic

and i like to have a space afterwards

now i'll save and notice the second

paragraph became italic as well so it specifically

specifically

addressed the second paragraph now ids

should only exist once in an html

document they should be unique in other

words however it is not good practice to

really use ids inside of your css now it

will validate your code has no problem

using an id

however typically you should use classes

and sometimes element selectors but

rarely if ever should you use an id

selector inside of your css they do have

other valid uses if you remember from

html linking a form input back to a

label element and then as you learn

javascript you may have some other uses

for id attributes as well but we try to

keep them out of css and now that we've

covered the three basic types of

selectors let's discuss what you can do

with some of them just a little bit more

so let's have our h1 here and let's set

the color for the h1 to blue

and we'll save and we can see it only

selected the h1 we only have one h1 on

our page but we can also group selectors

so let's set all of the h2s as well to

blue and you can see i just put a comma

between and then

this declaration or this rule set the

entire rule set if we had more rules in

here more declarations i should say

it would apply to both the h1 and the h2

so you can go ahead and group selectors

with a comma in between now notice what

happens if i remove the comma and save

this declaration or our full rule set

especially if we had more declarations

none of it would apply

to the h1 or the h2 now what's going on

here this selector is looking for any

h2s that exist inside of an h1 it's not

looking for an h1 or an h2 it's only

looking for h2s that exist or are nested

if you will inside of an h1 so that's

why that didn't work that may be useful

to know in the future but what we need

is a comma in between and then we can

select both the h1 and all h2s on the

page with this rule set so let's look at

an example of where we would select an

element that's inside another element so

let's start with our paragraph elements

again and now we'll look for any span

element inside

any paragraph element and here let's set

a couple of values so we'll set

text dash transform

transform

and i'm going to choose

uppercase here and then i'm also going

to set a background color

color

and let's set this to gold so it stands

out we're essentially highlighting what

we want to see and now we can see

we have set this word whatever this word

is this is latin from our lorem epson

we've set it to uppercase and same with

epsom and then we also set gold behind

each of these words with this however

this doesn't make a lot of sense this is

a much better example of where we should

use a class we might name our class

something like highlight

highlight

and then apply that to our span elements inside

inside

of the index so we've come in here and

find our span

and i'll select both of these

and then

and that makes it reusable if i spell

highlight correctly there we go and save

and now it's once again applied but this

would keep our css much more organized

and actually more reusable it's more

flexible this way because we might have

some span elements doing other things

that we didn't want to apply

this rule set to and now one last

selector to discuss it exists we

wouldn't use it that often but it is the

universal selector and this means it's

selecting everything on the page you

typically only see this for what is

called a css reset that we will cover in

the future but just so you know it

exists this selects everything so let's

think about what we could apply here

that would be applicable to everything

so let's change the font

and we'll set it to this mono space font

and save and now you can see all of the

text on the page

turned into this monospace font instead

of the default font that we had now this

is not how we would use this again in

the future we'll learn about a css reset

that would use that selector but

typically that's the only time you see

that universal selector used okay let's

discuss the cascade

css is an acronym for cascading style

sheets and essentially that means css

works like a waterfall it works from the

top down and that means if i were to put

in another definition i'll just copy

this down for paragraph and where we have

have

the color purple on our first paragraph

it really applies to all but then of

course the gray class overrides that on

the final two

but if i came here and said red

red

instead of purple

notice how this paragraph

turns red and that's because

it read this rule set last so first css

looked at this at the top it starts at

the top and it works its way down and so

it read this last essentially this is

the last rule and that means whichever

definition it reads

at the last will be applied now

specificity can override this and that's

where we talked about elements and then

classes classes are more specific for example

example

than just an element selector so we have

our class here that has the color gray

and it is overriding the red now if we

remove this class and we save

now they're all red but even though

we're looking at the cascade and

starting from the top down even if i put

this class above

the paragraph selectors and save

it still applies to these last two

paragraphs because it has more specificity

specificity

than an element selector and the element

selector here purple of course is

overridden with the last rule being the

element selector here for red so we

start out with a red paragraph and it's

really applied to all paragraphs except

that then

css sees there is a gray class applied

to the second and third paragraphs and

that has more specificity so it

overrules whatever is set by the element

selector now a problem you can have is

when you have a large css file and maybe

you have set this gray class on these

paragraphs and later on let's say you're

way down a couple of hundred lines and

you're setting a color on a paragraph

and you can't understand why it's not

being applied so let's go ahead and

expand chrome here and you can right

click and choose inspect

and once you inspect your page

then you can look at the different

classes and css rules that are applied

so here's a good example of that we have

got our third paragraph highlighted up

here in the elements tab

and then we're looking at the styles and

we can see we've got paragraph rules

here these element selectors but color

purple is crossed out and then color red

is crossed out so css knows these rule

sets exist for paragraph but it also

knows it should follow what is the most

specific using the rules of specificity

so here we have a color gray that is

being applied so you can see

sometimes when you're struggling with

your css and you have written a rule and

you're not understanding why it is not

being applied you should inspect your

code with dev tools and once again you

right click and choose inspect to do

that and then just go to the correct

tabs elements

highlight the element that you want look

at the styles and you'll see how it is

being read by css in the browser or how

the browser is reading your css and then

see how those rule sets are being

applied which ones are being overridden

and which ones are actually being

applied okay i'm going to close that out

now and i'll resize chrome so i'll come

back over here to our style and once we

go to the top let's talk about

inheritance as i got into specificity a

little bit already but inheritance

that is where another element inherits

the settings from or the properties from

its parent element so the body element

is parent to

every other element here and so when we

set the font size all of these other

elements inherited that font size now

typically anything related to font or typography

typography

is inherited and that can include things

like color line height alignment all

sorts of settings dealing with the font

and the typography however any

properties that are not related to those

things are not inherited and i know

that'll just take a little bit of

getting used to as you learn more about

css so for example this font size was

inherited but another setting we could

put is a border and i'll put three

pixels so it's easy to see solid black

and i'll save this now notice the border

only went around the body element it

didn't apply to all the other elements

inside of the body so that's an example

of something that is not inherited and

i'll go ahead and remove that again now

we did briefly talk about that universal

selector let me go back to that and show

you that this is not inheritance this is

actually selecting all elements so here

if i said a border

and i'll put one pixel solid red

and save notice it does apply to all

elements that's because we selected all

the elements here so

setting something here with the

universal selector is not going to cause

inheritance really because it's actually

selecting all the elements itself okay

i'll remove the universal selector again

but getting back to just the inheritance

overall this can be very handy because

it keeps us from writing

repeated code in other words it keeps

our code dry which is an acronym that

stands for don't repeat yourself so we

want to write less code and be more

efficient and inheritance helps us do

that now some things are not inherited

like i mentioned the border would be one

of those also form elements do not

inherit say the font size and other

typography settings so it wouldn't be

that unusual

to see something like this that would

take a button and let's say an input

a text area and let me see if i'm

leaving anything else out maybe a select

anything like that and we might see then

font and set it to inherit and that

would go ahead and make those elements

inherit the font settings because just a

mental note that form elements do not

typically inherit those font settings

but now to take advantage of inheritance

and write dry code we can use the body

element which appears only once per page

or we could use the html element

and either would work

oftentimes if you're just starting out

and just remembering it might be best to

just use the body

oftentimes i use the html element

because once again the inheritance

applies there so we can save here

without see the difference now i'll go

ahead and apply it in html and once

again we have the larger font because

there are for me at least some specific

settings for the body and i like to see

those separate so i often put all of my

font settings in the html selector but

again either would work one other

element selector that i do use at times

is the main element it is a semantic

element and it should appear only once

per page but then you have to be aware

that you're only selecting the things

inside of the main element so if we look

at our page i've got the h1 inside of a

header element and not inside of the

main element so if i were to change

the font family

inside of our main selector and i change

this to mono space which is easy to see

the change with

go ahead and save you can see

all of the articles switched to mono

space but our h1 heading is still using

the other font okay coming back to

specificity just something we talked

about so a quick review that element

selector is the least specific

and then a class selector is more

specific and then although we don't want

to use them in our css an id selector is

even more specific than that

sometimes something's not working out

and you're wanting to figure out why

it's not working out or you just can't

figure it out and you get frustrated i'm

going to show you something that will

work but i'm going to recommend that you

do not use it it's kind of the nuclear

option if you will and it's to put an

exclamation mark and put important now

see how red should be applied to this

first paragraph but with the important

flag right here after our purple setting

and now i save

notice what happened it turned the first

paragraph purple notice what else

happened it also turned the second

paragraph and the third paragraph purple

now why is that well this important

essentially ruins everything else it

overrides everything so

really when you see it in code it's kind

of an indication that it's not well

organized or it's sloppy there's only a

few reasons you would really want to use

this and i feel i mean i'm hesitant to

even show it because i feel like

beginners could abuse this however

you'll see it somewhere i just want you

to know it exists

don't use it don't use it you need to

learn how to organize your code and

apply it correctly and only after you've

learned css well enough to understand

when to use that important flag that's

the only time you should use it you

should really not give up the struggle

you will learn more by struggling and

learning how to apply these selectors in

the proper way without using that

important flag i do want to show you one

thing that will help you learn and that

is the specificity calculator and i will

give a link to this in the resources you

can see they've got some basic values

here that are already fairly complicated

but you can zero these out and you can

compare two selectors to see why they

are working and why they aren't working

or why one overrules the other you can

see an element selector here for an h2

has a score of zero zero one

but if i put in my class of gray it has

a score of zero one zero in other words

ten which is a higher score

than one so the class overrules the

element selector and likewise if we put

in an id selector

like we had second

it has a score of 100 over 10 so

that is better now you could apply more

than one class for example to an element

so let's see what happens if we had a

second class and we had our highlight class

class

now this has a score of 20 but it's

still not going to be as high as a score

of 100 so this specificity calculator

will certainly help you understand why

one rule is being applied or why one

selector i should say is being applied

over another

today we're learning about css colors

i've got visual studio code here on the

left and our web page on the right it is

a basic web page and i'm using the live

server extension so when we make changes

in our css and save we'll instantly see

the changes here in our page i've got an

h1 heading and then i've got three

articles and each article has its own h2

heading and a paragraph

okay and that's really all there is you

can see it's got the default colors a

white background and black text and

that's usually what browsers default to

i've got just a few declarations over

here for our page just to make it

readable i've got a larger font size

i've declared the font family and line

height and we'll learn more about those

when we get to typography in this series

right now i want to show you just how to

set a background color first

and the first declaration we'll look at

is setting background dash color and

then notice visual studio code instantly

wants to help us it pops up a list of

color names and there are 140 color

names available in html and visual

studio code recognizes all these names

and notice it's going alphabetical so if

i type something like the letter p

it suddenly shows us all of the color

names that start with the letter p

and so on so we could just pick any one

of those i'm just going to go ahead and

pick something like blue and i'll go

ahead and save and you can see visual

studio code also shows us a little

square of blue beside the name blue

and now if we look at the page it has a

blue background now that's not nearly as

legible because we also have a dark font

so we also have to consider the contrast

when we pick colors to make it legible

and readable for our viewers and it also

needs to be accessible and there are

contrast ratios that are specified and

we'll look more at that here in the near future

future

right now besides just setting the

background color with the background

dash color

declaration we can also go ahead and

just say background that's shorthand and

it also allows us to set other

properties that we won't learn about

today but we can just set a color by

saying background and that's often the

case because it's shorter to type than

background color so you'll see this often

often

instead of blue let's change our

background color to an interesting color

name i like papaya whip so i'll save and

that's much easier to read as well so

our dark text looks good on this

background okay now that we know how to

set a background color let's change our

font color as well and we do that just

with the color property so in the

declaration we can once again name a

color so i could just say black

and that looks okay let's see if there's

a dark color yep a dark blue let's see

how that looks on top of our papaya whip background

background

well not too bad it is definitely

legible so we have determined two

different color names and we chose those

through visual studio code there the

color palette just popped up and we'll

go over that in a minute too but this is

where you'll typically see color set

background and font color and you can

set the background color to a lot of

different elements and we often have

fonts on top of those elements or inside

of the elements but on top of those

colors now let's discuss another way to

set colors instead of color names we

know we can look for color names and

visual studio code will help us

also we can use rgb which stands for red

green blue and then we put parentheses

and now this takes three values a red

value and the max value is 255 then a

green value

and a blue value notice i put zero for

both of those so this is all red and you

can see visual studio code even tells us

it's going to be red before we save our

file if i go ahead and save now all of

our text turned red

likewise i could change this and say no

red all green and no blue

and we have green text and that looks

absolutely horrible on top of that

background let's try blue now and there

we have blue text on top of the

background which is okay if we wanted

black we would go back to

all zeros and likewise if we wanted

white we would have 255 for each value

now as we previously learned about the

cascade we can go ahead and define a

color of text on the body but then we

can override it inside of some of the

elements so let's say our paragraphs

here and we want to override that with a

different color so maybe we want

a blue text for the paragraphs and we

can put that here and style all of our

paragraphs now with blue text but i

don't think that looks the greatest i'm

going to go back to black but then also

there is something called rgba which

adds an alpha channel and that alpha

channel guides the transparency now

instead of 0 to 255 it has a value from

zero to one

one is just like the alpha channel

wasn't there that's normal and so that

would be the full black color and it

matches the headings that we have on the

page so you don't see a difference but 0

would make it completely transparent and

all of our paragraphs have now

disappeared however we could put it at

50 percent

and we should see the difference so the

paragraphs are not as dark as the

headings because they are fifty percent

transparent now that we've looked at rgb

and rgba let's go ahead and look at

hexadecimal which is a common way to

specify colors here the color palette

keeps wanting to help me so we will be

using that very soon hexadecimal also

works like rgb and it has its own way of

coding the values though it goes from

zero to nine

and then also uses letters a through f

and now zero just like we learned with rgb

rgb

is the absence of color so six zeros

is once again black and you'll notice

our paragraph text is totally black

likewise the highest value being the

letter f

that is full red green and blue and so

now we have white paragraphs because we

set those all the way to the highest

value so two f's in the beginning position

position

means red then zero green

and zero blue and we should have a red

paragraph and we do likewise we could

say two zeros two f's and two zeros

and we get green

and finally if we did four zeros and two f's

f's

it should be blue

so we can kind of code those in the same

way once you learn hex now if you

noticed earlier when i was typing color names

names

like dark blue and everything else here

that starts with dark

look at the hex codes over here to the

right visual studio code is already

helping show you all the different

hexadecimal codes for these

so we can of course get those codes by

typing color names if we want the code

of a name

but there are many more colors than

there are color names and you can really

expand your palette by using rgb or hex

codes now we can also type shorthand

when the color codes match so two zeros

two zeros and two zeros is black but it

could be represented just by saying zero

zero zero because each pair matched likewise

likewise

two fs two fs and two f's is white so we

could just say fff and each single f

represents a pair

so if we had

two f's two zeros and two zeros for red

we could just say f zero zero and we

still have red so our shorthand for

green would be zero f zero

and then our shorthand for blue would be

0 0

f but they have to be pairs so a hex

code like 80 80 80

doesn't have shorthand it's gray but

the 8 0 isn't a pair so it's not a 0 0

or an 8 8 so you can't really do a

shorthand for a hex code like this so

not all hex codes have short hands just

the ones that have

pairs for the red green and blue values

but i can save this and we can see kind

of a dark gray color here as well so

those are the ways to provide hex values

okay let's look at the color palette the

visual studio code has had popping up

every now and then all you have to do is

mouse over the little color square

and we get a color palette now when i

grab the circle and drag it around

notice what it's doing it's giving us

all these different hex codes up at the top

top

and here if i come all the way to the

bottom right you can see it's all black

all the way to the top right it's red

and that's because we have our hue over

here set to red as well but we can pull

this down into the blues

and we can get different colors that way

as well then we could drag this around

and if you click the bar at the top you

can switch this to hsl which we haven't

covered yet and there's rgb as well so

you can go through those different

values i'll leave it on rgb here and we

can pull

down our transparency and it immediately

goes to rgba notice we have that alpha

channel now so i'm pulling this down and

we're setting a transparent value on

there as well so now

when i leave it there and go back to

visual studio code it's already changed

our code to represent that rgba value

and i can save our file and now that is

the color of our paragraphs now that's a

little light so i want to go back

and i probably don't want it to be that

transparent so i could bring this back

up here closer to the top and save and

now we have a much darker color we would

still want to check the contrast on that

i'm not sure if there's enough contrast

or not and we'll look at a contrast

checker in just a few minutes let's go

back to the visual studio code color

palette and as i talked about hsl here i

clicked again and we had hexadecimal i'm

going to take this all the way up hsl

also has hsla which adds the alpha

channel but hsl stands for hue saturation

saturation

and lightness so i'm going to pull this

over here kind of to the middle

and that looks good and there we go

and i'll take this all the way to the

top so we're back to zero there for red

and overall i'll maybe try this in the

top corner there we go that's what i

wanted so we've got zero one hundred percent

percent

and fifty percent fifty percent means

it's right in the middle for lightness

so there's 50 percent more lightness

available or there's 50 percent we could

take away 100 would be white and 0 here

in the third value would be black likewise

likewise

100 percent here for saturation gives us

the full color and zero

gives us gray if i can pull this in here

we get the color gray no matter what

once we get down to fifty percent here

there we go fifty percent is totally gray

gray

and then if we were at a hundred percent

there on the right that's white

and zero percent

that's black so we want to be right in

the middle which would give us the gray

there but likewise then we don't have

the saturation so we'll come back across

here to the right

and try to get back up to 100 percent in

the middle and 50 percent there that

went away and now the zero we have here

for the hue well that's represented over

here on the right with this slider

notice at the top and the bottom we have red

red

and the max value here is 360. and that

means this is usually a circle it's

usually represented as a color wheel you

may have heard of a color wheel before

and we can drag this

all through the different hues so we get

all the different colors there and once

we get to about 360 we're back to red it

went back to zero so you can see that

takes through all the hues all the

different color ranges we could have

there so hue

saturation and lightness and this is

worth playing around with as well and as

you get a little bit more advanced and

learn about css variables you may decide

you really like working with hsl but

most beginners start out working with

hexadecimal rgb and color names so it

doesn't hurt to learn about any of those

let's switch this back over to rgb

switch it back to hexadecimal or you

could just switch it back to a good old

color name like red although red is not

going to look that great

as far as our page goes so i want to

take this over and pick a color i like

to use which is not quite

solid black but it is a dark color and

there we go for the paragraphs i use 3 3

3 which as you know is the same as saying

saying

3 3 3 3 3 3 and we save and we still

have the same color it's just that

shortcut can be used for those pairs

okay we've covered a lot of different

ways to pick colors and we've covered

the visual studio code color picker here

that really helps us out but we also

need to look at some tools so let's look

at the tools we've got here coolers

dot co that's c o o l o r s dot c o this

is a great

color palette picking tool and you can

start the generator and start picking

your color palettes as you go here it

takes just a minute to fire up but then

you can choose these color palettes or

press the space bar to generate all new

palettes tell it which color you want to

keep and which ones you want to get rid

of and then you can just copy these

colors here's a copy right here to copy

the hex that it shows there

and so on so this is a great source for

picking colors but what i really like on

this site is the contrast checker now i

also have the web aim contrast checker

this is web accessibility in mind and

this is really a great site for checking

accessibility features and as much as i

like their checker the one on coolers.co

is even a little bit better for me so

i've got a background i want to go with

i'm going to put this hex code in here

and now it's dark and now i'm going to

put in

white for the text color and you can see

it checks out a 7.2 which is considered

very good and if we scroll down just a

little bit it talks about the web

content accessibility guidelines so a

minimum is a double a minimum contrast

and there you want to have a contrast

ratio of at least 4.5 to 1 for normal

text and you can see we've got 7.42

so that is good you want to have three

point one or three to one for large text

and it shows here we've got three stars

for large text as well so we're doing

good there but a triple a requires at least

least

seven to one and we barely made the cut

there with or 7.4 here and then

4 and a half to 1 for large text so this

will just grade your color contrast for

you and make sure it works out so we

could go back to our code and check out

another one so let's go back to papaya

whip and here's the great thing about

visual studio code now i can click here

find the hex and it changes my papaya

whip color name to the hexadecimal code

so i'm going to put this in as the background

background

and then for the color i'm going to put in

my hex for the 333 and it just changed

it to the full hex code but you can see

this is great contrast with 11.17

and it gives the example of it here up

above as well legibility and

accessibility are very important

considerations as you pick colors for

your web page now i'm going to give

links to these resources in the

description below this video as well and

what i suggest you do as a beginner is

just play around with the different

colors play around with the visual

studio code color picker or color

palette here as well

and just kind of get comfortable with

setting colors on your page and of

course always come back and check the

contrast ratio and make sure you're

meeting those minimum requirements for

web pages

let's move on to css units units

determine the size of everything in your

page today we're going to cover the most

common css units on the left i have

visual studio code on the right i have

the chrome browser it has an h1 heading

on the page and we have one paragraph on

our page and we're displaying this page

with the live server extension so

anytime we make a change and save our

css file we'll automatically see the

changes over here on the page i'm going

to start out by just putting in a

paragraph selector

and then i'm going to put in the font

size and after that without even typing

anything look what visual studio code

gives us a lot of suggestions there are

so many different units we could choose

from so today we'll cover only the most

popular ones as we don't need to cover

all of them just the ones that you'll

see and construct your pages with most

frequently so i'm not even going to put

in a definition right now let's just

delete that and switch over to the mdn

page for values and units and we can see

a chart here of absolute length units

and really the only absolute length unit

we will use commonly is pixels and you

can see here is the equivalency it's one

pixel is equal to 196 of an inch and

really one pixel as you might guess

means one pixel on your screen

we abbreviate that with px and i say

it's the only absolute value we're going

to cover because as mdn says it's really

the only value that you will commonly

use as far as absolute units go

so let's switch back to our page and now

here in our css page i'll once again

select the paragraph

and we can set a

absolute size to the font in our

paragraph if we want to the default in

any browser is usually 16 so if i set it

to 16

we don't see a change but if i set it to 32

we definitely see a change it gets twice

as big but i don't usually want to use

an absolute value like pixels for a font

size and let me show you why normally

normally

we have a default browser size as i

mentioned that's usually 16 pixels

however if i set that on the root element

element

font size

16 pixels we don't see a change here but

if i go into my settings in chrome which

you can do with the three dots and then

choose settings once you launch that

you'll be on a settings page and then

you can choose appearance

you go to a font size user preference

and medium is what most are on but

there's also other choices from very

small to very large i'll choose very

large we definitely see a change on the

settings page right when i do that

back in our document

we don't see a change it didn't change

at all i can refresh and it won't make

any difference it did not change our

font size with the user settings and

that's because we took that choice away

when we said no these absolutely must be

16 pixels here that's our root size but

if i delete this

and we just let the browser handle the

default size

instantly all of our font gets bigger

and our user settings take over we don't

want to take that choice away from the

users so we don't want to use an

absolute font size such as a pixel

setting so i'll go ahead and delete that

so where would we want to use pixels in

absolute value there are other settings

that we might want an absolute value for

so i'll select the h1 that i have here

and i'm going to set a border on it and

i'll set it to 2 pixels and then just so

we can see it better i'll set it to

dashed and red so it really stands out

and save and now we can see this border

around our h1 element and we have this

absolute value for the pixel width and

no matter what happens to the page on a

small viewport large viewport whether

it's a mobile device or a large desktop

screen this will remain as two pixels

and that's okay in this instance let's

go back to our mdn page

and now that we've covered the only

pixel size that we were going to cover

and that was down here on our pixel chart

chart

we're going to now cover percentage and

we see that up here in a different chart

this is a numbers links and percentages

chart here

so we're going to use percentage and it

says it represents a fraction of some

other value so 50 of something else

percentages are always relative to

another quantity so that's a

consideration as well now when we set

percentages we wouldn't normally do that

with a font size either so let's set a

percentage for a width

on our h1

and now by default an h1 is a block

level element and so by default it has a

width of 100 percent so if we do that

we're not really changing anything and

now it's just 100

as expected so let's go ahead and change

that it looks at the parent though it's

taking up one hundred percent of the

parent's width or whatever was

given to it so whatever it has available

to it it took up one hundred percent and

now this is only taking up

fifty percent so let's look at the

parent for the h1 it is inside of a

header element

so if we take this header element

and we set it to a width

of 50 percent

then we should see a difference and yes

it's even smaller so we're taking up

only fifty percent of the header element

which is taking up fifty percent of the

page so really this h1 would be twenty

five percent of the page likewise if we

change this to a hundred for the header

then we'll see our h1 takes up fifty

percent of the page so that's the thing

to remember about setting a percentage

for the width is that you are putting it

relative to the parent it's only using

what it has available to it if the

header is a hundred percent

then the h1 that is the child has a

hundred percent of the page available to

it however if the header is smaller

let's put it at eighty percent

then we're only using up 50

of 80 of the page and once again if you

want an element that is a block level

element to take up 100

of the width of the page you don't

really need to set it because that is

the default value already so now we're

taking up half of the page by setting

the h1 to 50

because it is 50

of the full 100 width and you may see

other uses for percentages as well but

you commonly see them to set the sizing

of different elements as far as the

width of the page or sometimes the

height but also we don't need to set the

height because it will grow

as the content grows i'm going to go

back to my settings and set it from very

large back to medium which is where most

have their browser default to now when

we look at our page the font is smaller

but let's talk about another relative

unit and this one does show on the mdn

page in the chart down here under

relative length units and it's the rim

this is the unit that we'll typically

use for font size and it relates to the

font size of the root element now i

already suggested we shouldn't set a

font size on the root element so for our

html element

we typically wouldn't set a font size in

here because we want to let the browser

handle that and set the default font

size so let's not do this for the html

element i'll just go ahead and cut this

i'm going to put it below the h1 and i'm

going to set a font size for our

paragraphs instead and this font size if

we set it to one ram

that's already the default so it

shouldn't change anything and we see the

size is the same so it says one root

element which the root element is the

default font size set by the browser the

em doesn't stand for element by the way

that's m so we have one root em or one

root m

but that means the root size that is

defined and in our case when we don't

set it then it's set by the browser so

hopefully that clears up some confusion

but if we put in two m's then it's going

to double the default size and now we're

probably at 36 pixels right here because

most browsers default to that 16 pixel

size so you can see how this relates

back to the root now if we set a font

size on the parent because our paragraph

is in a main element

we set this font size to

2 rim also it doesn't change the

paragraph font size at all because the font

font

set here is not relative to the main

element it's not relative to the parent

it's relative to the root which is

defined by the browser so it's always

going to look back to that default root

size if we had set a font size in the

html element it would be looking at that

but without setting it it's the default size

size

so what happens though if we switch these units if we're not using rem

these units if we're not using rem if we're using

if we're using m just em so now

m just em so now i'll delete the r there and save oh boy

i'll delete the r there and save oh boy that got a lot bigger well here's the

that got a lot bigger well here's the problem that we would have if we were

problem that we would have if we were using ms for our font size it gets

using ms for our font size it gets amplified so our main element was

amplified so our main element was looking at the root so it doubled that

looking at the root so it doubled that to 32 pixels

to 32 pixels and then using two m's

and then using two m's is looking at the main element which is

is looking at the main element which is the parent of the paragraph and so then

the parent of the paragraph and so then it doubled that so now we're at 64

it doubled that so now we're at 64 pixels so that's what happens and you

pixels so that's what happens and you can get unintended consequences if you

can get unintended consequences if you just use m's and that's why using the

just use m's and that's why using the rim and always looking at the root

rim and always looking at the root definitely helps because the way we can

definitely helps because the way we can get confused for example is if i remove

get confused for example is if i remove this setting on the main and i save well

this setting on the main and i save well now this is also looking at the root

now this is also looking at the root because there's no other font size saved

because there's no other font size saved and so we think okay we're good to use

and so we think okay we're good to use just m's but the problem is

just m's but the problem is if somewhere along the way in our

if somewhere along the way in our project and we have many elements we're

project and we have many elements we're styling

styling we set another font size on a parent

we set another font size on a parent element suddenly it's amplified when we

element suddenly it's amplified when we use m's so i'm going to switch this back

use m's so i'm going to switch this back to two rims and get closer to the size

to two rims and get closer to the size we'd want and it's going to look at the

we'd want and it's going to look at the root so when would we use

root so when would we use m's instead of rims we know we want to

m's instead of rims we know we want to use rems on font size well when we set

use rems on font size well when we set the font size on an element

the font size on an element m doesn't look at the parent it looks at

m doesn't look at the parent it looks at the element itself and so we could use

the element itself and so we could use it for something like margin or padding

it for something like margin or padding which i know we haven't covered and we

which i know we haven't covered and we will in more detail when we look at the

will in more detail when we look at the css box model but i'm going to go ahead

css box model but i'm going to go ahead and do that here for the h1 so if i set

and do that here for the h1 so if i set a font size for the h1 and let's make it

a font size for the h1 and let's make it bigger let's make it three

bigger let's make it three rem here and we save we instantly have

rem here and we save we instantly have a bigger font size on the h1 but now i

a bigger font size on the h1 but now i could set

could set the padding

the padding to

to 1

1 m which is the equivalent

m which is the equivalent of the font size of that element so now

of the font size of that element so now this would also be three rims so it

this would also be three rims so it should be a pretty good size padding yes

should be a pretty good size padding yes we have a lot of padding so i probably

we have a lot of padding so i probably don't want that much maybe i want to

don't want that much maybe i want to drop it to

drop it to 0.5

0.5 and now that's that's more reasonable

and now that's that's more reasonable that looks pretty good for a heading

that looks pretty good for a heading there so we added that padding which is

there so we added that padding which is inside this border it added extra

inside this border it added extra padding and that is essentially half of

padding and that is essentially half of three rims which would be one and a half

three rims which would be one and a half and if we relate all this back to the

and if we relate all this back to the default 16 pixel size

default 16 pixel size one and a half of those

one and a half of those would be 24 pixels whereas three rims

would be 24 pixels whereas three rims would be

would be 48 pixels another instance where we may

48 pixels another instance where we may use m's instead of rims would be for the

use m's instead of rims would be for the padding or margin setting on say a

padding or margin setting on say a button if we created a button we would

button if we created a button we would have text in the button we could set the

have text in the button we could set the font size for that button with rem but

font size for that button with rem but then we could go ahead and set the

then we could go ahead and set the padding and or margin with the m units

padding and or margin with the m units let's go back to the mdn page and look

let's go back to the mdn page and look at our chart one other relative unit i'd

at our chart one other relative unit i'd like to look at today is the ch that

like to look at today is the ch that stands for character and we have the

stands for character and we have the advanced measure width of the glyph 0

advanced measure width of the glyph 0 which essentially means the character 0

which essentially means the character 0 of the element's font so whatever font

of the element's font so whatever font we're using it's the measurement of 0

we're using it's the measurement of 0 and that helps us determine the

and that helps us determine the character width

character width and that kind of comes from print

and that kind of comes from print magazine newspaper layout and those sort

magazine newspaper layout and those sort of things where you only want to have a

of things where you only want to have a certain width based on the character

certain width based on the character size so in this example we have a font

size so in this example we have a font size here for our paragraph i'm going to

size here for our paragraph i'm going to go ahead and set the width of the

go ahead and set the width of the paragraph and let's say we don't want

paragraph and let's say we don't want any more than an estimated

any more than an estimated 40 characters per line before the line

40 characters per line before the line wraps in the paragraph if we set that

wraps in the paragraph if we set that width notice it now has approximately 40

width notice it now has approximately 40 characters before the line wraps and

characters before the line wraps and that kind of helps us define columns if

that kind of helps us define columns if we're doing that in some type of layout

we're doing that in some type of layout now we've acknowledged that the browser

now we've acknowledged that the browser sets a default font size but it actually

sets a default font size but it actually sets a lot of different default styles

sets a lot of different default styles as well so let's go ahead and right

as well so let's go ahead and right click on this h1 heading and choose

click on this h1 heading and choose inspect or you could press ctrl shift

inspect or you could press ctrl shift and the letter i

and the letter i either way what we're doing is opening

either way what we're doing is opening up the dev tools it may scrunch our page

up the dev tools it may scrunch our page here a little bit but that's okay if i

here a little bit but that's okay if i highlight this h1 now it is showing

highlight this h1 now it is showing several things about the page it's

several things about the page it's showing that there's a large margin

showing that there's a large margin that's going to be the orange when i

that's going to be the orange when i highlight over

highlight over it's showing the green area and that's

it's showing the green area and that's padding that we set

padding that we set and then the blue area is the h1 itself

and then the blue area is the h1 itself right here so we see all of those things

right here so we see all of those things in dev tools when we hover over these

in dev tools when we hover over these elements and by the way i'm on the

elements and by the way i'm on the elements tab of dev tools and then if

elements tab of dev tools and then if you don't have your dev tools on the

you don't have your dev tools on the right you can click the three dots here

right you can click the three dots here and there's a dock side setting maybe

and there's a dock side setting maybe it's on the bottom for you but if you

it's on the bottom for you but if you want it on the right you can choose dock

want it on the right you can choose dock to the right just like i have here so we

to the right just like i have here so we can really see more about all of these

can really see more about all of these elements in dev tools what we can also

elements in dev tools what we can also see

see as we come down here are the styles

as we come down here are the styles and then we see the h1 and the styles

and then we see the h1 and the styles that i have set on the h1 element but

that i have set on the h1 element but underneath that we see some others as

underneath that we see some others as well and it says user agent style sheet

well and it says user agent style sheet this is what the browser is setting on

this is what the browser is setting on the h1 element by default that we don't

the h1 element by default that we don't have to and you can see we have put in a

have to and you can see we have put in a different font size so we have

different font size so we have overridden the font size for the h1

overridden the font size for the h1 element so it has crossed that out

element so it has crossed that out everything else here the display block

everything else here the display block and the different margins and even the

and the different margins and even the font weight are applied from that user

font weight are applied from that user style sheet so those are default styles

style sheet so those are default styles and we can override them just like i did

and we can override them just like i did with the font size and before we get

with the font size and before we get into these next two relative units we

into these next two relative units we are going to override some of these so

are going to override some of these so what i want to do

what i want to do is start a css reset which i'll talk

is start a css reset which i'll talk about more

about more in the tutorial of the css box model as

in the tutorial of the css box model as well but i'm going to use

well but i'm going to use the selector that selects all elements

the selector that selects all elements again our wild card selector and here

again our wild card selector and here i'm going to set the margin to zero

i'm going to set the margin to zero the padding

the padding to zero and one other setting that says

to zero and one other setting that says box

box sizing and i'm going to set that to

sizing and i'm going to set that to border box and when i save

border box and when i save notice all the padding and margin is

notice all the padding and margin is gone now our h1 is right up in the left

gone now our h1 is right up in the left corner we don't have any space between

corner we don't have any space between the paragraph and the h1 we got rid of

the paragraph and the h1 we got rid of all of those default margins and

all of those default margins and paddings that were creating that extra

paddings that were creating that extra space but that's important when we go

space but that's important when we go back to the mdn page and we look at

back to the mdn page and we look at these next two relative units we have

these next two relative units we have viewport width which is one percent of

viewport width which is one percent of the viewport's width

the viewport's width and viewport height which is one percent

and viewport height which is one percent of the viewport's height so let's look

of the viewport's height so let's look at how we can apply those but if we had

at how we can apply those but if we had that extra margin and padding there we

that extra margin and padding there we wouldn't be able to see the detail that

wouldn't be able to see the detail that i want to show okay i'm going to take

i want to show okay i'm going to take our main element here and set a width on

our main element here and set a width on it with our viewport width units

it with our viewport width units just so we can see what it is capable of

just so we can see what it is capable of and so i'll do that i also need to set a

and so i'll do that i also need to set a background color just so we can see what

background color just so we can see what we're doing better

we're doing better and i'll set this to let's say sky blue

and i'll set this to let's say sky blue and save so now we can see the width of

and save so now we can see the width of our paragraph is actually wider than the

our paragraph is actually wider than the width of our main element and so it is

width of our main element and so it is overflowing that main element but we

overflowing that main element but we have actually set the main element to 50

have actually set the main element to 50 of the width of the full page and you

of the width of the full page and you can see that's matching the 50

can see that's matching the 50 width that we have up here but i'm using

width that we have up here but i'm using the viewport with units right here there

the viewport with units right here there may be times when you want to use the

may be times when you want to use the viewport width but most of the time i

viewport width but most of the time i find myself using the percentage and

find myself using the percentage and getting the same result and i'll give an

getting the same result and i'll give an example where the percentage is actually

example where the percentage is actually a better choice so let me remove that 50

a better choice so let me remove that 50 percent and i'll remove this background

percent and i'll remove this background color that's making our page look bad

color that's making our page look bad and we'll come back up to the top and

and we'll come back up to the top and underneath our select all i'm going to

underneath our select all i'm going to choose the body element here and as i've

choose the body element here and as i've said before we don't need to set a width

said before we don't need to set a width of 100

of 100 but i'll put this in and i'm going to

but i'll put this in and i'm going to set this to

set this to 100 viewport with units instead and save

100 viewport with units instead and save now we don't really notice a change and

now we don't really notice a change and i have seen this on pages and i've even

i have seen this on pages and i've even done it myself but i figured out the

done it myself but i figured out the problem if we have a width of 100

problem if we have a width of 100 viewport width units we do have a

viewport width units we do have a problem when the content out the

problem when the content out the vertical content outgrows the page and

vertical content outgrows the page and i'll show you why so i need to go back

i'll show you why so i need to go back to the html

to the html and in the html i'm going to quickly add

and in the html i'm going to quickly add some more content so i'll say

some more content so i'll say paragraph times 10 and we'll do this

paragraph times 10 and we'll do this with

with some just sample lorem text that's an

some just sample lorem text that's an image abbreviation so when i press tab

image abbreviation so when i press tab it adds all those extra paragraphs and

it adds all those extra paragraphs and save now we've got lots of content here

save now we've got lots of content here and now we have a problem and here's the

and now we have a problem and here's the problem

problem our scroll bar showed up on the right

our scroll bar showed up on the right which is good we need that to see all of

which is good we need that to see all of this content but what also happened is

this content but what also happened is we had a scroll bar show up down here on

we had a scroll bar show up down here on the bottom

the bottom and that is because our viewport width

and that is because our viewport width when we set it to 100 as we did on the

when we set it to 100 as we did on the body right here does not account for

body right here does not account for this scroll bar on the right so as soon

this scroll bar on the right so as soon as this scroll bar on the right shows up

as this scroll bar on the right shows up and it shows up when our content

and it shows up when our content outgrows

outgrows our height

our height so when we need to scroll to see the

so when we need to scroll to see the content is when this shows up as it

content is when this shows up as it should

should but then

but then that little extra bit that we can't see

that little extra bit that we can't see creates this scroll bar so we can see it

creates this scroll bar so we can see it and that's annoying and most developers

and that's annoying and most developers don't like that horizontal scroll bar

don't like that horizontal scroll bar showing up

showing up so if you were to set the width one

so if you were to set the width one hundred percent would be much more

hundred percent would be much more desirable because now we still get the

desirable because now we still get the scroll bar here where we can scroll up

scroll bar here where we can scroll up and down vertically we do not have a

and down vertically we do not have a scroll bar on the bottom and we don't

scroll bar on the bottom and we don't usually want that but overall as i've

usually want that but overall as i've mentioned before we don't even need to

mentioned before we don't even need to set 100 width on the body as it should

set 100 width on the body as it should default to that anyway i'm going to jump

default to that anyway i'm going to jump back to the html and go ahead and undo

back to the html and go ahead and undo all of that extra content we added

all of that extra content we added and save so we're back to our normal

and save so we're back to our normal content for the page

content for the page let's go back to style as well

let's go back to style as well and let's right click once again on the

and let's right click once again on the page and i just kind of i think i

page and i just kind of i think i selected the paragraph here so when

selected the paragraph here so when devtools opens up it should be on the

devtools opens up it should be on the paragraph and we'll see that here in

paragraph and we'll see that here in just a second

just a second yep i'm on the paragraph now let's

yep i'm on the paragraph now let's highlight the body notice the body is

highlight the body notice the body is not the full height of the page it only

not the full height of the page it only grows with the content but sometimes we

grows with the content but sometimes we want a body element that is the full

want a body element that is the full height of the page even if we don't have

height of the page even if we don't have enough content to do that and we can do

enough content to do that and we can do that with the viewport height unit and

that with the viewport height unit and i'm going to do that over here

i'm going to do that over here in our code i'll choose the body element

in our code i'll choose the body element but i don't want to set height because

but i don't want to set height because that would also limit it to 100 vh and

that would also limit it to 100 vh and then we could outgrow that if our

then we could outgrow that if our content were to outgrow what i want to

content were to outgrow what i want to do is set the

do is set the min height to 100 vh

min height to 100 vh and save and now that will still allow

and save and now that will still allow the body to grow with the content if it

the body to grow with the content if it outgrows the viewport but at the same

outgrows the viewport but at the same time it's now the full page and there

time it's now the full page and there could be instances where you want that

could be instances where you want that let's move on to the css box model today

let's move on to the css box model today you'll learn that everything in css is a

you'll learn that everything in css is a box but before we finish i'll show you

box but before we finish i'll show you how to turn a box into a circle if you

how to turn a box into a circle if you want to so let's get started on the left

want to so let's get started on the left i have visual studio code and i have the

i have visual studio code and i have the code from the last tutorial we'll modify

code from the last tutorial we'll modify that in just a second on the right i

that in just a second on the right i have a basic web page once again with an

have a basic web page once again with an h1 header and a paragraph

h1 header and a paragraph and i'm using the live server extension

and i'm using the live server extension so any changes i make in the css and

so any changes i make in the css and when i save the file will immediately

when i save the file will immediately show

show then in the web page okay so everything

then in the web page okay so everything we have over here except the h1 has got

we have over here except the h1 has got to go so i'm going to delete everything

to go so i'm going to delete everything above

above and below

and below and leave the styles for the h1 and we

and leave the styles for the h1 and we can now save and we see those changes so

can now save and we see those changes so our paragraph

our paragraph text has gotten smaller

text has gotten smaller and everything else is pretty much the

and everything else is pretty much the same except we do now have the default

same except we do now have the default styles from the browser again and we'll

styles from the browser again and we'll get back to that css reset in just a bit

get back to that css reset in just a bit but right now we want to look at this

but right now we want to look at this box model and we've already drawn a box

box model and we've already drawn a box by putting a border around our h1

by putting a border around our h1 element we can see this border here

element we can see this border here defined with shorthand and we'll get

defined with shorthand and we'll get into what all of that means in just a

into what all of that means in just a second too but what i want to do first

second too but what i want to do first is drag

is drag our visual studio code over as far as i

our visual studio code over as far as i possibly can and give us some more room

possibly can and give us some more room in the browser because we're going to

in the browser because we're going to open up dev tools so once you do that

open up dev tools so once you do that you can press shift alt or i'm sorry not

you can press shift alt or i'm sorry not shift alt it is control shift i believe

shift alt it is control shift i believe and the letter i to open dev tools

and the letter i to open dev tools and if that's not working then you

and if that's not working then you should be able to no that is going to

should be able to no that is going to work it just took a second here on my

work it just took a second here on my computer

computer and if that doesn't work you could right

and if that doesn't work you could right click and choose inspect as well once

click and choose inspect as well once you have it open you may not have your

you have it open you may not have your dev tools on the right and if you don't

dev tools on the right and if you don't you can click the three dots and choose

you can click the three dots and choose where it is docked i like to have mine

where it is docked i like to have mine on the right and then you can select any

on the right and then you can select any of the elements in the html here and you

of the elements in the html here and you see it flashing over on the web page

see it flashing over on the web page because it highlights what element

because it highlights what element you've selected and i am in the elements

you've selected and i am in the elements tab that you can choose as well

tab that you can choose as well after that i'm going to select that h1

after that i'm going to select that h1 so it's inside of our header element

so it's inside of our header element here and after i select it i've got h1

here and after i select it i've got h1 and notice the colors changed on the web

and notice the colors changed on the web page this is already showing us the box

page this is already showing us the box model right here

model right here so what we have for the orange is the

so what we have for the orange is the margin and then we can clearly see our

margin and then we can clearly see our border that we put in with two pixels

border that we put in with two pixels and it is dashed and then inside of that

and it is dashed and then inside of that we see green and that is the padding and

we see green and that is the padding and then inside of that we see blue and

then inside of that we see blue and that's actually the content and now if

that's actually the content and now if we go down here where we have a styles

we go down here where we have a styles tab let's choose the computed tab and we

tab let's choose the computed tab and we actually see the box model inside of our

actually see the box model inside of our dev tools so we can highlight any aspect

dev tools so we can highlight any aspect of this so i'll go to the content first

of this so i'll go to the content first and now we only see the blue highlighted

and now we only see the blue highlighted on the web page and that is our content

on the web page and that is our content and it's showing us the actual size of

and it's showing us the actual size of the content in pixels here as well and

the content in pixels here as well and then we go to padding which is the next

then we go to padding which is the next layer the padding is once again inside

layer the padding is once again inside of the border and it just wraps around

of the border and it just wraps around our content it gives some extra space

our content it gives some extra space inside of the border gives our content a

inside of the border gives our content a little room to breathe if you will so

little room to breathe if you will so here you can see it's 24 pixels

here you can see it's 24 pixels then we have our border which it shows

then we have our border which it shows it as

it as 1.993 pixels we set it to 2 pixels hey

1.993 pixels we set it to 2 pixels hey close enough right and after the border

close enough right and after the border we have margin and you can see we didn't

we have margin and you can see we didn't set a margin so this margin is just

set a margin so this margin is just showing the space that is left

showing the space that is left after our element is there so on top we

after our element is there so on top we have 32 pixels

have 32 pixels and then we have 32 pixels on the bottom

and then we have 32 pixels on the bottom as well

as well and that's probably just because of the

and that's probably just because of the default of the h1 we didn't set a margin

default of the h1 we didn't set a margin on the right but we do see a big margin

on the right but we do see a big margin over there and that's just because

over there and that's just because we have set that 50

we have set that 50 width on our h1 so it's not taking up

width on our h1 so it's not taking up the full page space and what's left is

the full page space and what's left is occupied by margin so it's important

occupied by margin so it's important that you remember how to get here in dev

that you remember how to get here in dev tools we're on this computed tab below

tools we're on this computed tab below and you always want to be able to bring

and you always want to be able to bring up the box model to see exactly what's

up the box model to see exactly what's going on with your elements after that

going on with your elements after that it's also important to just memorize the

it's also important to just memorize the different layers of the css box model so

different layers of the css box model so starting on the inside we have content

starting on the inside we have content then we have padding then we have border

then we have padding then we have border and finally we have margin on the

and finally we have margin on the outside and now concerning our h1 and

outside and now concerning our h1 and the margin that i have highlighted

the margin that i have highlighted notice it's 32 pixels actually 32.16

notice it's 32 pixels actually 32.16 pixels and we didn't set that so that's

pixels and we didn't set that so that's a default style on the h1 we've got the

a default style on the h1 we've got the h1 selected let's go back to the styles

h1 selected let's go back to the styles tab instead of the computed tab and we

tab instead of the computed tab and we can see this if we scroll just a little

can see this if we scroll just a little bit there's the styles we set and then

bit there's the styles we set and then here are the default styles from the

here are the default styles from the browser this is a user agent style sheet

browser this is a user agent style sheet that's assigned by the browser and here

that's assigned by the browser and here you can see

you can see they assign some margin settings here

they assign some margin settings here it's

it's 0.67 em so that's essentially two-thirds

0.67 em so that's essentially two-thirds now if we remember about our units an

now if we remember about our units an e-m responds to the font size of the

e-m responds to the font size of the element and we set a font size of three

element and we set a font size of three rim which would essentially be 48 pixels

rim which would essentially be 48 pixels so two-thirds of that is coming in right

so two-thirds of that is coming in right around where we see it on our box model

around where we see it on our box model here at

here at 32.16 pixels so now that we know our

32.16 pixels so now that we know our font size is impacting the default

font size is impacting the default margin let's go ahead and change our

margin let's go ahead and change our font size and of course it will also

font size and of course it will also change our padding that we based on em

change our padding that we based on em units i'm going to change this to

units i'm going to change this to two rim if i can type here to rim and

two rim if i can type here to rim and save

save and now things have changed notice our

and now things have changed notice our margin got smaller it's

margin got smaller it's 21.44 because our font size got smaller

21.44 because our font size got smaller and this is based on an em unit an m

and this is based on an em unit an m as far as the browser is concerned so

as far as the browser is concerned so once again it's still 0.67 em

once again it's still 0.67 em but the actual size is smaller it's

but the actual size is smaller it's 21.44 pixels now changes like this can

21.44 pixels now changes like this can be really hard to keep track of and so

be really hard to keep track of and so that's why sometimes we just want to

that's why sometimes we just want to reset the browser settings for all the

reset the browser settings for all the margins and all the padding and just

margins and all the padding and just take control of them ourselves and

take control of them ourselves and that's why we use a css reset and a very

that's why we use a css reset and a very basic css restart starts with the wild

basic css restart starts with the wild card at the top and then we set margin

card at the top and then we set margin for all elements because remember this

for all elements because remember this wild card selects all elements so we set

wild card selects all elements so we set the margin to zero

the margin to zero and we set the padding to zero

and we set the padding to zero and we can save

and we can save and now all of that margin and padding

and now all of that margin and padding that is set by default is taken away and

that is set by default is taken away and you can see the body actually had a

you can see the body actually had a little bit of margin set to it as well

little bit of margin set to it as well because now we're right up to the edge

because now we're right up to the edge of the body here on our page and this

of the body here on our page and this border we set around our h1 is right up

border we set around our h1 is right up to the edge of the page as well and

to the edge of the page as well and there's one more setting i always put

there's one more setting i always put inside of the css reset and that is box

inside of the css reset and that is box dash sizing there we go and now the

dash sizing there we go and now the default

default is content box and if we save we won't

is content box and if we save we won't really notice a change here it didn't

really notice a change here it didn't really change anything because that is

really change anything because that is the default so what the content box does

the default so what the content box does is it says okay the size that we're

is it says okay the size that we're setting is this for the content and the

setting is this for the content and the content only it doesn't include

content only it doesn't include calculating the size of the padding or

calculating the size of the padding or of the border or of the margin at all so

of the border or of the margin at all so instead of 50 percent i'm going to set

instead of 50 percent i'm going to set an absolute width on here so we can

an absolute width on here so we can compare and i'll set this to say

compare and i'll set this to say 400 pixels and save now let's look over

400 pixels and save now let's look over here in our box and we can see the

here in our box and we can see the content is 400 pixels

content is 400 pixels but that doesn't account for the padding

but that doesn't account for the padding what we have here is not the 400 pixels

what we have here is not the 400 pixels we were expecting we took up more space

we were expecting we took up more space than that but if we set this to border

than that but if we set this to border box instead of content box

box instead of content box then we'll get what we expect and it's

then we'll get what we expect and it's much easier to calculate so now notice

much easier to calculate so now notice our content over here is not 400 pixels

our content over here is not 400 pixels is 348

is 348 and then we can add in

and then we can add in 24 pixels of padding on each side and

24 pixels of padding on each side and two pixels of border on each side

two pixels of border on each side and then we can get our total of 400 so

and then we can get our total of 400 so what border box does is it really helps

what border box does is it really helps us calculate the sizes that we are

us calculate the sizes that we are assigning because it goes ahead and

assigning because it goes ahead and includes the border and the padding it

includes the border and the padding it does not include the margin the margin

does not include the margin the margin is on the outside

is on the outside of our css boxes that we create

of our css boxes that we create whichever elements that we are styling

whichever elements that we are styling so the margin is not included in that

so the margin is not included in that calculation however the rest is so the

calculation however the rest is so the border and the padding and the content

border and the padding and the content all add up to that 400 pixels that i set

all add up to that 400 pixels that i set right here okay now that we've broken

right here okay now that we've broken down how the border box setting works

down how the border box setting works and looked at the css box model let's go

and looked at the css box model let's go ahead and close dev tools and let's just

ahead and close dev tools and let's just style our page a little bit with some of

style our page a little bit with some of these properties i'm going to resize the

these properties i'm going to resize the page a little bit so we have some more

page a little bit so we have some more room for visual studio code over here on

room for visual studio code over here on the left i'll pull this over

the left i'll pull this over there we go and now let's make some

there we go and now let's make some changes so one thing i have thought

changes so one thing i have thought about is our h1 right here has some

about is our h1 right here has some settings i normally probably wouldn't

settings i normally probably wouldn't put on an h1 i'm just more concerned

put on an h1 i'm just more concerned with the font there but the font size

with the font there but the font size that would be assigned by default is

that would be assigned by default is okay too so i'm going to get rid of that

okay too so i'm going to get rid of that and now these other settings i would

and now these other settings i would actually be more likely to put on the

actually be more likely to put on the container than i would on the h1 itself

container than i would on the h1 itself and the h1 is inside of a header element

and the h1 is inside of a header element so let's go ahead and save that and it

so let's go ahead and save that and it changed just a little bit but that's

changed just a little bit but that's okay i'm going to change these ems back

okay i'm going to change these ems back to rims because now i'm not setting a

to rims because now i'm not setting a font size on the header so i'm going to

font size on the header so i'm going to use 1.5 rim here

use 1.5 rim here and save and now we've got our padding

and save and now we've got our padding back to about where it was but now what

back to about where it was but now what if i wanted to assign these same

if i wanted to assign these same settings to the container that our

settings to the container that our paragraph is in and that's in the main

paragraph is in and that's in the main element so maybe i don't want this on

element so maybe i don't want this on the header maybe i want to assign a

the header maybe i want to assign a container class so i can provide these

container class so i can provide these same settings for more than one

same settings for more than one container so i'm going to quickly go

container so i'm going to quickly go over to the html

over to the html and in the html we'll set a class called

and in the html we'll set a class called container on each of these elements so

container on each of these elements so we have the header element

we have the header element and we'll set the class equal to

and we'll set the class equal to container

container and i've got one extra

quote there there we go and now i'm just going to copy this and i'll paste it

going to copy this and i'll paste it into our

into our main element as well

main element as well and save that and there we go so now

and save that and there we go so now we've got dashes around both of these

we've got dashes around both of these boxes here let's go back to the css and

boxes here let's go back to the css and make these bigger so we can see them

make these bigger so we can see them better on the page right now i'm going

better on the page right now i'm going to get rid of this hundred pixel or 400

to get rid of this hundred pixel or 400 pixel width let's go ahead and let them

pixel width let's go ahead and let them take up the full 100 percent for now

take up the full 100 percent for now okay let's go ahead and add a font size

okay let's go ahead and add a font size to the container and it will apply to

to the container and it will apply to both of these differently but we'll set

both of these differently but we'll set it to 1.5

it to 1.5 rim and save

rim and save now our fonts a little bit bigger but

now our fonts a little bit bigger but notice how the edges of the border are

notice how the edges of the border are right up against the page so on the

right up against the page so on the outside of our box we can set a margin

outside of our box we can set a margin and also set that to 1.5 ram and save

and also set that to 1.5 ram and save and now we have our two boxes and the

and now we have our two boxes and the margin has pushed them away from the

margin has pushed them away from the edge the margin has also provided space

edge the margin has also provided space between the two boxes here and now that

between the two boxes here and now that we have a font size on our container we

we have a font size on our container we could go ahead and switch this back to

could go ahead and switch this back to ems and remember

ems and remember one m one em would be the same as the

one m one em would be the same as the font size so it would be equal to the

font size so it would be equal to the 1.5 ram so if we make this change we

1.5 ram so if we make this change we just change it to one m

just change it to one m and our sizing should stay the same and

and our sizing should stay the same and it does if we change this to 1.5 it will

it does if we change this to 1.5 it will get bigger

get bigger yes and now we have more padding we

yes and now we have more padding we could add more margin by doing the same

could add more margin by doing the same if we want to so let's go ahead and do

if we want to so let's go ahead and do that

that and now let's go ahead

and now let's go ahead and experiment with the margin and the

and experiment with the margin and the padding because we don't have to have

padding because we don't have to have the same setting on the top right bottom

the same setting on the top right bottom and left and i did say that order

and left and i did say that order specifically for a reason because for

specifically for a reason because for the margin

the margin we could just say margin

we could just say margin top and here let's go ahead and say 1.5

top and here let's go ahead and say 1.5 em and save

em and save and look what happens to our other

and look what happens to our other margins the left and right margins are

margins the left and right margins are gone and you can't really see that we

gone and you can't really see that we lost the margin on the bottom but we did

lost the margin on the bottom but we did the only thing separating these

the only thing separating these containers now is the margin on the top

containers now is the margin on the top so now let's go ahead and add some

so now let's go ahead and add some margin on the right

margin on the right and here we'll set this to 2 em and save

and here we'll set this to 2 em and save so it's just a little bigger and now we

so it's just a little bigger and now we do have margin on the right but still no

do have margin on the right but still no margin on the bottom and no margin on

margin on the bottom and no margin on the left i'm going to press shift alt

the left i'm going to press shift alt and the down arrow

and the down arrow and now instead of the right i'm going

and now instead of the right i'm going to switch this one to

to switch this one to bottom

bottom and save and now we have some more

and save and now we have some more margin here on the bottom so the

margin here on the bottom so the separation between these two boxes got

separation between these two boxes got bigger that's the only thing you could

bigger that's the only thing you could really see right there and now on the

really see right there and now on the right let's go ahead and switch i mean

right let's go ahead and switch i mean on the left let's go ahead and switch

on the left let's go ahead and switch this to two ems as well and you can see

this to two ems as well and you can see we got the same thing as if we just said

we got the same thing as if we just said margin 2em except we wanted a margin on

margin 2em except we wanted a margin on top of 1.5 amps so there is shorthand

top of 1.5 amps so there is shorthand for this so i'm going to comment all

for this so i'm going to comment all four of these out

four of these out and i'll press shift alt and the letter

and i'll press shift alt and the letter a to do that

a to do that there you can see a css comment so it

there you can see a css comment so it commented those out so right now there

commented those out so right now there will be no margin once again now the

will be no margin once again now the boxes are next to each other no margin

boxes are next to each other no margin on the left and right but our shorthand

on the left and right but our shorthand is just saying margin and when i say

is just saying margin and when i say this 1.5

this 1.5 em

em that applies it to top bottom

that applies it to top bottom left and right and it actually goes in

left and right and it actually goes in the order top right bottom left

the order top right bottom left so now we could put in different

so now we could put in different settings with the shorthand if we wanted

settings with the shorthand if we wanted to so 1.5 on top

to so 1.5 on top and then

and then two m's on the right and the left and

two m's on the right and the left and then

then two m's on the bottom and i can save

two m's on the bottom and i can save and that is the same thing as when we

and that is the same thing as when we had all four of these right here now if

had all four of these right here now if i just wanted to have

i just wanted to have 1.5 on the top and the bottom and 2 on

1.5 on the top and the bottom and 2 on the left and the right i could delete

the left and the right i could delete this third setting right here

this third setting right here and that's what we get so now it will

and that's what we get so now it will take 1.5 and apply it to the top and the

take 1.5 and apply it to the top and the bottom

bottom and 2 and apply it to the right and the

and 2 and apply it to the right and the left however you can provide all four

left however you can provide all four settings so we could go three

settings so we could go three and four

and four and then we would have the shorthand

and then we would have the shorthand notice the left margin the final value

notice the left margin the final value here is much larger twice as large

here is much larger twice as large actually as the right margin and then

actually as the right margin and then the bottom is definitely larger than the

the bottom is definitely larger than the top margin because here you can see only

top margin because here you can see only the top margin as it applies to the

the top margin as it applies to the first container

first container and now you can see the top margin and

and now you can see the top margin and the bottom margin here combined to

the bottom margin here combined to create the space between the two boxes

create the space between the two boxes now this same idea for shorthand also

now this same idea for shorthand also applies to padding so i will copy these

applies to padding so i will copy these actually cut them

actually cut them and just go back to the one setting for

and just go back to the one setting for margins so that looks a little bit more

margins so that looks a little bit more normal again but now let's apply the

normal again but now let's apply the same thing to the padding and we'll see

same thing to the padding and we'll see how that changes so now we have a much

how that changes so now we have a much larger left padding of four twice as

larger left padding of four twice as much as we have on the right

much as we have on the right and then we have a larger bottom than we

and then we have a larger bottom than we do on top this is easier to see because

do on top this is easier to see because it's inside of our container and

it's inside of our container and remember if you're ever having a hard

remember if you're ever having a hard time seeing all of this different white

time seeing all of this different white space i guess i dragged visual studio

space i guess i dragged visual studio code i meant to grab the edge of chrome

code i meant to grab the edge of chrome here i'll pull this over

here i'll pull this over right click choose inspect

right click choose inspect open up the dev tools again and we can

open up the dev tools again and we can see all of this hidden white space much

see all of this hidden white space much clearer when we look at the box model so

clearer when we look at the box model so once again in dev tools choosing the

once again in dev tools choosing the computed tab

computed tab but we also need to highlight what we're

but we also need to highlight what we're going to look at so i'm going to choose

going to look at so i'm going to choose this main container and now we can see

this main container and now we can see the space as it's applied here so here's

the space as it's applied here so here's the content

the content here's the padding and see we have 48

here's the padding and see we have 48 pixels on the right but 96 on the left

pixels on the right but 96 on the left twice as much we have 36 on top but 72

twice as much we have 36 on top but 72 on the bottom which is twice as much

on the bottom which is twice as much also so we can definitely see that our

also so we can definitely see that our padding settings over here once i drag

padding settings over here once i drag this over are being applied as we

this over are being applied as we specified them in the shorthand okay

specified them in the shorthand okay back to visual studio code i'm going to

back to visual studio code i'm going to resize chrome once again so we can see

resize chrome once again so we can see our code better

our code better dragging this over

dragging this over dragging visual studio code back over

dragging visual studio code back over here there we go and we can do the same

here there we go and we can do the same thing you might expect with border

thing you might expect with border actually first worth discussing you can

actually first worth discussing you can just delete the two pixels

just delete the two pixels and then when we save it actually gets a

and then when we save it actually gets a little thicker because the default is

little thicker because the default is more like three pixels

more like three pixels for the size here i'm going to delete

for the size here i'm going to delete this odd sizing for the padding that i

this odd sizing for the padding that i used just to

used just to indicate the different

indicate the different sides for the padding and we'll go back

sides for the padding and we'll go back to kind of a normal look here we've got

to kind of a normal look here we've got two containers and they have equal

two containers and they have equal padding and equal margin around them

padding and equal margin around them these settings also apply to the

these settings also apply to the individual border sides so that means we

individual border sides so that means we can say border dash top

can say border dash top and here we could say

and here we could say 5 pixels solid and then i'll go ahead

5 pixels solid and then i'll go ahead and press shift alt and the down arrow

and press shift alt and the down arrow and then instead of border top i'll go

and then instead of border top i'll go ahead and say border

ahead and say border right and i'll say

right and i'll say 10 pixels and here i'll say dotted

10 pixels and here i'll say dotted and save

and save and now we can see we had some major

and now we can see we had some major changes here and we didn't specify a

changes here and we didn't specify a color so these settings

color so these settings were to override what we had set with

were to override what we had set with shorthand above and so the default color

shorthand above and so the default color is black but we have a dotted right and

is black but we have a dotted right and we have a solid top so we could have

we have a solid top so we could have specified different colors here as well

specified different colors here as well so we could say

so we could say green

green and then of course over here we can say

and then of course over here we can say something different like

something different like yellow and save and now

yellow and save and now that is ugly that definitely changed our

that is ugly that definitely changed our borders though so i'll switch that to

borders though so i'll switch that to blue and save our eyes just a little bit

blue and save our eyes just a little bit and if we wanted to specify these

and if we wanted to specify these individually we could even say border

individually we could even say border top

top width and then we wouldn't specify the

width and then we wouldn't specify the solid or green here so you can break out

solid or green here so you can break out each

each individual setting as well so now you

individual setting as well so now you can see we just changed the width of the

can see we just changed the width of the top one likewise instead of width

top one likewise instead of width there's also border top let me switch

there's also border top let me switch that there we go style and this is where

that there we go style and this is where we're specifying

we're specifying dotted or anything else here's ridge is

dotted or anything else here's ridge is another value we'll save that and so now

another value we'll save that and so now the top is a little bit different it

the top is a little bit different it looks pretty much like the solid setting

looks pretty much like the solid setting does

does and then of course there would be border

and then of course there would be border top

top color

color and we could turn this to any color we

and we could turn this to any color we want so i'll choose blue here as well

want so i'll choose blue here as well and now we have a dashed blue line

and now we have a dashed blue line across the top of our border so so many

across the top of our border so so many settings for the border when you break

settings for the border when you break them out individually we had border top

them out individually we had border top but then we also specified border top

but then we also specified border top width border top style border top color

width border top style border top color and then of course you can do that

and then of course you can do that instead of for top you could do right

instead of for top you could do right bottom and left as well often because of

bottom and left as well often because of this because there's so many i'll delete

this because there's so many i'll delete this i just use the short hand i usually

this i just use the short hand i usually want my borders to have the same width

want my borders to have the same width all the way around so previously i'd had

all the way around so previously i'd had two pixels here and then i chose dash

two pixels here and then i chose dash let's choose a different one here let's

let's choose a different one here let's use

use outset

outset and we'll save and we can see it changed

and we'll save and we can see it changed our frame around the box another one

our frame around the box another one that i like is called double

that i like is called double and i'll put a link to the border page

and i'll put a link to the border page from mdn in the description and you can

from mdn in the description and you can see all of the different values there

see all of the different values there let's make this larger so we can really

let's make this larger so we can really see

see the double what it does here we'll save

the double what it does here we'll save and there you go we've got our double

and there you go we've got our double lines now around each container while

lines now around each container while we're covering border one other setting

we're covering border one other setting to cover is outline outline is not part

to cover is outline outline is not part of the box model because the difference

of the box model because the difference between it and the border is that it

between it and the border is that it doesn't take up space but you style

doesn't take up space but you style outline much like you would the border

outline much like you would the border so here i'm going to choose

so here i'm going to choose 5 pixels and i'll choose solid

5 pixels and i'll choose solid and then let's make the outline a

and then let's make the outline a different color entirely let's go with

different color entirely let's go with purple and if i save this

purple and if i save this now we can see purple wrapping outside

now we can see purple wrapping outside of our border but again the outline is

of our border but again the outline is not calculated because it doesn't take

not calculated because it doesn't take up space so it's not calculated into

up space so it's not calculated into that box model equation another property

that box model equation another property that the outline has that is very handy

that the outline has that is very handy is outline dash offset so instead of

is outline dash offset so instead of being right up against our box we can

being right up against our box we can say we want the offset to be 5 pixels

say we want the offset to be 5 pixels and save and see how we pushed it now

and save and see how we pushed it now five pixels further out from our border

five pixels further out from our border so

so it's offset five pixels from the rest of

it's offset five pixels from the rest of our box and something worth considering

our box and something worth considering sometimes is using a negative value so

sometimes is using a negative value so if i put in negative 10 pixels

if i put in negative 10 pixels we'll now see the outside the outline

we'll now see the outside the outline is inside of our box here and so let's

is inside of our box here and so let's go ahead and change this some more so we

go ahead and change this some more so we get it a little further inside maybe

get it a little further inside maybe even 20 pixels and save and we can

even 20 pixels and save and we can clearly see the outline is now inside of

clearly see the outline is now inside of our box model okay in the beginning i

our box model okay in the beginning i promised to show how to turn a box into

promised to show how to turn a box into a circle before we were finished so

a circle before we were finished so let's do that i need to go back to the

let's do that i need to go back to the file tree and find our index html and

file tree and find our index html and hide the file tree with control b

hide the file tree with control b and i just want to put a div down here

and i just want to put a div down here i'm going to keep it in the side of the

i'm going to keep it in the side of the main element so i'll just type

main element so i'll just type div and then i want to give this div a

div and then i want to give this div a class and set this equal

class and set this equal to there we go to circle

to there we go to circle i still didn't spell circle right i'm

i still didn't spell circle right i'm having a rough time today save there

having a rough time today save there we've got a div with the class of circle

we've got a div with the class of circle okay we can close the html and now let's

okay we can close the html and now let's style our circle class

style our circle class so we'll start with circle definition

so we'll start with circle definition here for the class

here for the class and let's give the circle a background

and let's give the circle a background color

of gold but we haven't given it any size yet so let's say a width

yet so let's say a width of 100 pixels

of 100 pixels and a height of 100 pixels

and a height of 100 pixels and that doesn't look like much of a

and that doesn't look like much of a circle yet but it will let's go ahead

circle yet but it will let's go ahead and add a border now of two pixels we'll

and add a border now of two pixels we'll make this solid black

make this solid black and now we see our border applied to our

and now we see our border applied to our square

square and let's add an outline as well well we

and let's add an outline as well well we need a new line for that outline

need a new line for that outline now the outline can be two pixels let's

now the outline can be two pixels let's say solid and let's go with red for now

say solid and let's go with red for now so it'll match everything else a little

so it'll match everything else a little bit and stand out now let's give it an

bit and stand out now let's give it an offset also

offset also and we'll make this 0.25 round

and we'll make this 0.25 round and save so yeah we've got just a little

and save so yeah we've got just a little space there now let's create some

space there now let's create some separation from the other content and so

separation from the other content and so i'll just leave this at the top but i'll

i'll just leave this at the top but i'll make the margin

make the margin three rim

three rim and save and now it's pushed itself away

and save and now it's pushed itself away but something we didn't cover with the

but something we didn't cover with the margin if you set the margin this

margin if you set the margin this doesn't work for top and bottom but if

doesn't work for top and bottom but if you set it for

you set it for left and right notice we've got three

left and right notice we've got three rim for top and bottom now we can use

rim for top and bottom now we can use the keyword auto for left and right

the keyword auto for left and right and this will center it horizontally

and this will center it horizontally that means in the middle left and right

that means in the middle left and right so now we put what will be a circle our

so now we put what will be a circle our gold square inside of our main element

gold square inside of our main element and it's at the center horizontally not

and it's at the center horizontally not vertically but at least it is

vertically but at least it is horizontally and now to calculate our

horizontally and now to calculate our circle we essentially just need to set

circle we essentially just need to set one other border property

one other border property and we set it to half the value of the

and we set it to half the value of the width and the height so this border

width and the height so this border property is called border radius i'll

property is called border radius i'll put it right under border

and we'll set it first just so you can see how it works let's set it to 20

see how it works let's set it to 20 pixels and you'll see what border radius

pixels and you'll see what border radius does look how it rounded the corners

does look how it rounded the corners of our square so now we have more like a

of our square so now we have more like a cool button kind of like you would see

cool button kind of like you would see there and we can continue to round that

there and we can continue to round that but if we set it to 50 pixels which is

but if we set it to 50 pixels which is half of the width and half of the height

half of the width and half of the height and save

and save we've now got a circle now there's

we've now got a circle now there's always more than one way to do things in

always more than one way to do things in css and typically in programming in

css and typically in programming in general so if you've got other ways you

general so if you've got other ways you like to make circles in css go ahead and

like to make circles in css go ahead and leave those in the comments below but i

leave those in the comments below but i hope this has helped you learn about the

hope this has helped you learn about the box model today so we have the content

box model today so we have the content on the inside then we have the padding

on the inside then we have the padding then we have the border and finally on

then we have the border and finally on the outside we have the margin and when

the outside we have the margin and when we apply our basic css reset and we set

we apply our basic css reset and we set the box siding to border box the box

the box siding to border box the box sizing to border box

sizing to border box then the calculation includes the

then the calculation includes the content the padding and the border

content the padding and the border instead of just the content

instead of just the content let's move on to css typography

let's move on to css typography i'm going to paste a definition here

i'm going to paste a definition here typography is the way that text is

typography is the way that text is arranged and presented so today we'll be

arranged and presented so today we'll be working with text and font in our css

working with text and font in our css you can see i've got a css folder with a

you can see i've got a css folder with a style.css file and i have an index.html

style.css file and i have an index.html file today i'll save the style.css file

file today i'll save the style.css file and for the index.html file let's just

and for the index.html file let's just take a quick look we've got a basic web

take a quick look we've got a basic web page here and inside the body of the

page here and inside the body of the webpage we have a header element and we

webpage we have a header element and we have a main element inside the header

have a main element inside the header element we have an h1 and inside the

element we have an h1 and inside the main we have a paragraph

main we have a paragraph and then we have a simple form and our

and then we have a simple form and our form has a label input and button we'll

form has a label input and button we'll be working with all of those today let's

be working with all of those today let's go back to the style i'm also going to

go back to the style i'm also going to press ctrl b to hide the file tree and

press ctrl b to hide the file tree and now i'm going to resize vs code here so

now i'm going to resize vs code here so it's only on the left of our screen and

it's only on the left of our screen and on the right we'll have our web page and

on the right we'll have our web page and i'm using the live server extension so

i'm using the live server extension so any changes we make in the css will show

any changes we make in the css will show immediately over here in the web page

immediately over here in the web page you can see the simple web page that we

you can see the simple web page that we just went over in vs code it's got our

just went over in vs code it's got our h1 it's got our paragraph with some

h1 it's got our paragraph with some lorem epsom text and it's got our simple

lorem epsom text and it's got our simple form here with the label input and

form here with the label input and button i'm going to start our css by

button i'm going to start our css by selecting the body

selecting the body and inside the body i'm just going to

and inside the body i'm just going to set a padding of 25 percent and if you

set a padding of 25 percent and if you remember the css box model

remember the css box model setting padding of 25 sets that on all

setting padding of 25 sets that on all sides top right bottom and left so you

sides top right bottom and left so you can see it put our text right here kind

can see it put our text right here kind of in the middle of the page not exactly

of in the middle of the page not exactly centered but it lets us work with it and

centered but it lets us work with it and see it in that regard now we've covered

see it in that regard now we've covered a few things about text and font already

a few things about text and font already in this series and one of those was

in this series and one of those was setting the font size and we already

setting the font size and we already know we want to let the browser set the

know we want to let the browser set the default font size so that enables the

default font size so that enables the user to make a choice as far as their

user to make a choice as far as their settings and it also helps accessibility

settings and it also helps accessibility and then when we do set a font size like

and then when we do set a font size like i'm about to here on the body we want to

i'm about to here on the body we want to use root ems that is referencing the

use root ems that is referencing the roots font size or that default font

roots font size or that default font size that the browser sets which is

size that the browser sets which is usually defaults to 16 pixels so if i

usually defaults to 16 pixels so if i say two

say two root ems here rem this will probably set

root ems here rem this will probably set it to about 32 pixels and there you can

it to about 32 pixels and there you can see we have a much larger font size and

see we have a much larger font size and now i can see the padding's a little too

now i can see the padding's a little too large for what i want to do so i'll put

large for what i want to do so i'll put this back to 10 percent in there it's

this back to 10 percent in there it's kind of in the part of the page where

kind of in the part of the page where we'll see it the best and we'll be able

we'll see it the best and we'll be able to reference the different things we're

to reference the different things we're going to do to the text and font today

going to do to the text and font today now also notice and we learned this as

now also notice and we learned this as well in the past

well in the past that through inheritance

that through inheritance font and text settings are usually

font and text settings are usually inherited so

inherited so the children of this body element would

the children of this body element would inherit the font size of two rounds

inherit the font size of two rounds unless we set a specific one on those

unless we set a specific one on those child elements however

child elements however they do not

they do not inherit the size here inside of a form

inherit the size here inside of a form so notice the label has that font size

so notice the label has that font size inherited but it did not get inherited

inherited but it did not get inherited in the input or the button so after the

in the input or the button so after the body here we could also select both the

body here we could also select both the input

input and the button

and the button and then inside of this we could say

and then inside of this we could say font

font and inherit

and inherit and now they will both inherit that font

and now they will both inherit that font size that we put on everything else one

size that we put on everything else one other thing we've already learned is

other thing we've already learned is that we can change the color of the

that we can change the color of the different text on our page and we can

different text on our page and we can just do that through the color property

just do that through the color property so i'll change this to purple so it's a

so i'll change this to purple so it's a noticeable change we can see everything

noticeable change we can see everything changed here to purple i really don't

changed here to purple i really don't want to do that today but it is one of

want to do that today but it is one of the things we've already covered so i'm

the things we've already covered so i'm going to remove that but now we do know

going to remove that but now we do know how to change the different colors

how to change the different colors of our text on the page now i want to go

of our text on the page now i want to go ahead and remove this form as we're not

ahead and remove this form as we're not going to use it for the rest of the

going to use it for the rest of the tutorial so just quickly back inside of

tutorial so just quickly back inside of the index.html

the index.html i'll select the form and i can press

i'll select the form and i can press shift alt in the letter a to just

shift alt in the letter a to just comment that form out so we don't see it

comment that form out so we don't see it on the page but it's still there in the

on the page but it's still there in the source code if we want to go back to it

source code if we want to go back to it and we can do the same here inside of

and we can do the same here inside of our css so i'll highlight the input and

our css so i'll highlight the input and the button style press shift alt and the

the button style press shift alt and the letter a and vs code will comment out

letter a and vs code will comment out the style in the css so we've removed it

the style in the css so we've removed it essentially from our html and css but

essentially from our html and css but it's still there to reference if you

it's still there to reference if you want to go back and work with form

want to go back and work with form elements now when i'm speaking sometimes

elements now when i'm speaking sometimes i will say font when i mean text but

i will say font when i mean text but they are really two different things

they are really two different things notice i'm creating a little extra space

notice i'm creating a little extra space here in our css so we have some text

here in our css so we have some text settings that aren't impacted by the

settings that aren't impacted by the font choice at all and let's go over

font choice at all and let's go over those first so let's select our

those first so let's select our paragraph here on the page and we'll set

paragraph here on the page and we'll set some text settings for that and the

some text settings for that and the first one we should go over is text dash

first one we should go over is text dash decoration and we can see the different

decoration and we can see the different choices we get right away when we choose

choices we get right away when we choose text decoration because vs code wants to

text decoration because vs code wants to help us one typical text decoration to

help us one typical text decoration to set would be underline so let's go ahead

set would be underline so let's go ahead and save this and now we can see our

and save this and now we can see our full paragraph text is underline another

full paragraph text is underline another choice which is just the opposite is

choice which is just the opposite is over line

over line and when we set that you can see now we

and when we set that you can see now we have a line above the text instead of

have a line above the text instead of below it

below it and then there's also line dash through

and then there's also line dash through and if we save that it does exactly what

and if we save that it does exactly what you expect it to it puts a line through

you expect it to it puts a line through the text maybe you just have a few words

the text maybe you just have a few words you want to cross out and you surround

you want to cross out and you surround those words in a span element and then

those words in a span element and then you set this line through property for

you set this line through property for that specific span element and that

that specific span element and that would probably be a class you would

would probably be a class you would create to do that

create to do that so after we've gone over those text

so after we've gone over those text declaration settings the other one you

declaration settings the other one you may see is none

may see is none now that is the default for a paragraph

now that is the default for a paragraph text like this but what if you had a

text like this but what if you had a link text links are usually underlined

link text links are usually underlined by default and so setting none would

by default and so setting none would remove the underline on a link and those

remove the underline on a link and those are the typical settings i'm not going

are the typical settings i'm not going to go over every setting today because

to go over every setting today because there are so many for text but i'll go

there are so many for text but i'll go over the most common the next text

over the most common the next text setting we'll look at is text

setting we'll look at is text transform

transform and after that you can see our

and after that you can see our selections pop up here in visual studio

selections pop up here in visual studio code again so if we choose capitalize

code again so if we choose capitalize and save now it capitalized the first

and save now it capitalized the first letter of every word in our paragraph

letter of every word in our paragraph likewise we could choose lowercase

likewise we could choose lowercase and now every letter is lowercase not

and now every letter is lowercase not just the first letter but every letter

just the first letter but every letter and then we could choose uppercase and

and then we could choose uppercase and we'll get the opposite as well and now

we'll get the opposite as well and now we have all uppercase ok now after text

we have all uppercase ok now after text transform another very common text

transform another very common text setting is text align what we normally

setting is text align what we normally have

have is a line left so this is typically the

is a line left so this is typically the default for paragraphs and you see this

default for paragraphs and you see this and look to the right this is not

and look to the right this is not uniform over here each line has kind of

uniform over here each line has kind of a different ending point and this is how

a different ending point and this is how we typically see a paragraph when we're

we typically see a paragraph when we're looking at a paper or something like

looking at a paper or something like that like a a school paper however a

that like a a school paper however a newspaper might choose to justify or a

newspaper might choose to justify or a magazine paragraphs and now notice

magazine paragraphs and now notice the right hand column is uniform here

the right hand column is uniform here where it all ends at the same place just

where it all ends at the same place just like the left side does and then of

like the left side does and then of course we can text align right which is

course we can text align right which is the opposite of text align left and now

the opposite of text align left and now it's uniform on the right but it is not

it's uniform on the right but it is not on the left and sometimes when we write

on the left and sometimes when we write a paragraph we want to indent that first

a paragraph we want to indent that first line so let's remove this and save so

line so let's remove this and save so you can see the default setting so

you can see the default setting so here's our paragraph we have no indent

here's our paragraph we have no indent up here at all but we can choose text

up here at all but we can choose text dash

dash indent and here is a good spot to use

indent and here is a good spot to use em units so i'll say 2em

em units so i'll say 2em and save and now we have an indent of

and save and now we have an indent of two m's that's em units and it just

two m's that's em units and it just indents that first line of course we can

indents that first line of course we can set it to a bigger number and you can

set it to a bigger number and you can see it go over even further so you can

see it go over even further so you can really see it

really see it go into action however two seems about

go into action however two seems about right here so if we need to indent that

right here so if we need to indent that first line we can do that with text

first line we can do that with text indent and of course there are more text

indent and of course there are more text settings that you can pull up as well

settings that you can pull up as well and

and refer to mdn the mozilla developer

refer to mdn the mozilla developer network where they have great

network where they have great documentation for all of these another

documentation for all of these another way to find out about text properties

way to find out about text properties besides mdn is to just type text and

besides mdn is to just type text and then you can see visual studio code

then you can see visual studio code start to make suggestions here for some

start to make suggestions here for some other settings you may want to look up

other settings you may want to look up but i've gone over the ones that i

but i've gone over the ones that i believe are the most commonly used okay

believe are the most commonly used okay i'm going to save again so we get back

i'm going to save again so we get back to the default for our paragraph and

to the default for our paragraph and there's a few other properties that

there's a few other properties that impact typography that do not start with

impact typography that do not start with text or font so let's quickly go over

text or font so let's quickly go over those and one is line height

those and one is line height line height accepts units just like we

line height accepts units just like we went over in our unit and sizes tutorial

went over in our unit and sizes tutorial so we could use different percentages

so we could use different percentages and things like that however it also

and things like that however it also just accepts a number and the default is

just accepts a number and the default is usually right around 1.2 so we probably

usually right around 1.2 so we probably won't see much of a change to our

won't see much of a change to our paragraph when i set the line height to

paragraph when i set the line height to 1.2

1.2 however it starts to look much better

however it starts to look much better around 1.4 or 1.5 so i'll go with 1.5

around 1.4 or 1.5 so i'll go with 1.5 and i think that really increases the

and i think that really increases the readability of our paragraph not that i

readability of our paragraph not that i can read latin but just the line height

can read latin but just the line height increase here

increase here made a big difference so i'll go ahead

made a big difference so i'll go ahead and cut this and save and you can

and cut this and save and you can compare see how it looks much more

compare see how it looks much more crowded and it's a little more jumbled

crowded and it's a little more jumbled to my eyes at least but if i paste this

to my eyes at least but if i paste this in

in and save

and save that would make it much more readable

that would make it much more readable especially at a distance and on a screen

especially at a distance and on a screen sometimes my eyes get weary so i believe

sometimes my eyes get weary so i believe that helps okay i'm going to leave line

that helps okay i'm going to leave line height there because i believe that does

height there because i believe that does help the readability i'm also going to

help the readability i'm also going to add letter dash

add letter dash spacing

spacing and this does exactly what you'd think

and this does exactly what you'd think it would do it increases the space

it would do it increases the space between the letters of the words so if

between the letters of the words so if we put in

we put in oh let's go with

oh let's go with one m

one m and save

and save it really spaces those letters out

it really spaces those letters out doesn't it we probably don't want to

doesn't it we probably don't want to stick with that unless we're going for

stick with that unless we're going for some kind of special effect

some kind of special effect maybe down to 0.25 well it's definitely

maybe down to 0.25 well it's definitely more readable but it looks kind of weird

more readable but it looks kind of weird to me still maybe 0.1

and you may see text like that somewhere some time in a heading or something to

some time in a heading or something to draw attention to that looks like it may

draw attention to that looks like it may work but i wouldn't use letter spacing

work but i wouldn't use letter spacing too often because it seems normal to me

too often because it seems normal to me when it's just at

when it's just at the normal setting presented by the

the normal setting presented by the browser and in addition to letter

browser and in addition to letter spacing there is word spacing so let's

spacing there is word spacing so let's go with

go with 2m there and notice the difference it

2m there and notice the difference it really spaced those words out so we

really spaced those words out so we could come back maybe 0.5

could come back maybe 0.5 and yes we've got some extra space

and yes we've got some extra space between the words once again it's an

between the words once again it's an effect more to me than it does anything

effect more to me than it does anything to really increase the readability

to really increase the readability however maybe if we got to a much

however maybe if we got to a much smaller size maybe it would help let's

smaller size maybe it would help let's see

see well it's noticeable still i don't know

well it's noticeable still i don't know if i like it better but it is an option

if i like it better but it is an option so we have letter spacing and word

so we have letter spacing and word spacing but i do believe

spacing but i do believe increasing the line height just a little

increasing the line height just a little bit from the default that's around 1.2

bit from the default that's around 1.2 to more like 1.4 or 1.5

to more like 1.4 or 1.5 depending on the text you're working

depending on the text you're working with could really help that readability

with could really help that readability okay moving on to some font properties

okay moving on to some font properties now that actually start with the word

now that actually start with the word font and i can put in a dash

font and i can put in a dash and let me do that again put in a dash

and let me do that again put in a dash and visual studio code starts to suggest

and visual studio code starts to suggest some things the first one it does is

some things the first one it does is font size which we've already gone over

font size which we've already gone over let's skip font family for now and go to

let's skip font family for now and go to font weight so for the font weight

font weight so for the font weight that's essentially whether it's bold or

that's essentially whether it's bold or not and normal or the default is right

not and normal or the default is right around

around 400. so if i save this we won't notice

400. so if i save this we won't notice much of a change well i noticed a bit of

much of a change well i noticed a bit of a change let's see what 300 is like

a change let's see what 300 is like and yeah maybe normal was more like 300

and yeah maybe normal was more like 300 for this particular font

for this particular font but overall

but overall for 300 to 400 is kind of normal let's

for 300 to 400 is kind of normal let's go back and see what visual studio code

go back and see what visual studio code offers for values that we could choose

offers for values that we could choose from so now you see we've got 100

from so now you see we've got 100 through 900 900 being

through 900 900 being very bold and 100 being not bold at all

very bold and 100 being not bold at all and then there's also just some words we

and then there's also just some words we could choose bold bolder lighter and

could choose bold bolder lighter and then of course normal so let's go with

then of course normal so let's go with normal

normal and see what that looks like well normal

and see what that looks like well normal looks more like what we had at 400 there

looks more like what we had at 400 there let's go with

let's go with lighter

and save and it's not too light but it's noticeably

it's not too light but it's noticeably lighter than it was let's go with bolder

lighter than it was let's go with bolder and that's very bold we can definitely

and that's very bold we can definitely see the difference there so

see the difference there so 100 would be very light

100 would be very light and 900 would be very bold and if you

and 900 would be very bold and if you don't set the font weight you can expect

don't set the font weight you can expect it to be somewhere right around what

it to be somewhere right around what normal was to begin with now let's look

normal was to begin with now let's look at font

at font dash style and if we set font style

dash style and if we set font style we're setting possibly

we're setting possibly the italic

the italic setting and if we save that's exactly

setting and if we save that's exactly what you expect we have italic text

what you expect we have italic text there is also

there is also oblique which essentially is a stronger

oblique which essentially is a stronger italic it just has a little bit more

italic it just has a little bit more emphasis there and as you might expect

emphasis there and as you might expect after learning about font weight it also

after learning about font weight it also has a normal setting so that is the

has a normal setting so that is the default and it's basically that without

default and it's basically that without setting a font style as well okay now we

setting a font style as well okay now we get to the big settings something we

get to the big settings something we typically set not on an individual

typically set not on an individual paragraph unless we want to change the

paragraph unless we want to change the font specifically for the paragraph but

font specifically for the paragraph but let's set this on the overall body of

let's set this on the overall body of the page

the page this is the font family property notice

this is the font family property notice visual studio code is providing lots of

visual studio code is providing lots of suggestions here that we'll go over in

suggestions here that we'll go over in just a minute but there are some main

just a minute but there are some main generic families and one is serif and if

generic families and one is serif and if i save

i save it's pretty much what the browser

it's pretty much what the browser default already was and this is the type

default already was and this is the type of font family that we see in academic

of font family that we see in academic papers

papers newspapers

newspapers papers you'd see in school overall

papers you'd see in school overall however on the web it's much more

however on the web it's much more popular to use the sans serif family

popular to use the sans serif family if i save that you can definitely see

if i save that you can definitely see the change here

the change here and this text is more like you would see

and this text is more like you would see on many popular web pages even though

on many popular web pages even though there may be variations of

there may be variations of then another generic family is monospace

then another generic family is monospace whoops i didn't spell that right i need

whoops i didn't spell that right i need mono space there we go

mono space there we go if i save that you can see monospace has

if i save that you can see monospace has the same spacing for every character so

the same spacing for every character so this looks much more like an old

this looks much more like an old typewriter or something like that where

typewriter or something like that where it gives each character equal spacing

it gives each character equal spacing then there is also the cursive family

and that looks a little different as well you may have seen fonts like that

well you may have seen fonts like that before

before and i believe there is the fantasy

and i believe there is the fantasy family

family save that yes and that also looks

save that yes and that also looks different here

different here i would possibly think about using just

i would possibly think about using just a little bit of letter spacing it looks

a little bit of letter spacing it looks a little crowded to me but overall those

a little crowded to me but overall those are the generic families but those are

are the generic families but those are usually used as a fallback because we

usually used as a fallback because we have more specific fonts that make some

have more specific fonts that make some changes so when visual studio code was

changes so when visual studio code was suggesting these font family values

suggesting these font family values let's go with this first one we see here

let's go with this first one we see here courier new

courier new and then courier

and then courier and i'm going to press alt z so the code

and i'm going to press alt z so the code wraps over here on the left so you can

wraps over here on the left so you can see this full font family setting so

see this full font family setting so courier new is the first choice

courier new is the first choice and then the second choice is a fallback

and then the second choice is a fallback so if our computer whether it's windows

so if our computer whether it's windows mac or whatever and they do have

mac or whatever and they do have different fonts installed

different fonts installed if our computer doesn't have courier new

if our computer doesn't have courier new then it's going to look for courier and

then it's going to look for courier and finally after that it's going to look

finally after that it's going to look for mono space so it doesn't necessarily

for mono space so it doesn't necessarily use all three it uses the first choice

use all three it uses the first choice if available if not it uses the second

if available if not it uses the second choice and if not the third also notice

choice and if not the third also notice the courier new has a space in it and

the courier new has a space in it and any time the font name has a space in it

any time the font name has a space in it you need to put quotes around the name

you need to put quotes around the name to handle that spacing the names that

to handle that spacing the names that don't have a space do not need any

don't have a space do not need any quotes at all so let's save this

quotes at all so let's save this and here we are using courier new i

and here we are using courier new i believe on the page which looks a little

believe on the page which looks a little different

different now let's choose something else from a

now let's choose something else from a different font family so we had the

different font family so we had the monospace family right there let's go

monospace family right there let's go with

with arial and you can see visual studio code

arial and you can see visual studio code instantly suggests a full font stack

instantly suggests a full font stack which is what these are when you have

which is what these are when you have multiple choices

multiple choices this suggests ariel then helvetica and

this suggests ariel then helvetica and then finally the sans serif generic

then finally the sans serif generic family so let's save that

family so let's save that and this is a font you see much more

and this is a font you see much more often on the web overall and aerial is

often on the web overall and aerial is fairly commonly installed on both mac

fairly commonly installed on both mac and windows and probably linux any other

and windows and probably linux any other type of computer okay after that maybe

type of computer okay after that maybe verdana is another one in that sans

verdana is another one in that sans serif family you would see and here this

serif family you would see and here this font stack has four choices actually for

font stack has four choices actually for dania geneva tahoma and then eventually

dania geneva tahoma and then eventually sans serif also notice that sans serif

sans serif also notice that sans serif does not need quotes around it because

does not need quotes around it because it has a dash it does not have any

it has a dash it does not have any spaces so if we save that this looks

spaces so if we save that this looks just a little bit different than when we

just a little bit different than when we had arial now if we did want to choose a

had arial now if we did want to choose a serif font instead of a sans serif font

serif font instead of a sans serif font a very popular one is times new roman

a very popular one is times new roman and you can see the suggestions here

and you can see the suggestions here from vs code we've got times new roman

from vs code we've got times new roman in quotes again then times

in quotes again then times and then serif so if we save that this

and then serif so if we save that this is more like what the default browser

is more like what the default browser font looked like and i've got a couple

font looked like and i've got a couple of good links about what are called web

of good links about what are called web safe fonts and that's essentially what

safe fonts and that's essentially what is being suggested here by visual studio

is being suggested here by visual studio code when you use these stacks they're

code when you use these stacks they're fairly web safe they don't need to be

fairly web safe they don't need to be installed from an external source

installed from an external source typically the computers would already

typically the computers would already have these available to the browser i'm

have these available to the browser i'm going to switch this back to arial

going to switch this back to arial choose that and save and i'll leave the

choose that and save and i'll leave the page like this now okay i'm going to

page like this now okay i'm going to grab the browser and take it to full

grab the browser and take it to full screen now

screen now and now that we're there i'm going to go

and now that we're there i'm going to go to my next tab which is fonts.google

to my next tab which is fonts.google and now we're going to choose an

and now we're going to choose an external font from google fonts and this

external font from google fonts and this is very common practice and we can load

is very common practice and we can load this in and then use it on our page so

this in and then use it on our page so here's a very popular font roboto so we

here's a very popular font roboto so we can select it and it says it has 12

can select it and it says it has 12 different styles so now it takes us to

different styles so now it takes us to the roboto page and you can see the

the roboto page and you can see the different styles

different styles notice this says thin 100 here for this

notice this says thin 100 here for this style

style now this means

now this means that that

that that font weight is 100 essentially here's

font weight is 100 essentially here's light 300 light 300 italic so you can

light 300 light 300 italic so you can choose some of the styling right here at

choose some of the styling right here at google fonts i typically choose not to

google fonts i typically choose not to and just get a generic font and then try

and just get a generic font and then try to apply my own styles as well but you

to apply my own styles as well but you can see the different ways the font will

can see the different ways the font will appear and that's really nice to look at

appear and that's really nice to look at like that so i would typically just

like that so i would typically just choose the regular 400 and see if i

choose the regular 400 and see if i could modify it with my own css now

could modify it with my own css now there are different ways we can link to

there are different ways we can link to this

this google fonts lets us choose a link that

google fonts lets us choose a link that we can put in the head element of our

we can put in the head element of our html

html or it lets us choose an import let's

or it lets us choose an import let's look at the link version first so if i

look at the link version first so if i were to do that i would be choosing this

were to do that i would be choosing this link section here and it says i have

link section here and it says i have more than one link selected so i

more than one link selected so i previously had selected another font

previously had selected another font here i'm going to click the minus symbol

here i'm going to click the minus symbol and remove it so i only have roboto

and remove it so i only have roboto and now there is still this link section

and now there is still this link section i would need to copy all of this

i would need to copy all of this and then i would do that with control c

and then i would do that with control c for example now i would need to go back

for example now i would need to go back to my code so let's do that

to my code so let's do that and here inside of the code i'm going to

and here inside of the code i'm going to need to go to the html

need to go to the html and then let's make this take up the

and then let's make this take up the full screen for a little bit

full screen for a little bit and inside of the html in the head

and inside of the html in the head section

section before the link to my style sheet

before the link to my style sheet because it needs to use the fonts i need

because it needs to use the fonts i need to paste in

to paste in these extra link elements that google

these extra link elements that google provided so it's going to get the

provided so it's going to get the information from google fonts load it in

information from google fonts load it in and then my style sheet can read it but

and then my style sheet can read it but although we're loading it in here we're

although we're loading it in here we're not quite finished because we haven't

not quite finished because we haven't applied it to our css so they will not

applied it to our css so they will not be used yet at this point i'll drag this

be used yet at this point i'll drag this back over and now google is also saying

back over and now google is also saying we need to apply this line in our css to

we need to apply this line in our css to use it notice roboto has a sans-serif

use it notice roboto has a sans-serif fallback so it's part of that font

fallback so it's part of that font family

family i'll copy that

i'll copy that go to the css and where i had ariel

go to the css and where i had ariel helvetica and sans serif here

helvetica and sans serif here i will replace it with what google

i will replace it with what google suggested and provide roboto and sans

suggested and provide roboto and sans serif now note they put quotes around

serif now note they put quotes around roboto and that won't hurt anything

roboto and that won't hurt anything either so we'll leave it as they suggest

either so we'll leave it as they suggest now let's go back to our document

now let's go back to our document and notice we're using the google font

and notice we're using the google font roboto now now you can choose more than

roboto now now you can choose more than one font from google as well the more

one font from google as well the more you attempt to load in from google

you attempt to load in from google though the longer your page will take to

though the longer your page will take to load so i suggest grabbing no more than

load so i suggest grabbing no more than you absolutely think is necessary i do

you absolutely think is necessary i do want to show you how to use the import

want to show you how to use the import in your css instead of the link in your

in your css instead of the link in your html so let's click the

html so let's click the at import here and now you can see it's

at import here and now you can see it's not quite as much code and what else i

not quite as much code and what else i like about this is it goes right in your

like about this is it goes right in your css if you want to notice they put it

css if you want to notice they put it between

between the style element which could still go

the style element which could still go inside of the head of your html if you

inside of the head of your html if you were to copy all of this

were to copy all of this i'm not going to select the style

i'm not going to select the style element tag the opening or closing just

element tag the opening or closing just what's in between because i'm going to

what's in between because i'm going to put this directly

put this directly into my css file so now that i've copied

into my css file so now that i've copied the at import statement i would normally

the at import statement i would normally put it right up here at the top of my

put it right up here at the top of my css

css and you want it before it would load

and you want it before it would load anything in now of course this is

anything in now of course this is wrapping the code because it's a longer

wrapping the code because it's a longer line with the url but i'm going to save

line with the url but i'm going to save this i'm going to go back to the html

this i'm going to go back to the html i'm going to remove all of those links

i'm going to remove all of those links that we had of course leave our own

that we had of course leave our own style sheet

style sheet and now we'll still be able to use the

and now we'll still be able to use the roboto font even though i've removed

roboto font even though i've removed those links from the head section of the

those links from the head section of the html i now have the import statement at

html i now have the import statement at the top of my css and if i go back to

the top of my css and if i go back to our document i can even reload and we

our document i can even reload and we still have the roboto font ready to use

still have the roboto font ready to use because we've imported it at the top of

because we've imported it at the top of the css

the css let's move on to styling links with css

let's move on to styling links with css you can see i've got visual studio code

you can see i've got visual studio code open i have some basic styles in from

open i have some basic styles in from the last tutorial where we have some

the last tutorial where we have some padding a font size and a font family a

padding a font size and a font family a small font stack set on the body element

small font stack set on the body element we're also importing in a font from

we're also importing in a font from google fonts you can do that if you want

google fonts you can do that if you want to and the starter code is available or

to and the starter code is available or you can set your own font family stack

you can set your own font family stack if you want to as well

if you want to as well also over in the file tree you'll see i

also over in the file tree you'll see i have an

have an index.html and in this index i have not

index.html and in this index i have not only a header with an h1 heading i have

only a header with an h1 heading i have a main element that has about five

a main element that has about five paragraphs and at least four of those

paragraphs and at least four of those paragraphs have links in them and then i

paragraphs have links in them and then i have a couple of other html files

have a couple of other html files very very basic they just contain an h1

very very basic they just contain an h1 element in the body and that's because i

element in the body and that's because i needed something to link to so i created

needed something to link to so i created a couple of those files as well so let's

a couple of those files as well so let's go back to the style and i will resize

go back to the style and i will resize visual studio code to pull it over to

visual studio code to pull it over to this half of the page and i'm going to

this half of the page and i'm going to hide the file tree by pressing ctrl b

hide the file tree by pressing ctrl b and we'll pretty much be able to see our

and we'll pretty much be able to see our styles here the only thing is a long

styles here the only thing is a long line like this import of the font will

line like this import of the font will wrap now over on the right you can see

wrap now over on the right you can see i've got chrome open and i'm using the

i've got chrome open and i'm using the live server extension so anytime we make

live server extension so anytime we make an update to our css we'll automatically

an update to our css we'll automatically see it over here on the right styling

see it over here on the right styling our hypertext links

our hypertext links is really an extension of the typography

is really an extension of the typography that we just covered in the last

that we just covered in the last tutorial in this series because it's

tutorial in this series because it's still text so a lot of the things we

still text so a lot of the things we learn about typography we can apply to

learn about typography we can apply to our links but also these links have

our links but also these links have their own default styles that are

their own default styles that are different from the rest of the text on a

different from the rest of the text on a page and when we talk about links in

page and when we talk about links in html we're talking about an anchor tag

html we're talking about an anchor tag and usually that links to something with

and usually that links to something with an href attribute so these first two

an href attribute so these first two links that i have link to google

links that i have link to google searches they're different searches one

searches they're different searches one searches for web links and one searches

searches for web links and one searches for hyper text links

for hyper text links and then i've got a couple of links that

and then i've got a couple of links that just go to the other two html pages we

just go to the other two html pages we created guitars and javascript although

created guitars and javascript although those pages actually do not have that

those pages actually do not have that content

content just went ahead and created links that

just went ahead and created links that would hold that content so let's note

would hold that content so let's note the default styles of these links

the default styles of these links they're underlined that's the first

they're underlined that's the first thing to note also if the link has not

thing to note also if the link has not been visited it's a blue color but

been visited it's a blue color but notice the hypertext links link that we

notice the hypertext links link that we have here and it is purple so we know

have here and it is purple so we know this is a visited link and we can tell

this is a visited link and we can tell all of this just by looking at the page

all of this just by looking at the page also when we point at a link it changes

also when we point at a link it changes our cursor from this arrow to a pointer

our cursor from this arrow to a pointer it's a little hand pointing its finger

it's a little hand pointing its finger at the link so that is called a pointer

at the link so that is called a pointer cursor and then there's another default

cursor and then there's another default style that we can't even see yet and

style that we can't even see yet and that is when we click on a link so i'm

that is when we click on a link so i'm going to click and hold down on this

going to click and hold down on this link and it turns red so this is when

link and it turns red so this is when the link is active and that is another

the link is active and that is another default style that is set so i'm going

default style that is set so i'm going to go ahead and let go and it goes back

to go ahead and let go and it goes back to purple without visiting the link

to purple without visiting the link and if we did visit the link and come

and if we did visit the link and come back it would still be purple as visited

back it would still be purple as visited so now that we know the default styles

so now that we know the default styles let's look at how those are set the

let's look at how those are set the first one being

first one being text decoration

text decoration that we would set and that is what

that we would set and that is what controls the underline so the default

controls the underline so the default would be underline and if we save we

would be underline and if we save we shouldn't see any difference

shouldn't see any difference but oftentimes developers want to take

but oftentimes developers want to take away that underline and style something

away that underline and style something different you do want to make sure that

different you do want to make sure that it still indicates somehow that these

it still indicates somehow that these are links you want them to stand out in

are links you want them to stand out in some way and an underline is a good way

some way and an underline is a good way for that to happen but if you want to

for that to happen but if you want to take that away you can but you have to

take that away you can but you have to do something else to make the link stand

do something else to make the link stand out okay we also mentioned the cursor so

out okay we also mentioned the cursor so we can set a cursor

we can set a cursor but really cursors have semantic values

but really cursors have semantic values and i'll see what visual studio code

and i'll see what visual studio code pulls up there's lots of different

pulls up there's lots of different choices here but let's look for example

choices here but let's look for example at a not allowed cursor and it has a

at a not allowed cursor and it has a semantic value it tells us something

semantic value it tells us something just when we see it so when i point at

just when we see it so when i point at javascript you can see we get the

javascript you can see we get the little icon that says this is not

little icon that says this is not allowed and we know what that means so

allowed and we know what that means so really we don't want to change that from

really we don't want to change that from a pointer most of the time there is

a pointer most of the time there is not really a reason to do that so let's

not really a reason to do that so let's keep that as pointer but i'll leave that

keep that as pointer but i'll leave that here so you know the cursor can be set

here so you know the cursor can be set to different values and of course the

to different values and of course the starting color before the link has been

starting color before the link has been clicked is just set by color and here we

clicked is just set by color and here we see blue is the default color and i

see blue is the default color and i believe that is the actual default color

believe that is the actual default color and not some variant of blue let me save

and not some variant of blue let me save again and see if i see a difference

again and see if i see a difference and no it really looks the same to me

and no it really looks the same to me but it may look different to you

but it may look different to you but once i set this to blue notice what

but once i set this to blue notice what happens to the visited link it's changed

happens to the visited link it's changed because it overwrote the default value

because it overwrote the default value and then we haven't set anything for the

and then we haven't set anything for the visited link so we need to learn how to

visited link so we need to learn how to do that as well so what i'm about to

do that as well so what i'm about to show you is called a pseudo class so

show you is called a pseudo class so we'll once again select the anchor

we'll once again select the anchor element but now we put a colon

element but now we put a colon and now i can put

and now i can put a definition after here that defines

a definition after here that defines which pseudo class that i want to select

which pseudo class that i want to select and right now i want to select

and right now i want to select the visited pseudo class and pseudo

the visited pseudo class and pseudo classes represent

classes represent the current state of the element because

the current state of the element because a state of an anchor element can change

a state of an anchor element can change it has either been visited or it hasn't

it has either been visited or it hasn't and there are some others that we'll

and there are some others that we'll cover as well so for visited let's go

cover as well so for visited let's go ahead and put this back to the default

ahead and put this back to the default and save

and save and now you can see our hypertext link

and now you can see our hypertext link is once again purple now our other links

is once again purple now our other links haven't been visited so they're still

haven't been visited so they're still blue now let's look at another pseudo

blue now let's look at another pseudo class that we can define

class that we can define and this pseudo class is called hover

and this pseudo class is called hover when we hover over the link it doesn't

when we hover over the link it doesn't have a default value right now if we

have a default value right now if we hover over a link it doesn't change at

hover over a link it doesn't change at all either the visited or the not

all either the visited or the not visited link both of them still just

visited link both of them still just stay the same so let's go ahead and

stay the same so let's go ahead and change this

change this and for now let's just choose a

and for now let's just choose a different blue and i'm going to show you

different blue and i'm going to show you a trick or two where you can choose

a trick or two where you can choose something kind of in the same range of

something kind of in the same range of the color you have selected for your

the color you have selected for your link but first let's just

link but first let's just choose a blue randomly here so now when

choose a blue randomly here so now when we hover

we hover notice javascript is changing colors

notice javascript is changing colors when i hover over it and even the

when i hover over it and even the visited hypertext links will change

visited hypertext links will change color as well because now when we hover

color as well because now when we hover over the link we have changed that state

over the link we have changed that state it's now in the hover state and it is

it's now in the hover state and it is changing the color of the link and then

changing the color of the link and then remember we still have the active state

remember we still have the active state as well but

as well but right now that's not working either

right now that's not working either because that was a default style and we

because that was a default style and we have overwritten that what has followed

have overwritten that what has followed has been visited and hover

has been visited and hover and really we don't have the default

and really we don't have the default style applied anymore so let's go ahead

style applied anymore so let's go ahead and put in that active link

and put in that active link and we can change it to something like

and we can change it to something like what it was i think it was red so that

what it was i think it was red so that will definitely stand out

will definitely stand out select that and now when i click hyper

select that and now when i click hyper text link it definitely turns red and i

text link it definitely turns red and i think i visited the link and now we're

think i visited the link and now we're searching for hypertext links so i'll go

searching for hypertext links so i'll go back to our page

back to our page and we can see that this link was

and we can see that this link was visited but if i click and hold down we

visited but if i click and hold down we can see that it's active and now i'll

can see that it's active and now i'll just pull away and not visit the link

just pull away and not visit the link now we have to consider specificity and

now we have to consider specificity and we also have to consider the order these

we also have to consider the order these are in for the cascade so if we put

are in for the cascade so if we put visited

visited above

above our anchor selector

our anchor selector visited will still be applied here even

visited will still be applied here even though the anchor selector comes

though the anchor selector comes afterwards in the cascade and that's

afterwards in the cascade and that's because this visited pseudo class has

because this visited pseudo class has more specificity

more specificity than just an element just the anchor

than just an element just the anchor element and we can see that if we go to

element and we can see that if we go to the specificity calculator and i have

the specificity calculator and i have this linked to in the resources and now

this linked to in the resources and now if i just put in an anchor element you

if i just put in an anchor element you can see the score is just zero zero one

can see the score is just zero zero one but if i put in an anchor element

but if i put in an anchor element with a visited or any other

with a visited or any other pseudo selector now the pseudo selector

pseudo selector now the pseudo selector here is a class i said pseudoselector a

here is a class i said pseudoselector a pseudo class i'm selecting the pseudo

pseudo class i'm selecting the pseudo class classes attributes and pseudo

class classes attributes and pseudo classes so this has more specificity and

classes so this has more specificity and that's why the visited link continues to

that's why the visited link continues to stay purple even though the anchor

stay purple even though the anchor element comes afterwards in the cascade

element comes afterwards in the cascade but that's not usually the order we want

but that's not usually the order we want things we usually kind of want to think

things we usually kind of want to think about it in the order that we would have

about it in the order that we would have them so i'm going to put that visited

them so i'm going to put that visited back

back but now visited hover and active all

but now visited hover and active all have the same specificity and one can

have the same specificity and one can overwrite the other so we really have to

overwrite the other so we really have to think about the order we put those in

think about the order we put those in let me save this and right now they're

let me save this and right now they're all working because this is the proper

all working because this is the proper order have your anchor tag

order have your anchor tag and then have your visited pseudo class

and then have your visited pseudo class your hover sudo class and finally you're

your hover sudo class and finally you're active and they should all work so when

active and they should all work so when we hover it works

we hover it works visited of course is working and if i

visited of course is working and if i click active it is working however if i

click active it is working however if i rearrange these they may not so let me

rearrange these they may not so let me go ahead and take hover

go ahead and take hover and put it above visited and so now

and put it above visited and so now visited comes after in the cascade and

visited comes after in the cascade and when i hover

when i hover that still works it hasn't been visited

that still works it hasn't been visited but let's check our visited link

but let's check our visited link the hover doesn't work anymore so it's

the hover doesn't work anymore so it's important to have these in the correct

important to have these in the correct order i'll take hover

order i'll take hover and put it back where it belongs in this

and put it back where it belongs in this order so you want your anchor tag

order so you want your anchor tag then your pseudo class of visited

then your pseudo class of visited then your pseudo class of hover and

then your pseudo class of hover and finally your pseudo class of active

finally your pseudo class of active and there's one more very important

and there's one more very important pseudo class and you usually see it

pseudo class and you usually see it added to the same style as the hover and

added to the same style as the hover and we can do that here

we can do that here just by putting a comma

just by putting a comma and then putting in the focus pseudo

and then putting in the focus pseudo class and this really makes your page

class and this really makes your page more accessible because

more accessible because if a visitor or a user of your page is

if a visitor or a user of your page is using a screen reader and instead of

using a screen reader and instead of using a mouse they are tabbing through

using a mouse they are tabbing through your page

your page notice that right now we've selected the

notice that right now we've selected the first link here and it has the outline

first link here and it has the outline around it i am tabbing through the links

around it i am tabbing through the links and by doing that when it has focus it

and by doing that when it has focus it is changing the color of the link just

is changing the color of the link just like we did with the hover and that's

like we did with the hover and that's important to make your page accessible

important to make your page accessible as well okay i'm going to take the focus

as well okay i'm going to take the focus off of that link and i'm going to remove

off of that link and i'm going to remove all of these in the anchor tag all of

all of these in the anchor tag all of these styles because they're the default

these styles because they're the default styles anyway and what i do want to put

styles anyway and what i do want to put in here is a different color

in here is a different color we often see

we often see a color of black we already have black

a color of black we already have black text

text but notice

but notice now the links are underlined with the

now the links are underlined with the black text and i commonly see this on

black text and i commonly see this on web pages as well so we don't always

web pages as well so we don't always take away the underline sometimes we use

take away the underline sometimes we use the same color as the rest of the text

the same color as the rest of the text but we add the underline to make them

but we add the underline to make them stand out notice you can still have a

stand out notice you can still have a hover you can still have a visited color

hover you can still have a visited color if you want to but oftentimes you don't

if you want to but oftentimes you don't see a visited color either so we can

see a visited color either so we can just comment that out and leave it in

just comment that out and leave it in the code

the code and now we don't have a different color

and now we don't have a different color for a visited link and that's okay if

for a visited link and that's okay if you want to do that

you want to do that but we still have a hover color and we

but we still have a hover color and we still have a focus color as well

still have a focus color as well so now let me back this up just i wanted

so now let me back this up just i wanted to show a different version of that i'll

to show a different version of that i'll go ahead and put the visited color back

go ahead and put the visited color back in

in and up here let's go ahead and put in

and up here let's go ahead and put in blue

blue let's do a different color though let's

let's do a different color though let's do steel blue i like that color

do steel blue i like that color we'll save and now we have steel blue

we'll save and now we have steel blue links

links and when we mouse over it looks okay but

and when we mouse over it looks okay but let me show you a couple of things you

let me show you a couple of things you can do to stay within the same color

can do to stay within the same color and yet make it noticeable that you are

and yet make it noticeable that you are hovering going back to when we covered

hovering going back to when we covered colors in the different tutorial we

colors in the different tutorial we learned how to use the vs code color

learned how to use the vs code color selector so i moused over the color here

selector so i moused over the color here and it pulled up the color selector and

and it pulled up the color selector and i can click on the color bar

i can click on the color bar and go to hex from the rgb

and go to hex from the rgb and i can also go to hsl and i'm going

and i can also go to hsl and i'm going to choose hsl here

to choose hsl here and now let's leave it at that and

and now let's leave it at that and notice it's 207 44 and 49.

notice it's 207 44 and 49. now let me just copy this

now let me just copy this and i'm going to take it to our hover

and i'm going to take it to our hover instead of the dodger blue and now right

instead of the dodger blue and now right here

here this number is the number we want to

this number is the number we want to change it changes the color and so that

change it changes the color and so that pulled it up

pulled it up and now we can just make this a little

and now we can just make this a little lighter

lighter choosing something different on the

choosing something different on the color wheel if you remember the way

color wheel if you remember the way these numbers work it's just something

these numbers work it's just something different in the wheel i'll take it down

different in the wheel i'll take it down to 189 notice the other numbers are

to 189 notice the other numbers are still the same 44

still the same 44 and 49 so we've just changed the shade

and 49 so we've just changed the shade just a little bit on the color wheel and

just a little bit on the color wheel and when we mouse over

when we mouse over it kind of goes with the color theme and

it kind of goes with the color theme and that is a good way to change that so in

that is a good way to change that so in hsl you're really only changing the

hsl you're really only changing the first number and you're selecting a

first number and you're selecting a number

number close to what you had and that is one

close to what you had and that is one way to get a similar color that

way to get a similar color that complements what you originally had

complements what you originally had another approach and i will go ahead and

another approach and i will go ahead and comment out the color

comment out the color but another approach is to use an

but another approach is to use an opacity property which is making

opacity property which is making something transparent

something transparent and remember with colors we could add

and remember with colors we could add that right inside of this hsl as well

that right inside of this hsl as well but i'll show you how to do it here with

but i'll show you how to do it here with the opacity property and let's put this

the opacity property and let's put this to

to 1 would be the max and 0 would be

1 would be the max and 0 would be completely

completely invisible transparent so let's put this

invisible transparent so let's put this around 0.9

around 0.9 to just give it a little bit of

to just give it a little bit of transparency when we mouse over

transparency when we mouse over and you can see the color changes it's

and you can see the color changes it's keeping the same color but it just gets

keeping the same color but it just gets a little bit lighter and maybe the 0.8

a little bit lighter and maybe the 0.8 would even be more noticeable let's try

would even be more noticeable let's try that

and that also works but when you learn about this

about this note that opacity will change everything

note that opacity will change everything so if you use this on something else

so if you use this on something else let's go up here

let's go up here and let's put in the main element

now if i put this in it made everything on the page a little

it made everything on the page a little bit lighter i'll make it much more

bit lighter i'll make it much more noticeable here

noticeable here now that made all of the paragraphs

now that made all of the paragraphs much more transparent so you want to be

much more transparent so you want to be careful when you use that now remember

careful when you use that now remember also

also in the hsl and also in rgba

in the hsl and also in rgba there is a channel that allows you to

there is a channel that allows you to add a transparency value so here

add a transparency value so here we could also do 0.8

and now when i mouse over we'll still get a transparency

get a transparency as well

as well and it's also changing color there so if

and it's also changing color there so if we wanted to we could put this back to

we wanted to we could put this back to the exact same color but now we've added

the exact same color but now we've added the transparency

the transparency so if we save and mouse over we still

so if we save and mouse over we still get a little lighter color and it's

get a little lighter color and it's really the same exact shade we're just

really the same exact shade we're just lightening it up with a little bit of

lightening it up with a little bit of transparency there okay before we finish

transparency there okay before we finish i just want to emphasize that these

i just want to emphasize that these pseudo classes are not just for changing

pseudo classes are not just for changing colors you can adjust other things

colors you can adjust other things although changing the color of links and

although changing the color of links and the visited hover focus active all of

the visited hover focus active all of those pseudo classes that's a common

those pseudo classes that's a common application of this but we could do

application of this but we could do other things as well one thing i've seen

other things as well one thing i've seen is changing a background so let's change

is changing a background so let's change the background here to gold and it will

the background here to gold and it will be kind of like a highlighter so when we

be kind of like a highlighter so when we focus and i'm tabbing through

focus and i'm tabbing through we're kind of highlighting the links of

we're kind of highlighting the links of course you'd want to choose a

course you'd want to choose a complementary color there as well

complementary color there as well but that is something else i have seen

but that is something else i have seen before

before is kind of adding a highlight to each

is kind of adding a highlight to each link as it has focus or as it's hovered

link as it has focus or as it's hovered over

over let's move on to styling lists with css

let's move on to styling lists with css you can see i've got visual studio code

you can see i've got visual studio code open and the starter code has an

open and the starter code has an index.html file

index.html file and in this index.html file we have a

and in this index.html file we have a header inside the body that has an h1

header inside the body that has an h1 and then we have a main element and this

and then we have a main element and this main element has two articles in it the

main element has two articles in it the first article element

first article element has an ordered list and we can see that

has an ordered list and we can see that with the h2 title and then the ordered

with the h2 title and then the ordered list underneath the second article has

list underneath the second article has an unordered list and we can see that

an unordered list and we can see that with the h2 title and the unordered list

with the h2 title and the unordered list so the only difference between these two

so the only difference between these two lists

lists is the beginning element the ol or the

is the beginning element the ol or the ul ol being ordered list and ul being

ul ol being ordered list and ul being unordered list so i wanted to take a

unordered list so i wanted to take a look at the html first

look at the html first the css that we're starting out with

the css that we're starting out with just has a couple of basic things an

just has a couple of basic things an import from google fonts where we're

import from google fonts where we're using the roboto font that you see here

using the roboto font that you see here and then just a little bit of padding

and then just a little bit of padding and setting the font size to two rims in

and setting the font size to two rims in the body so the default for the browser

the body so the default for the browser is probably 16 pixels so when we double

is probably 16 pixels so when we double that with two rims we're now at 32

that with two rims we're now at 32 pixels for anything in the body let me

pixels for anything in the body let me pull visual studio code over to the left

pull visual studio code over to the left side of the screen and here in chrome we

side of the screen and here in chrome we can see this page and so we have our

can see this page and so we have our ordered list here on top

ordered list here on top our unordered list underneath you can

our unordered list underneath you can see the ordered list has ordinal numbers

see the ordered list has ordinal numbers here one two three the unordered list

here one two three the unordered list just has bullet points

just has bullet points now i'm going to go ahead and hide the

now i'm going to go ahead and hide the file tree so we can see our css a little

file tree so we can see our css a little bit better also press alt z so anything

bit better also press alt z so anything that would be longer like this url for

that would be longer like this url for our google font wraps to the next line

our google font wraps to the next line also worth noting that we're using the

also worth noting that we're using the live server extension so

live server extension so any change we make here in the css will

any change we make here in the css will automatically see over here in the

automatically see over here in the browser as it will update immediately

browser as it will update immediately let's style the ordered list first and

let's style the ordered list first and the first property we want to look at

the first property we want to look at for the ordered list is list dash style

for the ordered list is list dash style dash type

dash type and here we get a list from vs code and

and here we get a list from vs code and we can choose different things to appear

we can choose different things to appear to the left where we see the numbers so

to the left where we see the numbers so for example let's choose lower alpha

for example let's choose lower alpha and i'll save and now we can see we have

and i'll save and now we can see we have lower alphabet letters here so abc

lower alphabet letters here so abc otherwise we can choose some other

otherwise we can choose some other things that i don't even recognize they

things that i don't even recognize they have in here like

have in here like let's get this reference again let's

let's get this reference again let's look at

look at oh georgian

oh georgian and maybe somebody else would understand

and maybe somebody else would understand these symbols i certainly don't but here

these symbols i certainly don't but here we see symbols to the left that

we see symbols to the left that represent whatever georgian is

represent whatever georgian is usually the default here is

usually the default here is decimal and so if i save that we're back

decimal and so if i save that we're back to our numbers that's the default value

to our numbers that's the default value you could also see

you could also see i believe it said decimal leading zero

i believe it said decimal leading zero there we go so if we chose that we would

there we go so if we chose that we would get a zero in front of each of the

get a zero in front of each of the numbers so you've got lots of choices to

numbers so you've got lots of choices to make and by the way list style type and

make and by the way list style type and all of the properties we'll look at can

all of the properties we'll look at can apply to unordered lists as well we're

apply to unordered lists as well we're just looking at this first with the

just looking at this first with the ordered list

ordered list so i'm going to go ahead and choose

so i'm going to go ahead and choose something here that will make this look

something here that will make this look like an unordered list at first so let's

like an unordered list at first so let's look at

look at bullet i believe it was bullet let me

bullet i believe it was bullet let me check the selection

check the selection and did i see bullet here

and did i see bullet here not bullet it's disk there we go i call

not bullet it's disk there we go i call it bullet points but they're actually

it bullet points but they're actually disks is what they're referred to

disks is what they're referred to so this looks just like our unordered

so this looks just like our unordered list now so the only way we could tell

list now so the only way we could tell that this is an ordered list is to

YouTube TranscriptPreparing your results…

YouTube Transcript:CSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours

Video Transcript

YouTube Transcript:
CSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours