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

لا حاجة لمشاهدة الفيديو بالكامل — احصل على النص الكامل وابحث عن الكلمات وانسخ بنقرة واحدة.

AutoDub

افهم فيديوهات YouTube الأجنبية

دبلجة YouTube غامرة باللغة العربية

تجاوز حواجز اللغة واستمتع بمحتوى عالمي عالي الجودة

استخدم مجاناً

نص الفيديو

[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

that this is an ordered list is to actually look at the html code at this

actually look at the html code at this point so we can make one look like the

point so we can make one look like the other another choice i often see

other another choice i often see is circle but because it's an ordered

is circle but because it's an ordered list let's stick with something that is

list let's stick with something that is in order so i believe i saw an upper

in order so i believe i saw an upper roman let's choose that one and save and

roman let's choose that one and save and so now we see roman numerals one two and

so now we see roman numerals one two and three now while we're mostly focusing on

three now while we're mostly focusing on the css primarily let's go to the html

the css primarily let's go to the html quickly and there's a couple of

quickly and there's a couple of attributes we can add that will change

attributes we can add that will change how our list appears one is the start

how our list appears one is the start attribute so let's tell this to start

attribute so let's tell this to start at three and when i save now you can see

at three and when i save now you can see we get the numbers three four and five

we get the numbers three four and five and then we can also add a

and then we can also add a reversed attribute

reversed attribute and as you might guess now it counts

and as you might guess now it counts down three

down three 1 because it starts at 3 so if we

1 because it starts at 3 so if we started this at 5

started this at 5 now it would count down 5 4 3. it's also

now it would count down 5 4 3. it's also worth noting that if we are not using

worth noting that if we are not using numbers over here such as the roman

numbers over here such as the roman numerals or decimals we still need to

numerals or decimals we still need to use a number value here for this start

use a number value here for this start attribute so if i switch this back it's

attribute so if i switch this back it's just going to be what references that so

just going to be what references that so i will switch this to

i will switch this to lower alpha once again and save and

lower alpha once again and save and you'll see it references the fifth

you'll see it references the fifth letter of the alphabet the fourth letter

letter of the alphabet the fourth letter and the third letter as it's counting

and the third letter as it's counting down from five to three let's also

down from five to three let's also consider that we could not have any kind

consider that we could not have any kind of bullet or numeric out to the left so

of bullet or numeric out to the left so let's just put none here and save and

let's just put none here and save and you'll see that that's eliminated but

you'll see that that's eliminated but notice it's still indented and that's

notice it's still indented and that's because we have some default padding so

because we have some default padding so we would have to set the padding to zero

we would have to set the padding to zero if we want our list items to go all the

if we want our list items to go all the way back to the left let's take a look

way back to the left let's take a look at that unordered list now so i'll put

at that unordered list now so i'll put ul here in our style sheet and let's set

ul here in our style sheet and let's set the list

the list style type on it as well i'm going to

style type on it as well i'm going to set that to square instead of the disks

set that to square instead of the disks and if we save we can see we have square

and if we save we can see we have square bullet points now now the next list

bullet points now now the next list property to look at

property to look at is list style position but first let's

is list style position but first let's look at an issue that might get caused

look at an issue that might get caused with list style positions so in our

with list style positions so in our unordered list

unordered list if i set the text align

if i set the text align to center and save

to center and save notice what happens to the bullet points

notice what happens to the bullet points i've centered the text but the bullet

i've centered the text but the bullet points are still to the left

points are still to the left some browsers have been known to handle

some browsers have been known to handle this differently

this differently and send the bullet points to the middle

and send the bullet points to the middle and some leave them to the left and the

and some leave them to the left and the difference is the list

difference is the list style

style position default value some browsers

position default value some browsers have a default of outside such as chrome

have a default of outside such as chrome and some have it inside or at least they

and some have it inside or at least they have at one point i haven't checked

have at one point i haven't checked browsers in a while instead of chrome

browsers in a while instead of chrome but right now i have to set the list

but right now i have to set the list style position to inside to get the

style position to inside to get the bullet points to align

bullet points to align with the text

with the text but if we set them to the default

but if we set them to the default outside they stay out to the left i'm

outside they stay out to the left i'm going to scroll up for some more room as

going to scroll up for some more room as we look at this unordered list and now

we look at this unordered list and now notice if i set the color to a blue here

notice if i set the color to a blue here with hexadecimal

with hexadecimal and save

and save it changes

it changes all list items to blue so that is worth

all list items to blue so that is worth noting as well if you set the color

noting as well if you set the color property it changes the bullet points

property it changes the bullet points and the text to blue we can set other

and the text to blue we can set other text properties to or typography

text properties to or typography properties such as line height so i'm

properties such as line height so i'm going to set this to 1.6 and you'll see

going to set this to 1.6 and you'll see some extra space between each of the

some extra space between each of the list items now the last list style

list items now the last list style property we want to look at is list

property we want to look at is list style

style image and we can set an image to use

image and we can set an image to use instead of the bullet points now let's

instead of the bullet points now let's quickly look at the file tree notice

quickly look at the file tree notice i've got an images file and in that i've

i've got an images file and in that i've got a check mark image it's

got a check mark image it's checkmark.png and we're going to use

checkmark.png and we're going to use that as we set this i'll hide the file

that as we set this i'll hide the file tree again but now we have to specify

tree again but now we have to specify url and then parentheses

url and then parentheses and then navigate the file path to the

and then navigate the file path to the image so we're going up out of the css

image so we're going up out of the css folder with two dots

folder with two dots now we put a slash and go into the

now we put a slash and go into the images folder and then we choose our

images folder and then we choose our check mark and i will save

check mark and i will save and notice those bullets have now got

and notice those bullets have now got changed to these green circles with a

changed to these green circles with a check mark in them and that's our check

check mark in them and that's our check mark png and there's also shorthand for

mark png and there's also shorthand for all three of these list style properties

all three of these list style properties i'm going to press shift alt and the

i'm going to press shift alt and the down arrow to copy down our list style

down arrow to copy down our list style image

image and then i'm going to remove the image

and then i'm going to remove the image and we just say list style and we can

and we just say list style and we can put all three properties here with

put all three properties here with shorthand so i'll quickly cut this with

shorthand so i'll quickly cut this with ctrl x and first we'll just set this to

ctrl x and first we'll just set this to square and you'll see how it overrides

square and you'll see how it overrides the list style image so we're back to

the list style image so we're back to our squares here for the bullet points

our squares here for the bullet points but then we can also supply an image and

but then we can also supply an image and when we do that the square becomes the

when we do that the square becomes the fallback in case the image would not

fallback in case the image would not load and so now when i save we've once

load and so now when i save we've once again got the image and then finally we

again got the image and then finally we can provide the position and so i'll say

can provide the position and so i'll say inside and now the images are over with

inside and now the images are over with the text of each list item so this is

the text of each list item so this is called shorthand we just say list style

called shorthand we just say list style and we can provide one two or all three

and we can provide one two or all three of these values that would be the list

of these values that would be the list style type the list style image and the

style type the list style image and the list style position

list style position we can also override styles from the

we can also override styles from the unordered list for example on each list

unordered list for example on each list item now this would apply to all list

item now this would apply to all list items even in the ordered list because

items even in the ordered list because i'm just saying li and not specifying

i'm just saying li and not specifying the unordered list or the ordered list

the unordered list or the ordered list as well but we can override styles

as well but we can override styles because this comes later in the cascade

because this comes later in the cascade as well but it's also more specific

as well but it's also more specific because we're down to the nested list

because we're down to the nested list items so if i wanted to change the color

items so if i wanted to change the color of all list items

of all list items let's do something obvious here to red

let's do something obvious here to red and there i put a hashtag first there we

and there i put a hashtag first there we go just the word red now they've all

go just the word red now they've all changed to red however if i just wanted

changed to red however if i just wanted to change the unordered list items i'd

to change the unordered list items i'd have to put the ul first and then save

have to put the ul first and then save and now it just applies to the unordered

and now it just applies to the unordered list items however what if i just wanted

list items however what if i just wanted to make the second list item read now we

to make the second list item read now we can use another pseudo class i'll put a

can use another pseudo class i'll put a colon and then nth which is nth das

colon and then nth which is nth das child and then parentheses and now i'll

child and then parentheses and now i'll just put the number 2 inside the

just put the number 2 inside the parentheses and notice it only changed

parentheses and notice it only changed the second list item in the unordered

the second list item in the unordered list to red so we were more specific

list to red so we were more specific and we just changed one list item

and we just changed one list item likewise our nth child pseudo class also

likewise our nth child pseudo class also accepts the words

accepts the words odd so if we pass in odd now the odd

odd so if we pass in odd now the odd numbered list items are red and likewise

numbered list items are red and likewise we could pass in even and do the same so

we could pass in even and do the same so now we're back to just number two

now we're back to just number two because it's the only even number and it

because it's the only even number and it is turned red and of course you could

is turned red and of course you could apply other styles besides just the

apply other styles besides just the color here as well if you wanted to

color here as well if you wanted to as you select each individual line item

as you select each individual line item or all line items in any specific list

or all line items in any specific list okay from that i want to move on from

okay from that i want to move on from the pseudo class of nth child to a

the pseudo class of nth child to a pseudo element which we have not

pseudo element which we have not introduced any of those yet in this

introduced any of those yet in this series this pseudo element is called

series this pseudo element is called marker and it starts with two colons and

marker and it starts with two colons and then the word marker and all pseudo

then the word marker and all pseudo elements should start with two colons

elements should start with two colons instead of one like a pseudo class

instead of one like a pseudo class now we can change some things about the

now we can change some things about the marker and that's usually what we would

marker and that's usually what we would have here for a bullet or letters

have here for a bullet or letters outside of an ordered list or numbers so

outside of an ordered list or numbers so let's go ahead and comment out the list

let's go ahead and comment out the list style image and i do that with shift alt

style image and i do that with shift alt in the letter a and then it comments

in the letter a and then it comments that out here in visual studio code and

that out here in visual studio code and i'll save now we're back to

i'll save now we're back to blue and red

blue and red squares which we specified up here in

squares which we specified up here in our unordered list so let's say we want

our unordered list so let's say we want to change all of those back to a black

to change all of those back to a black color but keep the text in blue and red

color but keep the text in blue and red so here we can specify a color for the

so here we can specify a color for the marker and specify the hex code for

marker and specify the hex code for black and save and now you can see once

black and save and now you can see once again we have black squares out here as

again we have black squares out here as markers i'm going to scroll up for some

markers i'm going to scroll up for some more room because there's a few other

more room because there's a few other properties we can add here as well i'm

properties we can add here as well i'm going to change this to red actually

going to change this to red actually because we'll highlight something like

because we'll highlight something like we would on a sale page i'll change the

we would on a sale page i'll change the font family of the markers and here i'll

font family of the markers and here i'll put fantasy

put fantasy and might change the size a little bit

and might change the size a little bit but they're currently still squares

but they're currently still squares we can set the font size if we wanted

we can set the font size if we wanted bigger markers like 1.5 m and save you

bigger markers like 1.5 m and save you can see those markers got quite a bit

can see those markers got quite a bit bigger i think we'll just go with one m

bigger i think we'll just go with one m for now

for now and then we can also provide content and

and then we can also provide content and this is where it gets interesting so

this is where it gets interesting so imagine we had a page

imagine we had a page selling sub sandwiches or pizzas or some

selling sub sandwiches or pizzas or some food item whatever was on sale and we

food item whatever was on sale and we said only five dollars and put a couple

said only five dollars and put a couple of arrows and now if we save you can see

of arrows and now if we save you can see that applied here but notice we didn't

that applied here but notice we didn't specify a list either so it also applied

specify a list either so it also applied to the un or i mean to the ordered list

to the un or i mean to the ordered list we have the unordered list down here but

we have the unordered list down here but before we had told the ordered list to

before we had told the ordered list to have a list style type of none but when

have a list style type of none but when we provide content it's still applied so

we provide content it's still applied so in that regard you want to be more

in that regard you want to be more specific and we could say just apply

specific and we could say just apply that to our unordered list and this is

that to our unordered list and this is just like above where we supplied the ul

just like above where we supplied the ul we could also actually say

we could also actually say li here and it would be the same result

li here and it would be the same result as well but it's all markers in our

as well but it's all markers in our unordered list so we don't have to put

unordered list so we don't have to put the li there and it identifies the

the li there and it identifies the unordered list and changes now what if

unordered list and changes now what if you want a space well currently we have

you want a space well currently we have set the list style position to inside so

set the list style position to inside so when we centered the text this kind of

when we centered the text this kind of threw that off a little bit

threw that off a little bit but also

but also we didn't allow a space so maybe we just

we didn't allow a space so maybe we just put a space in our content and save and

put a space in our content and save and that did create a little bit of space so

that did create a little bit of space so you could do it that way you could add

you could do it that way you could add left padding but since these are

left padding but since these are positioned inside the left padding would

positioned inside the left padding would be to the left of the markers so that

be to the left of the markers so that wouldn't work if you did have your

wouldn't work if you did have your markers over here on the left and

markers over here on the left and provided left padding and of course that

provided left padding and of course that would be by setting this to outside i

would be by setting this to outside i could do that really quick and you would

could do that really quick and you would see what happens

see what happens now the padding would come after the

now the padding would come after the markers but really we're going to have

markers but really we're going to have it

it inside

inside and now we just provided that space with

and now we just provided that space with a little bit of space right there now as

a little bit of space right there now as you learn more about web development you

you learn more about web development you can get creative with this content you

can get creative with this content you can put in what is called an svg and

can put in what is called an svg and those are often used for images and

those are often used for images and icons you could also put in something

icons you could also put in something called font awesome icons and other

called font awesome icons and other types of icons as well so this does hold

types of icons as well so this does hold different types of content but it's easy

different types of content but it's easy just to type in here and show an example

just to type in here and show an example like that now before i finish there is

like that now before i finish there is one other html attribute that can be

one other html attribute that can be helpful although it's rarely used i do

helpful although it's rarely used i do want to show it before we're finished so

want to show it before we're finished so let's go ahead and switch this back

let's go ahead and switch this back to something like

to something like lower alpha there we go for our ordered

lower alpha there we go for our ordered list and now our edc shows up and if you

list and now our edc shows up and if you remember that's because

remember that's because we are starting with the number five and

we are starting with the number five and it's reversed so if these were numbers

it's reversed so if these were numbers it would be five four three it

it would be five four three it corresponds to the letters but we can

corresponds to the letters but we can also specify a value so

also specify a value so if we say value here and we put in 26

if we say value here and we put in 26 this will definitely make a difference

this will definitely make a difference now notice

now notice z is the 26th letter of the alphabet so

z is the 26th letter of the alphabet so the number corresponds still to whatever

the number corresponds still to whatever the order is and we're going in reverse

the order is and we're going in reverse order so instead of x y z it went z

order so instead of x y z it went z y right here but this remained as number

y right here but this remained as number five because that's where this started

five because that's where this started so this value attribute

so this value attribute may come in useful in rare occasions i

may come in useful in rare occasions i definitely wanted to cover it i almost

definitely wanted to cover it i almost forgot to but there we go i hope you

forgot to but there we go i hope you have learned a lot about styling lists

have learned a lot about styling lists let's build a mini project for beginners

let's build a mini project for beginners after completing several lessons in this

after completing several lessons in this css tutorial series i think it's a good

css tutorial series i think it's a good idea to bring all of these different

idea to bring all of these different pieces together and apply what you've

pieces together and apply what you've learned i've got visual studio code open

learned i've got visual studio code open and in the starter code you can see i

and in the starter code you can see i have an index.html file and when we look

have an index.html file and when we look at the body of this index file you can

at the body of this index file you can see it has a nav element and inside the

see it has a nav element and inside the nav element we have an h2

nav element we have an h2 and

and a unordered list and this unordered list

a unordered list and this unordered list has several list items all have their

has several list items all have their own anchor links and it doesn't really

own anchor links and it doesn't really matter where they're linking to today i

matter where they're linking to today i just have it linking to our other pages

just have it linking to our other pages one and two that were there just to link

one and two that were there just to link to in previous tutorials but what we

to in previous tutorials but what we have is a list of appetizers entrees

have is a list of appetizers entrees desserts beverages and then it just says

desserts beverages and then it just says about things you might actually find on

about things you might actually find on a menu in a restaurant as well as a menu

a menu in a restaurant as well as a menu on a restaurant's website and then at

on a restaurant's website and then at the very bottom here we have one

the very bottom here we have one paragraph that says learn more about

paragraph that says learn more about amazing foods and i just linked to an

amazing foods and i just linked to an article on amazing foods that's because

article on amazing foods that's because we want to have one link that is not in

we want to have one link that is not in the list so we can select it separately

the list so we can select it separately or avoid selecting it if we want to so

or avoid selecting it if we want to so what i'm going to do now is drag visual

what i'm going to do now is drag visual studio code to the left and we can see

studio code to the left and we can see chrome on the right i'm using the live

chrome on the right i'm using the live server extension so we'll immediately

server extension so we'll immediately see any changes and here is our basic

see any changes and here is our basic page really no styles applied yet i'll

page really no styles applied yet i'll press ctrl b to hide the file tree and

press ctrl b to hide the file tree and click on the style.css

click on the style.css you can see we're importing the roboto

you can see we're importing the roboto font from google fonts like we learned

font from google fonts like we learned how to do in the typography chapter but

how to do in the typography chapter but we're not even using it yet so really no

we're not even using it yet so really no styles applied to the index.html so

styles applied to the index.html so let's start now and if you remember from

let's start now and if you remember from the box model chapter we covered a small

the box model chapter we covered a small css reset so the first thing i'm going

css reset so the first thing i'm going to do is apply that reset so a margin of

to do is apply that reset so a margin of zero

zero padding of zero and then we'll set box

padding of zero and then we'll set box sizing to

sizing to border box and when we save this will

border box and when we save this will eliminate some default styles and now we

eliminate some default styles and now we can see everything is way up here in the

can see everything is way up here in the corner so any of that default padding

corner so any of that default padding and margin is gone

and margin is gone now let's select the body and we'll add

now let's select the body and we'll add a few styles to it

a few styles to it that will be inherited throughout the

that will be inherited throughout the page however the first one will not be

page however the first one will not be it just applies to the body and that's

it just applies to the body and that's to put just a little bit of a margin

to put just a little bit of a margin there i actually want rem

there i actually want rem and that way when we save it pushes the

and that way when we save it pushes the text away from the top and the left just

text away from the top and the left just a little bit okay after that we're going

a little bit okay after that we're going to go ahead and set the font family so

to go ahead and set the font family so we start using that roboto font

we start using that roboto font and we'll set it to

and we'll set it to roboto with a fallback of sans serif

roboto with a fallback of sans serif and we can save that change and

and we can save that change and instantly we see the the

instantly we see the the font change over there to the right

font change over there to the right after that i want to go ahead and align

after that i want to go ahead and align the text for everything on this page to

the text for everything on this page to the center

the center normally we might put that just inside

normally we might put that just inside of one area we were building but in this

of one area we were building but in this case in this example everything on the

case in this example everything on the page will be centered for a menu and now

page will be centered for a menu and now you can see that centered over there on

you can see that centered over there on the right okay if we look back at our

the right okay if we look back at our html

html notice we're using a nav element inside

notice we're using a nav element inside the body so the next thing we're going

the body so the next thing we're going to select in our css is the nav element

to select in our css is the nav element i'll scroll up just a little bit and

i'll scroll up just a little bit and select the nav

select the nav let's put a border around the nav so

let's put a border around the nav so we'll say border 2 pixels solid and then

we'll say border 2 pixels solid and then we'll choose

we'll choose 333 which is just a little bit lighter

333 which is just a little bit lighter shade of black instead of zero zero zero

shade of black instead of zero zero zero so if we save that you can see the

so if we save that you can see the border around our nav now

border around our nav now now let's add a border radius

now let's add a border radius and that will let us round the corners

and that will let us round the corners off just a little bit we'll set that to

off just a little bit we'll set that to two rim and when we save you can see

two rim and when we save you can see those corners now change to rounded

those corners now change to rounded corners we learned about border and

corners we learned about border and border radius in our box model lesson we

border radius in our box model lesson we also learned about margin i'll set the

also learned about margin i'll set the margin for the top of the nav to zero

margin for the top of the nav to zero i'm going to set the margin for the left

i'm going to set the margin for the left and right to auto which will center it

and right to auto which will center it if our page is wide enough and it needs

if our page is wide enough and it needs to be in the center and that means the

to be in the center and that means the margin will eat up the space that's left

margin will eat up the space that's left on the left and the right and then we'll

on the left and the right and then we'll also have a margin on the bottom of one

also have a margin on the bottom of one rim now we won't notice that auto

rim now we won't notice that auto spacing because right now the nav is a

spacing because right now the nav is a block level element so it has a hundred

block level element so it has a hundred percent width except for the little bit

percent width except for the little bit of margin that we provided on the body

of margin that we provided on the body here so we have some space but if we set

here so we have some space but if we set a max width

a max width for this to let's set it to 600 pixels

for this to let's set it to 600 pixels now if we expand the page

now if we expand the page the nav element won't expand to the full

the nav element won't expand to the full 100 width so let me grab this and drag

100 width so let me grab this and drag it over so it takes up the full page and

it over so it takes up the full page and we can see now that our nav

we can see now that our nav is not the full width of the page so we

is not the full width of the page so we have limited it to a max width of 600

have limited it to a max width of 600 pixels and setting the margin to auto on

pixels and setting the margin to auto on the left and the right has

the left and the right has resulted in centering the nav on our

resulted in centering the nav on our page notice we also haven't styled the

page notice we also haven't styled the list item yet so we see these bullet

list item yet so we see these bullet points here outside of the nav we've

points here outside of the nav we've centered our text but as we learned in

centered our text but as we learned in the list

the list tutorial that the bullet points here are

tutorial that the bullet points here are set to default to be on the outside if

set to default to be on the outside if we want them at all and i think we're

we want them at all and i think we're going to remove them so i'll pull this

going to remove them so i'll pull this back over to the right and we'll

back over to the right and we'll continue styling the page i'll scroll up

continue styling the page i'll scroll up just a little bit but before we move on

just a little bit but before we move on from the nav we can set some typography

from the nav we can set some typography here that will be inherited so let's set

here that will be inherited so let's set the font size now

the font size now to three rim

to three rim and let's set the line height

and let's set the line height to

to 7 rim and when we save things should be

7 rim and when we save things should be much bigger looking back at our index

much bigger looking back at our index html again now inside the nav we have an

html again now inside the nav we have an h2 before we get to the unordered list

h2 before we get to the unordered list so let's style that h2

the first thing we'll do is give it just a little bit of padding so we'll set

a little bit of padding so we'll set that to one rim

that to one rim and now let's set a

and now let's set a well let's set a background color first

well let's set a background color first and we'll set this to gold so if we save

and we'll set this to gold so if we save now we can see we have a background

now we can see we have a background color on our h1 and it has the full

color on our h1 and it has the full width of the nav because it's a block

width of the nav because it's a block level element so it has a 100 percent

level element so it has a 100 percent width of what's available to it but

width of what's available to it but notice our border radius is not being

notice our border radius is not being respected up here the gold continues to

respected up here the gold continues to look like a square although we set a

look like a square although we set a border radius on the nav

border radius on the nav to have those curled or rounded corners

to have those curled or rounded corners so now we need to adjust the border

so now we need to adjust the border radius here on our h2 as well and what

radius here on our h2 as well and what we'll do is start in the top left we'll

we'll do is start in the top left we'll set this to

set this to two rim and now the top right is also

two rim and now the top right is also two rim because that's where the curved

two rim because that's where the curved corners are then we'll have 0 on the

corners are then we'll have 0 on the bottom right and 0 on the bottom left

bottom right and 0 on the bottom left because that still needs to be

because that still needs to be the square corners so we'll save and now

the square corners so we'll save and now notice the gold matches the curve of our

notice the gold matches the curve of our menu on the top left and top right okay

menu on the top left and top right okay i'll scroll up for some more room and

i'll scroll up for some more room and we're ready to start styling our

we're ready to start styling our unordered lists we'll put a ul here the

unordered lists we'll put a ul here the first thing we want to look at is the

first thing we want to look at is the list

list style

style position i mentioned those bullets

position i mentioned those bullets before if we put them inside

before if we put them inside we can now see them but we don't really

we can now see them but we don't really want them do we so we don't really need

want them do we so we don't really need the lift style position i just brought

the lift style position i just brought that in so we can see that yes they are

that in so we can see that yes they are still there what we want to do is say

still there what we want to do is say list style type and then just set that

list style type and then just set that to none

to none and they will disappear now we can apply

and they will disappear now we can apply a style to each list item so we'll say

a style to each list item so we'll say li

li and here we're just going to select

and here we're just going to select the border top we'll set this to one

the border top we'll set this to one pixel solid and 333 to match the outer

pixel solid and 333 to match the outer border of the nav and now we have some

border of the nav and now we have some nice separation here between each of our

nice separation here between each of our list items okay next we want to style

list items okay next we want to style the links that are inside of our list

the links that are inside of our list but notice we have a link that is not

but notice we have a link that is not inside the list down here it says learn

inside the list down here it says learn more about amazing foods so we do not

more about amazing foods so we do not want to select this link so in order to

want to select this link so in order to select the links that are only inside

select the links that are only inside the list we'll start with list item and

the list we'll start with list item and then the anchor tag and note we also

then the anchor tag and note we also want to select list item the anchor tag

want to select list item the anchor tag and the visited pseudo class and then

and the visited pseudo class and then here we're going to say text

here we're going to say text decoration

decoration set that to none

set that to none and we'll set the color

and we'll set the color to that 333 color so we have a dark

to that 333 color so we have a dark color and so now we have a dark color

color and so now we have a dark color here for visited links and links that

here for visited links and links that haven't been visited so let's quickly

haven't been visited so let's quickly visit one we just have our simple page

visit one we just have our simple page two we go back and it remains the same

two we go back and it remains the same color let's scroll up for some more room

color let's scroll up for some more room again and now we'll go ahead and style

again and now we'll go ahead and style some other pseudo classes here so we'll

some other pseudo classes here so we'll have the hover sudo class and we'll also

have the hover sudo class and we'll also have

have the focus pseudo class

the focus pseudo class and for those we'll set the background

and for those we'll set the background to the 333 so just the opposite and here

to the 333 so just the opposite and here we'll set the color

we'll set the color to

to white smoke which is just a little bit

white smoke which is just a little bit of an off-white color and let's set the

of an off-white color and let's set the cursor

cursor to pointer and now

to pointer and now when we select that or save that now we

when we select that or save that now we should see

should see the mouse over changes and so now

the mouse over changes and so now the text is that white smoke color and

the text is that white smoke color and we get a black background but that's not

we get a black background but that's not really what we want we don't want it

really what we want we don't want it just on the words we want it on the full

just on the words we want it on the full list item so we're going to have to make

list item so we're going to have to make a change to make that happen so above

a change to make that happen so above where the styling began on the different

where the styling began on the different anchor tags in the list item

anchor tags in the list item i'm going to say li with the anchor tag

i'm going to say li with the anchor tag and only that not the visited pseudo

and only that not the visited pseudo class so this is a separate selector

class so this is a separate selector we'll set this to display block which

we'll set this to display block which display is a property we haven't covered

display is a property we haven't covered yet in a previous module but we did if

yet in a previous module but we did if you took the beginner's html course as

you took the beginner's html course as well we did cover

well we did cover block display and inline display so this

block display and inline display so this is a block level element normally the

is a block level element normally the anchor tag is an inline level element so

anchor tag is an inline level element so we are changing it to a block level

we are changing it to a block level element the bonus here is the block

element the bonus here is the block level elements have 100 percent width so

level elements have 100 percent width so when i save this

when i save this this will change and now

this will change and now when i mouse over any one of these

when i mouse over any one of these this anchor tag has the full width and

this anchor tag has the full width and is filling the entire space here of each

is filling the entire space here of each one of these list items

one of these list items so now

so now this makes a big difference so i don't

this makes a big difference so i don't even have to click on the text i could

even have to click on the text i could click just over here to the left

click just over here to the left and we still go to page one so

and we still go to page one so everything works there as expected but

everything works there as expected but there's still one change we need to make

there's still one change we need to make can you guess what it is here's a hint

can you guess what it is here's a hint it's right here look at those bottom

it's right here look at those bottom corners they're not rounding either

corners they're not rounding either they're not respecting that border

they're not respecting that border radius that we set on the nav so we need

radius that we set on the nav so we need to make a change to help enforce that as

to make a change to help enforce that as well i'm going to scroll up so this will

well i'm going to scroll up so this will be the last thing we put in our file

be the last thing we put in our file this is a little more difficult than

this is a little more difficult than when we rounded the corners for the h2

when we rounded the corners for the h2 because the h2 is easy to select it was

because the h2 is easy to select it was the only one on the page

the only one on the page but what about

but what about this bottom one we have five different

this bottom one we have five different list items so how do we just select the

list items so how do we just select the last list item we're going to do that

last list item we're going to do that with a pseudo selector and this will be

with a pseudo selector and this will be called

called last dash

last dash child

child and then we can go ahead and i guess we

and then we can go ahead and i guess we need to put the a there

need to put the a there and then under that we can say border

and then under that we can say border dash radius

dash radius and now it will be zero on the top

and now it will be zero on the top because that still needs to be a square

because that still needs to be a square zero on the top right as well so top

zero on the top right as well so top left top right now this is bottom right

left top right now this is bottom right needs to have that same

needs to have that same two rem setting

two rem setting and then bottom left as well so let's

and then bottom left as well so let's save and now let's mouse over and you

save and now let's mouse over and you can see

can see that the border radius is respected here

that the border radius is respected here as we mouse over the list items so there

as we mouse over the list items so there is our basic menu and we selected all of

is our basic menu and we selected all of these without changing the link that we

these without changing the link that we had here in the bottom so again a

had here in the bottom so again a beginner's project but it certainly

beginner's project but it certainly showed you how to apply some of the

showed you how to apply some of the different things we've learned up to

different things we've learned up to this point we'll be learning more about

this point we'll be learning more about that display property that we introduced

that display property that we introduced and there's a lot more yet to learn

and there's a lot more yet to learn about css too

about css too let's move on to css display types you

let's move on to css display types you can see i have visual studio code here

can see i have visual studio code here on the left and i have an html file and

on the left and i have an html file and in the html file i have a body element a

in the html file i have a body element a main element then that is surrounding

main element then that is surrounding the other elements and inside this main

the other elements and inside this main element i have two paragraphs and in the

element i have two paragraphs and in the second paragraph i'm using a span

second paragraph i'm using a span element and that span element has a

element and that span element has a class on it of opposite around the word

class on it of opposite around the word another you can also see i've commented

another you can also see i've commented out a nav element that contains an

out a nav element that contains an unordered list that we will get to later

unordered list that we will get to later i've also got a basic css style sheet

i've also got a basic css style sheet here and inside this i'm pulling in a

here and inside this i'm pulling in a font from google fonts as we learned in

font from google fonts as we learned in the typography lesson and i've applied a

the typography lesson and i've applied a basic font size and font family then to

basic font size and font family then to the body element here in the css so

the body element here in the css so that's what we see over here on the

that's what we see over here on the right in chrome and i'm using the live

right in chrome and i'm using the live server extension so you'll see our

server extension so you'll see our changes automatically over here in the

changes automatically over here in the browser as soon as we save our css

browser as soon as we save our css now the display property in css relates

now the display property in css relates back to something we learned in the

back to something we learned in the beginning html course and that is about

beginning html course and that is about block level elements versus inline level

block level elements versus inline level elements now the paragraphs that you saw

elements now the paragraphs that you saw we've included in the html are block

we've included in the html are block level elements and they have some

level elements and they have some default properties so let's look at

default properties so let's look at those first i'm going to apply a basic

those first i'm going to apply a basic style here to the paragraph element and

style here to the paragraph element and we'll say background dash

we'll say background dash color

color and set that to let's do a light gray

and set that to let's do a light gray and when i save you can see the light

and when i save you can see the light gray extends

gray extends all the way across the page so

all the way across the page so it has a hundred percent width by

it has a hundred percent width by default automatically block level

default automatically block level elements have a default 100 percent

elements have a default 100 percent width and they stack on top of each

width and they stack on top of each other as we see here now they've also

other as we see here now they've also got some default margin as well which is

got some default margin as well which is why you see space between the paragraphs

why you see space between the paragraphs but this is important to know so every

but this is important to know so every time we use another block level element

time we use another block level element it doesn't have to be a paragraph it

it doesn't have to be a paragraph it could be any element that is a block

could be any element that is a block element

element then they will stack on top of each

then they will stack on top of each other now when i say 100 width i mean of

other now when i say 100 width i mean of what is available to them it's not

what is available to them it's not always 100

always 100 of the viewport here that we see so

of the viewport here that we see so let's look at an example of that and

let's look at an example of that and that's why i have a main element that

that's why i have a main element that the paragraphs are inside of the main

the paragraphs are inside of the main element is also a block level element so

element is also a block level element so let's set the background color for it to

let's set the background color for it to a different color so we can see it get

a different color so we can see it get something kind of ugly that stands out

something kind of ugly that stands out here just for this example so let's go

here just for this example so let's go with aqua

with aqua we set that you can see

we set that you can see we are covering part of the main element

we are covering part of the main element with the paragraphs but the part that

with the paragraphs but the part that you can see where there is margin it

you can see where there is margin it turned aqua so now we could take away

turned aqua so now we could take away this background color and you can see

this background color and you can see aqua across the whole thing so now that

aqua across the whole thing so now that we've done that let's also go ahead and

we've done that let's also go ahead and change the width of the main element so

change the width of the main element so let's set it to a width of 50 percent

let's set it to a width of 50 percent and now you can see the paragraphs do

and now you can see the paragraphs do not extend all the way across our page

not extend all the way across our page they are limited to their container

they are limited to their container their parent element which is the main

their parent element which is the main element so they do have a hundred

element so they do have a hundred percent width default setting but it's a

percent width default setting but it's a width of what they are given so i say

width of what they are given so i say they have 100 width of what they are

they have 100 width of what they are given it's not necessarily 100 of the

given it's not necessarily 100 of the page and of course we could return this

page and of course we could return this background color once again so we can

background color once again so we can see exactly how much room they're taking

see exactly how much room they're taking up and let's say light gray again

up and let's say light gray again and save and once again we see they're

and save and once again we see they're taking up 100

taking up 100 of that main element with block level

of that main element with block level elements we can also apply margin and

elements we can also apply margin and padding and height or anything like that

padding and height or anything like that to all four sides so let's say margin

to all four sides so let's say margin and i'll say 100 pixels on the top and

and i'll say 100 pixels on the top and bottom and 50 pixels on each side and if

bottom and 50 pixels on each side and if we save that definitely changed

we save that definitely changed everything because now this has a 100

everything because now this has a 100 pixel margin up here and then we've

pixel margin up here and then we've added more extra margin in between the

added more extra margin in between the paragraphs and then you don't even see

paragraphs and then you don't even see the margin that's underneath as well but

the margin that's underneath as well but we can do that to block level elements

we can do that to block level elements but this is where some of the change

but this is where some of the change comes in when we switch over to an

comes in when we switch over to an inline level element so i'm going to

inline level element so i'm going to remove that and let's remove the main

remove that and let's remove the main styles as well so we're back to spanning

styles as well so we're back to spanning the full page and remember i put a span

the full page and remember i put a span element around the word another which is

element around the word another which is an inline level element and that doesn't

an inline level element and that doesn't cause a new line break so let's go ahead

cause a new line break so let's go ahead and style that opposite class that was

and style that opposite class that was applied

applied to that span element just to make it

to that span element just to make it stand out we'll start with a different

stand out we'll start with a different background color

background color and i'll make this a flat black and then

and i'll make this a flat black and then we'll use a color that is

we'll use a color that is not quite full white white smoke and now

not quite full white white smoke and now you can see we've styled this element

you can see we've styled this element and it is just surrounding the word

and it is just surrounding the word another so our span element has a class

another so our span element has a class of opposite and we change the color for

of opposite and we change the color for the background and the text but let's

the background and the text but let's see what we can and can't do with an

see what we can and can't do with an inline element and so now let's go ahead

inline element and so now let's go ahead and try to put a margin

and try to put a margin on the top of 100 pixels

on the top of 100 pixels and you can see nothing changes we can't

and you can see nothing changes we can't apply a top or bottom margin to a inline

apply a top or bottom margin to a inline element likewise we'll try a different

element likewise we'll try a different one let's go with

one let's go with height

height 200 pixels

200 pixels it doesn't change once again height

it doesn't change once again height cannot be applied

cannot be applied and padding applies just a little

and padding applies just a little differently so let's look at that and

differently so let's look at that and let's go with

let's go with one rim

one rim and it looks like everything is as as

and it looks like everything is as as expected here where we have

expected here where we have a one rim padding top bottom left and

a one rim padding top bottom left and right however

right however if we go ahead and increase that let's

if we go ahead and increase that let's say forum look what happens it overlaps

say forum look what happens it overlaps the above paragraph and we probably

the above paragraph and we probably wouldn't want that so now let's apply

wouldn't want that so now let's apply the display property

the display property and we've talked about this being

and we've talked about this being already as a default

already as a default in line

in line and then of course paragraphs default to

and then of course paragraphs default to block and many other elements as well

block and many other elements as well like the main element we talked about

like the main element we talked about however there is another option and that

however there is another option and that is inline dash block and let's see what

is inline dash block and let's see what happens when we apply that to our

happens when we apply that to our opposite class now our padding is still

opposite class now our padding is still applied but it's not overlapping the

applied but it's not overlapping the other paragraph so it is now respecting

other paragraph so it is now respecting the top and the bottom

the top and the bottom likewise if we come back

likewise if we come back and apply that margin and let's just say

and apply that margin and let's just say margin dash top it could be bottom as

margin dash top it could be bottom as well but we'll just put 100 pixels for

well but we'll just put 100 pixels for the top

the top and that worked as well now you can see

and that worked as well now you can see we have extra space here and again this

we have extra space here and again this is applying just to that span element so

is applying just to that span element so not to the full paragraph itself and now

not to the full paragraph itself and now we could even add the height that we

we could even add the height that we applied earlier that didn't work and we

applied earlier that didn't work and we say 200 pixels and now

say 200 pixels and now our span element just got a lot taller

our span element just got a lot taller so the inline block

so the inline block property value is kind of a hybrid here

property value is kind of a hybrid here because we stayed in line in our

because we stayed in line in our paragraph this didn't create a new line

paragraph this didn't create a new line like block would and at the same time it

like block would and at the same time it now allows some properties to be applied

now allows some properties to be applied that normally wouldn't apply to the

that normally wouldn't apply to the inline display so to quickly recap block

inline display so to quickly recap block level elements stack on top of each

level elements stack on top of each other and always create a new line

other and always create a new line inline elements do not stack on top of

inline elements do not stack on top of each other and do not create a new line

each other and do not create a new line block level elements automatically have

block level elements automatically have a 100 width of whatever they are given

a 100 width of whatever they are given if they're not inside of something that

if they're not inside of something that is limiting their width they will be the

is limiting their width they will be the full width of the page inline level

full width of the page inline level elements only take up the width of their

elements only take up the width of their content of course unless we put extra

content of course unless we put extra padding on them and then it has a little

padding on them and then it has a little bit more width here because of that

bit more width here because of that padding and then when we switch to

padding and then when we switch to inline block we get kind of a hybrid

inline block we get kind of a hybrid here where we can keep the content in

here where we can keep the content in line but we can go ahead and apply a top

line but we can go ahead and apply a top and bottom margin or a height and other

and bottom margin or a height and other things that typically only block level

things that typically only block level elements have so when would inline block

elements have so when would inline block be handy this could be handy if we were

be handy this could be handy if we were trying to turn a link into a button and

trying to turn a link into a button and sometimes people do style links as

sometimes people do style links as buttons and then you could of course

buttons and then you could of course have a row of those

have a row of those and likewise it could be something like

and likewise it could be something like turning a list into a row instead of a

turning a list into a row instead of a vertical list so it would be horizontal

vertical list so it would be horizontal so let's look at an example of that and

so let's look at an example of that and i'm going to go back to the index.html

i'm going to go back to the index.html i'm going to select our paragraphs and

i'm going to select our paragraphs and press shift alt and the letter a to

press shift alt and the letter a to comment those out and then select our

comment those out and then select our nav element with the unordered list in

nav element with the unordered list in it once again shift alt and the letter a

it once again shift alt and the letter a to uncomment that and now i'll save

to uncomment that and now i'll save and now we see a basic list with three

and now we see a basic list with three links over here to the right they say

links over here to the right they say intro portfolio and projects something

intro portfolio and projects something that we might use as a menu on a

that we might use as a menu on a portfolio website so here we have the

portfolio website so here we have the nav element and then an unordered list

nav element and then an unordered list and three list items inside and then of

and three list items inside and then of course each list item is an anchor link

course each list item is an anchor link so a hypertext link and those are inline

so a hypertext link and those are inline elements however the list items

elements however the list items themselves are block level elements and

themselves are block level elements and each one is taking up 100 percent width

each one is taking up 100 percent width of what they are given right now let's

of what they are given right now let's go back to the css and apply some styles

go back to the css and apply some styles here so i'm going to select these styles

here so i'm going to select these styles the paragraph and the opposite class and

the paragraph and the opposite class and go ahead and delete those and save once

go ahead and delete those and save once again so we can start fresh and now

again so we can start fresh and now let's apply something to the unordered

let's apply something to the unordered list first and we'll start with a list

list first and we'll start with a list style

style type and then we'll say

type and then we'll say none and that removes those bullets that

none and that removes those bullets that we have after that you can see we're

we have after that you can see we're still moved over to the right so we do

still moved over to the right so we do have some default padding on the list so

have some default padding on the list so let's say padding dash left

let's say padding dash left and we'll just set that to zero

and we'll just set that to zero and then we'll save again and then after

and then we'll save again and then after that let's go ahead and say

that let's go ahead and say text dash

text dash align

align right well what happened to my

right well what happened to my css i've got an extra line in there you

css i've got an extra line in there you can see what happened now so we know we

can see what happened now so we know we have 100 percent width and if we change

have 100 percent width and if we change the background color here we can really

the background color here we can really see that in action so let's say

see that in action so let's say background

background color let's go back to our light gray

color let's go back to our light gray and you can see we've got 100 percent

and you can see we've got 100 percent width going on once again and when we

width going on once again and when we set the text align right we sent all of

set the text align right we sent all of our links all of our list items over to

our links all of our list items over to the right and finally let's apply a

the right and finally let's apply a margin of 0 to the unordered list as

margin of 0 to the unordered list as well and now you can see it pulled it up

well and now you can see it pulled it up closer to the top of the page we could

closer to the top of the page we could actually apply a

actually apply a css reset as well so let's do that

and that will put everything flush with the edges of the page so we have margin

the edges of the page so we have margin of zero

of zero padding of zero and then

padding of zero and then box sizing will set to border box and

box sizing will set to border box and save and you could refer back to our box

save and you could refer back to our box model module where we covered all of

model module where we covered all of this and setting a basic css reset but

this and setting a basic css reset but now you can see we are flush with the

now you can see we are flush with the edges of the browser and our links are

edges of the browser and our links are once again all to the right now let's go

once again all to the right now let's go ahead and change this background color

ahead and change this background color and let's just change it to black and

and let's just change it to black and save and now we don't see the links as

save and now we don't see the links as well but we'll change that in just a

well but we'll change that in just a little bit for the list items let's

little bit for the list items let's change those now and we'll say

change those now and we'll say display

display inline dash block instead of their

inline dash block instead of their default of block

default of block and now when we save

and now when we save you can see they are all side by side in

you can see they are all side by side in horizontal order instead of top to

horizontal order instead of top to bottom as they would be with the block

bottom as they would be with the block display now let's apply some margin

display now let's apply some margin between each one of them and what we can

between each one of them and what we can do here instead of saying top right

do here instead of saying top right bottom left as we typically would with

bottom left as we typically would with the shorthand for margin we can just say

the shorthand for margin we can just say margin

margin inline and this will just apply to the

inline and this will just apply to the left and the right so i'll say 0.5 rim

left and the right so i'll say 0.5 rim and let's see how that looks

and let's see how that looks that looks okay and we need a little bit

that looks okay and we need a little bit of extra space maybe over here on the

of extra space maybe over here on the right so let's change the padding

right so let's change the padding setting here we had padding left of zero

setting here we had padding left of zero for the unordered list and that's okay

for the unordered list and that's okay but maybe we just want to apply a little

but maybe we just want to apply a little padding all the way around so maybe 0.5

padding all the way around so maybe 0.5 rem

rem everywhere on the unordered list top

everywhere on the unordered list top bottom

bottom right and left oh and that is just set

right and left oh and that is just set to padding jack's left right now so

to padding jack's left right now so let's go ahead and make that shorthand

let's go ahead and make that shorthand for padding and apply it to all four

for padding and apply it to all four areas top right bottom and left now that

areas top right bottom and left now that looks a little bit better so what we

looks a little bit better so what we need to do now is just apply some color

need to do now is just apply some color and maybe some hover styles for our

and maybe some hover styles for our links so let's say link and then the

links so let's say link and then the anchor tag so this will only apply to

anchor tag so this will only apply to anchor tags inside of the list item i

anchor tags inside of the list item i said link list item in the anchor tag

said link list item in the anchor tag and now we'll say color

and now we'll say color we'll make them white and then we'll

we'll make them white and then we'll have a text

have a text decoration

decoration of none and when we save we now see the

of none and when we save we now see the words in white with no underlines

words in white with no underlines after that let's scroll for a little

after that let's scroll for a little more room

more room and we'll say

and we'll say list item anchor tag

list item anchor tag hover sudo class and once again list

hover sudo class and once again list item

item anchor tag

anchor tag focus pseudo class

focus pseudo class and for that let's just change the text

and for that let's just change the text decoration instead of the color

decoration instead of the color let's just go back to the underline

let's just go back to the underline style so when we hover over they now

style so when we hover over they now show as links now there are other

show as links now there are other display values that we could use and

display values that we could use and we're going to have separate modules on

we're going to have separate modules on the display type of flex and the display

the display type of flex and the display type of grid and when we do that we'll

type of grid and when we do that we'll learn how to complete our menu bar that

learn how to complete our menu bar that might have something over here on the

might have something over here on the left as well but before we go there's

left as well but before we go there's one other value i do want to cover and

one other value i do want to cover and instead of inline block

instead of inline block block or just inline

block or just inline you might have a value of none and look

you might have a value of none and look what happens

what happens all the list items just disappeared so

all the list items just disappeared so let's go ahead and change that back so

let's go ahead and change that back so they show up and maybe we want our

they show up and maybe we want our entire

entire bar to disappear and right now that is

bar to disappear and right now that is an unordered list so let's say display

an unordered list so let's say display and none up here

and none up here and now it's entirely gone and that is

and now it's entirely gone and that is exactly what happens it completely

exactly what happens it completely removes it from the document now we

removes it from the document now we would still see it over here in our html

would still see it over here in our html but as far as the browser is concerned

but as far as the browser is concerned when it interprets the code the

when it interprets the code the unordered list is not there now we

unordered list is not there now we rarely want to use this and that is

rarely want to use this and that is because it removes it from that document

because it removes it from that document flow and that means anyone using

flow and that means anyone using assistive technology screen reader would

assistive technology screen reader would not be able to read anything there there

not be able to read anything there there are other ways to remove something from

are other ways to remove something from being visible from actually being viewed

being visible from actually being viewed on the page but still have it in the

on the page but still have it in the document flow where accessibility

document flow where accessibility might be still available and so we'll

might be still available and so we'll cover that in the future as well but

cover that in the future as well but right now just know that display none is

right now just know that display none is a

a possibility let's move on to css floats

possibility let's move on to css floats you can see i've got visual studio code

you can see i've got visual studio code open i have an empty frame for a page we

open i have an empty frame for a page we have absolutely nothing in the body of

have absolutely nothing in the body of the page and then the style page the css

the page and then the style page the css has an import of our roboto font from

has an import of our roboto font from google fonts and we've only set styles

google fonts and we've only set styles on the body so far we've set the font

on the body so far we've set the font size to 1.5 ram and we're using the

size to 1.5 ram and we're using the roboto font family so quickly if i pull

roboto font family so quickly if i pull vs code over to the left you can see our

vs code over to the left you can see our page is completely blank i'll let vs

page is completely blank i'll let vs code take up the full size of the page

code take up the full size of the page again and let's start by creating some

again and let's start by creating some elements in the body of the html that we

elements in the body of the html that we can style so i'm going to start off with

can style so i'm going to start off with the div and give it a class of block

the div and give it a class of block after that we can just put in the word

after that we can just put in the word float for now because we will apply a

float for now because we will apply a float to it

float to it and then we're going to create some

and then we're going to create some paragraphs so i'll use an image

paragraphs so i'll use an image abbreviation here and type p for

abbreviation here and type p for paragraph and then say times 5 then the

paragraph and then say times 5 then the greater than symbol

greater than symbol lorem and 20 which means each paragraph

lorem and 20 which means each paragraph will be lorem epsom which is just

will be lorem epsom which is just generic verbiage we can put on a page

generic verbiage we can put on a page for generic text content and each

for generic text content and each paragraph will have 20 words so when i

paragraph will have 20 words so when i press tab it should create five

press tab it should create five paragraphs

paragraphs and there we can save now let's go back

and there we can save now let's go back and look at our page and see what we

and look at our page and see what we have so far you can see our div has the

have so far you can see our div has the word float in it and there's nothing

word float in it and there's nothing remarkable about that div and then we

remarkable about that div and then we see five different paragraphs here on

see five different paragraphs here on our page so that's a good start to

our page so that's a good start to having some content but now we want to

having some content but now we want to apply some css and explore what this

apply some css and explore what this float will actually do with the class of

float will actually do with the class of block so to

block so to give that example let's go back to our

give that example let's go back to our style and i'll hide the file tree by

style and i'll hide the file tree by pressing ctrl b

pressing ctrl b and now we'll be able to see most of our

and now we'll be able to see most of our css here so let's style this block class

css here so let's style this block class that we created for that div i'm going

that we created for that div i'm going to apply a width first and i'm going to

to apply a width first and i'm going to set it to 30 viewport width units

set it to 30 viewport width units and then i'm going to set a height and

and then i'm going to set a height and i'm going to make that also 30 viewport

i'm going to make that also 30 viewport width units now you might wonder why i

width units now you might wonder why i didn't use percent but that wouldn't be

didn't use percent but that wouldn't be the same i wanted to use the exact same

the same i wanted to use the exact same units for the width and height and

units for the width and height and create a square and we'll be able to see

create a square and we'll be able to see that if i apply a background dash color

that if i apply a background dash color and then set that to black and i save we

and then set that to black and i save we now have a square that is 30 viewport

now have a square that is 30 viewport width units wide and it also has the

width units wide and it also has the same height which truly does make it a

same height which truly does make it a square

square okay after that i'm going to go ahead

okay after that i'm going to go ahead and apply a color so we can see that

and apply a color so we can see that word float and i'll make that white just

word float and i'll make that white just the opposite so there's the word float

the opposite so there's the word float now let's give it some padding maybe one

now let's give it some padding maybe one rim of padding and there we have just a

rim of padding and there we have just a little bit of padding that pulls the

little bit of padding that pulls the word float out of the corner but now our

word float out of the corner but now our div and all of our paragraphs are block

div and all of our paragraphs are block elements and so they stack on top of

elements and so they stack on top of each other but when we float

each other but when we float this div element that we've created here

this div element that we've created here it will take it out of the normal flow

it will take it out of the normal flow of the page and we should see our text

of the page and we should see our text wrap around this and you could picture

wrap around this and you could picture this as being an image if you want to

this as being an image if you want to but whatever content we would float and

but whatever content we would float and we can float it left or right the text

we can float it left or right the text will wrap so let's create another class

will wrap so let's create another class and i'll just call this class left

and i'll just call this class left and then inside of this we'll apply the

and then inside of this we'll apply the style float and we'll say left and when

style float and we'll say left and when we save we don't get a change yet

we save we don't get a change yet because we haven't applied it to our

because we haven't applied it to our html so let's go ahead and apply this

html so let's go ahead and apply this second class to our div

second class to our div and now save and we can see the text has

and now save and we can see the text has wrapped up around the div

wrapped up around the div so now it's more like you're used to

so now it's more like you're used to seeing in a newspaper where you would

seeing in a newspaper where you would have an image or something

have an image or something over to the left or the right and the

over to the left or the right and the text would go around it but now notice

text would go around it but now notice this is flush it's right up against it

this is flush it's right up against it and we might want a little space there

and we might want a little space there and we need to talk about how to do that

and we need to talk about how to do that because your first instinct may be to

because your first instinct may be to apply

apply some padding or margin to the paragraph

some padding or margin to the paragraph and i'll scroll for some more room let's

and i'll scroll for some more room let's just look at the margin

just look at the margin left for the paragraph and say i applied

left for the paragraph and say i applied 10 pixels

10 pixels look what happens it still is flush here

look what happens it still is flush here you see it moved 10 pixels over here

you see it moved 10 pixels over here this float is not

this float is not inside the normal flow so

inside the normal flow so the margin is applied from the left over

the margin is applied from the left over here and not where we would expect it to

here and not where we would expect it to be

be at the left edge of our text and we can

at the left edge of our text and we can see that even more so if i do something

see that even more so if i do something greater like say 20 percent

greater like say 20 percent and now yes it moved this way over but

and now yes it moved this way over but it didn't move the text here at all so

it didn't move the text here at all so we can't really apply that correctly by

we can't really apply that correctly by applying it to the paragraph instead

applying it to the paragraph instead we could apply some to the actual block

we could apply some to the actual block itself so let's do that and we can say

itself so let's do that and we can say well let's do it to the left because we

well let's do it to the left because we might do it differently for the right so

might do it differently for the right so let's do it to our left class here so we

let's do it to our left class here so we would have a margin

would have a margin on the right side of let's say one rim

on the right side of let's say one rim so we should be able to see that and now

so we should be able to see that and now that makes the difference that we wanted

that makes the difference that we wanted right here and also it makes our text

right here and also it makes our text once again flush with

once again flush with what would be our image or our div that

what would be our image or our div that we currently have here on the left now

we currently have here on the left now i'm going to highlight our left class

i'm going to highlight our left class and then press shift alt and the down

and then press shift alt and the down arrow to copy it down

arrow to copy it down and i'm also going to create a right

and i'm also going to create a right class i need to select that correctly

class i need to select that correctly there we go it's a right class so

there we go it's a right class so instead of float

instead of float left it will be float right but then

left it will be float right but then instead of margin right let's put a

instead of margin right let's put a margin

margin left on it

left on it and i'll save but we don't have it

and i'll save but we don't have it applied once again to any div so we need

applied once again to any div so we need to come back into our code and let's say

to come back into our code and let's say after we've gone down three paragraphs

after we've gone down three paragraphs we want to have one more so we'll say

we want to have one more so we'll say div

div dot block

dot block dot write and that should apply those

dot write and that should apply those classes and it did

classes and it did so now we can save and we have another

so now we can save and we have another div and it's floated right and of course

div and it's floated right and of course it is after the first three paragraphs

it is after the first three paragraphs and we see that one two three

and we see that one two three and then it begins here with our fourth

and then it begins here with our fourth paragraph and it's floated to the right

paragraph and it's floated to the right now i didn't put the word float in there

now i didn't put the word float in there let's go ahead and do that just to make

let's go ahead and do that just to make them alike

them alike and this is the basic use that we would

and this is the basic use that we would have to float things to the left or the

have to float things to the left or the right but there could become some

right but there could become some instances when we want to handle this a

instances when we want to handle this a little differently maybe we want to

little differently maybe we want to wrap this first paragraph

wrap this first paragraph and this div that i've floated to the

and this div that i've floated to the left in a container and kind of

left in a container and kind of highlight that at the top and then have

highlight that at the top and then have the second paragraph start afterwards we

the second paragraph start afterwards we might have to handle that differently or

might have to handle that differently or let's say we didn't even have the

let's say we didn't even have the container but we didn't want this second

container but we didn't want this second paragraph to wrap and in the past it was

paragraph to wrap and in the past it was handled a little differently than it

handled a little differently than it currently is so let's create one more

currently is so let's create one more class and i'll show you something you

class and i'll show you something you may see once again i would say in more

may see once again i would say in more legacy code let's call this a clear

legacy code let's call this a clear class

class and then inside of this class we'll say

and then inside of this class we'll say clear

clear and we can say

and we can say just

just right

right or just left if you want to clear

or just left if you want to clear something that is specifically floated

something that is specifically floated left or right but it's very easy to just

left or right but it's very easy to just say both and then it will clear both and

say both and then it will clear both and you'll see what this does in just a

you'll see what this does in just a moment here so what i need to do

moment here so what i need to do is come back

is come back and then after the first paragraph if i

and then after the first paragraph if i wanted to clear that the old way would

wanted to clear that the old way would be to apply another div to the page

be to apply another div to the page and give it this class of clear and just

and give it this class of clear and just leave it empty and we would save

leave it empty and we would save and then you can see the second

and then you can see the second paragraph doesn't start

paragraph doesn't start until after this div so it is cleared

until after this div so it is cleared and that allows us to go ahead and start

and that allows us to go ahead and start the second paragraph after both of these

the second paragraph after both of these but this could still be a problem if we

but this could still be a problem if we had this in a container and i will show

had this in a container and i will show an example of that so

an example of that so let's apply a container to

let's apply a container to the div and the first paragraph and i'll

the div and the first paragraph and i'll just make it a section element

just make it a section element and wrap it around those

and wrap it around those so i'll

so i'll cut that closing tag

cut that closing tag and put it here after the first

and put it here after the first paragraph and save well i want the

paragraph and save well i want the formatting it didn't do it for me

formatting it didn't do it for me tab that in and save and then we can

tab that in and save and then we can style our section to make it a little

style our section to make it a little more obvious what's going on i think

more obvious what's going on i think i'll scroll up just a little bit more

i'll scroll up just a little bit more there we go and so now we have a section

there we go and so now we have a section and inside the section i'll say

and inside the section i'll say background color

background color and we'll give this a color of bisque

and we'll give this a color of bisque which is kind of a neat color

which is kind of a neat color and after bisque let's go ahead and

and after bisque let's go ahead and apply a border so we'll say border

apply a border so we'll say border one pixel solid

one pixel solid give it a flat black color and a little

give it a flat black color and a little bit of padding

bit of padding one rim

one rim okay and let's save and see what we get

okay and let's save and see what we get well this looks okay right now i don't

well this looks okay right now i don't see a problem but what if we removed

see a problem but what if we removed this div with the class of clear

this div with the class of clear and save well still no problem let me

and save well still no problem let me shorten up this paragraph by several

shorten up this paragraph by several words and then see what we get

words and then see what we get and now when i save i just had too long

and now when i save i just had too long of a paragraph to actually highlight the

of a paragraph to actually highlight the problem before but now when i say we can

problem before but now when i say we can see the problem this float is once again

see the problem this float is once again not in the normal flow of the page so

not in the normal flow of the page so the container is only expanding based on

the container is only expanding based on the text content and when i had more

the text content and when i had more text content it looked okay but you can

text content it looked okay but you can really highlight the problem if you

really highlight the problem if you don't have enough text content to push

don't have enough text content to push the container down so we can definitely

the container down so we can definitely see a problem that needs to be rectified

see a problem that needs to be rectified and that is because

and that is because we don't want the container to just go

we don't want the container to just go halfway we want it to

halfway we want it to go ahead and contain the full item the

go ahead and contain the full item the full element that we have floated left

full element that we have floated left or right so we think why not go ahead

or right so we think why not go ahead and put that div back in place that had

and put that div back in place that had clear well let's try that

clear well let's try that and see what happens i've got the clear

and see what happens i've got the clear div there now and you can see it clears

div there now and you can see it clears the paragraph but it doesn't help the

the paragraph but it doesn't help the container so let's once again remove

container so let's once again remove that div i'll just press ctrl z to undo

that div i'll just press ctrl z to undo those changes

those changes and ctrl s to save so now the paragraph

and ctrl s to save so now the paragraph is coming back up and i will show two

is coming back up and i will show two different ways to fix this one past

different ways to fix this one past approach that you may see in code is to

approach that you may see in code is to set the overflow

set the overflow to auto

to auto but this is in more legacy code once

but this is in more legacy code once again but notice it does work so i

again but notice it does work so i wanted to show that overflow auto is a

wanted to show that overflow auto is a possibility to go ahead and get the

possibility to go ahead and get the container element to extend all the way

container element to extend all the way down and contain the full element that

down and contain the full element that is floated either left or right however

is floated either left or right however the correct current way as

the correct current way as noted by mdn is to say display

noted by mdn is to say display and then say flow dash root and if we

and then say flow dash root and if we save that we once again

save that we once again have fixed the problem so if i remove

have fixed the problem so if i remove that

that save we have the problem i'll put the

save we have the problem i'll put the display flow root back in and the

display flow root back in and the problem is fixed so this is considered

problem is fixed so this is considered the current modern way to fix this

the current modern way to fix this problem in the past floats were also

problem in the past floats were also used to create columns on a page but

used to create columns on a page but that was because there was no other

that was because there was no other method available and now with modern css

method available and now with modern css we do have other methods available

we do have other methods available including display flex and display grid

including display flex and display grid that i will be covering

that i will be covering very soon in future modules but right

very soon in future modules but right now just remember floats are used to

now just remember floats are used to float things to the left and the right

float things to the left and the right really any element that you want to and

really any element that you want to and you can wrap text around it and then you

you can wrap text around it and then you can also use floats inside of a

can also use floats inside of a container if you want to but remember to

container if you want to but remember to apply

apply display flow root

display flow root to the container so the container

to the container so the container contains the full floated element and

contains the full floated element and doesn't shrink based on the text content

doesn't shrink based on the text content alone

alone let's move on to css columns you can see

let's move on to css columns you can see i've got visual studio code open here

i've got visual studio code open here with just an empty frame of a page once

with just an empty frame of a page once again i've got the title of css columns

again i've got the title of css columns nothing in the body of the html at this

nothing in the body of the html at this point and if we look at the style.css

point and if we look at the style.css you can see i'm once again importing in

you can see i'm once again importing in the roboto font from the google fonts

the roboto font from the google fonts and then i also have a couple of styles

and then i also have a couple of styles on the body we're applying the roboto

on the body we're applying the roboto font with font family and we've set the

font with font family and we've set the font size to 1.5 rim and that's it so

font size to 1.5 rim and that's it so far so let's go back to the html and the

far so let's go back to the html and the first thing i want to do is create five

first thing i want to do is create five paragraphs so i'm going to use an emmet

paragraphs so i'm going to use an emmet abbreviation i'll type p

abbreviation i'll type p times five and then i'll just say lorem

times five and then i'll just say lorem 20 and press tab and we should have five

20 and press tab and we should have five paragraphs now so i'll save that much

paragraphs now so i'll save that much i'll go ahead and press ctrl b so we can

i'll go ahead and press ctrl b so we can see a little more i'm not going to wrap

see a little more i'm not going to wrap the lines as it would just

the lines as it would just clutter and of course wrap each one of

clutter and of course wrap each one of these lines down just a little bit i

these lines down just a little bit i don't need to do that right now what i

don't need to do that right now what i do want to do now is add a section that

do want to do now is add a section that will be a container for the first four

will be a container for the first four paragraphs so we'll take this section

paragraphs so we'll take this section and after the fourth paragraph we'll put

and after the fourth paragraph we'll put the closing element right there the

the closing element right there the closing tag and we can save it didn't

closing tag and we can save it didn't auto format for me so i'm going to

auto format for me so i'm going to select these and press tab so it comes

select these and press tab so it comes over and now i've got the first four

over and now i've got the first four paragraphs inside of this section

paragraphs inside of this section element as a container and then the

element as a container and then the final paragraph is outside of the

final paragraph is outside of the section element i'm also going to apply

section element i'm also going to apply a class here let's call this class

a class here let's call this class columns i want it inside the quotes

columns i want it inside the quotes and now we're finished with the basic

and now we're finished with the basic html so far so now let's move on to the

html so far so now let's move on to the css i'll click the file tree again go to

css i'll click the file tree again go to style.css

style.css now with all of this saved i guess we

now with all of this saved i guess we could quickly look at it in the browser

could quickly look at it in the browser and we just see our five paragraphs over

and we just see our five paragraphs over here so we're going to make some changes

here so we're going to make some changes now and i'll drag vs code back over to

now and i'll drag vs code back over to fill the full screen as we apply the

fill the full screen as we apply the columns okay let's create our columns

columns okay let's create our columns class so dot

class so dot columns and inside this class i'm going

columns and inside this class i'm going to set a column dash count and let's set

to set a column dash count and let's set it to four columns so far and save and

it to four columns so far and save and now let's go look at our code or our

now let's go look at our code or our browser and look what we have here in

browser and look what we have here in the browser now i've spread it out a

the browser now i've spread it out a little bit so the first four paragraphs

little bit so the first four paragraphs are in four columns and we can see of

are in four columns and we can see of course this fifth paragraph that's not

course this fifth paragraph that's not inside of that section element that has

inside of that section element that has the class columns is not split into

the class columns is not split into columns at all

columns at all but it automatically split the first

but it automatically split the first four and just as it would resize here as

four and just as it would resize here as luck would have it with the browser

luck would have it with the browser there's actually one paragraph per

there's actually one paragraph per column right now however i'm going to

column right now however i'm going to right click and choose inspect so we can

right click and choose inspect so we can open dev tools and resize this

open dev tools and resize this and notice what happens here we can

and notice what happens here we can scrunch it down and now it's not

scrunch it down and now it's not necessarily

necessarily one paragraph per column it just adapts

one paragraph per column it just adapts to whatever the screen size is now we

to whatever the screen size is now we can change this as well so i'm going to

can change this as well so i'm going to go back to vs code and then we'll make a

go back to vs code and then we'll make a change here instead of this column count

change here instead of this column count being just four let's go ahead and add a

being just four let's go ahead and add a column width as well so let's tell it

column width as well so let's tell it that our column

that our column width should essentially never be less

width should essentially never be less than

than 250 pixels per column so that should

250 pixels per column so that should change things a little bit now you can

change things a little bit now you can see we only have two columns even though

see we only have two columns even though we told it four it's going to add here

we told it four it's going to add here to that width and never go below that

to that width and never go below that now once it can support three columns of

now once it can support three columns of 250 pixels then it switches to three and

250 pixels then it switches to three and it will go up to four columns if that's

it will go up to four columns if that's available to it

available to it however if not it will stick with three

however if not it will stick with three let me see if i can squeeze this just a

let me see if i can squeeze this just a little more to get all four columns to

little more to get all four columns to show now we're back to our four columns

show now we're back to our four columns but as we resize the browser width

but as we resize the browser width it only supports what it can for the 250

it only supports what it can for the 250 pixels and once it can't support that it

pixels and once it can't support that it should condense down to just one column

should condense down to just one column so that makes it very flexible as far as

so that makes it very flexible as far as the design goes because if it can only

the design goes because if it can only support one column it will never make it

support one column it will never make it smaller than that 250 pixels we set but

smaller than that 250 pixels we set but if it can support two it does all the

if it can support two it does all the way up to the column number that we

way up to the column number that we specified which was four i'm going to

specified which was four i'm going to pull vs code back up and there's

pull vs code back up and there's shorthand for this so we don't always

shorthand for this so we don't always have to type column count and column

have to type column count and column dash width we can just say

dash width we can just say columns and there we could specify 4

columns and there we could specify 4 250 pixels and it would be the same so

250 pixels and it would be the same so i'm going to comment these out

i'm going to comment these out and now save and we shouldn't really see

and now save and we shouldn't really see any changes in our page because that

any changes in our page because that should mean the same thing just in

should mean the same thing just in shorthand we can also provide dividers

shorthand we can also provide dividers so this would be with the column

so this would be with the column dash rule property and here we can say

dash rule property and here we can say we want three pixels and i'll press ctrl

we want three pixels and i'll press ctrl b to hide the file tree so we can see

b to hide the file tree so we can see all of this but three pixels let's say

all of this but three pixels let's say solid

solid and now let's just give some kind of

and now let's just give some kind of color here i'll just go with that flat

color here i'll just go with that flat black and save and notice this column

black and save and notice this column rule is just like when we provide a

rule is just like when we provide a border and the values go in the same

border and the values go in the same order so

order so when i have provided a border in the

when i have provided a border in the past around any kind of element you have

past around any kind of element you have seen the size and then the type of

seen the size and then the type of border and then the color and that's the

border and then the color and that's the same for the column rule now let's see

same for the column rule now let's see what it does to our page and here we see

what it does to our page and here we see the rules between each column now and of

the rules between each column now and of course they will disappear when the

course they will disappear when the columns disappear if the sizing dictates

columns disappear if the sizing dictates that and so once we get down to one

that and so once we get down to one column even though we've said column

column even though we've said column rule should exist it won't if there's

rule should exist it won't if there's only one column but if there are columns

only one column but if there are columns to separate that's when the column rules

to separate that's when the column rules start to show up and this will once

start to show up and this will once again divide up to how many columns

again divide up to how many columns we've created so if we say a max of four

we've created so if we say a max of four columns we could have up to three column

columns we could have up to three column rules and we can also provide some

rules and we can also provide some spacing between those columns so let's

spacing between those columns so let's say column dash gap and i'm going to

say column dash gap and i'm going to choose a larger value so we definitely

choose a larger value so we definitely see the spacing so three rims and let's

see the spacing so three rims and let's see how that spaced everything out

see how that spaced everything out now we only have three columns because

now we only have three columns because we have some extra spacing so it

we have some extra spacing so it wouldn't fit into the four columns as

wouldn't fit into the four columns as before but it does look a little bit

before but it does look a little bit better with that extra spacing between

better with that extra spacing between the columns and with dev tools open now

the columns and with dev tools open now is a good time to draw your attention to

is a good time to draw your attention to a problem that exists right here i'll

a problem that exists right here i'll squeeze this over so we can see a little

squeeze this over so we can see a little more and i want to pull this down so we

more and i want to pull this down so we can see some of the html above now as we

can see some of the html above now as we get into our columns section and you can

get into our columns section and you can see it highlighted on the page as i

see it highlighted on the page as i highlight the elements here in devtools

highlight the elements here in devtools notice we have margin at the top and the

notice we have margin at the top and the bottom of each paragraph we didn't use a

bottom of each paragraph we didn't use a css reset so far so those margins have

css reset so far so those margins have not been set to zero and that's okay we

not been set to zero and that's okay we want spacing between the paragraphs but

want spacing between the paragraphs but notice here in this first paragraph we

notice here in this first paragraph we also have spacing above the first

also have spacing above the first paragraph so it's not setting flush with

paragraph so it's not setting flush with the top as the other columns are

the top as the other columns are and then as we come down notice each

and then as we come down notice each paragraph is going to have its own

paragraph is going to have its own top and bottom margin

top and bottom margin but there's one thing to consider here

but there's one thing to consider here we need to remove

we need to remove that top margin from the first paragraph

that top margin from the first paragraph but let's see if we can just remove it

but let's see if we can just remove it from all of the paragraphs and what

from all of the paragraphs and what happens notice our margin spacing

happens notice our margin spacing between the paragraphs as we see between

between the paragraphs as we see between the first and the second for example

the first and the second for example just is the spacing for that one margin

just is the spacing for that one margin essentially so here we see it again

essentially so here we see it again between the third and the second we just

between the third and the second we just see that top spacing but if i highlight

see that top spacing but if i highlight the second we just see the bottom

the second we just see the bottom spacing and they seem to overlap let's

spacing and they seem to overlap let's also discuss what's going on there so

also discuss what's going on there so we'll go back to the code and i'm going

we'll go back to the code and i'm going to set another rule here and we want to

to set another rule here and we want to say just our paragraphs that are inside

say just our paragraphs that are inside the columns container so we'll say the

the columns container so we'll say the columns class and then p

columns class and then p and let's say margin dash top and set

and let's say margin dash top and set that to zero and save now we go back to

that to zero and save now we go back to the browser

the browser and our first paragraph is flush at the

and our first paragraph is flush at the top with the others but notice our

top with the others but notice our spacing between the paragraphs did not

spacing between the paragraphs did not change and that's a good thing it

change and that's a good thing it automatically happens in css and i don't

automatically happens in css and i don't believe i've discussed this before but

believe i've discussed this before but that is margin collapsing so it's not

that is margin collapsing so it's not going to double up the margin between

going to double up the margin between the second and the third paragraph just

the second and the third paragraph just based on having a bottom margin on say

based on having a bottom margin on say the first one and a top margin on the

the first one and a top margin on the second one however now we've removed

second one however now we've removed that top margin but the spacing remained

that top margin but the spacing remained the same but previously it wasn't twice

the same but previously it wasn't twice as much because of margin collapsing so

as much because of margin collapsing so that's a good thing and it's worth

that's a good thing and it's worth noting so we can actually just remove

noting so we can actually just remove the top margin from each paragraph and

the top margin from each paragraph and not change the spacing of the others but

not change the spacing of the others but it does fix the top alignment here

it does fix the top alignment here making it flush with the other columns

making it flush with the other columns as we want it to now let's go back to

as we want it to now let's go back to our html and add another element inside

our html and add another element inside of this file so we have a couple of

of this file so we have a couple of paragraphs inside of our columns

paragraphs inside of our columns container now let's add an h2 and inside

container now let's add an h2 and inside the h2 let's just say

the h2 let's just say next topic just some kind of generic

next topic just some kind of generic header here and we can save that now

header here and we can save that now let's go to our style css and let's go

let's go to our style css and let's go ahead and style that header as well

ahead and style that header as well we'll once again be specific so we'll

we'll once again be specific so we'll say columns and then any h2 inside of

say columns and then any h2 inside of our columns container

our columns container let's set the margin top to zero just

let's set the margin top to zero just like we did for the paragraph so there's

like we did for the paragraph so there's not an issue there

not an issue there let's set the background color

let's set the background color to that flat black 333 and then let's

to that flat black 333 and then let's set the color to white

set the color to white which is fff as far as hexadecimal code

which is fff as far as hexadecimal code goes then we can provide some padding

goes then we can provide some padding let's say one rem

let's say one rem and let's save and let's take a look now

and let's save and let's take a look now at our web page and we have our next

at our web page and we have our next topic right here but let's see what

topic right here but let's see what happens as we resize

happens as we resize that looks a little weird we have part

that looks a little weird we have part of the padding at the top of the second

of the padding at the top of the second column

column and the rest of the header here at the

and the rest of the header here at the bottom of the first column that's kind

bottom of the first column that's kind of strange we might not want that let's

of strange we might not want that let's get some more room and drag it over and

get some more room and drag it over and see if anything else weird happens well

see if anything else weird happens well not with the room we have but as this

not with the room we have but as this resizing occurs strange things could

resizing occurs strange things could happen but we can prevent some of those

happen but we can prevent some of those strange things by applying another

strange things by applying another property inside of our h2 so now let's

property inside of our h2 so now let's say break

say break dash inside and we'll say avoid

dash inside and we'll say avoid we'll save that come back to the page

we'll save that come back to the page and now as we get to our two columns we

and now as we get to our two columns we notice it's on the second column which

notice it's on the second column which may not be the best thing that we want

may not be the best thing that we want we might want that at the top of the

we might want that at the top of the second column but it's not splitting the

second column but it's not splitting the header into two different pieces with

header into two different pieces with part of it at the top and then part of

part of it at the top and then part of it to the right and once we get down to

it to the right and once we get down to one column it's just the one header

one column it's just the one header there now we can apply one other

there now we can apply one other property let's bring vs code back up and

property let's bring vs code back up and here we could say

here we could say break dash before

break dash before and we'll set this to column

and we'll set this to column and there's good and bad with this so

and there's good and bad with this so let's look at this overall so now notice

let's look at this overall so now notice we're at the top of the second column

we're at the top of the second column and that's fine and as we scroll and we

and that's fine and as we scroll and we have two columns now we're at the top of

have two columns now we're at the top of the second column again which is what we

the second column again which is what we want instead of being at the bottom of

want instead of being at the bottom of the second column as we were before the

the second column as we were before the problem comes when we want to size down

problem comes when we want to size down to one column notice what happens

to one column notice what happens instead everything shrinks and we got

instead everything shrinks and we got three columns and that's not maybe what

three columns and that's not maybe what you would expect

you would expect but this break before actually forces a

but this break before actually forces a column break so it forces there to be

column break so it forces there to be more than one column and the browser is

more than one column and the browser is trying to fit all of that in which is

trying to fit all of that in which is why it shrinks so probably

why it shrinks so probably not a great idea to use this break

not a great idea to use this break before column property if you know

before column property if you know you're going to be shrinking your page

you're going to be shrinking your page down to that one column however the

down to that one column however the break inside with the avoid

break inside with the avoid will keep your header that you might

will keep your header that you might create or something else from being

create or something else from being split between the two columns now let's

split between the two columns now let's go back to our html

go back to our html and here's the html file i'm going to

and here's the html file i'm going to remove this header for now i'll leave it

remove this header for now i'll leave it in the code so

in the code so you can see it there but we've just

you can see it there but we've just commented it out but what i do want to

commented it out but what i do want to provide is a quote so let's provide a

provide is a quote so let's provide a quote that we would have maybe something

quote that we would have maybe something we would be highlighting on the page so

we would be highlighting on the page so here's one more paragraph and inside

here's one more paragraph and inside this paragraph i'm going to say

this paragraph i'm going to say where's

where's my rug

my rug and then man which is course from the

and then man which is course from the movie the big lebowski and then we can

movie the big lebowski and then we can say that was from

say that was from the dude who is the author of that quote

the dude who is the author of that quote now let's provide some things here that

now let's provide some things here that will make this stand out a little more

will make this stand out a little more so we can say class

so we can say class equals quote and we'll style this class

equals quote and we'll style this class and here let's go ahead and fill the

and here let's go ahead and fill the page right now as we see this code so we

page right now as we see this code so we can see the full quote here but then

can see the full quote here but then there's some other things we want to

there's some other things we want to apply as well so i'll save this much and

apply as well so i'll save this much and actually just as i filled the page i

actually just as i filled the page i want to go back to the browser

want to go back to the browser and now on the browser we'll go ahead

and now on the browser we'll go ahead and open up this page it's unicode dash

and open up this page it's unicode dash table dot com and it lets us look up

table dot com and it lets us look up other characters like html entities that

other characters like html entities that you may have learned about when you were

you may have learned about when you were going through my html course or one like

going through my html course or one like it but there's also unicode characters

it but there's also unicode characters and there's different way to provide

and there's different way to provide there's different ways to provide these

there's different ways to provide these different characters so it says popular

different characters so it says popular character sets we want quotation marks

character sets we want quotation marks kind of the fancy ones so let's just go

kind of the fancy ones so let's just go to this page full of quotation marks and

to this page full of quotation marks and you can see we want these opening

you can see we want these opening quotation marks right here the left one

quotation marks right here the left one i'll click on that it gives us several

i'll click on that it gives us several different codes we can use in our page

different codes we can use in our page so here's the html code for this opening

so here's the html code for this opening quotation mark there's also an html

quotation mark there's also an html entity here so we could probably use

entity here so we could probably use either one i'm just going to select this

either one i'm just going to select this ampersand pound sign

ampersand pound sign 8220 in the semicolon and that's going

8220 in the semicolon and that's going to be our opening quotation mark so i'll

to be our opening quotation mark so i'll pull visual studio code back up and

pull visual studio code back up and inside of our quote right here it looks

inside of our quote right here it looks like i've got an extra quotation mark

like i've got an extra quotation mark there for the class okay our class quote

there for the class okay our class quote is correct now i'm going to paste in

is correct now i'm going to paste in that code and now we should have that

that code and now we should have that opening quotation mark here to go along

opening quotation mark here to go along with our quote likewise if we go back to

with our quote likewise if we go back to the page you can see they're saying with

the page you can see they're saying with this symbol these are often used let's

this symbol these are often used let's click on this other quotation mark

click on this other quotation mark and oh it just took us back to quotation

and oh it just took us back to quotation marks so here was the opening one now

marks so here was the opening one now let's get the closing one so we'll click

let's get the closing one so we'll click on this

on this scroll down and as you might have

scroll down and as you might have guessed it's just the next number

guessed it's just the next number instead of eight two two zero it's eight

instead of eight two two zero it's eight two two one i'll go ahead and select all

two two one i'll go ahead and select all of that again we'll go back to vs code

of that again we'll go back to vs code and inside of vs code i'm going to

and inside of vs code i'm going to expand this just a little bit so we can

expand this just a little bit so we can get to the end of the quote

get to the end of the quote and after that we have got this

and after that we have got this wrapped in these fancy quotes with this

wrapped in these fancy quotes with this html character that is kind of like an

html character that is kind of like an html entity but it's also kind of

html entity but it's also kind of unicode in a way and this is just

unicode in a way and this is just another way html handles these

another way html handles these characters and we can put this in to

characters and we can put this in to wrap the quotes and there's many other

wrap the quotes and there's many other symbols you could use and find on this

symbols you could use and find on this website and one of those symbols that we

website and one of those symbols that we want to put right here beside our author

want to put right here beside our author is a long hyphen so let's see if we can

is a long hyphen so let's see if we can search for that above i'll type in

search for that above i'll type in long

long hyphen and we'll see what comes up well

hyphen and we'll see what comes up well there's the hyphen minus soft minus not

there's the hyphen minus soft minus not seeing it right now well maybe this one

seeing it right now well maybe this one maybe not but i know what the code is so

maybe not but i know what the code is so let me see if i can just search for that

let me see if i can just search for that and it will come up it's eight two

and it will come up it's eight two one two

one two and here we've got the e m dash is what

and here we've got the e m dash is what it's called i wanted to call it a long

it's called i wanted to call it a long hyphen

hyphen and there was a copy right there in the

and there was a copy right there in the search results but i'm just going to

search results but i'm just going to once again get the code here from the

once again get the code here from the html code

html code and this again is called an em dash so

and this again is called an em dash so we'll go back to our visual studio code

we'll go back to our visual studio code html code i'm going to put that right

html code i'm going to put that right before the dude so we'll have that

before the dude so we'll have that longer

longer dash or hyphen before the author is

dash or hyphen before the author is attributed and now before we look at our

attributed and now before we look at our html or before we look at our web page

html or before we look at our web page i'll save that and let's go to the style

i'll save that and let's go to the style once again and let's style this quote

once again and let's style this quote class so we'll say

class so we'll say quote dot quote actually and then we'll

quote dot quote actually and then we'll apply several things here so the first

apply several things here so the first is a dash size and let's put three rim

is a dash size and let's put three rim now let's put text align

now let's put text align center because we want this quote

center because we want this quote centered and now we can provide a color

centered and now we can provide a color let's do something we'll adjust this a

let's do something we'll adjust this a little bit let's do that flat black

little bit let's do that flat black color again and now for the main thing

color again and now for the main thing that we want to highlight here is the

that we want to highlight here is the column span property and we can say all

column span property and we can say all so this will span all of the columns

so this will span all of the columns that we have on the page okay now let's

that we have on the page okay now let's go back

go back and look at our web page

and look at our web page and we see our big quote and it's

and we see our big quote and it's spanning all three of the columns and we

spanning all three of the columns and we have a kind of our fancy quote symbols

have a kind of our fancy quote symbols here that are wrapped around it as well

here that are wrapped around it as well and we have our em dash or long hyphen

and we have our em dash or long hyphen after are actually before

after are actually before the author and this is kind of like you

the author and this is kind of like you might see in a magazine as well where

might see in a magazine as well where they highlight a quote as you're reading

they highlight a quote as you're reading the article but something doesn't look

the article but something doesn't look quite right does it we've got all this

quite right does it we've got all this space underneath but no space on top

space underneath but no space on top that's because this is a paragraph

that's because this is a paragraph that's inside of our section container

that's inside of our section container and remember we set the margin top to

and remember we set the margin top to zero for all of those so let's go back

zero for all of those so let's go back to our code and now that we're inside of

to our code and now that we're inside of this quote class

this quote class let's set the

let's set the margin dash top

margin dash top to to rem and go back and take a look

to to rem and go back and take a look and i think you'll be surprised at what

and i think you'll be surprised at what we see

we see there's absolutely no change

there's absolutely no change so what's going on

so what's going on well let's once again look at our code

well let's once again look at our code and see the problem

and see the problem what we have here is columns

what we have here is columns the class columns and then an element

the class columns and then an element columns p where we set the margin top to

columns p where we set the margin top to zero

zero that is more specific than just having a

that is more specific than just having a class so let's go ahead and look at our

class so let's go ahead and look at our specificity calculator and we can see

specificity calculator and we can see how this is calculated so i'll put our

how this is calculated so i'll put our first one here at the top and that is

first one here at the top and that is columns which gives it a score of 10 as

columns which gives it a score of 10 as a class

a class and then p

and then p as an element so it's got a score of 11.

as an element so it's got a score of 11. and as you might guess if we were down

and as you might guess if we were down here

here and just said quote

and just said quote we only have a score of 10. so even

we only have a score of 10. so even though quote comes after

though quote comes after this column's p definition in the

this column's p definition in the cascade

cascade it's not as specific so that margin is

it's not as specific so that margin is not applying what we could do is say dot

not applying what we could do is say dot columns

columns dot quote and then notice we have a

dot quote and then notice we have a score of 20 so that would work let's go

score of 20 so that would work let's go back and apply that in our code and i

back and apply that in our code and i bet we see the margin change so instead

bet we see the margin change so instead of just quote we'll say

of just quote we'll say columns quote

columns quote save

save go back to our page

go back to our page and now we have a margin on top as

and now we have a margin on top as expected so there's another learning

expected so there's another learning experience about specificity now let's

experience about specificity now let's resize the page a little bit and we're

resize the page a little bit and we're going to see something else we might not

going to see something else we might not like

like i don't like how this breaks our author

i don't like how this breaks our author down to the next line we've got the on

down to the next line we've got the on one line with his long dash and then

one line with his long dash and then dude on the second line so we want to be

dude on the second line so we want to be able to control that break we just

able to control that break we just definitely don't want the long dash on

definitely don't want the long dash on the first line and then the author on

the first line and then the author on the second

the second eventually it kind of catches up but

eventually it kind of catches up but those breaks in between aren't what we

those breaks in between aren't what we want and we can fix that with css back

want and we can fix that with css back in vs code let's go back to our html

in vs code let's go back to our html first and let's wrap our author in a

first and let's wrap our author in a span element which is an inline element

span element which is an inline element and let's give this a class equal to

and let's give this a class equal to no wrap

no wrap and of course now we'll need to take i'm

and of course now we'll need to take i'm going to wrap the code here with alt z

going to wrap the code here with alt z because we'll need to take this closing

because we'll need to take this closing span

span and put it

and put it after dude right here so now we can save

after dude right here so now we can save that and our html is taken care of now

that and our html is taken care of now we just need to style our no wrap class

we just need to style our no wrap class so underneath our columns quote let's

so underneath our columns quote let's put

put no wrap

no wrap inside of no wrap we're going to use the

inside of no wrap we're going to use the white dash space property

white dash space property and set that to no wrap and so now when

and set that to no wrap and so now when we go back to our browser

we go back to our browser and we resize our quote should not break

and we resize our quote should not break the dude our author should always stay

the dude our author should always stay on the same line including

on the same line including that long dash and that's exactly what

that long dash and that's exactly what happened it all went down to the second

happened it all went down to the second line at the same time so we're no longer

line at the same time so we're no longer breaking the dude with his long dash

breaking the dude with his long dash into separate lines and that's the way

into separate lines and that's the way we want to style that so overall i hope

we want to style that so overall i hope this tutorial has helped you learn how

this tutorial has helped you learn how to apply columns to your content on a

to apply columns to your content on a web page the simple way really without

web page the simple way really without even using flexbox or grid which will be

even using flexbox or grid which will be covered in upcoming modules as well

covered in upcoming modules as well today we're going to discuss the css

today we're going to discuss the css position property you can see on the

position property you can see on the left i've got visual studio code on the

left i've got visual studio code on the right i've got chrome and we're using

right i've got chrome and we're using the live server extension so any changes

the live server extension so any changes we make in our html or css today should

we make in our html or css today should immediately show up over here in the

immediately show up over here in the browser now first let's look at the html

browser now first let's look at the html page that i have here on the left in

page that i have here on the left in visual studio code and you can see it's

visual studio code and you can see it's a basic layout and i'm really using more

a basic layout and i'm really using more divs than i'm normally comfortable with

divs than i'm normally comfortable with all of these div elements they are block

all of these div elements they are block elements but they are not semantic they

elements but they are not semantic they do not provide any additional meaning to

do not provide any additional meaning to a page and they don't really help

a page and they don't really help accessibility at all so in a typical

accessibility at all so in a typical project i wouldn't use a lot of divs but

project i wouldn't use a lot of divs but they are good for today's example so you

they are good for today's example so you can see we have an outer container and

can see we have an outer container and this outer container in the browser is a

this outer container in the browser is a dashed black border that outlines this

dashed black border that outlines this container and then we have an inner

container and then we have an inner container and it is a solid blue line

container and it is a solid blue line here in the inner container and then

here in the inner container and then inside of this inner container and you

inside of this inner container and you can't see them right now we have four

can't see them right now we have four other divs they all have the class of

other divs they all have the class of box but then each has an individual

box but then each has an individual class absolute relative

class absolute relative fixed and sticky and those are possible

fixed and sticky and those are possible values for the position property and

values for the position property and we'll look at each of those let's jump

we'll look at each of those let's jump over to the style.css

over to the style.css file you can see i'm importing in that

file you can see i'm importing in that roboto font as i have been in the last

roboto font as i have been in the last several tutorials for this css series

several tutorials for this css series and then i also i guess i have the

and then i also i guess i have the lobster font here too although i'm not

lobster font here too although i'm not using it right now i've also got this

using it right now i've also got this css reset already in place with a margin

css reset already in place with a margin of zero padding of zero and box sizing

of zero padding of zero and box sizing equal to border box

equal to border box for the body we're using that roboto

for the body we're using that roboto font family and then we also have a font

font family and then we also have a font size of one and a half rims and then a

size of one and a half rims and then a min height of 200 viewport units so that

min height of 200 viewport units so that means besides what you see here we've

means besides what you see here we've got another full page that we can scroll

got another full page that we can scroll down to and we'll need that in just a

down to and we'll need that in just a little bit

little bit then we have the styles for the outer

then we have the styles for the outer container already here you can see the

container already here you can see the dashed border it's three pixels we've

dashed border it's three pixels we've got a width and a height set on it just

got a width and a height set on it just for this example and a top and bottom

for this example and a top and bottom margin of 40 pixels the auto for left

margin of 40 pixels the auto for left and right centers the container and then

and right centers the container and then we'll see something very similar here

we'll see something very similar here for the inner container of course the

for the inner container of course the different styles just sizing it a little

different styles just sizing it a little differently and the color and size of

differently and the color and size of the border and then we have the box

the border and then we have the box class that applies to the four divs that

class that applies to the four divs that you cannot currently see

you cannot currently see you can't see them because their font

you can't see them because their font color is white other than that they are

color is white other than that they are a box with 150 pixels width and height

a box with 150 pixels width and height and a little bit of padding in there

and a little bit of padding in there okay with all of that said let's go

okay with all of that said let's go ahead and style our first class and that

ahead and style our first class and that was the absolute class

was the absolute class so what we'll do for it is set a

so what we'll do for it is set a background color that's different than

background color that's different than the others so we can tell them apart a

the others so we can tell them apart a little better let's just set that to a

little better let's just set that to a blue we'll use hexadecimal there and

blue we'll use hexadecimal there and then let's go ahead and set the position

then let's go ahead and set the position but the first position value we're going

but the first position value we're going to use is static and that is the default

to use is static and that is the default of all elements they're

of all elements they're static just already when you put them on

static just already when you put them on the page so essentially it's not going

the page so essentially it's not going to change anything i just wanted you to

to change anything i just wanted you to see that value to know that's the

see that value to know that's the default even if you don't set it so now

default even if you don't set it so now let's go ahead and set a position of

let's go ahead and set a position of absolute and see what we get when we

absolute and see what we get when we save

save it really didn't change anything and

it really didn't change anything and that's because we didn't set any other

that's because we didn't set any other value when we set these values we need

value when we set these values we need to go ahead and set

to go ahead and set a top

a top left right or bottom we don't have to

left right or bottom we don't have to set all of them but it needs at least

set all of them but it needs at least one to change where it's at so let's set

one to change where it's at so let's set the top to zero see what we get

the top to zero see what we get it moved it all the way to the top of

it moved it all the way to the top of the browser now what if we set

the browser now what if we set left to zero

left to zero now moved it all the way to the left so

now moved it all the way to the left so it's in the upper left corner so

it's in the upper left corner so absolute positioning

absolute positioning needs a relative parent

needs a relative parent and if it doesn't have an ancestor

and if it doesn't have an ancestor element that is positioned relative

element that is positioned relative then it takes the initial boundary or

then it takes the initial boundary or the initial box which is essentially the

the initial box which is essentially the browser window and so that's why it went

browser window and so that's why it went up here to the top and then the left

up here to the top and then the left when we set that position but now we can

when we set that position but now we can scroll up and we can set a position on

scroll up and we can set a position on this outer container

this outer container you see i'll set the position to

you see i'll set the position to relative

relative and now look what happens to our

and now look what happens to our absolute box it now has an ancestor that

absolute box it now has an ancestor that is positioned relative so this

is positioned relative so this positioning is no longer relative to the

positioning is no longer relative to the browser window it's relative to this

browser window it's relative to this ancestor that has the position set to

ancestor that has the position set to relative

relative but what if we set the position to

but what if we set the position to relative on more than one ancestor

relative on more than one ancestor we'll do that here if i could spell

we'll do that here if i could spell relative again

relative again and i'll save and now you can see

and i'll save and now you can see this is back where we started inside the

this is back where we started inside the inner container and that is because it

inner container and that is because it picks the ancestor that is closest to it

picks the ancestor that is closest to it and so

and so our box started inside of this inner

our box started inside of this inner container so with the outer container

container so with the outer container sets relative and the inner container

sets relative and the inner container set to relative it picks the closest one

set to relative it picks the closest one the nearest one and that is the inner

the nearest one and that is the inner container so we're back here now as you

container so we're back here now as you might have guessed the zeros are

might have guessed the zeros are essentially the default choices there so

essentially the default choices there so if we save we don't really see a change

if we save we don't really see a change from position absolute with the top and

from position absolute with the top and left 0 to where they are now of course

left 0 to where they are now of course if we change

if we change which ancestor it was relative to we

which ancestor it was relative to we would see a change as it would move to

would see a change as it would move to whichever ancestor it was relative to

whichever ancestor it was relative to however we can put in other values so

however we can put in other values so let's do something like

let's do something like 100 pixels

100 pixels and then we could also do left 50 pixels

and then we could also do left 50 pixels and see what happens and now it moved

and see what happens and now it moved it's once again absolutely positioned

it's once again absolutely positioned but it's relative to this inner

but it's relative to this inner container and it moved down 100 pixels

container and it moved down 100 pixels and it moved to the right essentially 50

and it moved to the right essentially 50 pixels from the left that's how you want

pixels from the left that's how you want to read that and you would say from the

to read that and you would say from the top so that's a good way to read those

top so that's a good way to read those from the top from the left so let's once

from the top from the left so let's once again change the position relative and

again change the position relative and put it on the outer container only

put it on the outer container only and save and now we can see the same

and save and now we can see the same thing we have moved 100 pixels and 50

thing we have moved 100 pixels and 50 pixels as we set right here okay i'm

pixels as we set right here okay i'm going to switch these values back to 0

going to switch these values back to 0 to get our absolute box out of the way

to get our absolute box out of the way and now we'll look at the next box which

and now we'll look at the next box which is the relative one that we have inside

is the relative one that we have inside the inner container so here we'll say

the inner container so here we'll say relative for the relative class

relative for the relative class let's set a different background color

let's set a different background color let's go with red on this one

let's go with red on this one and then after that

and then after that we can save that much and we see it

we can save that much and we see it already after that we're going to say

already after that we're going to say position

position relative and we already know that won't

relative and we already know that won't change anything by just setting that

change anything by just setting that much but now if i were to say

much but now if i were to say top and here say 100 pixels

top and here say 100 pixels and then say left and here i could say

and then say left and here i could say 100 pixels also

100 pixels also it's going to move

it's going to move 100 pixels from the top and 100 pixels

100 pixels from the top and 100 pixels from the left so much like we saw the

from the left so much like we saw the absolute do when it was relative to its

absolute do when it was relative to its parent container and now relative here

parent container and now relative here means it's going to be relative to its

means it's going to be relative to its parent container already without having

parent container already without having to define that relative

to define that relative on the parent so inside of here by

on the parent so inside of here by setting it relative it's always going to

setting it relative it's always going to be relative to its parent container

be relative to its parent container let's scroll up for some more room and

let's scroll up for some more room and let's change that top by a few more

let's change that top by a few more pixels maybe 300 pixels and get our

pixels maybe 300 pixels and get our relative block out of the way as well

relative block out of the way as well and now we can pick our fixed class

and now we can pick our fixed class and here let's give this a background

and here let's give this a background color

of green if i did it with hex i don't like the bright color i get there so if

like the bright color i get there so if i say green

i say green i get a darker green color so that's

i get a darker green color so that's what i'm going with

what i'm going with position is going to be fixed

position is going to be fixed and here

and here not absolute we just want fixed and then

not absolute we just want fixed and then here we're going to say

here we're going to say well let's just not put anything yet and

well let's just not put anything yet and we'll save and there we can see our

we'll save and there we can see our fixed box but now let's say something

fixed box but now let's say something like

like top and this will be

top and this will be 100 pixels and if i save notice

100 pixels and if i save notice now it just moved 100 pixels from the

now it just moved 100 pixels from the top and we can confirm that by removing

top and we can confirm that by removing our position relative here to make sure

our position relative here to make sure it's not responding to this outer

it's not responding to this outer container and if we save

container and if we save now we have our absolute up here in the

now we have our absolute up here in the corner but the fix stayed exactly where

corner but the fix stayed exactly where it was so it's only 100 pixels from the

it was so it's only 100 pixels from the top

top and then after that

and then after that what will happen is it will just stay

what will happen is it will just stay right there even if we scroll so that's

right there even if we scroll so that's what it means to be in a fixed position

what it means to be in a fixed position so i scroll

so i scroll and that's why we have that 200 viewport

and that's why we have that 200 viewport unit height so i can scroll down to a

unit height so i can scroll down to a second page our fixed block is staying

second page our fixed block is staying in a fixed position the entire time and

in a fixed position the entire time and so it's out of the flow of the page

so it's out of the flow of the page just like our other blocks are

just like our other blocks are but

but it is never moving even when we scroll

it is never moving even when we scroll the page and this is a good time to

the page and this is a good time to point out that the fixed block is over

point out that the fixed block is over the absolute block right now

the absolute block right now that is decided by what element comes

that is decided by what element comes first and what element comes last in the

first and what element comes last in the html so if we go back to the html and i

html so if we go back to the html and i took this fixed div

took this fixed div and i put it before the absolute div and

and i put it before the absolute div and now i save

now i save absolutes on top

absolutes on top but that's not always convenient when

but that's not always convenient when we're working with pages to go and

we're working with pages to go and change the structure of the html so we

change the structure of the html so we can also do this with css if we want

can also do this with css if we want that absolute block on top we would just

that absolute block on top we would just come over here

come over here and change the z dash index you might

and change the z dash index you might call that z

call that z but it's i call it z the z dash index

but it's i call it z the z dash index and the default value is zero so

and the default value is zero so that's not going to change anything but

that's not going to change anything but if we give it a higher value and we

if we give it a higher value and we don't need to go 10 or 20 or 100 higher

don't need to go 10 or 20 or 100 higher we can just go one higher and save and

we can just go one higher and save and now our absolute block is on top of the

now our absolute block is on top of the fixed block but i can scroll and the

fixed block but i can scroll and the absolute block goes away our fixed block

absolute block goes away our fixed block is still there okay we've got one more

is still there okay we've got one more left and that is sticky sticky is just a

left and that is sticky sticky is just a little different than fixed

little different than fixed and that's because it will stay in its

and that's because it will stay in its normal flow until it reaches a spot that

normal flow until it reaches a spot that you have defined so here we're going to

you have defined so here we're going to say background color and let's just make

say background color and let's just make this black

this black and then we'll say position

and then we'll say position sticky and we can save

sticky and we can save and there it is and now we haven't put

and there it is and now we haven't put any spot essentially say a top where it

any spot essentially say a top where it would stick so right now if we scroll

would stick so right now if we scroll it just scrolls right off the page

it just scrolls right off the page but we could say

but we could say top 0 and save and now let's see what

top 0 and save and now let's see what happens when we scroll i scroll our

happens when we scroll i scroll our sticky block

sticky block stays at zero momentarily but it's

stays at zero momentarily but it's running out of the container notice when

running out of the container notice when the container that it is in

the container that it is in reaches the end and begins to scroll off

reaches the end and begins to scroll off the page

the page then the sticky block goes ahead and

then the sticky block goes ahead and scrolls off the page unlike the fixed so

scrolls off the page unlike the fixed so now when we scroll back down it stays

now when we scroll back down it stays and so maybe we could push that down a

and so maybe we could push that down a little further or something but overall

little further or something but overall or i could make this a little longer but

or i could make this a little longer but overall you see it stick at the top

overall you see it stick at the top and then

and then it

it moves again when the container catches

moves again when the container catches up to it and scrolls off the page okay

up to it and scrolls off the page okay it's good to see all these examples but

it's good to see all these examples but it's better to even put some of them to

it's better to even put some of them to use and you will see how they're used in

use and you will see how they're used in page construction so i've got a quick

page construction so i've got a quick example coming up for that before we do

example coming up for that before we do that i want to go back to something we

that i want to go back to something we talked about a few lessons ago and

talked about a few lessons ago and that's how to make something disappear

that's how to make something disappear we covered display none

we covered display none and we covered the opacity where we

and we covered the opacity where we could make something fade all the way

could make something fade all the way down to being not only see-through but

down to being not only see-through but completely disappearing but i said both

completely disappearing but i said both of those were not good for accessibility

of those were not good for accessibility display none completely removes it from

display none completely removes it from the page a screen reader would not read

the page a screen reader would not read what we were doing

what we were doing opacity makes it invisible and it might

opacity makes it invisible and it might not be the best way to do what we're

not be the best way to do what we're talking about but what if we had

talking about but what if we had something

something that needed to still be part of the

that needed to still be part of the document but we wanted it off the page

document but we wanted it off the page well position absolute is great for that

well position absolute is great for that so i'm going to

so i'm going to go ahead and comment out well we don't

go ahead and comment out well we don't really need to comment this out i'll

really need to comment this out i'll just change this value because we would

just change this value because we would take the left value

take the left value for example and i'll set it to minus

for example and i'll set it to minus 10 000 pixels

10 000 pixels and save

and save notice

notice it's gone but it's still part of the

it's gone but it's still part of the document it's still in our html

document it's still in our html and when it's processed by a screen

and when it's processed by a screen reader it would still be read say it was

reader it would still be read say it was a paragraph or the label for an input

a paragraph or the label for an input and that's important to accessibility so

and that's important to accessibility so oftentimes when i need to remove

oftentimes when i need to remove something visibly from a page but i

something visibly from a page but i still need it to be part of the page for

still need it to be part of the page for accessibility reasons i position it

accessibility reasons i position it absolute and i move it say a random

absolute and i move it say a random number here but minus 10 000 pixels is

number here but minus 10 000 pixels is kind of my go-to

kind of my go-to way off to the left where it will not be

way off to the left where it will not be seen but it will still be red so i'll

seen but it will still be red so i'll change this back but overall just

change this back but overall just remember that trick for taking something

remember that trick for taking something off of the page okay now let's move on

off of the page okay now let's move on to our second example so what i'm going

to our second example so what i'm going to do is grab everything we see here

to do is grab everything we see here from line 13 down to line 28

from line 13 down to line 28 if i can get to the right spot line 28

if i can get to the right spot line 28 and comment that out i do that with

and comment that out i do that with shift alt and the letter a in visual

shift alt and the letter a in visual studio code now i'm going to grab the

studio code now i'm going to grab the rest of the html i have here and

rest of the html i have here and uncomment it and i do that the same way

uncomment it and i do that the same way shift alt and the letter a and now you

shift alt and the letter a and now you can see

can see i have a button element with a class of

i have a button element with a class of social and it just has this little

social and it just has this little rocket emoji on it after that i've got

rocket emoji on it after that i've got some sections one two

some sections one two three sections each one has an id one

three sections each one has an id one two and three inside each section there

two and three inside each section there is a header with a class of blue header

is a header with a class of blue header one

one header with a class of red header two

header with a class of red header two and a header with a class of green which

and a header with a class of green which is header three then you can see each

is header three then you can see each one has an h2 heading inside of it just

one has an h2 heading inside of it just to have a little bit of text one two and

to have a little bit of text one two and three as well and then there is a footer

three as well and then there is a footer and inside the footer we have anchor

and inside the footer we have anchor links to those different parts of the

links to those different parts of the page one two and three if you remember

page one two and three if you remember from learning basic html you don't just

from learning basic html you don't just have to link away from a page you can

have to link away from a page you can link to different parts of a page with

link to different parts of a page with that anchor link and we're linking back

that anchor link and we're linking back to each id for each section so i'm going

to each id for each section so i'm going to save this now and we see the basic

to save this now and we see the basic html over here to the right now i'm

html over here to the right now i'm going to jump back to the css i'll leave

going to jump back to the css i'll leave all of this here because it won't hurt

all of this here because it won't hurt anything but i'm going to put in a

anything but i'm going to put in a dividing line and a reminder for you

dividing line and a reminder for you that will be available in the source

that will be available in the source code that says remember how to make

code that says remember how to make things disappear that we just talked

things disappear that we just talked about now after that we can apply some

about now after that we can apply some new styles to what we now have in our

new styles to what we now have in our html but i'll leave these old styles in

html but i'll leave these old styles in there as well as well as

there as well as well as leaving in the commented out divs from

leaving in the commented out divs from the first part of this tutorial okay now

the first part of this tutorial okay now we're going to take each section element

we're going to take each section element and we're going to set the height of

and we're going to set the height of each section to 100 viewport units so

each section to 100 viewport units so now you can see on the first page we

now you can see on the first page we have header one and the rocket is here

have header one and the rocket is here too

too then we have a second page with header

then we have a second page with header two and a third page with header three

two and a third page with header three and eventually we have a footer with

and eventually we have a footer with three links in it as well

three links in it as well okay let's scroll up a little bit and

okay let's scroll up a little bit and then after this section we can go ahead

then after this section we can go ahead and define a let's say a blue class

and define a let's say a blue class because we need one for each color that

because we need one for each color that we had this would be background color

we had this would be background color and i'm going to choose blue here

and i'm going to choose blue here now at the end of this line i can press

now at the end of this line i can press shift alt and the down arrow to copy

shift alt and the down arrow to copy down a couple of times and then i'm

down a couple of times and then i'm going to change this one

going to change this one to red and i'll change this hex color to

to red and i'll change this hex color to red

red and then this last one will be green

and then this last one will be green and i'm going to change this to the

and i'm going to change this to the keyword green because i like that green

keyword green because i like that green just a little bit better so now i'll

just a little bit better so now i'll save and we can see the header colors

save and we can see the header colors have changed for each page after that

have changed for each page after that let's put in some styles for the header

let's put in some styles for the header and the footer they can share these

and the footer they can share these styles we have header comma footer and

styles we have header comma footer and it will apply to both so i'll say color

it will apply to both so i'll say color and we'll set the text to white

and we'll set the text to white then we'll set the text align

then we'll set the text align to center

to center then let's set the height of the header

then let's set the height of the header and the footer both to 100 pixels and

and the footer both to 100 pixels and let's pick a big font size so let's go

let's pick a big font size so let's go with like five rims here and save and we

with like five rims here and save and we can see that got very big for each one

can see that got very big for each one okay time to scroll just a little bit

okay time to scroll just a little bit more and now a couple of styles just for

more and now a couple of styles just for the header

the header we'll say position

we'll say position this will be sticky or i should say

this will be sticky or i should say headers because there is more than one

headers because there is more than one header element

header element and then the top will be zero so that is

and then the top will be zero so that is set for all three header elements that

set for all three header elements that we have on the page now now we'll set

we have on the page now now we'll set some style for the footer

some style for the footer say background dash color let's make

say background dash color let's make this one black

this one black now let's set the position

now let's set the position to fixed and this will give us something

to fixed and this will give us something to talk about and compare to sticky

to talk about and compare to sticky and we'll set the bottom to zero and

and we'll set the bottom to zero and we'll see what we get with that okay so

we'll see what we get with that okay so what we have so far

what we have so far is a header one now we still have this

is a header one now we still have this rocket button above

rocket button above and then it's stopping at the top notice

and then it's stopping at the top notice we scrolled now the word one disappeared

we scrolled now the word one disappeared but header one stops at the top here

but header one stops at the top here comes header two

comes header two now it stops at the top

now it stops at the top and the text scrolled on up and now

and the text scrolled on up and now here's header three

here's header three now our bottom here it looks like we got

now our bottom here it looks like we got maybe a little bit of a large font issue

maybe a little bit of a large font issue there so let's pull this font size five

there so let's pull this font size five out of the definition for both

out of the definition for both and let's just put it here

and let's just put it here in the header if we save now we get more

in the header if we save now we get more what i wanted to see down here and

what i wanted to see down here and notice

notice since we used position fixed it pulled

since we used position fixed it pulled it out of the normal flow of the page

it out of the normal flow of the page what would normally be a block element

what would normally be a block element and span the full width here is not

and span the full width here is not spanning the full width now so what we

spanning the full width now so what we would need to do if we were going to use

would need to do if we were going to use position fixed is set the width to 100

position fixed is set the width to 100 percent and then our footer would work

percent and then our footer would work but there is a fix also

but there is a fix also even though it's not really going to

even though it's not really going to scroll or move that we just always want

scroll or move that we just always want it to be in place we could just set this

it to be in place we could just set this to position sticky

to position sticky and

and set bottom to zero and it's always going

set bottom to zero and it's always going to be there so now let's just set a

to be there so now let's just set a little bit larger font

little bit larger font for the footer as well so let's say font

for the footer as well so let's say font size maybe three rims and all the links

size maybe three rims and all the links will stay okay that looks good so

will stay okay that looks good so one two three links and we have each of

one two three links and we have each of our pages as well you can see how this

our pages as well you can see how this is coming together already as an example

is coming together already as an example let's scroll down just a little bit more

let's scroll down just a little bit more and under the footer i'm going to put a

and under the footer i'm going to put a visited

visited pseudo class here for the links

pseudo class here for the links and say that's going to be

and say that's going to be white so our links there in the footer

white so our links there in the footer change to white much easier to see

change to white much easier to see and now our rocket here at the top our

and now our rocket here at the top our social link

so for that we'll set the background color once again and here let's use a

color once again and here let's use a royal blue

royal blue after that

after that we'll set the color to white

we'll set the color to white and let's say a font size because it's a

and let's say a font size because it's a button and it will not already just

button and it will not already just inherit everything that we would

inherit everything that we would normally inherit in paragraphs when we

normally inherit in paragraphs when we set that font size at the top of the

set that font size at the top of the page so here we're just going to say

page so here we're just going to say inherit so it catches up to the font

inherit so it catches up to the font size of everything else padding of one

size of everything else padding of one ram again

ram again now we'll set a position

now we'll set a position of fixed

of fixed and we want this to stay in the same

and we want this to stay in the same place all the time so let's say 30

place all the time so let's say 30 percent from the top and then the left

percent from the top and then the left is going to just be zero

is going to just be zero now this looks more like a social button

now this looks more like a social button and maybe you're used to seeing several

and maybe you're used to seeing several buttons over here for different social

buttons over here for different social media but it should stay in place as we

media but it should stay in place as we scroll so let's check it out

scroll so let's check it out and it sure is it's staying right there

and it sure is it's staying right there as we scroll past each one of our pages

as we scroll past each one of our pages so we have header one two and three now

so we have header one two and three now if we wanted it always on top we could

if we wanted it always on top we could go ahead and set that z index

go ahead and set that z index and set that to one and now when we

and set that to one and now when we scroll we should see it on top of each

scroll we should see it on top of each header as goes by and we do so an ugly

header as goes by and we do so an ugly example but an example nonetheless where

example but an example nonetheless where each page section say this is a single

each page section say this is a single page application or a spa if you will

page application or a spa if you will each page section has its own header and

each page section has its own header and sticky allows those to scroll up and

sticky allows those to scroll up and then stay in place until the content for

then stay in place until the content for that particular section is gone

that particular section is gone and then we have our social media button

and then we have our social media button over here with the rocket to the left

over here with the rocket to the left and at the bottom i showed you how to

and at the bottom i showed you how to use fixed or sticky and you've got links

use fixed or sticky and you've got links to each section okay now let's check out

to each section okay now let's check out these links so if i click three

these links so if i click three it instantly shows three

it instantly shows three two we're at section two one we're at

two we're at section two one we're at section one there's one more thing we

section one there's one more thing we can do that will make that look just a

can do that will make that look just a little cooler if we want to when we are

little cooler if we want to when we are choosing those different sections of our

choosing those different sections of our single page application and we need to

single page application and we need to put this back up here i'll put it at the

put this back up here i'll put it at the top of this new example but it needs to

top of this new example but it needs to go in the root element this won't work

go in the root element this won't work in the body element but we can set the

in the body element but we can set the scroll dash

scroll dash behavior

behavior to smooth

to smooth and if we save that

and if we save that now let's click number three

now let's click number three and notice how we get that little scroll

and notice how we get that little scroll action that's kind of nice

action that's kind of nice so that one setting makes that scroll go

so that one setting makes that scroll go from instantaneous to just a smooth

from instantaneous to just a smooth little scroll between the sections so i

little scroll between the sections so i hope this example has showed you how you

hope this example has showed you how you can apply the position property with css

can apply the position property with css and i hope the previous example gave you

and i hope the previous example gave you some pretty good differences between all

some pretty good differences between all the different values that you can use

the different values that you can use let's move on to css flexbox

let's move on to css flexbox fundamentals we'll be learning the css

fundamentals we'll be learning the css properties that you'll use most

properties that you'll use most frequently when working with flexbox you

frequently when working with flexbox you can see i've got visual studio code here

can see i've got visual studio code here on the left and it's in a smaller window

on the left and it's in a smaller window today i've got a larger browser window

today i've got a larger browser window here on the right and i'll quickly look

here on the right and i'll quickly look at the html file as well that we're

at the html file as well that we're starting out with and this will be

starting out with and this will be available in the source code that you

available in the source code that you can download but we've just got six divs

can download but we've just got six divs right here and all of them have a class

right here and all of them have a class box and then they each have their own

box and then they each have their own number as we see on the page one two

number as we see on the page one two three four five and six divs are block

three four five and six divs are block elements and so they're spanning the

elements and so they're spanning the full width of the container and they're

full width of the container and they're stacked on top of each other and you can

stacked on top of each other and you can see we have

see we have a main element with the class container

a main element with the class container as well okay back inside of our css file

as well okay back inside of our css file we're starting out by bringing in the

we're starting out by bringing in the roboto font from google fonts we've got

roboto font from google fonts we've got a very basic css reset here at the top

a very basic css reset here at the top on the body we're setting up that roboto

on the body we're setting up that roboto font we've got a min height of 100

font we've got a min height of 100 viewport units so it's the full screen

viewport units so it's the full screen or the full browser window and then

or the full browser window and then we've got padding of 20 pixels so you

we've got padding of 20 pixels so you see it pushing down

see it pushing down our main container from the top that 20

our main container from the top that 20 pixels here it's also on the left right

pixels here it's also on the left right and bottom it's just harder to see that

and bottom it's just harder to see that and then we have some styles on the

and then we have some styles on the container so it's got a max width of 800

container so it's got a max width of 800 pixels a minimum height of 400 pixels

pixels a minimum height of 400 pixels margin in line set to auto so it is

margin in line set to auto so it is centered horizontally here and we should

centered horizontally here and we should have the same amount of space on the

have the same amount of space on the left and the right

left and the right we've also got a black border going

we've also got a black border going around the main container but you really

around the main container but you really can't see that right now because the

can't see that right now because the contents are black as well

contents are black as well and then the boxes they have a min width

and then the boxes they have a min width and min height of 100 pixels and

and min height of 100 pixels and remember the boxes are the six divs

remember the boxes are the six divs it's got a background color of black a

it's got a background color of black a color of white that we see on the

color of white that we see on the numbers font size is two rims so the

numbers font size is two rims so the numbers are a little bigger and just a

numbers are a little bigger and just a little bit of padding of 0.5 rim and

little bit of padding of 0.5 rim and that's what we're starting out with for

that's what we're starting out with for our code but we're going to apply flex

our code but we're going to apply flex and the area that we'll apply that to

and the area that we'll apply that to first is the container we'll make our

first is the container we'll make our container a flex container and as soon

container a flex container and as soon as we apply flex

as we apply flex i need to spell display properly

i need to spell display properly things will change on the page so i will

things will change on the page so i will save and now we see some big differences

save and now we see some big differences over here we've got one two three four

over here we've got one two three four five six going horizontally instead of

five six going horizontally instead of vertically and they're not stacked on

vertically and they're not stacked on top of each other so the divs are a min

top of each other so the divs are a min width of 100 pixels so they're about 100

width of 100 pixels so they're about 100 pixels wide each and then their height

pixels wide each and then their height is filling out the full 400 pixels we

is filling out the full 400 pixels we have for min height on our container you

have for min height on our container you can now see the border over here on the

can now see the border over here on the right side of the container at least

right side of the container at least but they are now considered to be flex

but they are now considered to be flex items and so they're starting out at the

items and so they're starting out at the position flex start and that's where

position flex start and that's where they default to in this alignment so

they default to in this alignment so they're just all over here to the left

they're just all over here to the left so let's look at how we can align these

so let's look at how we can align these horizontally first we're going to do

horizontally first we're going to do that with the justify

that with the justify content property and the place they're

content property and the place they're starting is called flex start so we'll

starting is called flex start so we'll say flex

say flex start and yes i'm already wrapping the

start and yes i'm already wrapping the code i pressed alt z and visual studio

code i pressed alt z and visual studio code to do that so we don't see any

code to do that so we don't see any change but what if we switch this to

change but what if we switch this to flex

flex end and save well now they're all over

end and save well now they're all over to the right instead of being all the

to the right instead of being all the way over to the left

way over to the left likewise we can set this to flex center

likewise we can set this to flex center and now they're all in the center

and now they're all in the center you know let's go ahead and add another

you know let's go ahead and add another property here called gap

property here called gap and we'll set this to one rim and now

and we'll set this to one rim and now look at what happens we get a one rem

look at what happens we get a one rem gap between each flex item so that helps

gap between each flex item so that helps us see each individual one just a little

us see each individual one just a little bit better now continuing with the

bit better now continuing with the justify content there's some other good

justify content there's some other good values worth looking into center is

values worth looking into center is often used but there's also space around

often used but there's also space around and now look at that now this isn't used

and now look at that now this isn't used as often and maybe you can see why we've

as often and maybe you can see why we've got

got some space between each one

some space between each one but look the space at the edges before

but look the space at the edges before the end and beginning of the container

the end and beginning of the container aren't quite as big

aren't quite as big and also if we remove the gap now at

and also if we remove the gap now at this point we should still see that

this point we should still see that space around

space around evenly space everything out except at

evenly space everything out except at the beginning and the end so what if we

the beginning and the end so what if we did the other one that we saw space

did the other one that we saw space between

between well now there's no space at the

well now there's no space at the beginning and no space at the end but

beginning and no space at the end but it's evenly spaced between all of the

it's evenly spaced between all of the flex items and then there is a little

flex items and then there is a little newer value that is much better to use i

newer value that is much better to use i think it was probably requested and that

think it was probably requested and that is space evenly so not only between the

is space evenly so not only between the items but also at the beginning and the

items but also at the beginning and the end we have evenly spaced the items

end we have evenly spaced the items throughout the container okay i'm going

throughout the container okay i'm going to change this min height on our boxes

to change this min height on our boxes to a height of 100 pixels so we can

to a height of 100 pixels so we can clearly see each box and some space

clearly see each box and some space in a vertical way because now we're

in a vertical way because now we're going to align the items vertically as

going to align the items vertically as well so we use justify content for

well so we use justify content for horizontal as things are currently set

horizontal as things are currently set to a row and that's why we use justify

to a row and that's why we use justify content for the horizontal

content for the horizontal now let's go ahead and align the items

now let's go ahead and align the items so this would be the other axis

so this would be the other axis and that's going to be vertically so if

and that's going to be vertically so if we align the items to

we align the items to flex start

flex start they're where they are by default right

they're where they are by default right at the top

at the top but likewise we can say flex end

but likewise we can say flex end and now all of the items are at the

and now all of the items are at the bottom as you might guess

bottom as you might guess we could say flex are align items center

we could say flex are align items center and now they're centered vertically as

and now they're centered vertically as well now we don't have the other options

well now we don't have the other options with the line items like space around

with the line items like space around space between because if you think about

space between because if you think about it it's only one item at a time when

it it's only one item at a time when we're aligning the items

we're aligning the items horizontally here we had six items in

horizontally here we had six items in this row but if we look vertically we've

this row but if we look vertically we've just got one item for each alignment so

just got one item for each alignment so that's why we don't have the space

that's why we don't have the space options now we can change the direction

options now we can change the direction as well so let's look at flex

as well so let's look at flex direction

direction and by default we're in a row so we

and by default we're in a row so we could say

could say column

column and now if we save we've got all of our

and now if we save we've got all of our blocks stacked once again as a column

blocks stacked once again as a column and remember i removed that gap that we

and remember i removed that gap that we had so there's no longer a space between

had so there's no longer a space between them and they're also taking up the full

them and they're also taking up the full height of our container remember our

height of our container remember our container has a min height of 400 pixels

container has a min height of 400 pixels but we've got at least 600 pixels worth

but we've got at least 600 pixels worth of divs right here so they're filling

of divs right here so they're filling this up so there's no extra space to

this up so there's no extra space to space out as well

space out as well now if we go ahead and change something

now if we go ahead and change something let's change the align items and we'll

let's change the align items and we'll see if you think we're going to get what

see if you think we're going to get what we get i will save and now everything's

we get i will save and now everything's to the left because our align items

to the left because our align items became the horizontal alignment again

became the horizontal alignment again just one item at a time instead of all

just one item at a time instead of all six all six are now on the vertical

six all six are now on the vertical alignment so by having flex end they

alignment so by having flex end they will all go to the right

will all go to the right and of course we were back at center and

and of course we were back at center and that put everything in the center so if

that put everything in the center so if we change our justify content we not

we change our justify content we not might not see much of a difference right

might not see much of a difference right now because we're taking up all that

now because we're taking up all that space so if i said flex start for

space so if i said flex start for example it didn't really change that's

example it didn't really change that's because we're eating up all of the space

because we're eating up all of the space of the container already so there's no

of the container already so there's no real change to notice when we have this

real change to notice when we have this set with 600 pixels inside of a

set with 600 pixels inside of a container where we're taking up all of

container where we're taking up all of the space but if we change this to row

the space but if we change this to row now we'll see our center where they're

now we'll see our center where they're all together once again with no gap

all together once again with no gap whatsoever if we wanted a gap

whatsoever if we wanted a gap we could put our gap property back in

we could put our gap property back in and say one rim and now we have that one

and say one rim and now we have that one ram gap between each one of these but

ram gap between each one of these but they're centered now of course if we

they're centered now of course if we change this back to space evenly we

change this back to space evenly we might not want that gap property at all

might not want that gap property at all now since we have the flex direction

now since we have the flex direction property in here there's more that we

property in here there's more that we can do than just row or column what

can do than just row or column what about row

about row reverse and if i save notice now

reverse and if i save notice now six that was to the far right is now to

six that was to the far right is now to the left we reversed the order of the

the left we reversed the order of the elements here so row reverse is an

elements here so row reverse is an option and as you might guess column

option and as you might guess column reverse is also an option now let's look

reverse is also an option now let's look at one other property here i can leave

at one other property here i can leave the row reversed for this for now but

the row reversed for this for now but what i need to do

what i need to do is drag this all the way over to take up

is drag this all the way over to take up the full screen and open up dev tools

the full screen and open up dev tools and once we have dev tools here we're

and once we have dev tools here we're going to notice something as i resize

going to notice something as i resize the window

the window the flexbox row or row of boxes

the flexbox row or row of boxes it's

it's really not changing it's outgrowing it's

really not changing it's outgrowing it's not resizing or shrinking to stay inside

not resizing or shrinking to stay inside of the container or the page so that is

of the container or the page so that is considered an overflow so there is a

considered an overflow so there is a setting for that let me bring up visual

setting for that let me bring up visual studio code again and the setting that

studio code again and the setting that we could use is called flex dash wrap

we could use is called flex dash wrap and so we would want to set that to wrap

and so we would want to set that to wrap and now if we save and we have our dev

and now if we save and we have our dev tool still open in the window you can

tool still open in the window you can see it wrapped into two rows

see it wrapped into two rows and we have it reversed now you might be

and we have it reversed now you might be surprised at this because 6 isn't at the

surprised at this because 6 isn't at the top now but our rows have reversed so 3

top now but our rows have reversed so 3 is to the far left and 1 is to the right

is to the far left and 1 is to the right 6 is to the far left of row 2

6 is to the far left of row 2 and 4 is to the right now we could

and 4 is to the right now we could change this back

change this back of course to row

of course to row see everything in the order that we

see everything in the order that we would normally see it in 1 2 3 four five

would normally see it in 1 2 3 four five six

six and then there's also shorthand that we

and then there's also shorthand that we could use instead of flex direction and

could use instead of flex direction and flex wrap and that would just be called

flex wrap and that would just be called flex flow so let me just select both of

flex flow so let me just select both of these and now we'll have flex flow

these and now we'll have flex flow and then the first is the direction so

and then the first is the direction so we'll say row the second value

we'll say row the second value is wrap and now by default

is wrap and now by default you noticed our row did not wrap so the

you noticed our row did not wrap so the default value is no wrap but we want it

default value is no wrap but we want it to wrap so we'll set that and now

to wrap so we'll set that and now nothing should change about the page the

nothing should change about the page the way we had it see if i can resize just a

way we had it see if i can resize just a little more here

little more here and yep we've got

and yep we've got wrapping of the rows as it needs to and

wrapping of the rows as it needs to and it will even get down to just one column

it will even get down to just one column and now we'll bring it back to two

and now we'll bring it back to two columns or

columns or three rows is what we should consider

three rows is what we should consider that since we have it set to rows and

that since we have it set to rows and there's

there's again back to two rows and

again back to two rows and still two rows with this width because

still two rows with this width because we've just got one square that carries

we've just got one square that carries down i'll bring it back to about even

down i'll bring it back to about even here

here and now that we've got that this is

and now that we've got that this is shorthand so remember the first is the

shorthand so remember the first is the flex direction the second is the flex

flex direction the second is the flex wrap with flex flow okay there's one

wrap with flex flow okay there's one more property to consider on our

more property to consider on our container remember we're putting all of

container remember we're putting all of these properties on the flex container

these properties on the flex container right now that i've outlined here with

right now that i've outlined here with our one pixel black border i'm going to

our one pixel black border i'm going to scroll just a little for some more room

scroll just a little for some more room here underneath let's put a line

here underneath let's put a line content

content now this aligns the rows so you can see

now this aligns the rows so you can see by default we have two rows and they're

by default we have two rows and they're spaced out here there's some room

spaced out here there's some room between them now this will take values

between them now this will take values just like justify content but it's

just like justify content but it's aligning the row so we'll put in flex

aligning the row so we'll put in flex start first and if we save

start first and if we save notice both our rows move up to the top

notice both our rows move up to the top likewise flex end

likewise flex end move them both to the bottom

move them both to the bottom and flex or not flex just

and flex or not flex just center

center has them both in the center so that

has them both in the center so that wasn't the default either what about

wasn't the default either what about space

space between that we could also use on

between that we could also use on justify content yep it puts one on the

justify content yep it puts one on the top one on the bottom

top one on the bottom space around

space around so that's a little different as well

so that's a little different as well and then space evenly that we might like

and then space evenly that we might like if i could spell evenly once again

if i could spell evenly once again and save and yes that changed the

and save and yes that changed the alignment just a little bit as well okay

alignment just a little bit as well okay now we're ready to move on to the

now we're ready to move on to the individual flex items because we can

individual flex items because we can also set properties on the flex items

also set properties on the flex items instead of just the container and that

instead of just the container and that will also change how flexbox handles the

will also change how flexbox handles the layout so the first thing we can do is

layout so the first thing we can do is apply some of the things we learned from

apply some of the things we learned from above let's go ahead and make each one

above let's go ahead and make each one of these flex items a flex container now

of these flex items a flex container now once again we will be applying

once again we will be applying properties as a flex item soon but if we

properties as a flex item soon but if we make these a flex container

make these a flex container then we could go ahead and display those

then we could go ahead and display those numbers

numbers centered right in the middle of each box

centered right in the middle of each box so if we say display flex

so if we say display flex justify content center

justify content center and then align items

center and save now all of our numbers are in the middle of each box and yes as

are in the middle of each box and yes as you might guess you could use these

you might guess you could use these three properties to center any element

three properties to center any element inside of a container or you could

inside of a container or you could center an element inside of the body

center an element inside of the body which would be considered a container

which would be considered a container the body element of a page so now you

the body element of a page so now you essentially know how to center something

essentially know how to center something in the middle of the page if you want to

in the middle of the page if you want to okay now we have a few properties to

okay now we have a few properties to look at four flex items again these

look at four flex items again these three properties made each item a flex

three properties made each item a flex container of its own but they are still

container of its own but they are still flex items inside of the larger flex

flex items inside of the larger flex container as well so what i want to do

container as well so what i want to do besides create some extra space here is

besides create some extra space here is go back to the html i'm going to select

go back to the html i'm going to select the last four divs there that have the

the last four divs there that have the class box and i'm going to comment them

class box and i'm going to comment them out for now by pressing shift alt and

out for now by pressing shift alt and the letter a

the letter a and then saving and now we'll just have

and then saving and now we'll just have two divs with number one and number two

two divs with number one and number two that we can work with in the css so

that we can work with in the css so before we put a min width on each box a

before we put a min width on each box a min width of 100 pixels and i'm going to

min width of 100 pixels and i'm going to go ahead and comment that out as well

go ahead and comment that out as well again shift alt in the letter a

again shift alt in the letter a and now

and now no width will be set and you can see

no width will be set and you can see they're only

they're only getting the width of the content

getting the width of the content essentially here on the page right now

essentially here on the page right now but we can set a property called flex

but we can set a property called flex basis and you can give that an absolute

basis and you can give that an absolute value or a percentage if you want so

value or a percentage if you want so what i'm going to do is give it

what i'm going to do is give it three well now let's go with 100 pixels

three well now let's go with 100 pixels again just to compare to what we had so

again just to compare to what we had so if we'll save now that's essentially

if we'll save now that's essentially giving it a minimum width right now now

giving it a minimum width right now now that could change it it's not the same

that could change it it's not the same as min width but that's essentially what

as min width but that's essentially what it's doing in this case and now another

it's doing in this case and now another property we can provide is called flex

property we can provide is called flex dash grow

dash grow and we'll set that to one and that's

and we'll set that to one and that's setting this

setting this the same value and it's a unitless value

the same value and it's a unitless value but we're setting the same value on both

but we're setting the same value on both boxes which is essentially saying if

boxes which is essentially saying if they need to grow to fill out the page

they need to grow to fill out the page they will grow the same amount so if we

they will grow the same amount so if we save you can see now our items both grew

save you can see now our items both grew and they are filling out the page they

and they are filling out the page they do have that gap in between but other

do have that gap in between but other than that they grew as much as they

than that they grew as much as they needed to to take up the rest of the

needed to to take up the rest of the container i'm going to scroll up just a

container i'm going to scroll up just a little bit and we're going to use a

little bit and we're going to use a pseudo selector to select just one of

pseudo selector to select just one of these elements now so i'll say

these elements now so i'll say nth

nth i'm sorry not if i need the class first

i'm sorry not if i need the class first and class was box and then it's inth

and class was box and then it's inth dash child and let's select the second

dash child and let's select the second element here and let's override

element here and let's override that flex grow and set it to two so now

that flex grow and set it to two so now this second one should take up more than

this second one should take up more than the first but it's not going to be

the first but it's not going to be double and i'll tell you why notice it

double and i'll tell you why notice it did grow more than the first but they

did grow more than the first but they both have a flex basis of 100 pixels so

both have a flex basis of 100 pixels so what we're telling the elements to do

what we're telling the elements to do here with flex grow

here with flex grow is after the 100 pixels so each element

is after the 100 pixels so each element gets their 100 pixels then whatever is

gets their 100 pixels then whatever is left

left the one that has flex grow 2 is going to

the one that has flex grow 2 is going to get twice as much of that extra space as

get twice as much of that extra space as the element that has flex grow one so

the element that has flex grow one so it's saying whatever space is left you

it's saying whatever space is left you take two for every one that i take

take two for every one that i take essentially now the other one to

essentially now the other one to consider is flex shrink now before we

consider is flex shrink now before we get to flex shrink notice we currently

get to flex shrink notice we currently have

have flex wrap still set so once they get to

flex wrap still set so once they get to where they can't fit in

where they can't fit in that 100 pixel size they essentially

that 100 pixel size they essentially wrap down to two rows here with our

wrap down to two rows here with our current setup we're going to have to

current setup we're going to have to really remove that wrap setting so we

really remove that wrap setting so we can see what flex shrink does for us so

can see what flex shrink does for us so i'm going to select grow here ctrl d to

i'm going to select grow here ctrl d to select the second grow and then change

select the second grow and then change them both to shrink

them both to shrink so now we have flex shrink in place i'm

so now we have flex shrink in place i'm going to scroll back up to our container

going to scroll back up to our container and instead of wrap i'm going to set

and instead of wrap i'm going to set no wrap

no wrap so now

so now with the larger value here of shrink two

with the larger value here of shrink two our second box is set to shrink more

our second box is set to shrink more than the first box and this might be

than the first box and this might be easier to see if we make the boxes

easier to see if we make the boxes larger as well so let me come out here

larger as well so let me come out here as far as i can for the page with dev

as far as i can for the page with dev tools open and maybe set these to

tools open and maybe set these to let me try

let me try 250 pixels and see if that

250 pixels and see if that fits inside the screen we have yep so

fits inside the screen we have yep so that works right now they look like

that works right now they look like they're basically equal size

they're basically equal size but as we shrink the page down we should

but as we shrink the page down we should see the one on the right and we do

see the one on the right and we do number two is getting smaller than

number two is getting smaller than number one

number one so that is because number two has a

so that is because number two has a larger value of flex shrink than number

larger value of flex shrink than number one so it's the same concept as flex

one so it's the same concept as flex grow except now we're shrinking and

grow except now we're shrinking and that's preventing

that's preventing the overflow out of the box that

the overflow out of the box that shrinkage is what that does so i wanted

shrinkage is what that does so i wanted to eliminate the wrap or it would go

to eliminate the wrap or it would go ahead and wrap instead of shrink at some

ahead and wrap instead of shrink at some point so there we go for flex grow and

point so there we go for flex grow and flex rank

flex rank flex basis is giving that size basis but

flex basis is giving that size basis but notice over here we are now shrinking

notice over here we are now shrinking below 250 pixels here for number two so

below 250 pixels here for number two so just like flex grow lets something

just like flex grow lets something extend above the basis flex shrink lets

extend above the basis flex shrink lets something shrink below the basis so

something shrink below the basis so either way now that we've covered all

either way now that we've covered all three of those different properties we

three of those different properties we can put all of them into a shorthand as

can put all of them into a shorthand as well so here

well so here with the 250 pixels i guess i'll keep

with the 250 pixels i guess i'll keep that we can just say flex

that we can just say flex the first value is grow

the first value is grow the second value is shrank and the third

the second value is shrank and the third value is basis so we could do that

value is basis so we could do that remember we could also put something

remember we could also put something over here like a percentage let's say

over here like a percentage let's say maybe 40

maybe 40 percent see if that works out for us

percent see if that works out for us that's about the same and then we could

that's about the same and then we could do the same here so we could say

do the same here so we could say flex 2

flex 2 for grow 2 for shrink

for grow 2 for shrink and 40 here as well now when we save

and 40 here as well now when we save they look the same size

they look the same size but if we grow

but if we grow number two is going to get a little

number two is going to get a little larger than number one and if we shrink

larger than number one and if we shrink number two is going to get a little

number two is going to get a little smaller than number one although they're

smaller than number one although they're both shrinking quite a bit right there

both shrinking quite a bit right there and that could be because i'm using a

and that could be because i'm using a percentage as we get down it's still

percentage as we get down it's still just taking up 40 percent let's go back

just taking up 40 percent let's go back to a

to a set value an absolute value we should be

set value an absolute value we should be able to see this example just a little

able to see this example just a little bit better for the shrinkage so number

bit better for the shrinkage so number two gets smaller than number one yep it

two gets smaller than number one yep it was because i was using that relative 40

was because i was using that relative 40 percent before so when it grows

percent before so when it grows number two still gets a little bit

number two still gets a little bit larger let me close dev tool well if i

larger let me close dev tool well if i close devtools i won't be able to pull

close devtools i won't be able to pull it over at all

it over at all but number two is larger than number one

but number two is larger than number one here it's just a little harder to see

here it's just a little harder to see maybe if i change the absolute value

maybe if i change the absolute value again

again to 150 pixels

to 150 pixels yep number two got even larger there but

yep number two got even larger there but then as we shrink it down number two

then as we shrink it down number two does get smaller than number one okay

does get smaller than number one okay with that complete i'm going to go back

with that complete i'm going to go back to the html and uncomment those other

to the html and uncomment those other four divs shift alt and the letter a

four divs shift alt and the letter a once again to uncomment after we

once again to uncomment after we highlight them

highlight them now you can see number two shrank more

now you can see number two shrank more than the other divs because we have it

than the other divs because we have it set up to shrink more if it needs to

set up to shrink more if it needs to right here with our nth child

right here with our nth child so we could remove that or we could just

so we could remove that or we could just leave it for now but there is another

leave it for now but there is another property i want to cover and it won't

property i want to cover and it won't impact it so i will just leave that

impact it so i will just leave that and this would be order so let's go

and this would be order so let's go ahead and change the order of this

ahead and change the order of this second

second child as well and let's say

child as well and let's say order is going to be

order is going to be 4

4 and save

and save now look what happened it has the

now look what happened it has the highest number so it went to the end it

highest number so it went to the end it didn't go to where the fourth element is

didn't go to where the fourth element is it actually went to the end

it actually went to the end however if we say order zero

however if we say order zero it's going to be right back where it was

it's going to be right back where it was but if we wanted at the beginning we

but if we wanted at the beginning we could say order

could say order minus 1 and now 2 is there now if you

minus 1 and now 2 is there now if you are using this order property on

are using this order property on individual elements

individual elements and then you're also using something

and then you're also using something like row reverse that we had available

like row reverse that we had available up here and let's change this back to

up here and let's change this back to wrap as well

wrap as well and now if we switch this to row

and now if we switch this to row reverse

reverse you might be thinking you were going to

you might be thinking you were going to move number two to the very beginning

move number two to the very beginning but we didn't

but we didn't we moved it to the right

we moved it to the right and it's to the right of the first row

and it's to the right of the first row and that is because we reversed it so

and that is because we reversed it so essentially it was here at the beginning

essentially it was here at the beginning and then we reversed the row so if we

and then we reversed the row so if we went ahead and set this back to his

went ahead and set this back to his normal position with zero

normal position with zero then we would see it's in the middle

then we would see it's in the middle because it would normally be one two

because it would normally be one two three and that's three two one so that

three and that's three two one so that would just be the same

would just be the same but we that is all because we have row

but we that is all because we have row reverse at the top so minus one would

reverse at the top so minus one would take it to the right instead of the left

take it to the right instead of the left likewise a larger number say one

likewise a larger number say one totally switched it around and now it's

totally switched it around and now it's down here at the bottom left and that is

down here at the bottom left and that is because of row reverse again so if we go

because of row reverse again so if we go ahead and remove the reverse up here

ahead and remove the reverse up here it may be where we would expect it to be

it may be where we would expect it to be and that's at the very end of the list

and that's at the very end of the list now because all of the rest of these

now because all of the rest of these would be where they were placed

would be where they were placed essentially with a value of zero so that

essentially with a value of zero so that one makes it a larger value than all of

one makes it a larger value than all of the rest of them so we would give it

the rest of them so we would give it zero to put it back in place

zero to put it back in place a higher number above zero to put it at

a higher number above zero to put it at the end

the end and a number like minus one something

and a number like minus one something lower than zero to put it at the

lower than zero to put it at the beginning we've covered a lot of flexbox

beginning we've covered a lot of flexbox properties today and we will be building

properties today and we will be building some things with it in the future but

some things with it in the future but right now i think the best way for you

right now i think the best way for you to get some practice with it besides

to get some practice with it besides just playing around with it in your own

just playing around with it in your own html and css is to go to this website

html and css is to go to this website called flexbox froggie and it's got 24

called flexbox froggie and it's got 24 challenges to help you learn flexbox and

challenges to help you learn flexbox and if i expand it out i think it looks a

if i expand it out i think it looks a little bit better in the full screen

little bit better in the full screen there we go and you can work through

there we go and you can work through these 24 challenges and learn how to

these 24 challenges and learn how to place the frog on the lily pad with

place the frog on the lily pad with flexbox and there's some good challenges

flexbox and there's some good challenges in there and it will get you thinking

in there and it will get you thinking about the different ways to use the

about the different ways to use the different properties that we've just

different properties that we've just reviewed for flexbox

reviewed for flexbox let's learn about css grid layout

let's learn about css grid layout fundamentals we'll be learning the css

fundamentals we'll be learning the css properties that you will use most

properties that you will use most frequently when working with grids

frequently when working with grids so for starter code we've got html here

so for starter code we've got html here and inside the body we have a main

and inside the body we have a main element with the class of container and

element with the class of container and we have six divs

we have six divs labeled box one two three four five and

labeled box one two three four five and six by their content they all have the

six by their content they all have the same class box

same class box if we look at the style that is

if we look at the style that is currently applied you can see we're

currently applied you can see we're importing in the roboto font from google

importing in the roboto font from google fonts we have a basic css reset

fonts we have a basic css reset inside the body we are just setting the

inside the body we are just setting the roboto font and setting the body to a

roboto font and setting the body to a min height of 100 viewport units and

min height of 100 viewport units and then we have the box class for those

then we have the box class for those divs background color of black

divs background color of black a white font color and font size 2 rim

a white font color and font size 2 rim padding of 0.5 ram and that's all we

padding of 0.5 ram and that's all we have to start so i'll drag vs code over

have to start so i'll drag vs code over to the left

to the left and we're using the live server visual

and we're using the live server visual studio code extension so any changes we

studio code extension so any changes we make to the css we should see

make to the css we should see immediately here in chrome on the web

immediately here in chrome on the web page so here are our six divs now we

page so here are our six divs now we haven't set any size the main element is

haven't set any size the main element is a block element so it automatically has

a block element so it automatically has 100 percent width and then so are the

100 percent width and then so are the divs so they're stacked on top of each

divs so they're stacked on top of each other and all six of them have a width

other and all six of them have a width of 100

of 100 so they're filling up that main element

so they're filling up that main element we're going to cover several different

we're going to cover several different ways to apply grid to our page into

ways to apply grid to our page into these divs so let's start out by styling

these divs so let's start out by styling that container class that we have on the

that container class that we have on the main element and we'll say display grid

main element and we'll say display grid now instantly when we do this and save

now instantly when we do this and save we don't see a change but all of these

we don't see a change but all of these divs instantly become grid items now

divs instantly become grid items now within the grid after that the quickest

within the grid after that the quickest way to apply a grid is to use grid dash

way to apply a grid is to use grid dash auto dash flow and you can say row which

auto dash flow and you can say row which essentially leaves it as it is because

essentially leaves it as it is because they're stacked on top of each other

they're stacked on top of each other which now makes six rows

which now makes six rows or we could change this

or we could change this to column and we will have six columns

to column and we will have six columns one for each of the six divs now many

one for each of the six divs now many times we want more control than just

times we want more control than just setting the auto flow to column and

setting the auto flow to column and letting all the columns be defined just

letting all the columns be defined just automatically like that so let me go

automatically like that so let me go ahead and remove grid auto flow and in

ahead and remove grid auto flow and in this place i'm going to put grid dash

this place i'm going to put grid dash template

template dash whoops there we go dash columns

dash whoops there we go dash columns that's what i want and now we can set

that's what i want and now we can set the columns and the width of each now

the columns and the width of each now notice i'm wrapping the code so it will

notice i'm wrapping the code so it will wrap to the next line but i'll say 200

wrap to the next line but i'll say 200 pixels

pixels then i could say

then i could say 100 pixels and then i could say 200

100 pixels and then i could say 200 pixels and when i save we now have three

pixels and when i save we now have three columns and you can see the first column

columns and you can see the first column is 200 pixels the second is 100 and the

is 200 pixels the second is 100 and the third is again 200 but we don't have to

third is again 200 but we don't have to use absolute values like pixels we can

use absolute values like pixels we can use fraction units which is a unit

use fraction units which is a unit that's specifically used with css grids

that's specifically used with css grids so let's say we've got

so let's say we've got two fractions for the first column and

two fractions for the first column and then one fraction for the second and one

then one fraction for the second and one fraction for the third now when we save

fraction for the third now when we save you can see

you can see it used all of the available space but

it used all of the available space but it made the first column twice as big as

it made the first column twice as big as it did the second or the third column

it did the second or the third column and we can also mix so we could say 200

and we can also mix so we could say 200 pixels and then one fraction one

pixels and then one fraction one fraction

fraction and you see our first column's 200

and you see our first column's 200 pixels then the next two columns since

pixels then the next two columns since they're equal both have one fraction a

they're equal both have one fraction a piece they're splitting the available

piece they're splitting the available width that is remaining and so they're

width that is remaining and so they're eating up all of that so it still has a

eating up all of that so it still has a 100 percent width for the row

100 percent width for the row but

but the 5 and 6 here or the 2 and 3 are much

the 5 and 6 here or the 2 and 3 are much wider than what we see for the 1 and the

wider than what we see for the 1 and the 4. and now something very useful instead

4. and now something very useful instead of specifying every column especially if

of specifying every column especially if many of the columns have the same value

many of the columns have the same value you can use

you can use a shortcut for that and so we're here

a shortcut for that and so we're here we're going to say

we're going to say repeat i could spell repeat and let's

repeat i could spell repeat and let's say we have four columns and each one is

say we have four columns and each one is one fraction and now when we save you

one fraction and now when we save you can see we have four equal columns each

can see we have four equal columns each being one fraction and then when we get

being one fraction and then when we get to the second row that is automatically

to the second row that is automatically created by grid we've got two columns

created by grid we've got two columns here because we only had six total grid

here because we only had six total grid items so a grid can have empty space and

items so a grid can have empty space and that's what we have here to the right

that's what we have here to the right now while this value does not always

now while this value does not always have to be equal it does have to be a

have to be equal it does have to be a pattern so we could say instead of just

pattern so we could say instead of just one fraction let's say we start with one

one fraction let's say we start with one fraction and then the next column is two

fraction and then the next column is two fractions and instead of repeating four

fractions and instead of repeating four let's just repeat this twice because

let's just repeat this twice because it's going to repeat this pattern so

it's going to repeat this pattern so with this pattern we're going to have

with this pattern we're going to have four columns because we've defined two

four columns because we've defined two different columns here with the pattern

different columns here with the pattern so when i save you can see the first

so when i save you can see the first column is one fraction the second column

column is one fraction the second column is twice as big two fractions the third

is twice as big two fractions the third column again one fraction and the fourth

column again one fraction and the fourth column following that pattern is twice

column following that pattern is twice as big with two fractions now while

as big with two fractions now while we've defined our columns here we really

we've defined our columns here we really haven't applied anything to the rows so

haven't applied anything to the rows so everything about the rows is currently

everything about the rows is currently implicitly created by css grid we

implicitly created by css grid we haven't explicitly defined anything for

haven't explicitly defined anything for those rows but let's go ahead and do

those rows but let's go ahead and do that and to do that we'll use grid dash

that and to do that we'll use grid dash auto dash rows and let's say 200 pixels

auto dash rows and let's say 200 pixels to start out

to start out and you can see

and you can see now each row became 200 pixels tall but

now each row became 200 pixels tall but once again we're not locked into just

once again we're not locked into just using 200 pixels here with grid auto

using 200 pixels here with grid auto rows so we could say

rows so we could say min max which is a function and this

min max which is a function and this lets us say the minimum first so we'll

lets us say the minimum first so we'll say a minimum

say a minimum of let's say 150 pixels tall and then

of let's say 150 pixels tall and then we'll say auto for the max so it could

we'll say auto for the max so it could allow it to be taller so now

allow it to be taller so now both rows are essentially 150 pixels

both rows are essentially 150 pixels tall but we have auto here so if our

tall but we have auto here so if our container

container was taller right now we've got 150 and

was taller right now we've got 150 and 150 so that would be a total of 300 but

150 so that would be a total of 300 but if our container was taller this auto

if our container was taller this auto would let it grow so let's set

would let it grow so let's set a height

a height or let's set a min height i like that

or let's set a min height i like that better let's set a min height

better let's set a min height of 400 pixels

of 400 pixels and save and now you can see they got

and save and now you can see they got taller they should be 200 each so

taller they should be 200 each so 200 height on the first row 200 height

200 height on the first row 200 height on the second row and that's because of

on the second row and that's because of this auto but they will not get smaller

this auto but they will not get smaller than 150 pixels a piece per row now

than 150 pixels a piece per row now while i'm giving this example of grid

while i'm giving this example of grid template rows and grid our grid template

template rows and grid our grid template columns pardon me and grid auto rows you

columns pardon me and grid auto rows you should know that the opposite also

should know that the opposite also exists so you could have

exists so you could have grid template

grid template rows and you could have grid auto

rows and you could have grid auto columns so i'm giving one example and

columns so i'm giving one example and i'll let you play around with the

i'll let you play around with the opposite of those now what else we have

opposite of those now what else we have are gaps between the rows or between the

are gaps between the rows or between the columns so we could define a row dash

columns so we could define a row dash gap and we could set that to 1m

gap and we could set that to 1m and save and you can see we now have

and save and you can see we now have that gap between the rows

that gap between the rows likewise there is a column dash gap so

likewise there is a column dash gap so instead we could say column gap and save

instead we could say column gap and save and now we have one em as a gap between

and now we have one em as a gap between each of the columns now these spaces are

each of the columns now these spaces are essentially called gutters that's the

essentially called gutters that's the space between the cells so it could be a

space between the cells so it could be a column gap

column gap a row gap or we could just define it as

a row gap or we could just define it as gap and as you might guess

gap and as you might guess gap combines both and it will define the

gap combines both and it will define the row first so if we say row

row first so if we say row 1 em and just to show the difference we

1 em and just to show the difference we could say 0.5 em for the column and save

could say 0.5 em for the column and save and you can see the column gap

and you can see the column gap is smaller so you can define each of

is smaller so you can define each of those separately many times we want them

those separately many times we want them all to be the same and we just leave it

all to be the same and we just leave it all at one size and while i've got em

all at one size and while i've got em there i kind of want to make that rim

there i kind of want to make that rim instead so i know i'm going back to my

instead so i know i'm going back to my default font size there okay now let's

default font size there okay now let's look at the individual grid items which

look at the individual grid items which we have applied the class of box to all

we have applied the class of box to all of them so let's use pseudo selectors to

of them so let's use pseudo selectors to just select the ones we want to change

just select the ones we want to change and i'll start off with the box class

and i'll start off with the box class and then i'll use the pseudo selector

and then i'll use the pseudo selector first dash child

first dash child and after first child i'm going to set

and after first child i'm going to set the background color first so background

the background color first so background color there we go and i'll make this

color there we go and i'll make this blue

blue we can save and make sure we have

we can save and make sure we have selected the correct grid item that

selected the correct grid item that first child and after that let's go

first child and after that let's go ahead and define how many columns this

ahead and define how many columns this child takes up and this is based on the

child takes up and this is based on the lines of the grid which i will explain

lines of the grid which i will explain after i set this definition so let's say

after i set this definition so let's say grid

grid dash column

dash column yeah there we go column then we say dash

yeah there we go column then we say dash start

start and we'll start at one and then we'll

and we'll start at one and then we'll say grid dash

say grid dash column

column dash end and let's end at four and now

dash end and let's end at four and now if i save

if i save well that looks way different doesn't it

well that looks way different doesn't it so what we have done the first line is

so what we have done the first line is here on the left hand side of the grid

here on the left hand side of the grid the second line

the second line is here when we get to the second column

is here when we get to the second column the third line

the third line is here

is here when we get to the third column and the

when we get to the third column and the fourth line is over here after the third

fourth line is over here after the third column and before the fourth column and

column and before the fourth column and so you can see we told it to start at

so you can see we told it to start at the first line and end at the fourth

the first line and end at the fourth line so it really spans the first three

line so it really spans the first three columns we can do the same with the row

columns we can do the same with the row so let's say grid dash row dash start

so let's say grid dash row dash start and we'll go ahead and start again at 1

and we'll go ahead and start again at 1 then we'll say grid dash row dash end

then we'll say grid dash row dash end and let's end at three and save and see

and let's end at three and save and see what happens when that happens

what happens when that happens we took up two rows so the starting line

we took up two rows so the starting line was at the top and then the second line

was at the top and then the second line was between the first and second row and

was between the first and second row and the third line is between the second and

the third line is between the second and third row so when we told it to stop at

third row so when we told it to stop at line three it stops before the third row

line three it stops before the third row now we can see this better with dev

now we can see this better with dev tools so i'm going to drag our page over

tools so i'm going to drag our page over so it takes up the full window and then

so it takes up the full window and then i'm going to press ctrl shift and the

i'm going to press ctrl shift and the letter i to get to dev tools

letter i to get to dev tools and then i want to go to elements i

and then i want to go to elements i believe yep and i'm going to drag this

believe yep and i'm going to drag this up

up and no we don't need the console let's

and no we don't need the console let's look at layout there we go so i don't

look at layout there we go so i don't need to drag that up i need to bring

need to drag that up i need to bring this down maybe i can close that there

this down maybe i can close that there we go so

we go so now we're in layout here not styles not

now we're in layout here not styles not computed but layout and we can scroll up

computed but layout and we can scroll up and we can overlay the grid

and we can overlay the grid on our main container and look at it in

on our main container and look at it in the browser so now we see this and the

the browser so now we see this and the lines are labeled so you can see one two

lines are labeled so you can see one two three

three four

four likewise at the top we have one and then

likewise at the top we have one and then two and then three coming down so for

two and then three coming down so for the row we start at one and we end at

the row we start at one and we end at three

three for the column we start at one and end

for the column we start at one and end at four and you can always do this in

at four and you can always do this in chrome dev tools just make sure you open

chrome dev tools just make sure you open it up

it up go down to this second area here and not

go down to this second area here and not styles not computed but choose layout

styles not computed but choose layout and then you can go to grid overlays and

and then you can go to grid overlays and there are some other things that you can

there are some other things that you can apply as well it should default to show

apply as well it should default to show line numbers and that's what you

line numbers and that's what you definitely want when you see the

definitely want when you see the overlays okay with that said i'm going

overlays okay with that said i'm going to close this i'm going to drag our

to close this i'm going to drag our chrome window back to the right so we

chrome window back to the right so we can see our code and let's apply just a

can see our code and let's apply just a little bit more to this grid i'm going

little bit more to this grid i'm going to scroll up for just a little more room

to scroll up for just a little more room and i'm going to show you what i do

and i'm going to show you what i do instead of typing all of these out

instead of typing all of these out because this gets to be a little bit

because this gets to be a little bit much so instead of grid column start and

much so instead of grid column start and end and grid row start and end i would

end and grid row start and end i would type

type grid dash

grid dash column and then i would specify start at

column and then i would specify start at the first line then put a slash and end

the first line then put a slash and end at the fourth

at the fourth and if i save you can see that's what

and if i save you can see that's what happens likewise i can do that with grid

happens likewise i can do that with grid dash row and say start at the first line

dash row and say start at the first line and at the third line and save and we're

and at the third line and save and we're back to where we were

back to where we were with fewer properties as long as you

with fewer properties as long as you understand that these are shorthand and

understand that these are shorthand and this essentially is the starting number

this essentially is the starting number and the ending number for both of these

and the ending number for both of these properties let's go ahead and select one

properties let's go ahead and select one more of these grid items so i'll once

more of these grid items so i'll once again use the box class and now i'll use

again use the box class and now i'll use nth dash child

nth dash child and we'll select the second item now for

and we'll select the second item now for the second item we'll change the

the second item we'll change the background color once again and i'll

background color once again and i'll make this one purple so it stands out

make this one purple so it stands out and we save we can see that it is now up

and we save we can see that it is now up in the top right

in the top right after that we'll come down to the next

after that we'll come down to the next line and let's put our grid

line and let's put our grid dash column

dash column and let's say it starts at the first

and let's say it starts at the first line but ends at the fifth and that

line but ends at the fifth and that should make it span

should make it span the entire row or the entire container

the entire row or the entire container if you will so when i save

if you will so when i save that made a big change right there then

that made a big change right there then let's use grid row say grid dash row

let's use grid row say grid dash row let's have it start

let's have it start at the third line

at the third line and end at the fourth line and when i

and end at the fourth line and when i save you can see that made some changes

save you can see that made some changes too now instead of three and four being

too now instead of three and four being below it

below it they came back up here by default in the

they came back up here by default in the grid so again that's implicit the grid

grid so again that's implicit the grid is calculating where to put everything

is calculating where to put everything that we do not explicitly tell it to and

that we do not explicitly tell it to and now just like flexbox where something

now just like flexbox where something that was a flex item could also be a

that was a flex item could also be a flex container we can do that with grid

flex container we can do that with grid too so we can nest a grid inside of a

too so we can nest a grid inside of a grid item so i'm going to take this

grid item so i'm going to take this first child and put

first child and put display and set that to grid

display and set that to grid and now inside of that i'm going to say

and now inside of that i'm going to say align dash content

align dash content and just to change it up here i'm going

and just to change it up here i'm going to say end to begin with and we save

to say end to begin with and we save and look what it did it took the number

and look what it did it took the number one down here to the bottom so it'll

one down here to the bottom so it'll align the content to the end as you

align the content to the end as you might guess you could choose

might guess you could choose center

center and you could have start as well

and you could have start as well so what i'm going to do is say center

so what i'm going to do is say center and then after center i'm also going to

and then after center i'm also going to say

say justify content and we could say for

justify content and we could say for that it could be start

that it could be start and if we save you can see that's to the

and if we save you can see that's to the left

left and end

and end all the way to the right and if we say

all the way to the right and if we say center

center it should be right in the middle so now

it should be right in the middle so now we have centered both vertically and

we have centered both vertically and horizontally so that's how you can

horizontally so that's how you can center with grid but we can shorten this

center with grid but we can shorten this up by using the place content shorthand

up by using the place content shorthand and then we could say both properties so

and then we could say both properties so we could say

we could say end and center and i'll get rid of these

end and center and i'll get rid of these other two

other two and you'll see what happens

and you'll see what happens the first one is the align content so

the first one is the align content so it's at the bottom

it's at the bottom but then horizontally it's centered

but then horizontally it's centered because that is the justify content and

because that is the justify content and this is the align content but if we just

this is the align content but if we just put one value it takes that value for

put one value it takes that value for both so we can just say place content

both so we can just say place content center and center anything we want to

center and center anything we want to inside of a grid so now we've looked at

inside of a grid so now we've looked at how you can quickly use auto flow to

how you can quickly use auto flow to create a grid or how you can place grid

create a grid or how you can place grid template columns and rows and then

template columns and rows and then assign different starting and ending

assign different starting and ending points to put the grid items basically

points to put the grid items basically anywhere you want them in the grid but

anywhere you want them in the grid but there is another way to set up grids too

there is another way to set up grids too and that is with named grid items and

and that is with named grid items and grid template areas so let's do that now

grid template areas so let's do that now but we'll continue to keep this on our

but we'll continue to keep this on our page as part of the page so i'm going to

page as part of the page so i'm going to go back to the html and i'm going to

go back to the html and i'm going to drag visual studio code back over to the

drag visual studio code back over to the full window to start out okay we want to

full window to start out okay we want to add a header element first and it's

add a header element first and it's going to have two classes we'll give it

going to have two classes we'll give it a header class and then just an el class

a header class and then just an el class for element i'll put an h1 element

for element i'll put an h1 element inside the header

inside the header and i'll just say header for that

and i'll just say header for that after that we'll have our main element

after that we'll have our main element then we'll have an aside element that is

then we'll have an aside element that is going to have a

going to have a sidebar class and also the el class

sidebar class and also the el class inside the aside element i'm going to

inside the aside element i'm going to use an h2 and we'll just say sidebar

use an h2 and we'll just say sidebar inside this h2

inside this h2 we'll do much the same for the footer so

we'll do much the same for the footer so a footer element with a class of footer

a footer element with a class of footer and a class of el for element

and a class of el for element and then inside of that we'll use h2 and

and then inside of that we'll use h2 and we'll say footer as well so let's save

we'll say footer as well so let's save our html and you can see we've now

our html and you can see we've now outlined more of a traditional page with

outlined more of a traditional page with a header

a header a main area and a side and a footer i'm

a main area and a side and a footer i'm going to jump back to the style page and

going to jump back to the style page and drag visual studio code back over to the

drag visual studio code back over to the left

left and now you can see this on the page

and now you can see this on the page we've got a header at the top a sidebar

we've got a header at the top a sidebar and a footer they're not much to look at

and a footer they're not much to look at you can just see the text not really an

you can just see the text not really an outline of the elements at all they are

outline of the elements at all they are block elements so they are expanding 100

block elements so they are expanding 100 across the page right now i'm going to

across the page right now i'm going to scroll all the way back up and we're

scroll all the way back up and we're going to make the body element of the

going to make the body element of the page a grid container so we'll start out

page a grid container so we'll start out by saying

by saying display

display grid

grid and then we'll say grid

and then we'll say grid dash template

dash template dash columns

dash columns and let's set this to repeat and we'll

and let's set this to repeat and we'll have nine columns and we use one

have nine columns and we use one fraction for each column so let's save

fraction for each column so let's save that and boy did we see some changes on

that and boy did we see some changes on the page this is going to drastically

the page this is going to drastically change from here though as well so now

change from here though as well so now let's say

let's say grid dash auto dash rows

grid dash auto dash rows and we'll say 75 pixels

and we'll say 75 pixels and then we'll say auto and then we'll

and then we'll say auto and then we'll say

say 75 pixels again and let's save and that

75 pixels again and let's save and that didn't change too much but it will here

didn't change too much but it will here in the near future because we're going

in the near future because we're going to say grid

to say grid dash

dash template dash areas

template dash areas now this is where we can define names

now this is where we can define names of our items on the page but we're also

of our items on the page but we're also going to have to apply these to each

going to have to apply these to each item we're going to call our header hd

item we're going to call our header hd so i'm going to tab in just a little bit

so i'm going to tab in just a little bit and this would be hd now we have nine

and this would be hd now we have nine columns and this is where we can really

columns and this is where we can really visualize our grid and i may need to

visualize our grid and i may need to pull visual studio code back over to get

pull visual studio code back over to get some more room but i'm going to type hd

some more room but i'm going to type hd nine times once for each column so

nine times once for each column so there's two three four five six seven

there's two three four five six seven eight nine yep i'm going to go ahead and

eight nine yep i'm going to go ahead and bring visual studio code back over

bring visual studio code back over and then once we have the full page

and then once we have the full page we'll be able to visualize this better

we'll be able to visualize this better and then we'll come back and look at our

and then we'll come back and look at our browser afterwards so now we've got main

browser afterwards so now we've got main which will be named mn i'm going to use

which will be named mn i'm going to use it

it and we're putting it in for each column

and we're putting it in for each column but when i get to the last two i'm going

but when i get to the last two i'm going to put an sb for sidebar that will be to

to put an sb for sidebar that will be to the right of the main element

the right of the main element and then as you might guess at the

and then as you might guess at the bottom oh we need quotes first

bottom oh we need quotes first i'm going to put ft for footer

and now this is kind of visualizing how our page is going to look this is going

our page is going to look this is going to be the header

to be the header this is going to be the main area

this is going to be the main area the sb will be the sidebar

the sb will be the sidebar and then the footer will be across the

and then the footer will be across the bottom

bottom but with all of this it won't apply yet

but with all of this it won't apply yet because we haven't defined those areas

because we haven't defined those areas we haven't really named them on the

we haven't really named them on the items yet i'm going to save this much

items yet i'm going to save this much and now let's scroll down and define the

and now let's scroll down and define the rest of this so after

rest of this so after the body definition let's go ahead and

the body definition let's go ahead and define that el that we applied the class

define that el that we applied the class that we applied to these new elements

that we applied to these new elements and we'll give them a background color

and we'll give them a background color of rebecca purple just a little bit

of rebecca purple just a little bit different than the other purple we used

different than the other purple we used a color

a color of white

of white we'll set each one of these to a display

we'll set each one of these to a display that's grid and we'll just center the

that's grid and we'll just center the content that we put in which were

content that we put in which were essentially the labels

essentially the labels okay after that we need to go ahead and

okay after that we need to go ahead and identify each class that we applied so

identify each class that we applied so we'll have our header

we'll have our header and this is where we can define our name

and this is where we can define our name so we'll just say grid dash area

so we'll just say grid dash area set that to hd is what we have in our

set that to hd is what we have in our template

template for the header okay so now let's do the

for the header okay so now let's do the same for the sidebar so we'll say dot

same for the sidebar so we'll say dot sidebar because we have a class for that

sidebar because we have a class for that this will be grid dash area this will be

this will be grid dash area this will be sb but let's go ahead and color the

sb but let's go ahead and color the sidebar as well so background color

sidebar as well so background color here is going to be blue

here is going to be blue and then we also have a footer so we'll

and then we also have a footer so we'll say dot footer for the class

say dot footer for the class and here we'll say grid dash area

and here we'll say grid dash area set that to ft

set that to ft so now we should be good except we

so now we should be good except we haven't named our main area yet so you

haven't named our main area yet so you can see everything else in the grid so

can see everything else in the grid so let's just come down to our container

let's just come down to our container and that is the main element

and that is the main element and here we'll put grid dash area and

and here we'll put grid dash area and we'll name it mn for main and save now

we'll name it mn for main and save now let's go ahead and pull visual studio

let's go ahead and pull visual studio code back to the left and see what we

code back to the left and see what we have well that looks pretty good we've

have well that looks pretty good we've got our header across the top we've got

got our header across the top we've got our sidebar on the right we've got our

our sidebar on the right we've got our footer at the bottom and here is our

footer at the bottom and here is our main element the container that we were

main element the container that we were previously working with that still has

previously working with that still has our grid so now this is a nested grid

our grid so now this is a nested grid and then inside of this nested grid we

and then inside of this nested grid we created this grid item and made it a

created this grid item and made it a grid so we could center the content so

grid so we could center the content so it's nested once again i think the only

it's nested once again i think the only thing i may want to add would be some

thing i may want to add would be some space for our grid that's on the body so

space for our grid that's on the body so after we've defined this and you can see

after we've defined this and you can see it's scrunched now with the lines

it's scrunched now with the lines wrapping but here i'm going to put a gap

wrapping but here i'm going to put a gap once again say one rim

once again say one rim and so now well now i have an error

and so now well now i have an error because i didn't put a semicolon at the

because i didn't put a semicolon at the end of our template areas which is very

end of our template areas which is very easy to do so let's save that bring it

easy to do so let's save that bring it back and now i'll say gap

back and now i'll say gap and one rim

and one rim and now we can see this gap now it

and now we can see this gap now it pushes our page down here just a little

pushes our page down here just a little bit when we did that so we might need to

bit when we did that so we might need to change that resize something but overall

change that resize something but overall we've got a gap of one rim between the

we've got a gap of one rim between the header and the main element and the

header and the main element and the sidebar once again we see that gap

sidebar once again we see that gap between the sidebar and main element and

between the sidebar and main element and footer and then we see that right here

footer and then we see that right here with the column as well so let me drag

with the column as well so let me drag this over to take up the rest of the

this over to take up the rest of the page and once again i'm going to press

page and once again i'm going to press ctrl shift and i to open up dev tools

ctrl shift and i to open up dev tools we're going to look at the layout

we're going to look at the layout scroll up and do the overlay here so we

scroll up and do the overlay here so we want to overlay the body now

want to overlay the body now and now we see the body has nine columns

and now we see the body has nine columns and we can see each one of these columns

and we can see each one of these columns defined but here's the only one that we

defined but here's the only one that we really see the gap on for the column

really see the gap on for the column which is right here around line number

which is right here around line number eight now we do see the gap here around

eight now we do see the gap here around line number two for the row and then

line number two for the row and then once again around

once again around i can see a line number down here but

i can see a line number down here but right right here as well no not right

right right here as well no not right here here it is line number three down

here here it is line number three down here between the footer and the main

here between the footer and the main element as well so we had a similar

element as well so we had a similar sized gap here inside of our nested grid

sized gap here inside of our nested grid which was throwing me off so we could

which was throwing me off so we could change that as well we could change

change that as well we could change pretty much anything we want to

pretty much anything we want to so for that let me go ahead close the

so for that let me go ahead close the dev tools just to get everything to fit

dev tools just to get everything to fit a little bit better let's bring this

a little bit better let's bring this back

back change our gap to

change our gap to 0.5 ram and let's also go ahead and

0.5 ram and let's also go ahead and change the size we're using here

change the size we're using here from 75 and i'll select both of those to

from 75 and i'll select both of those to 50 pixels

50 pixels and yeah it's fitting on the page a

and yeah it's fitting on the page a little bit better there's no scroll up

little bit better there's no scroll up or down now and we might even just want

or down now and we might even just want to have

to have a column gap

a column gap instead of a row gap so if we save and

instead of a row gap so if we save and do that you can see now we've got a

do that you can see now we've got a small footer a small header and we have

small footer a small header and we have this small column gap here and it

this small column gap here and it doesn't match the column gap inside our

doesn't match the column gap inside our nested grid so there could be other

nested grid so there could be other styles we want to change and play around

styles we want to change and play around with but overall i hope this has helped

with but overall i hope this has helped you see how grid can be applied in many

you see how grid can be applied in many different ways and give you a good start

different ways and give you a good start and much like flexbox froggy that i

and much like flexbox froggy that i recommended at the end of the flexbox

recommended at the end of the flexbox module let's go ahead and look at grid

module let's go ahead and look at grid garden which is a game that will help

garden which is a game that will help you learn how to use css grid as well

you learn how to use css grid as well i'll link to this in the description

i'll link to this in the description it's at

it's at cssgridgarden.com but once again 28

cssgridgarden.com but once again 28 different challenges here that will help

different challenges here that will help you master

you master css grid or at least learn a lot more

css grid or at least learn a lot more about it

about it let's learn about styling images with

let's learn about styling images with css we'll be looking at foreground

css we'll be looking at foreground images and background images today

images and background images today foreground images are the images on the

foreground images are the images on the page and as you might expect background

page and as you might expect background images are in the background so let's

images are in the background so let's look at our starter code we have a basic

look at our starter code we have a basic html page here with nothing in the body

html page here with nothing in the body right now

right now and then for the style.css file we're

and then for the style.css file we're importing a font from google and i have

importing a font from google and i have changed this from roboto that i've used

changed this from roboto that i've used in previous lessons to nanito i believe

in previous lessons to nanito i believe that's how that's pronounced and you can

that's how that's pronounced and you can see it is used right here you can use

see it is used right here you can use that or you could still use roboto or

that or you could still use roboto or really any font you want to that's just

really any font you want to that's just a preference thing and you don't have to

a preference thing and you don't have to go back to the google font site to do

go back to the google font site to do that you can just change it in the

that you can just change it in the string here where family equals and puts

string here where family equals and puts the font name and then of course

the font name and then of course match that here now if you choose a

match that here now if you choose a different font of course make sure it

different font of course make sure it matches up with everything you have

matches up with everything you have chosen that the fonts

chosen that the fonts google.com site recommends okay so then

google.com site recommends okay so then we've just got our basic css reset and

we've just got our basic css reset and on the body we are applying that font

on the body we are applying that font family and a minimum height of 100

family and a minimum height of 100 viewport units we've got a lot to learn

viewport units we've got a lot to learn about images today so let's get started

about images today so let's get started inside of the html and we'll add some

inside of the html and we'll add some content that we can style we'll start

content that we can style we'll start with a section and i'm going to apply

with a section and i'm going to apply the class example because i'm just going

the class example because i'm just going to give this as an example for now

to give this as an example for now then we want a paragraph

then we want a paragraph and then inside the paragraph let's go

and then inside the paragraph let's go ahead and put an image element and you

ahead and put an image element and you can see it automatically gives us a

can see it automatically gives us a source and an alt attribute for the

source and an alt attribute for the source you can see inside of our image

source you can see inside of our image folder

folder we've got several images and we're going

we've got several images and we're going to use this

to use this pat1.png i'll click on this you can see

pat1.png i'll click on this you can see in visual studio code it is just a

in visual studio code it is just a square with a pattern on it

square with a pattern on it and then you can see at the bottom it

and then you can see at the bottom it has 200 width by 200 height that is the

has 200 width by 200 height that is the dimension of the image now as we learned

dimension of the image now as we learned in the html lesson we'll want to apply

in the html lesson we'll want to apply that width and height to let the browser

that width and height to let the browser reserve that space to prevent content

reserve that space to prevent content layout shift but what i'm going to do

layout shift but what i'm going to do right now is type the image folder

right now is type the image folder because we need to look inside of that

because we need to look inside of that folder for the image press tab and then

folder for the image press tab and then it gives us a list in vs code of the

it gives us a list in vs code of the images we can choose i'm going to choose

images we can choose i'm going to choose this pat1.png

this pat1.png and then i'll just say

and then i'll just say pattern1 here as the alt text which you

pattern1 here as the alt text which you always want to provide for images but

always want to provide for images but then let's go ahead and apply the width

then let's go ahead and apply the width and set that equal to 200. there

and set that equal to 200. there shouldn't be pixels or any type of unit

shouldn't be pixels or any type of unit on this we just apply this intrinsic

on this we just apply this intrinsic value and you can reference that in mdn

value and you can reference that in mdn as well as it suggests to do that

as well as it suggests to do that and this is just once again reserving

and this is just once again reserving that space in the browser it's not

that space in the browser it's not really going to use these settings we

really going to use these settings we can override that with css but in case

can override that with css but in case of a failure of the css file to load or

of a failure of the css file to load or anything else we are telling the browser

anything else we are telling the browser to reserve this space so let's go ahead

to reserve this space so let's go ahead and set that and then i want to put some

and set that and then i want to put some text inside of this paragraph as well

text inside of this paragraph as well and i'll just say

and i'll just say yeah this is a

yeah this is a paragraph and we'll look at what gets

paragraph and we'll look at what gets rendered on the page with this so i've

rendered on the page with this so i've already started the page with live

already started the page with live server and you can see it is running

server and you can see it is running down here i'm going to drag this to the

down here i'm going to drag this to the left as we'll split the screen and we

left as we'll split the screen and we can see what we have on the page now we

can see what we have on the page now we have got our image and we have got the

have got our image and we have got the paragraph next to it but we need to

paragraph next to it but we need to apply some styles to what we have put on

apply some styles to what we have put on the page so i'm going to drag this back

the page so i'm going to drag this back over

over and let's go look at the style.css

and let's go look at the style.css let's start by styling our section

let's start by styling our section element that has the class of example

element that has the class of example and we'll put a margin at the top just

and we'll put a margin at the top just to push it down just a little of one rim

to push it down just a little of one rim and then we'll say padding dash left to

and then we'll say padding dash left to give it just a little padding from the

give it just a little padding from the left

left and we'll give that 20 pixels and now

and we'll give that 20 pixels and now let's give a border i often do this just

let's give a border i often do this just to see or highlight what i'm designing

to see or highlight what i'm designing then remove it later so one pixel solid

then remove it later so one pixel solid red border that's fairly common to see

red border that's fairly common to see what we're working with on the page okay

what we're working with on the page okay after we've applied that class let's go

after we've applied that class let's go ahead and apply something to the image

ahead and apply something to the image so we'll choose that class and the image

so we'll choose that class and the image within

within and now we'll say width

and now we'll say width 25

25 but that's not where we'll stop because

but that's not where we'll stop because we did apply a height in the html and it

we did apply a height in the html and it will not ignore that height now i have

will not ignore that height now i have heard others say do not apply a height

heard others say do not apply a height because if you just apply a width then

because if you just apply a width then the height will respond that's true if

the height will respond that's true if you have not set the width and the

you have not set the width and the height

height inside of the html but as currently

inside of the html but as currently recommended we are doing so so since we

recommended we are doing so so since we have done that we need to go ahead and

have done that we need to go ahead and set the height to auto and then it will

set the height to auto and then it will respond to the width so let's just save

respond to the width so let's just save this now once again no this width is not

this now once again no this width is not 25 of the image size is 25 of the

25 of the image size is 25 of the container size so i'm going to drag this

container size so i'm going to drag this back to the left and now we can look at

back to the left and now we can look at this and we see we have got a red line

this and we see we have got a red line around our section

around our section and then we have our image

and then we have our image and then we have our paragraph now

and then we have our paragraph now there's several things i want to look at

there's several things i want to look at here one since i've talked about the

here one since i've talked about the width of 25

width of 25 we have made that image responsive so

we have made that image responsive so i've dragged this over to the full page

i've dragged this over to the full page now and i'm opening up dev tools so i

now and i'm opening up dev tools so i can resize the window now notice how the

can resize the window now notice how the image shrinks as i resize the window and

image shrinks as i resize the window and it expands as i make the window bigger

it expands as i make the window bigger that is a responsive image we have given

that is a responsive image we have given it a percentage width and we have the

it a percentage width and we have the height responding by setting to auto

height responding by setting to auto again we have applied the height because

again we have applied the height because we applied the height in the html as

we applied the height in the html as recommended by mdn and the way to make

recommended by mdn and the way to make it responsive then is apply the height

it responsive then is apply the height of auto in your css as it will respond

of auto in your css as it will respond to the percentage of the width that you

to the percentage of the width that you set okay i'm closing devtools now and

set okay i'm closing devtools now and dragging this back over to half the

dragging this back over to half the screen and what we really want to look

screen and what we really want to look at now

at now is this paragraph notice the y and also

is this paragraph notice the y and also the p here and the g and another p

the p here and the g and another p these are the letters that have

these are the letters that have something that sticks down below the

something that sticks down below the line we're typically writing on now

line we're typically writing on now notice what happens over here with the

notice what happens over here with the image

image it's the same way also notice it's on

it's the same way also notice it's on the same line as it was even before we

the same line as it was even before we highlighted the container that's because

highlighted the container that's because images or image elements are not block

images or image elements are not block level elements they're actually in line

level elements they're actually in line and this was the original specification

and this was the original specification with html but we often don't want this

with html but we often don't want this behavior so even if i removed this

behavior so even if i removed this paragraph right here

paragraph right here you would still see this space we didn't

you would still see this space we didn't apply padding or margin or anything to

apply padding or margin or anything to create this space here

create this space here but it's often wondered how do we remove

but it's often wondered how do we remove the space below an image well that's

the space below an image well that's because an image is actually an inline

because an image is actually an inline element

element and it allows that space because it was

and it allows that space because it was originally envisioned as being used with

originally envisioned as being used with paragraphs or with text overall so you

paragraphs or with text overall so you get this space you don't want here even

get this space you don't want here even though you don't provide a margin or

though you don't provide a margin or padding i'm going to show you how to

padding i'm going to show you how to remove that first so let's go back to

remove that first so let's go back to our css and this is part of a reset that

our css and this is part of a reset that you can just typically do now it doesn't

you can just typically do now it doesn't go inside of the asterisk because that

go inside of the asterisk because that selects all elements so just at the top

selects all elements so just at the top we want to have image

we want to have image and then display

and then display block

block and we can save and now let's go back

and we can save and now let's go back and we can look and with a block element

and we can look and with a block element of course it wraps down to the next line

of course it wraps down to the next line because you know a block element takes

because you know a block element takes up the full width of the page so let's

up the full width of the page so let's go ahead and go back to our

go ahead and go back to our html

html and i guess i need this full page once

and i guess i need this full page once again so we can see what we're doing but

again so we can see what we're doing but i want to remove this

i want to remove this text right here and even though it's

text right here and even though it's inside the paragraph and we could remove

inside the paragraph and we could remove the paragraph if we want to i guess i'll

the paragraph if we want to i guess i'll go ahead and do that too

go ahead and do that too but just inside this section i'll save

but just inside this section i'll save and bring this back over

and bring this back over you can see there is now no space

you can see there is now no space underneath and i'll switch back to the

underneath and i'll switch back to the style here if we did not have this and

style here if we did not have this and i'll comment this out with shift alt and

i'll comment this out with shift alt and the letter a

the letter a and save

and save even without the paragraph we have this

even without the paragraph we have this space underneath the image so you want

space underneath the image so you want to set those to block because they're

to set those to block because they're originally in line

originally in line and then you remove that space that you

and then you remove that space that you weren't expecting now let's move on to

weren't expecting now let's move on to our next example so i'm going to pull

our next example so i'm going to pull visual studio code back over to full

visual studio code back over to full screen

screen go to the html and i'm going to comment

go to the html and i'm going to comment out what we put in for our first section

out what we put in for our first section i'll leave it in there for you so if you

i'll leave it in there for you so if you download the code though you can see

download the code though you can see that example so now the next thing we

that example so now the next thing we want to do is create another section i'm

want to do is create another section i'm going to give this a class

going to give this a class and i'll set this class well not class i

and i'll set this class well not class i typed class i should have typed hero

typed class i should have typed hero there we go so i'll give it a class of

there we go so i'll give it a class of hero

hero and now inside this instead of just an

and now inside this instead of just an image i'm going to put a figure element

image i'm going to put a figure element because that's what we usually put

because that's what we usually put images in and i'll give this a class of

images in and i'll give this a class of profile dash pic

profile dash pic dash

dash figure so we know exactly what we're

figure so we know exactly what we're talking about there now inside the

talking about there now inside the figure i'm going to put

figure i'm going to put the image element and then we don't

the image element and then we don't really need to apply a class there we'll

really need to apply a class there we'll just use that profile pic figure to

just use that profile pic figure to reference the image inside of it and

reference the image inside of it and you'll see how i do that now we once

you'll see how i do that now we once again want to look inside of our image

again want to look inside of our image folder for the source and then pick one

folder for the source and then pick one of our images and you can see i've got a

of our images and you can see i've got a profile dash 800 by 800 and if we look

profile dash 800 by 800 and if we look at that image in visual studio code you

at that image in visual studio code you can see the image here and you can see

can see the image here and you can see the dimensions below that's 800 by 800.

the dimensions below that's 800 by 800. i'll go ahead and close that out let's

i'll go ahead and close that out let's give it an alt and i'll just say

give it an alt and i'll just say profile picture

profile picture and then we need to apply the width and

and then we need to apply the width and height again we could also apply a title

height again we could also apply a title if you remember that attribute from html

if you remember that attribute from html and there we'll just say my profile

and there we'll just say my profile picture and that shows up when we mouse

picture and that shows up when we mouse over the image

over the image okay after that let's apply the width

okay after that let's apply the width and that would be 800

and that would be 800 and then let's apply the height and

and then let's apply the height and that's also going to be 800. i'm going

that's also going to be 800. i'm going to press alt z to wrap the code that way

to press alt z to wrap the code that way we see it without scrolling over to the

we see it without scrolling over to the right like it was now if you remember

right like it was now if you remember the figure element we also need a fig

the figure element we also need a fig caption element so let's add that

caption element so let's add that and inside the fig caption i'm just

and inside the fig caption i'm just going to say

going to say jane doe so the name of the page that

jane doe so the name of the page that this image belongs to or the name of the

this image belongs to or the name of the person in the image if you will so we

person in the image if you will so we want to add that it helps accessibility

want to add that it helps accessibility and i'll show you how to hide it if we

and i'll show you how to hide it if we don't want it on the screen

don't want it on the screen so let's save that much and now we can

so let's save that much and now we can look at our page and see what we've got

look at our page and see what we've got so far it's pretty big it's filling up

so far it's pretty big it's filling up the whole page isn't it so we can

the whole page isn't it so we can definitely change that with css i'm

definitely change that with css i'm going to hide the file tree by pressing

going to hide the file tree by pressing ctrl b

ctrl b and we can make our changes here i'll

and we can make our changes here i'll make them below the body but above the

make them below the body but above the previous example let's start with the

previous example let's start with the profile dash pick dash figure class

profile dash pick dash figure class and there we'll just say a width of 35

and there we'll just say a width of 35 percent

percent and that would be the width of the page

and that would be the width of the page it's referring to because that is

it's referring to because that is currently the container actually it's

currently the container actually it's that hero that we created so that

that hero that we created so that section and it should be the width of

section and it should be the width of the page so after that let's go ahead

the page so after that let's go ahead and apply the next to the profile pic

and apply the next to the profile pic figure and then the image within and

figure and then the image within and here let's give the image

here let's give the image a width of 100 because it's in a

a width of 100 because it's in a container

container and the height once again auto and this

and the height once again auto and this does make it responsive we've got a

does make it responsive we've got a percentage for the width and the height

percentage for the width and the height set to auto remember we set the width

set to auto remember we set the width and height once again in the html to

and height once again in the html to avoid that content layout shift

avoid that content layout shift okay now we've got min

okay now we've got min width

width let's set that to 100 pixels we just

let's set that to 100 pixels we just don't want the image to get any smaller

don't want the image to get any smaller than that when it does shrink and then

than that when it does shrink and then let's put a border around it so let's

let's put a border around it so let's say border

say border five pixels

five pixels double

double gray so it's not just one solid line it

gray so it's not just one solid line it should be two

should be two and now let's go ahead and save first

and now let's go ahead and save first and you can see what we've got here is

and you can see what we've got here is our fig caption we're only taking up 35

our fig caption we're only taking up 35 percent of the width of the full page

percent of the width of the full page right now because that section container

right now because that section container element

element is a hundred percent and so the figure

is a hundred percent and so the figure is 35 and then the image fills out a

is 35 and then the image fills out a hundred percent of that figure that is

hundred percent of that figure that is 35 of the page then we've got this

35 of the page then we've got this double line around the image and you can

double line around the image and you can see the fig caption underneath one more

see the fig caption underneath one more thing i want to do to our image though

thing i want to do to our image though is make it round and since we have a

is make it round and since we have a square image this wouldn't work if we

square image this wouldn't work if we had a rectangle but with a square

had a rectangle but with a square we can do this and let's say

we can do this and let's say border

border radius say 50

radius say 50 and when we save we now have our profile

and when we save we now have our profile image in a circle let's go back to the

image in a circle let's go back to the html and add just a little bit more

html and add just a little bit more inside of our hero section that we have

inside of our hero section that we have right here so after the figure i want to

right here so after the figure i want to add an h1 to the page i'm going to give

add an h1 to the page i'm going to give this a class of h1 as well

this a class of h1 as well inside the h1 i'm going to go ahead and

inside the h1 i'm going to go ahead and give a span element and give a class of

give a span element and give a class of no wrap because i won't want what's

no wrap because i won't want what's inside the span to wrap if you remember

inside the span to wrap if you remember a span element is an inline element i'm

a span element is an inline element i'm going to say hello and then i'm going to

going to say hello and then i'm going to paste in a little wave emoji here so

paste in a little wave emoji here so i'll just paste this over

i'll just paste this over and you can get those wave emojis from

and you can get those wave emojis from different places i use

different places i use emojipedia.com i believe to get that one

emojipedia.com i believe to get that one after that i'm going to provide another

after that i'm going to provide another span element and once again give the no

span element and once again give the no wrap class

wrap class and here i'm just going to say

and here i'm just going to say i'm jane

i'm jane as that's who's in our picture and now

as that's who's in our picture and now we can instantly see that on the page as

we can instantly see that on the page as well so we've got our h1 we've got a

well so we've got our h1 we've got a couple of no wrap classes here and we've

couple of no wrap classes here and we've got the h1 class on the h1 element let's

got the h1 class on the h1 element let's go back to the css now okay let's start

go back to the css now okay let's start below the body but above our profile pic

below the body but above our profile pic figure class and if you remember we have

figure class and if you remember we have a hero class

a hero class and that is the container that is that

and that is the container that is that section element let's put a border on

section element let's put a border on the bottom only so we can see it we'll

the bottom only so we can see it we'll say 2 pixels

say 2 pixels solid we'll give that a color of black

solid we'll give that a color of black when we save we can see that change

when we save we can see that change instantly

instantly let's add a few more styles to our hero

let's add a few more styles to our hero let's give some padding here of 20

let's give some padding here of 20 pixels to push everything a little bit

pixels to push everything a little bit away from the edges there we go

away from the edges there we go and now let's give this a display

and now let's give this a display of flex

of flex and by default flex is a row so we'll

and by default flex is a row so we'll already have our content in a row then

already have our content in a row then instead of stacked on top of each other

instead of stacked on top of each other now let's say

now let's say justify

justify dash content and let's say flex start

dash content and let's say flex start here

here and then after we put that at the start

and then after we put that at the start let's align

let's align the items to center

the items to center and after we align the items to center

and after we align the items to center let's apply a gap between the items of

let's apply a gap between the items of about 30 pixels and save

about 30 pixels and save and that's what we've got now we've got

and that's what we've got now we've got our image over here on the left and

our image over here on the left and we've got the hello i'm jane on the

we've got the hello i'm jane on the right now let's go below the hero

right now let's go below the hero section and add our h1 class

section and add our h1 class and inside the h1 class let's make this

and inside the h1 class let's make this font a lot larger let's say font size

font a lot larger let's say font size 500 percent

500 percent and we'll save and see how big that gets

and we'll save and see how big that gets nice and big that works okay what i'd

nice and big that works okay what i'd like to do though is make the page full

like to do though is make the page full screen once again and look at dev tools

screen once again and look at dev tools so we can resize the page and see some

so we can resize the page and see some things right now even though we put

things right now even though we put those classes on we haven't defined

those classes on we haven't defined those yet so we're getting the text to

those yet so we're getting the text to wrap in some strange ways that aren't

wrap in some strange ways that aren't always the way we want here but notice

always the way we want here but notice our image is shrinking nicely but it

our image is shrinking nicely but it stops at the 100 pixel

stops at the 100 pixel minimum width that we left it and we

minimum width that we left it and we still have that fig caption on there

still have that fig caption on there that we'll want to remove as well so

that we'll want to remove as well so just checking out the resizability of

just checking out the resizability of everything at this point let's close dev

everything at this point let's close dev tools

tools move chrome back over to the right and

move chrome back over to the right and let's define those utility classes so if

let's define those utility classes so if we come up to the top we can put some

we come up to the top we can put some notes in here and we can say

notes in here and we can say begin reset

begin reset with our comments and then after our

with our comments and then after our image we can say

image we can say end reset

end reset and there we go and now let's go ahead

and there we go and now let's go ahead and put

and put utility

utility classes

classes just organizing this css a little bit

just organizing this css a little bit and then we'll say

and then we'll say end

end utility

utility classes

classes okay so we can define these utility

okay so we can define these utility classes right in here the first one will

classes right in here the first one will be

be no wrap now these are things we've

no wrap now these are things we've covered in previous lessons but it's a

covered in previous lessons but it's a good review so we'll set white space

good review so we'll set white space to no wrap

to no wrap now when we save notice what instantly

now when we save notice what instantly happened on the page i'm was over here

happened on the page i'm was over here but we've got it to where i'm jane

but we've got it to where i'm jane should not split that should not wrap

should not split that should not wrap the same with the hello and the wave so

the same with the hello and the wave so now they're on the lines that they

now they're on the lines that they should be on and we don't want to see

should be on and we don't want to see the word i'm and the word jane break and

the word i'm and the word jane break and we don't want to see the hello and the

we don't want to see the hello and the wave break and that's why we applied

wave break and that's why we applied those

those classes of no wrap the way we did now

classes of no wrap the way we did now let's go ahead and apply an off-screen

let's go ahead and apply an off-screen class also so this off-screen class will

class also so this off-screen class will still allow the fig caption to be read

still allow the fig caption to be read for accessibility but it will hide it

for accessibility but it will hide it from the visible page so we'll say

from the visible page so we'll say position set this to absolute

position set this to absolute and then let's just send it left minus

and then let's just send it left minus ten thousand pixels and save

ten thousand pixels and save and it looks like it's still on the page

and it looks like it's still on the page maybe we don't have that on our fig

maybe we don't have that on our fig caption yet and we don't i forgot to put

caption yet and we don't i forgot to put it on there so let's give it a class

it on there so let's give it a class equal to

off screen and save and now our fig caption is gone

and save and now our fig caption is gone as i expected it to be we've got the

as i expected it to be we've got the basics of a hero section here a header

basics of a hero section here a header for our page but it's pretty plain right

for our page but it's pretty plain right now so let's start working with

now so let's start working with background images

background images so now that we have put our utility

so now that we have put our utility classes here let's scroll back down

classes here let's scroll back down below the body and back to the hero

below the body and back to the hero section now after this gap for our

section now after this gap for our flexbox display i'll put an extra line

flexbox display i'll put an extra line so we can see these new properties we're

so we can see these new properties we're going to work with the first one is a

going to work with the first one is a property you have seen before and that

property you have seen before and that is background dash color we want to put

is background dash color we want to put a fallback and that is if the background

a fallback and that is if the background image doesn't load we at least want to

image doesn't load we at least want to have a color behind it so let's put rgb

have a color behind it so let's put rgb and i'm going to go with the color i

and i'm going to go with the color i discovered that i think i like

discovered that i think i like and just put these three values in there

and just put these three values in there you can see it's kind of a peach or gold

you can see it's kind of a peach or gold i'll save this

i'll save this and there you can see the background

and there you can see the background color that we now have for the hero

color that we now have for the hero section but that's a fallback so let's

section but that's a fallback so let's go ahead and put in a background image

go ahead and put in a background image that is background dash image now you

that is background dash image now you would think we might specify image here

would think we might specify image here but actually we need url

but actually we need url and inside of the parentheses then we

and inside of the parentheses then we put quotes

put quotes and now we need to go inside of the

and now we need to go inside of the image folder again but remember we were

image folder again but remember we were doing that in html simply by typing

doing that in html simply by typing image but we're not in that folder now

image but we're not in that folder now we're in the css folder so we need to go

we're in the css folder so we need to go up out of the folder and that's two dots

up out of the folder and that's two dots to go up

to go up then a slash and now you can see visual

then a slash and now you can see visual studio code says our image folder is

studio code says our image folder is there

there and now let's pick this

and now let's pick this pat one that we looked at before it has

pat one that we looked at before it has a pattern on it

a pattern on it and i guess i need to put a semicolon

and i guess i need to put a semicolon there where that ends that was right at

there where that ends that was right at the end of the line and now let's save

the end of the line and now let's save and of course our text is black so that

and of course our text is black so that doesn't look too good there but

doesn't look too good there but otherwise you can see this pattern

otherwise you can see this pattern behind

behind everything and it's a repeating pattern

everything and it's a repeating pattern and we'll talk about that too let's go

and we'll talk about that too let's go ahead and quickly

ahead and quickly add a color to our h1

add a color to our h1 so we can see our text again so now

so we can see our text again so now we've got hello i'm jane in white

we've got hello i'm jane in white but what is happening by default is our

but what is happening by default is our 200 by 200

200 by 200 image is repeating both on the x-axis

image is repeating both on the x-axis and the y-axis in both directions and

and the y-axis in both directions and it's filling this out and the pattern

it's filling this out and the pattern looks pretty good you can't see where it

looks pretty good you can't see where it starts or ends really so what we can do

starts or ends really so what we can do to control that

to control that is the background dash

is the background dash repeat property and we can just say no

repeat property and we can just say no repeat and now let's look at what

repeat and now let's look at what happens

happens now we just have our 200 by 200 image up

now we just have our 200 by 200 image up here in the top left by default

here in the top left by default likewise we've already seen what happens

likewise we've already seen what happens with the default

with the default repeat value and it repeats everywhere

repeat value and it repeats everywhere but we can just say repeat y for the

but we can just say repeat y for the y-axis and it just stays all on the up

y-axis and it just stays all on the up and down essentially the y-axis or

and down essentially the y-axis or repeat x

repeat x and it's all on the x-axis which would

and it's all on the x-axis which would be horizontal or across let's just leave

be horizontal or across let's just leave it to repeat for now even though that's

it to repeat for now even though that's the default i'll just leave that

the default i'll just leave that property in there and let's change out

property in there and let's change out this image let's look at another pattern

this image let's look at another pattern that i have saved in there which is pat

that i have saved in there which is pat two we can save that

two we can save that now our white font doesn't look as good

now our white font doesn't look as good on top of it and it's always important

on top of it and it's always important we want to emphasize this the font is

we want to emphasize this the font is the most important thing so you have to

the most important thing so you have to work with that to be visible because if

work with that to be visible because if it's not the background image is

it's not the background image is essentially that it's just background

essentially that it's just background it's not really what's important you can

it's not really what's important you can see the lines if you look closely to see

see the lines if you look closely to see how this image repeats just a little bit

how this image repeats just a little bit more often so if we set this to no

more often so if we set this to no repeat i believe it's once again 200 by

repeat i believe it's once again 200 by 200 or something like that you can see

200 or something like that you can see the image by itself there

the image by itself there and if i save you can see it repeat

and if i save you can see it repeat across now if you have a transparent

across now if you have a transparent image and i set up a transparency of

image and i set up a transparency of this image as well

this image as well and you save you can see now this kind

and you save you can see now this kind of looks cool because we have some of

of looks cool because we have some of that color that's underneath

that color that's underneath coming through the image

coming through the image and i'm not going to show how to create

and i'm not going to show how to create transparencies in this tutorial that

transparencies in this tutorial that would be more like a photoshop or other

would be more like a photoshop or other image editing tutorial however if you do

image editing tutorial however if you do have access to images that are somewhat

have access to images that are somewhat transparent like this it is a cool

transparent like this it is a cool effect to do that of course i would

effect to do that of course i would probably switch this text back to a

probably switch this text back to a black font or something that would show

black font or something that would show up better on top of it at that point now

up better on top of it at that point now let's also look at some more images like

let's also look at some more images like you would use and once again i want to

you would use and once again i want to emphasize how important it would be to

emphasize how important it would be to make your text visible no matter what

make your text visible no matter what image you're using and we're just seeing

image you're using and we're just seeing the clouds right now but this is a much

the clouds right now but this is a much larger image if i go over to the file

larger image if i go over to the file tree and click on the scenic image

tree and click on the scenic image drag visual studio code back over where

drag visual studio code back over where you can see it all we've got a waterfall

you can see it all we've got a waterfall lots of things in this image that we

lots of things in this image that we might want to see so we can change that

might want to see so we can change that let me bring this back over

let me bring this back over hide the file tree so we have some room

hide the file tree so we have some room underneath our background repeat let's

underneath our background repeat let's put in background dash size and set this

put in background dash size and set this to cover when we save

to cover when we save now we see much more of that image but

now we see much more of that image but it still might be a little concerning

it still might be a little concerning how readable this text is so you might

how readable this text is so you might want to work with that of course to make

want to work with that of course to make it stand out some more but that does

it stand out some more but that does look good now let's drag this over as

look good now let's drag this over as well

well and if we open this up you can see it's

and if we open this up you can see it's definitely bigger here and looks

definitely bigger here and looks different let's open up dev tools and

different let's open up dev tools and once i have dev tools open you can see

once i have dev tools open you can see how the image resizes with that cover

how the image resizes with that cover setting and there are other settings for

setting and there are other settings for background size as well you could put in

background size as well you could put in an absolute or percentage or other

an absolute or percentage or other things you might want to but cover is a

things you might want to but cover is a very nice one to use i'll go ahead and

very nice one to use i'll go ahead and close this and move this back another

close this and move this back another word that you might use in there besides

word that you might use in there besides cover is contain so let's at least see

cover is contain so let's at least see what it does it's not what we want to

what it does it's not what we want to use but since it's repeating you can see

use but since it's repeating you can see that we have two of the image now

that we have two of the image now because it does repeat if we set this to

because it does repeat if we set this to no repeat

no repeat and save you can see cover or i'm sorry

and save you can see cover or i'm sorry contain

contain fits the full image in here and contains

fits the full image in here and contains it but it doesn't make it cover the

it but it doesn't make it cover the space that we want it to so let's put

space that we want it to so let's put this back to cover for our use and we

this back to cover for our use and we can leave the no repeat there as well

can leave the no repeat there as well because that's what we want but let's

because that's what we want but let's say we showed this to jane and she's not

say we showed this to jane and she's not quite liking it of course the text isn't

quite liking it of course the text isn't popping out and she wants to be more

popping out and she wants to be more about discovering things not just about

about discovering things not just about an image of some cool scenery so we're

an image of some cool scenery so we're going to change this scenic image and

going to change this scenic image and let's change it to an image of a map and

let's change it to an image of a map and you can see it's a rather large image

you can see it's a rather large image which is something else i didn't discuss

which is something else i didn't discuss now this would be a different tutorial

now this would be a different tutorial to talk about image optimization a lot

to talk about image optimization a lot of times you want to shrink images down

of times you want to shrink images down and this is a rather large image but

and this is a rather large image but that said you also have to be careful

that said you also have to be careful because some devices have

because some devices have different amounts of pixels and if you

different amounts of pixels and if you use too small of an image

use too small of an image then it will look blurry on the devices

then it will look blurry on the devices that possibly have more pixels so one

that possibly have more pixels so one rule of thumb i have heard is always use

rule of thumb i have heard is always use an image that's twice as big as what you

an image that's twice as big as what you plan on displaying and that would help

plan on displaying and that would help it

it up size to that extra pixel setting

up size to that extra pixel setting essentially and still look good without

essentially and still look good without looking blurry because otherwise you're

looking blurry because otherwise you're essentially stretching an image to

essentially stretching an image to increase the size of it and that does

increase the size of it and that does make images look blurry so

make images look blurry so again optimization would be something to

again optimization would be something to consider but jane likes this image a bit

consider but jane likes this image a bit better it gives maps and she's talking

better it gives maps and she's talking about exploring and taking pictures and

about exploring and taking pictures and so here we've got a background image

so here we've got a background image with maps on it but still the font isn't

with maps on it but still the font isn't popping out quite as much as we want so

popping out quite as much as we want so there are some things we can do there

there are some things we can do there let's go back to the css and i need to

let's go back to the css and i need to scroll back over here a little bit we

scroll back over here a little bit we can add some more to our h1 so this

can add some more to our h1 so this color the

color the white looks good i mean it does pop out

white looks good i mean it does pop out a little bit but let's do something

a little bit but let's do something that's not quite white let's give

that's not quite white let's give alice blue a try which is kind of a

alice blue a try which is kind of a different white you can see it's not

different white you can see it's not quite the same white but it does look

quite the same white but it does look white it doesn't really look blue to me

white it doesn't really look blue to me at least

at least and after that we can apply a text

and after that we can apply a text shadow to make it pop off the page just

shadow to make it pop off the page just a bit

a bit this is applied to the x-axis so we'll

this is applied to the x-axis so we'll say 2 pixels y-axis 2 pixels and then

say 2 pixels y-axis 2 pixels and then there is a blur value and that makes the

there is a blur value and that makes the shadow not as crisp but a little blurry

shadow not as crisp but a little blurry so i'll put that at 5 pixels and then we

so i'll put that at 5 pixels and then we say what color we want the shadow and

say what color we want the shadow and we'll just make it black when we save

we'll just make it black when we save you can see that text pops off the page

you can see that text pops off the page just a little more so that's something

just a little more so that's something you can do to help your text stand out

you can do to help your text stand out as well don't abuse it though you can do

as well don't abuse it though you can do way too much with that but of course

way too much with that but of course it's set to preference then after that

it's set to preference then after that we could put a background color so let's

we could put a background color so let's talk about that if we put in background

talk about that if we put in background color

color and we just set it to black

and we just set it to black that's not going to look that great but

that's not going to look that great but let's go ahead and do it for the moment

let's go ahead and do it for the moment and now if you remember from our color

and now if you remember from our color lesson we can click on this square

lesson we can click on this square open this up i'm going to go over to hsl

open this up i'm going to go over to hsl and then i'll drag the transparency down

and then i'll drag the transparency down here and i'm thinking maybe let's go to

here and i'm thinking maybe let's go to 40 percent and see what we get

40 percent and see what we get if we leave that and now we save

if we leave that and now we save well now we can see the image because

well now we can see the image because it's a transparent color and that helps

it's a transparent color and that helps a little bit

a little bit now we could add and again this is to

now we could add and again this is to preference complete preference here we

preference complete preference here we could go ahead and add some padding so

could go ahead and add some padding so let's do that try it out we'll say

let's do that try it out we'll say padding

padding and let's go 0.25 round

and let's go 0.25 round and then after that we can also add a

and then after that we can also add a border radius

border radius to that background and let's just go

to that background and let's just go with 10 pixels to round the corners and

with 10 pixels to round the corners and so now you see this kind of contained

so now you see this kind of contained here but

here but i don't know if i like that or not but

i don't know if i like that or not but there is another trick we can do that

there is another trick we can do that kind of applies the same thing but it

kind of applies the same thing but it does it more broadly so you don't really

does it more broadly so you don't really see this box around there so i'm going

see this box around there so i'm going to comment these out but once again

to comment these out but once again leave them in the code for you because

leave them in the code for you because that is to preference now let's jump

that is to preference now let's jump back to our html and what i'm going to

back to our html and what i'm going to do

do is put a container around our hero

is put a container around our hero section and here i'm going to use a div

section and here i'm going to use a div and i'll just say class of container

and i'll just say class of container i'll take that closing div control x to

i'll take that closing div control x to cut it out come down to the bottom of

cut it out come down to the bottom of the section paste it in with control v

the section paste it in with control v and save and now we have a container

and save and now we have a container around our code i guess i could

around our code i guess i could highlight this and tab it over to make

highlight this and tab it over to make it a little more uniform

it a little more uniform there we go

there we go and now that we have the container we

and now that we have the container we can style that container so we'll go

can style that container so we'll go back to our css and again this is a work

back to our css and again this is a work around only if you're trying to make the

around only if you're trying to make the text a little more legible you want a

text a little more legible you want a little more control

little more control and to get that separation between the

and to get that separation between the background and the text so this is

background and the text so this is nothing that is required it's just

nothing that is required it's just something that you might want to know

something that you might want to know how to do

how to do and what we're going to do is

and what we're going to do is essentially create a filter or a mask by

essentially create a filter or a mask by having this extra layer so it's just a

having this extra layer so it's just a little bit more of an advanced concept

little bit more of an advanced concept but it's not too difficult to do i'm

but it's not too difficult to do i'm going to take everything we have here

going to take everything we have here for the background of the hero section

for the background of the hero section and i'm going to put it in the container

and i'm going to put it in the container and now that we have that we can save

and now that we have that we can save and we shouldn't really see any

and we shouldn't really see any difference because the container is

difference because the container is going to be the parent of the hero so we

going to be the parent of the hero so we would still see all of this behind it

would still see all of this behind it and now instead of in the h1 where we

and now instead of in the h1 where we had this background color here let me go

had this background color here let me go ahead and just copy this

ahead and just copy this and we might want to use a different

and we might want to use a different color but we'll try out the black at

color but we'll try out the black at first

first we can put in

we can put in that background color that we were

that background color that we were putting just on the h1 but now this will

putting just on the h1 but now this will apply to the full hero so let's go ahead

apply to the full hero so let's go ahead and save this and see what it looks like

and save this and see what it looks like and you can see everything got darker

and you can see everything got darker we've essentially put a filter that we

we've essentially put a filter that we can lighten or darken as we choose so i

can lighten or darken as we choose so i want to put a different color here and

want to put a different color here and try this out so let's make this

try this out so let's make this 100 right here and save again that

100 right here and save again that lightened it up and now you see more of

lightened it up and now you see more of a light filter on it as well so you can

a light filter on it as well so you can experiment with this and of course you

experiment with this and of course you can go into the colors

can go into the colors and choose anything you want to as well

and choose anything you want to as well here in visual studio code i'm going to

here in visual studio code i'm going to press alt z just so we can see that wrap

press alt z just so we can see that wrap down here so if we didn't want that

down here so if we didn't want that maybe we want a little more transparency

maybe we want a little more transparency consider that 35 percent and maybe you

consider that 35 percent and maybe you liked the darker color instead of the

liked the darker color instead of the light color so if we went back

light color so if we went back and made that a zero that's essentially

and made that a zero that's essentially working with black there so now you've

working with black there so now you've got a darker color but it's a little

got a darker color but it's a little more see-through maybe make it 25

more see-through maybe make it 25 i think i liked the lighter color myself

i think i liked the lighter color myself so i'll go back to 35

so i'll go back to 35 and then i'll put the 100 here in the

and then i'll put the 100 here in the third value and yeah that kind of pops

third value and yeah that kind of pops off but it still has that filter and you

off but it still has that filter and you can see the maps i like how that looks

can see the maps i like how that looks just personally but you could change any

just personally but you could change any way you want to maybe you'd want to make

way you want to maybe you'd want to make the double circle around jane here in

the double circle around jane here in black instead of gray now that we'd have

black instead of gray now that we'd have a darker color and that's something you

a darker color and that's something you could do as well but we've made a nice

could do as well but we've made a nice hero section overall now let's talk

hero section overall now let's talk about one other property that i didn't

about one other property that i didn't bring up for the background yet and this

bring up for the background yet and this would be background position i'm going

would be background position i'm going to put it after the repeat

to put it after the repeat and it's background dash position there

and it's background dash position there we go and now it has an x and a y as

we go and now it has an x and a y as well so you might see this adjust and

well so you might see this adjust and it's how it moves the image so if we put

it's how it moves the image so if we put center center

center center you can see yeah the map moved a little

you can see yeah the map moved a little bit so

bit so even though we're working with one image

even though we're working with one image that's covering the whole span you might

that's covering the whole span you might see it move so you could say top right

see it move so you could say top right just see how the map moves around for

just see how the map moves around for you a little bit and top left

you a little bit and top left and not really noticing a change there

and not really noticing a change there what if we said

what if we said bottom right

bottom right and move it yeah the map moved again

and move it yeah the map moved again because now we're seeing the bottom of

because now we're seeing the bottom of the image that's the biggest change

the image that's the biggest change right there now if we switch it to top

right there now if we switch it to top we'll see the top of the image instead i

we'll see the top of the image instead i like that a little bit better because

like that a little bit better because it's a little darker up there towards

it's a little darker up there towards the top i believe

the top i believe and you could just provide one value i

and you could just provide one value i think as well

think as well and if we did center

yep it's somewhere right in the middle now we're not seeing the top or the

now we're not seeing the top or the bottom

bottom but if we went back to playing around

but if we went back to playing around with a smaller 200 by 200

with a smaller 200 by 200 pixel image you would actually see that

pixel image you would actually see that one image

one image move around the page as well so this is

move around the page as well so this is just something worth checking out to see

just something worth checking out to see what part of the image you want to

what part of the image you want to display for the background so i'm just

display for the background so i'm just going to leave this as top now because

going to leave this as top now because that makes it a little darker and looks

that makes it a little darker and looks okay to me it's time to move on to

okay to me it's time to move on to another example i'm once again going to

another example i'm once again going to leave this css in the code i'll just

leave this css in the code i'll just come to the html i'm going to bring this

come to the html i'm going to bring this back to full page and i will comment out

back to full page and i will comment out what we currently have here as well and

what we currently have here as well and leave it in the code for you again

leave it in the code for you again pressing shift alt and the letter a to

pressing shift alt and the letter a to make that

make that comment after i selected all of that and

comment after i selected all of that and so now we're ready to add something new

so now we're ready to add something new to the page so we'll come back over here

to the page so we'll come back over here so we can see the page again and it

so we can see the page again and it should be blank and it is

should be blank and it is let's add something to the body itself

let's add something to the body itself let's start with our fallback background

let's start with our fallback background color so we'll say background color oh

color so we'll say background color oh that just said background which is

that just said background which is shorthand we'll get it to in a minute

shorthand we'll get it to in a minute but we've got our background color and

but we've got our background color and just so we know it's changed let's go to

just so we know it's changed let's go to this alice blue again which isn't quite

this alice blue again which isn't quite the same as the white default and now

the same as the white default and now you can see it's a different shade here

you can see it's a different shade here and after that let's provide an image so

and after that let's provide an image so we'll say background

we'll say background dash image

dash image and here we'll say url once again and

and here we'll say url once again and inside the url we need quotes and

inside the url we need quotes and remember we're in the css so we go up

remember we're in the css so we go up out of the css folder and then into the

out of the css folder and then into the image folder and now i'm going to go

image folder and now i'm going to go ahead and well you know what instead of

ahead and well you know what instead of this image at first let's do a linear

this image at first let's do a linear gradient first and then we'll see how we

gradient first and then we'll see how we can put an image on top of that so let's

can put an image on top of that so let's go with linear gradient and let's talk

go with linear gradient and let's talk about this this is how we can switch

about this this is how we can switch from one color to another so i'll supply

from one color to another so i'll supply the first color

the first color steel blue it's a color that i like and

steel blue it's a color that i like and the second color let's go with white and

the second color let's go with white and when i save we'll see the default

when i save we'll see the default behavior it's starting at steel blue at

behavior it's starting at steel blue at the top

the top and going to white at the bottom of the

and going to white at the bottom of the page and we could put other colors in

page and we could put other colors in here as well so if we wanted purple in

here as well so if we wanted purple in the middle

the middle we can provide purple as well and now

we can provide purple as well and now when we look it goes from steel blue to

when we look it goes from steel blue to purple to white so you can use

purple to white so you can use pretty much as many colors as you want

pretty much as many colors as you want to and you could have a veritable

to and you could have a veritable rainbow i should say going from top to

rainbow i should say going from top to bottom or as we'll find out here any

bottom or as we'll find out here any direction you want so i'm going to say

direction you want so i'm going to say to left and save and you can see it's

to left and save and you can see it's white on the left

white on the left and it's blue on the right so it starts

and it's blue on the right so it starts at the right and it goes to left we

at the right and it goes to left we could do the opposite of that

could do the opposite of that to right

to right and there you got blue on the left to

and there you got blue on the left to white on the right

white on the right you could go to bottom which is

you could go to bottom which is essentially the default or you could go

essentially the default or you could go to top as well

to top as well so nice changes there i'm going to go

so nice changes there i'm going to go to

to well let's go to left and leave it like

well let's go to left and leave it like that so now we have this background and

that so now we have this background and imagine we were typing

imagine we were typing uh paragraphs over here on the left and

uh paragraphs over here on the left and we stopped somewhere and it gets darker

we stopped somewhere and it gets darker over here on the right and that would

over here on the right and that would work for us now let's look at how we can

work for us now let's look at how we can apply a second background image and you

apply a second background image and you can apply more than two if you want to

can apply more than two if you want to but i'm just going to do an example with

but i'm just going to do an example with two

two so now i'll say url provide the

so now i'll say url provide the parentheses here

parentheses here a comma after that so we clearly have

a comma after that so we clearly have our two images defined and i want to go

our two images defined and i want to go ahead and space this over if it will and

ahead and space this over if it will and i may need to go ahead and drag this to

i may need to go ahead and drag this to the full page and now we've definitely

the full page and now we've definitely got some space there so let me remove

got some space there so let me remove those spaces i just wasn't seeing them

those spaces i just wasn't seeing them before

before bring this down to another line and i

bring this down to another line and i like to have the images lined up like

like to have the images lined up like this when i set it so or a gradient and

this when i set it so or a gradient and an image if you will

an image if you will so now i'll put in the quotes we need to

so now i'll put in the quotes we need to go up out of the css folder into the

go up out of the css folder into the image folder and now i'm going to pick

image folder and now i'm going to pick bubbles so we have a bubbles background

bubbles so we have a bubbles background image and a linear gradient both let's

image and a linear gradient both let's save and drag this back over to see what

save and drag this back over to see what we've got well now we have bubbles all

we've got well now we have bubbles all over the page and that may not be what

over the page and that may not be what we want as well

we want as well this isn't responding like i want it to

this isn't responding like i want it to when i drag this back over so i'm going

when i drag this back over so i'm going to put these back to back so we just

to put these back to back so we just it's one long line essentially is what

it's one long line essentially is what this is for the background image we

this is for the background image we supply the first one and then a comma

supply the first one and then a comma and then the second one and a gradient

and then the second one and a gradient qualifies as a background image as well

qualifies as a background image as well so now when we define our background

so now when we define our background repeat

repeat we can put in a value for both of these

we can put in a value for both of these images so the first one i want to repeat

images so the first one i want to repeat on the y-axis that's our bubbles they're

on the y-axis that's our bubbles they're going to go from top to bottom but not

going to go from top to bottom but not left to right then we put a comma and

left to right then we put a comma and the second one the gradient i'll just

the second one the gradient i'll just put no repeat and when we save now we

put no repeat and when we save now we only have bubbles on the left but we can

only have bubbles on the left but we can change this as well so let's go ahead

change this as well so let's go ahead and put in a background

and put in a background position so we'll say background dash

position so we'll say background dash position

position and now we'll say we want them on the

and now we'll say we want them on the right

right and

and let's use the center so now when we save

let's use the center so now when we save there we go our bubbles are on the right

there we go our bubbles are on the right and they show up much better this is a

and they show up much better this is a transparent image that i have over here

transparent image that i have over here so if we just look at the image

so if we just look at the image and i pull this over you can see it here

and i pull this over you can see it here in visual studio code it's originally

in visual studio code it's originally 300 by 300 has a transparent background

300 by 300 has a transparent background with white bubbles

with white bubbles okay we'll drag this back over and that

okay we'll drag this back over and that looks good with this steel blue

looks good with this steel blue background that we're seeing on the

background that we're seeing on the right with everything we've set up i

right with everything we've set up i can't see the code too well going to

can't see the code too well going to press control b to hide that so our

press control b to hide that so our background position has moved the

background position has moved the bubbles much like we want them to be but

bubbles much like we want them to be but the bubbles still look a little too big

the bubbles still look a little too big so let's say background dash size

so let's say background dash size and now this first one will be for the

and now this first one will be for the bubbles so this stacks in this order the

bubbles so this stacks in this order the bubbles go on top of the gradient so

bubbles go on top of the gradient so they come first in the background image

they come first in the background image and the gradient comes second likewise

and the gradient comes second likewise with repeat y applies to the bubbles no

with repeat y applies to the bubbles no repeat to the gradient background size

repeat to the gradient background size 20 percent for the bubbles and then

20 percent for the bubbles and then we'll put auto for the gradient when you

we'll put auto for the gradient when you save we have smaller bubbles now over on

save we have smaller bubbles now over on the far right now we've wrapped up our

the far right now we've wrapped up our example of linear gradients which are

example of linear gradients which are fun to play around with and also

fun to play around with and also layering background images so we've got

layering background images so we've got one more example to look at today and

one more example to look at today and once again i'm going to comment out

once again i'm going to comment out previous code we were using as you can

previous code we were using as you can see we don't have any other in the html

see we don't have any other in the html but i'll add a little here

but i'll add a little here and then i'll comment out some of what

and then i'll comment out some of what we have in the css just so we don't have

we have in the css just so we don't have that bubbly background for this new

that bubbly background for this new example so i'm going to provide another

example so i'm going to provide another section

section and i'll give this a class well this

and i'll give this a class well this doesn't need a class but just inside the

doesn't need a class but just inside the section let's go with a paragraph that

section let's go with a paragraph that has a class of clip and now inside this

has a class of clip and now inside this paragraph i'm just going to type jane's

paragraph i'm just going to type jane's name and save and we can see her name up

name and save and we can see her name up here in the top right for now let's go

here in the top right for now let's go back to this style once again i'll

back to this style once again i'll comment out this background that we

comment out this background that we currently see here i'll leave the

currently see here i'll leave the background color but everything else but

background color but everything else but i'll leave it in the code for you

i'll leave it in the code for you again shift alt in the letter a to

again shift alt in the letter a to comment that out and if i save that

comment that out and if i save that should all be gone we still have jane's

should all be gone we still have jane's name so now i'll scroll down here all

name so now i'll scroll down here all the way to the bottom below our first

the way to the bottom below our first example

example and i'll provide this

and i'll provide this clip class

clip class and there's several things we want to do

and there's several things we want to do here we want to give this a very heavy

here we want to give this a very heavy font weight so i'm going to give it 800.

font weight so i'm going to give it 800. if we save that you can see it's very

if we save that you can see it's very bold now but it's still very small so

bold now but it's still very small so let's make this big we'll say font size

let's make this big we'll say font size let's go with 18 rem we want to fill the

let's go with 18 rem we want to fill the page for the most part and i think that

page for the most part and i think that will do it after that let's say text

will do it after that let's say text align

align and set this to center and now we've

and set this to center and now we've centered jane's name as well

centered jane's name as well okay after that let's provide

okay after that let's provide a background

a background and

and we could just say background once again

we could just say background once again with this shorthand or we could say

with this shorthand or we could say background image so i'm going to go

background image so i'm going to go ahead and say image we'll provide url

ahead and say image we'll provide url and now we go up

and now we go up into the image folder and then let's

into the image folder and then let's take that scenic image that we

take that scenic image that we previously had and save and now of

previously had and save and now of course we see the clouds we haven't

course we see the clouds we haven't changed the position or anything else of

changed the position or anything else of the image but we'll do some of that here

the image but we'll do some of that here let's at least change the size so

let's at least change the size so background size is going to be

background size is going to be 100 percent

100 percent and now we can see that full image

and now we can see that full image behind

behind jane's name so now let's go ahead and

jane's name so now let's go ahead and text dash

text dash transform

transform set jane's name to uppercase

set jane's name to uppercase and it's really filling out the page now

and it's really filling out the page now now the property i want to talk about is

now the property i want to talk about is background clip so let's look this up at

background clip so let's look this up at can i use dot com

can i use dot com because there's something specific about

because there's something specific about it background dash clip we'll select

it background dash clip we'll select that and you see background dash clip

that and you see background dash clip text and it says a non-standard method

text and it says a non-standard method of clipping a background image to the

of clipping a background image to the foreground text

foreground text so

so it says unprefixed is only supported by

it says unprefixed is only supported by about 19 percent of browsers

about 19 percent of browsers but there is a prefix that we need to

but there is a prefix that we need to use with this so we can see the support

use with this so we can see the support for edge not explorer and we're not

for edge not explorer and we're not really going to worry about explorer

really going to worry about explorer ever probably but for chrome you see the

ever probably but for chrome you see the little yellow here and it says supported

little yellow here and it says supported with prefix

with prefix webkit firefox doesn't need that

webkit firefox doesn't need that but just about everybody else does so we

but just about everybody else does so we need to use that prefix when we apply

need to use that prefix when we apply this property so what we're going to do

this property so what we're going to do is say dash

is say dash webkit dash

webkit dash background dash clip

background dash clip and now we'll say text

and now we'll say text now this won't do everything that we

now this won't do everything that we want but it did take the background away

want but it did take the background away here in chrome as expected let's set the

here in chrome as expected let's set the color and we want this to be transparent

color and we want this to be transparent so first i'm just going to choose this

so first i'm just going to choose this black color and now we'll do the work

black color and now we'll do the work here by clicking on the color

here by clicking on the color getting that pop up

getting that pop up i'm going to switch this over to hsl

i'm going to switch this over to hsl we'll pull this down to about 20 percent

we'll pull this down to about 20 percent right in there and take a look

right in there and take a look at what we get now

at what we get now so now it's a little dark because we can

so now it's a little dark because we can still see 20 percent of the black but

still see 20 percent of the black but essentially we're seeing the image

essentially we're seeing the image inside the text only which is kind of a

inside the text only which is kind of a cool way to do that we'll go ahead and

cool way to do that we'll go ahead and put this to zero and see if it makes

put this to zero and see if it makes much of a difference and yeah it might

much of a difference and yeah it might have lightened up just a little bit so

have lightened up just a little bit so you could make this a little darker by

you could make this a little darker by adding about 20 and there you can see

adding about 20 and there you can see the difference and you could do this

the difference and you could do this with other colors too we're essentially

with other colors too we're essentially creating that same mask

creating that same mask over the image or you could make it

over the image or you could make it totally transparent and i believe to do

totally transparent and i believe to do that you could just say

that you could just say transparent

transparent and save and yep that works too so if

and save and yep that works too so if you want it totally transparent you

you want it totally transparent you don't even have to put a color there at

don't even have to put a color there at all now

all now this will not be working in firefox you

this will not be working in firefox you would need to of course use that as a

would need to of course use that as a fallback

fallback for when

for when it is not supported in browsers and

it is not supported in browsers and otherwise you need to have this will

otherwise you need to have this will this impact chrome by putting it there

this impact chrome by putting it there no but now this would also make it work

no but now this would also make it work in firefox and now every other browser

in firefox and now every other browser that needs this webkit prefix also works

that needs this webkit prefix also works so we just have to have both there and

so we just have to have both there and before we wrap up i am realizing we

before we wrap up i am realizing we didn't really cover that background

didn't really cover that background shorthand which can be very confusing

shorthand which can be very confusing and i like to use the individual ones

and i like to use the individual ones like background color and background

like background color and background image when possible but let's come back

image when possible but let's come back up to what i commented out on the body

up to what i commented out on the body and uncomment that so we'll see

and uncomment that so we'll see jane's name over the bubbles and we can

jane's name over the bubbles and we can save that much but now what we

save that much but now what we essentially want to provide here when i

essentially want to provide here when i do use the background shorthand is just

do use the background shorthand is just a few of these properties three

a few of these properties three specifically so we'll start with the

specifically so we'll start with the repeat we'll say

repeat we'll say repeat

repeat dash y

dash y and then we'll say right

and then we'll say right center

center for the position

for the position and then we'll have our url which was

and then we'll have our url which was dot dot slash image slash and then we

dot dot slash image slash and then we had our bubbles selected and then we can

had our bubbles selected and then we can put a comma and we can supply the values

put a comma and we can supply the values for that second image as well so now

for that second image as well so now we'll say no dash

we'll say no dash repeat

repeat and then we'll have our linear

and then we'll have our linear dash

dash gradient if i could spell once again and

gradient if i could spell once again and then we'll say two left

then we'll say two left we had steel blue

we had steel blue and then we had

and then we had i believe just our regular white yep

i believe just our regular white yep there we go

there we go and then we can go ahead and put the

and then we can go ahead and put the semicolon there now let's put size after

semicolon there now let's put size after that because we didn't attempt to

that because we didn't attempt to include the size in the background

include the size in the background shorthand however you can it's just

shorthand however you can it's just fairly complex and it gets confusing so

fairly complex and it gets confusing so you could look that up on mdn if you

you could look that up on mdn if you want to i'll provide a link in the

want to i'll provide a link in the resources but this is about as complex

resources but this is about as complex as i like to get with that shorthander

as i like to get with that shorthander it just starts get to get too confusing

it just starts get to get too confusing so what we've done is eliminate the

so what we've done is eliminate the background image background repeat and

background image background repeat and background position properties that were

background position properties that were individually there so i'll just comment

individually there so i'll just comment those out we save we have the same

those out we save we have the same result using the background shorthand

result using the background shorthand let's move on to css media queries

let's move on to css media queries media queries allow you to modify your

media queries allow you to modify your site based on specific characteristics

site based on specific characteristics and parameters and most often we look at

and parameters and most often we look at the browser viewport width

the browser viewport width this is key to responsive design as our

this is key to responsive design as our web pages will respond to the width of a

web pages will respond to the width of a device viewport so let's look at the

device viewport so let's look at the starter code i have got some basic html

starter code i have got some basic html here and i have a page outline that has

here and i have a page outline that has a header a nav inside the header element

a header a nav inside the header element a main element and a footer element and

a main element and a footer element and so we're just going to outline a page

so we're just going to outline a page and see how it changes based on viewport

and see how it changes based on viewport changes and then in the css i've got

changes and then in the css i've got some basic css here we're importing the

some basic css here we're importing the nenito font from google other than that

nenito font from google other than that we have the basic css reset and a basic

we have the basic css reset and a basic style a change you may notice is i'm

style a change you may notice is i'm using the font shorthand property now

using the font shorthand property now that sets both the font size

that sets both the font size and the font family all in one right

and the font family all in one right here in the body other than that min

here in the body other than that min height of 100 viewport units okay before

height of 100 viewport units okay before we do anything with css we really need

we do anything with css we really need to look at the html there is a meta tag

to look at the html there is a meta tag here that enables responsive design and

here that enables responsive design and that meta tag has the name viewport you

that meta tag has the name viewport you can see the content

can see the content is width equals device width and then

is width equals device width and then initial scale of 1.0 this is necessary

initial scale of 1.0 this is necessary to enable our media queries and allow

to enable our media queries and allow responsive design in our web pages now

responsive design in our web pages now do you have to memorize how to type that

do you have to memorize how to type that out not really because vs code helps us

out not really because vs code helps us a lot i'm going to just select

a lot i'm going to just select everything quickly with control a

everything quickly with control a cut it out of the page with control x so

cut it out of the page with control x so i have a blank html page

i have a blank html page and now in vs code if i type an

and now in vs code if i type an exclamation mark you can see it says

exclamation mark you can see it says emit abbreviation when i press tab

emit abbreviation when i press tab it fills out the basic skeleton of an

it fills out the basic skeleton of an html page and you can see

html page and you can see it includes this meta tag with the name

it includes this meta tag with the name viewport the content with width equal to

viewport the content with width equal to device width and the initial scale set

device width and the initial scale set to 1.0 it's very important to have that

to 1.0 it's very important to have that as we work with responsive design and

as we work with responsive design and visual studio code helps you do that i'm

visual studio code helps you do that i'm going to press ctrl a now to select all

going to press ctrl a now to select all of this and then ctrl v to paste over

of this and then ctrl v to paste over and just go back to the page outline

and just go back to the page outline that i already had with the header nav

that i already had with the header nav main and footer ctrl s to save and we're

main and footer ctrl s to save and we're ready to move on to the css okay before

ready to move on to the css okay before we add any actual css to what we already

we add any actual css to what we already have let's just talk about the syntax of

have let's just talk about the syntax of a media query first so i'm going to

a media query first so i'm going to paste this in and look at the syntax

paste this in and look at the syntax that is how we write it so we start out

that is how we write it so we start out with app media

with app media and then we give the media type and then

and then we give the media type and then we specify a condition or conditions as

we specify a condition or conditions as we can link those with logical operators

we can link those with logical operators and and or

and and or and then we specify a breakpoint and

and then we specify a breakpoint and that depends on the condition as what

that depends on the condition as what type of break point we'll use there's

type of break point we'll use there's lots of different types of break points

lots of different types of break points and conditions we can apply and then

and conditions we can apply and then just like we do with anything else we

just like we do with anything else we put the css rules between the curly

put the css rules between the curly braces so now that we've looked at that

braces so now that we've looked at that syntax let's go ahead and write a media

syntax let's go ahead and write a media query and see how that applies so we can

query and see how that applies so we can start out with at media and instead of

start out with at media and instead of media type here we can say

media type here we can say screen that is the most common one

screen that is the most common one you'll see you might also see all or

you'll see you might also see all or print or even speech for screen readers

print or even speech for screen readers and devices that read the screen back to

and devices that read the screen back to you and then after condition or as the

you and then after condition or as the condition i should say you often see min

condition i should say you often see min width and you should read min width as

width and you should read min width as starting from so whatever the width we

starting from so whatever the width we specify is these styles will start from

specify is these styles will start from that width when we say min width

that width when we say min width likewise max width would be up 2 so the

likewise max width would be up 2 so the styles would apply up to the width we

styles would apply up to the width we would provide if we said max width there

would provide if we said max width there we usually do this with min width and

we usually do this with min width and that is because we design from the

that is because we design from the smallest to the largest and that is what

smallest to the largest and that is what is called mobile first design and

is called mobile first design and responsive design

responsive design and the reason we do that is well think

and the reason we do that is well think about it this way as an analogy when you

about it this way as an analogy when you get a box you unpack something it's

get a box you unpack something it's often hard to put everything back in the

often hard to put everything back in the box the way it was packed and get the

box the way it was packed and get the lid to close it's kind of like that when

lid to close it's kind of like that when we design a page it's easier to start

we design a page it's easier to start with the smallest and work our way

with the smallest and work our way towards the largest rather than start

towards the largest rather than start with the largest and then try to squeeze

with the largest and then try to squeeze everything into a smaller and smaller

everything into a smaller and smaller box if you will so that's kind of the

box if you will so that's kind of the analogy i use to explain that so we'll

analogy i use to explain that so we'll start out with a mobile device screen

start out with a mobile device screen usually that's a one column design and

usually that's a one column design and we can spread things out as we go so for

we can spread things out as we go so for this first min width for the break point

this first min width for the break point let's say i would put and remember this

let's say i would put and remember this is starting from

is starting from so i would put something like oh let's

so i would put something like oh let's go with 481

go with 481 pixels so all of our styles before this

pixels so all of our styles before this media query

media query would be applied until we got to 481

would be applied until we got to 481 pixels and then they would still be

pixels and then they would still be applied

applied unless we were to overwrite them because

unless we were to overwrite them because the cascade still works so here we could

the cascade still works so here we could change something maybe about the body

change something maybe about the body maybe the font maybe a background color

maybe the font maybe a background color and that's what we'll experiment with

and that's what we'll experiment with today because it's so easy to see those

today because it's so easy to see those background color changes

background color changes and

and then we can overwrite the previous style

then we can overwrite the previous style we had other styles if we do not

we had other styles if we do not overwrite those they will still apply if

overwrite those they will still apply if they were applied before the media query

they were applied before the media query now as always i'll give a link to the

now as always i'll give a link to the mdn references in the description below

mdn references in the description below but let's talk about some of the other

but let's talk about some of the other conditions and break points we could

conditions and break points we could have although as i've said min width and

have although as i've said min width and max width with pixels as a breakpoint is

max width with pixels as a breakpoint is very common but you could also have

very common but you could also have something like

something like orientation

orientation and then you would set that to

and then you would set that to possibly landscape which would be kind

possibly landscape which would be kind of turning your phone to the horizontal

of turning your phone to the horizontal instead of the vertical orientation

instead of the vertical orientation something like that there's also

something like that there's also something like

something like min dash aspect

min dash aspect dash ratio and there you can actually

dash ratio and there you can actually set a ratio and there are many different

set a ratio and there are many different sizes of phones so while landscape would

sizes of phones so while landscape would actually apply to anything that was

actually apply to anything that was wider than it was tall here we could set

wider than it was tall here we could set something more like specific like 16 by

something more like specific like 16 by 9 or say

9 or say 7 by 4 something like that then when the

7 by 4 something like that then when the aspect ratio reached that size so the

aspect ratio reached that size so the width would be

width would be 7 and the

7 and the height would be 4 in that ratio or 16 by

height would be 4 in that ratio or 16 by nine or whatever we put

nine or whatever we put that is when that would apply now

that is when that would apply now remember we can also put more than one

remember we can also put more than one rule here and we'll look at that very

rule here and we'll look at that very soon as well so how do we decide what

soon as well so how do we decide what break points to apply and what values to

break points to apply and what values to use well there are some common ones and

use well there are some common ones and we can also look at some css frameworks

we can also look at some css frameworks and see what they have applied because

and see what they have applied because they have probably researched that and

they have probably researched that and worked with it a little bit more than we

worked with it a little bit more than we have so let's look at what some others

have so let's look at what some others have done i'm going to open up the file

have done i'm going to open up the file tree here you can see i have a notes dot

tree here you can see i have a notes dot md that i'm going to include in this

md that i'm going to include in this repository dot md means markdown so it's

repository dot md means markdown so it's a markdown file when i click on this

a markdown file when i click on this you'll see the outline here but i'm

you'll see the outline here but i'm using an extension and if you want to

using an extension and if you want to get that extension it's called markdown

get that extension it's called markdown all-in-one you can search for that in

all-in-one you can search for that in the visual studio code extensions area

the visual studio code extensions area and then you can install it if you want

and then you can install it if you want to use that as well so when you have

to use that as well so when you have markdown all in one

markdown all in one then you can go ahead and preview the

then you can go ahead and preview the markdown and that's what i'm going to do

markdown and that's what i'm going to do with control shift in the letter v and

with control shift in the letter v and now i've got a markdown preview and this

now i've got a markdown preview and this is how github would read our markdown so

is how github would read our markdown so i've provided a table here so some

i've provided a table here so some common media query breakpoints you can

common media query breakpoints you can see

see mobile devices are often considered to

mobile devices are often considered to be

be 481 pixels width or less

481 pixels width or less and then from 481 to 768 usually ipads

and then from 481 to 768 usually ipads tablets

tablets 769 to 1024 small screens and laptops

769 to 1024 small screens and laptops 1025 to 1200 desktops and large screens

1025 to 1200 desktops and large screens and 1201 and greater extra large screens

and 1201 and greater extra large screens and tvs now that's just kind of a common

and tvs now that's just kind of a common general guideline of course there are no

general guideline of course there are no standards so you can set these how you

standards so you can set these how you want but let's look at what the

want but let's look at what the bootstrap css framework does

bootstrap css framework does and i tend to like these

and i tend to like these and i'm i guess maybe i'm just used to

and i'm i guess maybe i'm just used to these but

these but 576 instead of 481 as we saw referenced

576 instead of 481 as we saw referenced above is considered extra small and then

above is considered extra small and then anything greater than 576 is small

anything greater than 576 is small 768 and above is medium

768 and above is medium 992 is large 1200 is extra large and

992 is large 1200 is extra large and then they have a second extra-large

then they have a second extra-large which is double xl at 1400. now tailwind

which is double xl at 1400. now tailwind is another css framework that is very

is another css framework that is very popular now in recent times and you can

popular now in recent times and you can see they've also differed somewhat they

see they've also differed somewhat they consider the extra small to be less than

consider the extra small to be less than 640.

640. maybe that's because in recent years our

maybe that's because in recent years our devices have seemed to have grown into

devices have seemed to have grown into larger sizes after that 640 and above is

larger sizes after that 640 and above is small now we meet up and agree at 768

small now we meet up and agree at 768 and that is where the ipad

and that is where the ipad is usually at the traditional ipad and

is usually at the traditional ipad and then we've got 1024 here which is a

then we've got 1024 here which is a little different than 992 as far as

little different than 992 as far as bootstrap was concerned then 1280 and

bootstrap was concerned then 1280 and 1536 so you can see even professional

1536 so you can see even professional opinions vary and you can set your

opinions vary and you can set your breakpoints how you want to as your page

breakpoints how you want to as your page needs to respond so it can respond to

needs to respond so it can respond to the content you can work with your

the content you can work with your content and set the breakpoints

content and set the breakpoints according to that you could target

according to that you could target specific devices or just use some

specific devices or just use some general guidelines as well let's go back

general guidelines as well let's go back to the css now and start to write some

to the css now and start to write some code and we'll see how this applies okay

code and we'll see how this applies okay i'm going to drag visual studio code to

i'm going to drag visual studio code to the left and we can see our page on the

the left and we can see our page on the right it currently has very little

right it currently has very little applied as far as styles just our css

applied as far as styles just our css reset and our basic body styles right

reset and our basic body styles right here and then we have our media query

here and then we have our media query i'm going to hide the file tree with

i'm going to hide the file tree with control b so we have a little more room

control b so we have a little more room to write code i'll go ahead and remove

to write code i'll go ahead and remove this media query for now just so we can

this media query for now just so we can start out with our basic page first and

start out with our basic page first and remember we're designing for the

remember we're designing for the smallest screen first and we'll work our

smallest screen first and we'll work our way up so we'll just put in some basic

way up so we'll just put in some basic styles here the easiest thing to see as

styles here the easiest thing to see as we're learning about media queries is to

we're learning about media queries is to change the background color and let's do

change the background color and let's do that by first setting a background color

that by first setting a background color here on the body i'm going to set it to

here on the body i'm going to set it to four seven five five six nine

four seven five five six nine kind of a nice grayish color if we save

kind of a nice grayish color if we save that we can see that doesn't highlight

that we can see that doesn't highlight our lettering as well but we'll change

our lettering as well but we'll change this of course as we change media

this of course as we change media queries

queries and now after that we can change a

and now after that we can change a little bit about how this displays is we

little bit about how this displays is we learned in the last lesson about images

learned in the last lesson about images so we'll set background image and now

so we'll set background image and now instead of linear gradient that we

instead of linear gradient that we learned about before there's one other

learned about before there's one other one i would like to show and that's

one i would like to show and that's called a radial

called a radial gradient and now this starts in the

gradient and now this starts in the center and works its way out instead of

center and works its way out instead of top to bottom bottom to top left to

top to bottom bottom to top left to right or right to left or any direction

right or right to left or any direction that we would send a linear gradient

that we would send a linear gradient this will always start from the center

this will always start from the center i'm going to use

i'm going to use white smoke as the first color and then

white smoke as the first color and then we'll use that color that we specified

we'll use that color that we specified as the fallback background color

as the fallback background color for the second color and when i save now

for the second color and when i save now you can see it lightens up here in the

you can see it lightens up here in the center and it works its way out to a

center and it works its way out to a darker color on the left and the right

darker color on the left and the right top and bottom now let's make well i'll

top and bottom now let's make well i'll put a

put a semicolon there let's make

semicolon there let's make our body a flex container and then let's

our body a flex container and then let's set the flex direction

set the flex direction and we'll set that to column because

and we'll set that to column because row is the default and we want our

row is the default and we want our elements to stack instead of being a row

elements to stack instead of being a row i'm going to scroll for a little more

i'm going to scroll for a little more room and now let's go ahead and identify

room and now let's go ahead and identify each piece here we have a header

each piece here we have a header a nav

a nav a main and a footer and we will apply

a main and a footer and we will apply this style to all of those elements so

this style to all of those elements so we'll set each one of those to display

we'll set each one of those to display grid

grid and then we'll center our content by

and then we'll center our content by saying place content center and when we

saying place content center and when we save now we see that has been saved in

save now we see that has been saved in the center of each one so this really

the center of each one so this really means we've stacked our elements and

means we've stacked our elements and nothing is below so we want this to take

nothing is below so we want this to take up the full page and we'll take that on

up the full page and we'll take that on here very shortly so i'll scroll for

here very shortly so i'll scroll for some more room here on the left and now

some more room here on the left and now i'm going to put a style on just the

i'm going to put a style on just the header

header and the footer

and the footer and here we'll say position

and here we'll say position sticky as we want these at the top and

sticky as we want these at the top and the bottom

the bottom let's identify these with a different

let's identify these with a different background color

background color and here we'll say 1

and here we'll say 1 e 2 9 3 b there we go a little darker

e 2 9 3 b there we go a little darker but then let's give the font the color

but then let's give the font the color of white smoke as well

of white smoke as well we can save that and now we can see our

we can save that and now we can see our header and footer and remember the nav

header and footer and remember the nav is nested inside the header and now

is nested inside the header and now we've applied position sticky but we

we've applied position sticky but we didn't provide the other value that we

didn't provide the other value that we need to stick the header or the footer

need to stick the header or the footer in a

in a specific position so here i'm going to

specific position so here i'm going to say header now because it will have a

say header now because it will have a different position than the footer we'll

different position than the footer we'll say top 0. and now that is in the same

say top 0. and now that is in the same place but after that we can come down

place but after that we can come down below and say footer

below and say footer and here we'll say

and here we'll say bottom 0 and save and now right now it

bottom 0 and save and now right now it looks like it's in the same position

looks like it's in the same position because we haven't expanded the page but

because we haven't expanded the page but the footer will be stuck to the bottom

the footer will be stuck to the bottom and the header will be stuck to the top

and the header will be stuck to the top and we can see the difference in that

and we can see the difference in that i'll scroll for a little more room

i'll scroll for a little more room and in our main element and it is a flex

and in our main element and it is a flex item right now as it's inside the body

item right now as it's inside the body that is a flex container we can say flex

that is a flex container we can say flex dash grow

dash grow set that to a value of one

set that to a value of one and now the main element has grown to

and now the main element has grown to fill out whatever space was available

fill out whatever space was available now before we move on to a media query

now before we move on to a media query let's go ahead and style the nav just a

let's go ahead and style the nav just a little bit more to make it stand out so

little bit more to make it stand out so let's give it a background dash

let's give it a background dash color

color set that equal to white after that we'll

set that equal to white after that we'll set its color or font color to black

set its color or font color to black let's give it just a little bit of

let's give it just a little bit of padding here 0.5

padding here 0.5 rim and let's give it a border

rim and let's give it a border bottom and let's set this a little

bottom and let's set this a little thicker two pixels

thicker two pixels solid

solid black and let's see what we get

black and let's see what we get well that looks good except we don't

well that looks good except we don't quite have the width we want yet we can

quite have the width we want yet we can easily solve this by going back to where

easily solve this by going back to where we place the grid on each of these

we place the grid on each of these elements the header nav main and footer

elements the header nav main and footer we've got it centered but we don't have

we've got it centered but we don't have block elements at this point that are

block elements at this point that are 100 width so let's add grid dash

100 width so let's add grid dash template columns and set that to 100

template columns and set that to 100 percent

percent now when we center

now when we center those or actually give them 100 percent

those or actually give them 100 percent width and we've centered them and you

width and we've centered them and you can see main is centered here vertically

can see main is centered here vertically but it's not horizontally now but the

but it's not horizontally now but the elements do have 100 percent width and

elements do have 100 percent width and this is text content

this is text content text content pardon me so we just need

text content pardon me so we just need to say text align center and now we get

to say text align center and now we get everything where we want it but we

everything where we want it but we actually have 100 percent width

actually have 100 percent width for each of those elements once again

for each of those elements once again and now we have our basic page layout so

and now we have our basic page layout so let's go ahead and add a media query now

let's go ahead and add a media query now that will change things up a little bit

that will change things up a little bit so underneath our footer we first want

so underneath our footer we first want to indicate that's what we're doing so

to indicate that's what we're doing so i'll put a comment

i'll put a comment and here let's say

and here let's say small that's where we'll start out with

small that's where we'll start out with our media query i'll say at media

our media query i'll say at media and then we'll use screen

and then we'll use screen and

and i'll say min width and here we'll say

i'll say min width and here we'll say 576 pixels so the styles we have put in

576 pixels so the styles we have put in are valid up to 576 pixels and they will

are valid up to 576 pixels and they will still be valid if we do not overwrite

still be valid if we do not overwrite them here so now let's go ahead and

them here so now let's go ahead and style the body here

style the body here and the first thing we'll do is set a

and the first thing we'll do is set a background dash color

background dash color let's just set it to green something

let's just set it to green something we'll definitely notice a change on

we'll definitely notice a change on and then we can go ahead and use that

and then we can go ahead and use that same background image

same background image style that we're using with a radial

style that we're using with a radial gradient

gradient and inside there we'll start out with

and inside there we'll start out with white smoke once again and then we'll

white smoke once again and then we'll just switch to green

just switch to green okay besides the body let's do one other

okay besides the body let's do one other thing let's take the nav

thing let's take the nav and let's just set the display to none

and let's just set the display to none so it will disappear

so it will disappear and now look what happened we're already

and now look what happened we're already past that 576

past that 576 width so we see those changes instantly

width so we see those changes instantly we no longer have a nav on the page and

we no longer have a nav on the page and now our background for the body is main

now our background for the body is main now we still have our background color

now we still have our background color on the header and footer that we set

on the header and footer that we set because we did not overwrite those with

because we did not overwrite those with a new style here

a new style here so that is what has changed based on

so that is what has changed based on that width now how can we go back and

that width now how can we go back and forth this is interesting and something

forth this is interesting and something you should learn how to do so i'll drag

you should learn how to do so i'll drag this over till it's full screen

this over till it's full screen you want to go to dev tools and there's

you want to go to dev tools and there's certain ways to do that one is to right

certain ways to do that one is to right click and choose inspect at the bottom

click and choose inspect at the bottom of the pop-up menu another is to press

of the pop-up menu another is to press ctrl shift and the letter i which is

ctrl shift and the letter i which is what i tend to do and now devtools

what i tend to do and now devtools opened here on the right it's fairly

opened here on the right it's fairly small and i have got the console here

small and i have got the console here for javascript right now but yours may

for javascript right now but yours may open to elements and you can see and

open to elements and you can see and highlight these elements here and that's

highlight these elements here and that's really what we want as we style things

really what we want as we style things and you can see layout but now let's

and you can see layout but now let's look at some details about this layout

look at some details about this layout and how we can adjust that notice the

and how we can adjust that notice the little mobile devices icon up here let's

little mobile devices icon up here let's go ahead and click that it says toggle

go ahead and click that it says toggle device toolbar

device toolbar that gives us more tools now we can

that gives us more tools now we can choose dimensions and we see the

choose dimensions and we see the dimensions here we see the percentage

dimensions here we see the percentage that's showing so i'm going to set this

that's showing so i'm going to set this to 100 percent and now i can see that

to 100 percent and now i can see that these are the dimensions for an iphone 6

these are the dimensions for an iphone 6 7 and 8. we can change this to a

7 and 8. we can change this to a responsive screen or choose different

responsive screen or choose different devices so i'm using the responsive

devices so i'm using the responsive screen now and i can drag it to make it

screen now and i can drag it to make it narrower or wider and you saw that

narrower or wider and you saw that change and there we went past our 576

change and there we went past our 576 we're now at 602 pixels wide and we can

we're now at 602 pixels wide and we can see the change likewise we can look at

see the change likewise we can look at devices like i was talking about before

devices like i was talking about before so i'll choose iphone 5

so i'll choose iphone 5 se one of the smaller devices now not

se one of the smaller devices now not every device has this available but some

every device has this available but some do you can go to the three dots here

do you can go to the three dots here in our

in our new responsive menu bar that popped up

new responsive menu bar that popped up and here we can say show device frame

and here we can say show device frame and now i have a frame that looks like a

and now i have a frame that looks like a phone around my page and now we can once

phone around my page and now we can once again change that i want to make it so i

again change that i want to make it so i can see the whole phone so there we go

can see the whole phone so there we go and now we see how it looks on the phone

and now we see how it looks on the phone you can even change to the horizontal

you can even change to the horizontal display as you would turn your phone or

display as you would turn your phone or back to the normal display here and we

back to the normal display here and we can do that for several different phones

can do that for several different phones i'll choose the iphone 6 7 and 8 for

i'll choose the iphone 6 7 and 8 for example or we can just go back to

example or we can just go back to responsive and drag the page around

responsive and drag the page around which is what we'll do now because now

which is what we'll do now because now up until 576 and we can even type in

up until 576 and we can even type in here i can say

here i can say 576

576 we're going to switch over so if i said

we're going to switch over so if i said 575

575 yep we're back to the original

yep we're back to the original background color so we can check our

background color so we can check our break points right there also there are

break points right there also there are break points here that are suggested by

break points here that are suggested by chrome and you can click on these to

chrome and you can click on these to change your width as well and see how it

change your width as well and see how it displays and these are a little bit

displays and these are a little bit different than what we reviewed in our

different than what we reviewed in our notes markdown file as well so you might

notes markdown file as well so you might check those out okay let's drag this

check those out okay let's drag this back over to the right and then let's

back over to the right and then let's take visual studio code and fill up the

take visual studio code and fill up the page let's put in some more break points

page let's put in some more break points and then we'll come back and check all

and then we'll come back and check all of those out what i'm going to do now is

of those out what i'm going to do now is highlight all of this code then press

highlight all of this code then press shift alt and the down arrow to copy it

shift alt and the down arrow to copy it down and now let's make our next break

down and now let's make our next break point and we'll label this one

point and we'll label this one medium

medium and we're not going to change the nav

and we're not going to change the nav anymore it is gone for now so we'll just

anymore it is gone for now so we'll just leave it gone so all we really want to

leave it gone so all we really want to do is change the color here for our next

do is change the color here for our next break point and of course the break

break point and of course the break point value itself so here i'll switch

point value itself so here i'll switch this to gold i could have changed those

this to gold i could have changed those both at the same time i'll try to

both at the same time i'll try to remember to do that next time

remember to do that next time so min width instead of 576 this is our

so min width instead of 576 this is our medium let's set it to 768 we want the

medium let's set it to 768 we want the pixels behind that to indicate that

pixels behind that to indicate that after that let's copy this down again so

after that let's copy this down again so shift alt and the down arrow and now

shift alt and the down arrow and now this would be our large break point

this would be our large break point we'll relabel that

we'll relabel that i'll highlight gold and press ctrl d to

i'll highlight gold and press ctrl d to select the other gold i'm going to

select the other gold i'm going to change this to fire brick

change this to fire brick and so that will give us a nice color

and so that will give us a nice color change as well we'll set this to 992

change as well we'll set this to 992 pixels much like the bootstrap framework

pixels much like the bootstrap framework does

does now let's select our large

now let's select our large shift alt and the down arrow

shift alt and the down arrow i'll give another line break there and

i'll give another line break there and then this will be our xl setting and for

then this will be our xl setting and for that let's go ahead and switch to

that let's go ahead and switch to another color that will be noticeable

another color that will be noticeable rebecca purple i didn't select that fire

rebecca purple i didn't select that fire brick i'll do control z to go back to

brick i'll do control z to go back to fire brick

fire brick highlight the first one ctrl d to select

highlight the first one ctrl d to select the second one and now rebecca purple is

the second one and now rebecca purple is what we want

what we want save that and let's do one more but this

save that and let's do one more but this will be different so i'm going to copy

will be different so i'm going to copy this down but we'll make some changes

this down but we'll make some changes just to give an example of how you could

just to give an example of how you could do something differently and look for a

do something differently and look for a different type of break point as well so

different type of break point as well so this is still at media screen

this is still at media screen but let's go ahead and label this

but let's go ahead and label this here we go i can type there we go mobile

here we go i can type there we go mobile and i want that all caps mobile

and i want that all caps mobile device landscape

device landscape so now let's combine some things here

so now let's combine some things here instead of min width

instead of min width let's say

let's say lowercase max height and we'll set the

lowercase max height and we'll set the max height

max height to 425 pixels and after that let's do

to 425 pixels and after that let's do another and

another and now let's say min

now let's say min aspect ratio you might have thought i

aspect ratio you might have thought i would have said orientation but i want

would have said orientation but i want to

to actually be a little more specific here

actually be a little more specific here and say the min aspect ratio of seven to

and say the min aspect ratio of seven to four so it's noticeably taller than it

four so it's noticeably taller than it is wide

is wide and let's change our rebecca purple

and let's change our rebecca purple to

to dodger blue

dodger blue and save that as well now inside of this

and save that as well now inside of this we'll also do a couple of other changes

we'll also do a couple of other changes so let's say

so let's say h1 and h2 that we have for labels we'll

h1 and h2 that we have for labels we'll make the font size just a little smaller

make the font size just a little smaller to 1.5 rim

to 1.5 rim and then let's also set that nav

to display none and we need to do that again because

again because we didn't hit our other min width when

we didn't hit our other min width when we hit our max height here so that's a

we hit our max height here so that's a little different but we'd just be

little different but we'd just be looking at a different size so we need

looking at a different size so we need to go ahead and switch that to display

to go ahead and switch that to display none or i believe it would show once

none or i believe it would show once again

again so now that we've made those changes

so now that we've made those changes let's drag visual studio code over and

let's drag visual studio code over and see if they all take place in our page

see if they all take place in our page so we'll drag chrome back over

so we'll drag chrome back over we'll start down here at the smallest

we'll start down here at the smallest and there we have our original color

and there we have our original color we get a little wider we've got green

we get a little wider we've got green a little wider yet we have gold

a little wider yet we have gold a little wider yet we have rebecca

a little wider yet we have rebecca purple

purple it seems like maybe we skipped over the

it seems like maybe we skipped over the fire bricks so let's see what happened

fire bricks so let's see what happened there we'll bring this back over

there we'll bring this back over and look at our fire brick and maybe all

and look at our fire brick and maybe all it takes is one typo to get something

it takes is one typo to get something wrong maybe i did something wrong and i

wrong maybe i did something wrong and i sure did i did not change

sure did i did not change the min width for the rebecca purple for

the min width for the rebecca purple for the xl so we had 992 here and 9.92 here

the xl so we had 992 here and 9.92 here again so this essentially was overriding

again so this essentially was overriding this so we wanted to change this 992

this so we wanted to change this 992 here and set it to 1200 pixels and now

here and set it to 1200 pixels and now we should see all of the changes we

we should see all of the changes we expected

expected and here's purple there is our fire

and here's purple there is our fire brick color

brick color gold green and back to normal there so

gold green and back to normal there so we might see those changes in different

we might see those changes in different devices as well

devices as well so let's go ahead and check that we'll

so let's go ahead and check that we'll see our iphone

see our iphone and we can choose maybe a larger setting

and we can choose maybe a larger setting here that's too large let's go with 75

here that's too large let's go with 75 percent there's the iphone

percent there's the iphone let's go with the ipad and yes it's gold

let's go with the ipad and yes it's gold let's go with the ipad pro

let's go with the ipad pro yes that's the fire brick size and you

yes that's the fire brick size and you can see a device frame is not available

can see a device frame is not available for it

for it and then we could even switch up to say

and then we could even switch up to say well let's go back to a small phone

well let's go back to a small phone first there is that iphone 5se

first there is that iphone 5se now let's go ahead and change the

now let's go ahead and change the orientation

orientation and now we get our dodger blue color as

and now we get our dodger blue color as we switched because the aspect ratio and

we switched because the aspect ratio and the max height were both met it meant

the max height were both met it meant most both of those conditions and now

most both of those conditions and now you can see how those media queries

you can see how those media queries apply and we can change the page based

apply and we can change the page based on what the device is the viewing

on what the device is the viewing orientation

orientation and of course you're not going to have

and of course you're not going to have someone that typically changes their

someone that typically changes their screen size as they're working with your

screen size as they're working with your application so you don't really need to

application so you don't really need to worry about these smooth transitions in

worry about these smooth transitions in between changes and that's because

between changes and that's because nobody will be changing their device or

nobody will be changing their device or really their screen size as they use the

really their screen size as they use the application so you just need to make

application so you just need to make sure

sure it appears as you want it to at each

it appears as you want it to at each separate break point

separate break point today we'll use css to apply responsive

today we'll use css to apply responsive web design as we create profile cards

web design as we create profile cards for the staff of a small company it's

for the staff of a small company it's time for another css mini project and

time for another css mini project and we'll be applying many of the concepts

we'll be applying many of the concepts we've learned from previous lessons in

we've learned from previous lessons in this css for beginners tutorial series

this css for beginners tutorial series let's look at our finished project first

let's look at our finished project first this is our end goal i've already got

this is our end goal i've already got dev tools open i'm already showing the

dev tools open i'm already showing the toolbar at the top and you can click the

toolbar at the top and you can click the little mobile icon at the top of chrome

little mobile icon at the top of chrome dev tools to toggle that device toolbar

dev tools to toggle that device toolbar and if you click the three dots you can

and if you click the three dots you can also show or hide the device frame if

also show or hide the device frame if it's available and it is available for

it's available and it is available for the iphone 5 slash se which is currently

the iphone 5 slash se which is currently probably the smallest mobile device we

probably the smallest mobile device we would design for as of the making of

would design for as of the making of this tutorial at least and it's got 320

this tutorial at least and it's got 320 pixels with 568 high and you can see the

pixels with 568 high and you can see the project right here and we can scroll

project right here and we can scroll through the cards for each employee now

through the cards for each employee now if we choose this drop menu and choose

if we choose this drop menu and choose responsive

responsive there you can see the page definitely

there you can see the page definitely changes we can see all employees at once

changes we can see all employees at once and we see the new width and height at

and we see the new width and height at the top now we can type in here too and

the top now we can type in here too and i'm going to actually highlight the

i'm going to actually highlight the width and change it to 1920

width and change it to 1920 by 1080 and we can see what our page

by 1080 and we can see what our page would look like on a full 16 by 9 or

would look like on a full 16 by 9 or 1920 by 1080 wide screen so this is our

1920 by 1080 wide screen so this is our end goal i can grab the side now and

end goal i can grab the side now and squeeze the page back and we can see how

squeeze the page back and we can see how it adapts to each width all the way back

it adapts to each width all the way back to our 320 pixels of course we've got

to our 320 pixels of course we've got more height than we did in the iphone

more height than we did in the iphone right now

right now but we can see how it adapts to all of

but we can see how it adapts to all of these different sizes and changes as i

these different sizes and changes as i drag it all the way back to above 1920

drag it all the way back to above 1920 now so now let's look at the code our

now so now let's look at the code our starter code today is the finished code

starter code today is the finished code from the last lesson that we had on

from the last lesson that we had on media queries but don't worry if you

media queries but don't worry if you don't have that you can download it in

don't have that you can download it in the description or i won't move so fast

the description or i won't move so fast that you can't follow along and add the

that you can't follow along and add the other styles i will cover all of the

other styles i will cover all of the styles and as we see in the file tree

styles and as we see in the file tree over here we've got a notes.md in the

over here we've got a notes.md in the last lesson we discussed breakpoints and

last lesson we discussed breakpoints and i included those that's a markdown file

i included those that's a markdown file we have our index.html but i've also

we have our index.html but i've also added an image folder img and we see

added an image folder img and we see three different profile pictures here so

three different profile pictures here so those are also available for download

those are also available for download with the source code from github and

with the source code from github and here's our css once again let's make our

here's our css once again let's make our changes to the html first because we

changes to the html first because we need to add more here so let's switch

need to add more here so let's switch the title first from css media queries

the title first from css media queries to css mini dash

to css mini dash project and then put a colon and we'll

project and then put a colon and we'll put

put uh let's do profile cards

uh let's do profile cards okay now that we've changed our title we

okay now that we've changed our title we can change more of the content so

can change more of the content so instead of saying header here we're

instead of saying header here we're going to say

going to say our staff

our staff and then inside of the nav we're going

and then inside of the nav we're going to put some other details instead of

to put some other details instead of that h2 so let's just put links here and

that h2 so let's just put links here and we'll have an a

we'll have an a with an href attribute and we

with an href attribute and we automatically get that in there now this

automatically get that in there now this is going to be an anchor tag we can put

is going to be an anchor tag we can put the hashtag and i'll put profile1 and

the hashtag and i'll put profile1 and we'll match that to an id later and here

we'll match that to an id later and here let's just put the first employee's name

let's just put the first employee's name so we'll say joe

so we'll say joe we're making a nav menu here the next

we're making a nav menu here the next one will do the same and actually i'll

one will do the same and actually i'll just go to this line and press shift alt

just go to this line and press shift alt and the down arrow to copy down twice

and the down arrow to copy down twice and that will save some time for sure

and that will save some time for sure okay after i get rid of that line i'm

okay after i get rid of that line i'm going to switch the profile to 2 and the

going to switch the profile to 2 and the next one to 3

next one to 3 and then after joe i believe we have

and then after joe i believe we have matt

matt and then we have

and then we have jane so now we have our nav menu and our

jane so now we have our nav menu and our title for our staff page let's move on

title for our staff page let's move on to the main element and we can remove

to the main element and we can remove this h2 as well

this h2 as well and now we're going to add an article

and now we're going to add an article and this article element will have an id

and this article element will have an id equal to

equal to profile

profile of one and now inside the article we can

of one and now inside the article we can put several things but first let's also

put several things but first let's also add a class and set that equal to

add a class and set that equal to card there we go

card there we go now inside the article let's add a

now inside the article let's add a figure and if you completed my html for

figure and if you completed my html for beginners course you know we'll probably

beginners course you know we'll probably put an image inside the figure as well

put an image inside the figure as well as a figure caption so let's start with

as a figure caption so let's start with the image and now we have a source

the image and now we have a source attribute and an alt attribute so for

attribute and an alt attribute so for the source we're going to look in the

the source we're going to look in the image folder then put a slash and now vs

image folder then put a slash and now vs code gives us the options of what we

code gives us the options of what we have in here and we'll pick the profile

have in here and we'll pick the profile picture

picture now we'll also put the employee's name

now we'll also put the employee's name under the alt attribute so there's joe

under the alt attribute so there's joe coder but then if you also remember our

coder but then if you also remember our discussion in the images lesson we need

discussion in the images lesson we need to put a width and a height and this

to put a width and a height and this prevents a code layout shift or i should

prevents a code layout shift or i should say a page layout shift or i believe the

say a page layout shift or i believe the proper term is content layout shift but

proper term is content layout shift but as long as you get the concept that it

as long as you get the concept that it already reserves that space in the

already reserves that space in the browser essentially and i've got links

browser essentially and i've got links to that in the description with all of

to that in the description with all of the other resource links okay so we have

the other resource links okay so we have a width

a width equal

equal 500 and we're also going to have a

500 and we're also going to have a height equal to 500 there we go we need

height equal to 500 there we go we need that on all images now let's go ahead

that on all images now let's go ahead and add the fig

and add the fig caption

caption and this big caption is once again just

and this big caption is once again just going to be the employee's name so now

going to be the employee's name so now we have joe coder in the fig caption

we have joe coder in the fig caption and then underneath our figure is where

and then underneath our figure is where we want to put

we want to put actually not underneath just the figure

actually not underneath just the figure this fig caption goes in that's what i

this fig caption goes in that's what i was doing wrong the fig caption goes in

was doing wrong the fig caption goes in the figure there we go now underneath

the figure there we go now underneath the figure we're going to have a

the figure we're going to have a paragraph but inside the paragraph we

paragraph but inside the paragraph we want to use another element we haven't

want to use another element we haven't talked about before we talked about how

talked about before we talked about how to add quotes with html entities

to add quotes with html entities and unicode but we didn't talk about how

and unicode but we didn't talk about how to add quotes just with the quote

to add quotes just with the quote element itself so i'd like to add that

element itself so i'd like to add that to this series and hopefully your

to this series and hopefully your knowledge that you can also add quote

knowledge that you can also add quote symbols with the quote element so here

symbols with the quote element so here we put i code stuff this is

we put i code stuff this is basically joe's statement about what he

basically joe's statement about what he does very simplified but there we go for

does very simplified but there we go for joe okay now that we've got the profile

joe okay now that we've got the profile card html here i'm going to highlight

card html here i'm going to highlight this

this and i'm going to copy it down twice with

and i'm going to copy it down twice with shift alt and the down arrow so now we

shift alt and the down arrow so now we just need to make some changes for each

just need to make some changes for each one of these so now it will be profile 2

one of these so now it will be profile 2 we've changed both of those the images

we've changed both of those the images are all the same but the next one is

are all the same but the next one is going to be for matte designers so let's

going to be for matte designers so let's highlight everywhere we had joe coder

highlight everywhere we had joe coder here so one and then ctrl d to select

here so one and then ctrl d to select the next one we can put matte

the next one we can put matte designer

designer and imagine instead of i code stuff he's

and imagine instead of i code stuff he's going to say

going to say i design stuff

i design stuff and then the final employee profile

and then the final employee profile number three and really i can highlight

number three and really i can highlight one and press ctrl d to highlight it

one and press ctrl d to highlight it again and switch that to a three instead

again and switch that to a three instead of joe coder so i highlight that control

of joe coder so i highlight that control d again this is going to be jane

d again this is going to be jane devrel for short for developer relations

devrel for short for developer relations of course but we just put it as

of course but we just put it as somebody's last name for what they do

somebody's last name for what they do and after that

and after that here we want to put i

here we want to put i teach stuff again all over

teach stuff again all over simplifications of every job but we just

simplifications of every job but we just have a small example now i have prettier

have a small example now i have prettier enabled also and notice it just

enabled also and notice it just wrapped all of these attributes down to

wrapped all of these attributes down to different lines if you don't like that

different lines if you don't like that you don't have to use prettier or you

you don't have to use prettier or you can go to your vs code extensions and

can go to your vs code extensions and you can search for

you can search for prettier

prettier and then you can click on prettier and

and then you can click on prettier and install that and it does some auto

install that and it does some auto formatting and i happen to have it

formatting and i happen to have it enabled as i'm making this video so that

enabled as i'm making this video so that when i saved that is why you saw that

when i saved that is why you saw that auto formatting it put each one of these

auto formatting it put each one of these attributes on a separate line which is

attributes on a separate line which is fine too it still works out the same

fine too it still works out the same okay we're finished with our main

okay we're finished with our main content let's just move down to the

content let's just move down to the footer where we're not going to say

footer where we're not going to say footer here and we're not going to have

footer here and we're not going to have an h2 so let's just put a paragraph and

an h2 so let's just put a paragraph and inside this paragraph now we'll use an

inside this paragraph now we'll use an html entity we'll put and copy it's an

html entity we'll put and copy it's an ampersand

ampersand the word copy and then a semicolon and

the word copy and then a semicolon and that's the copyright symbol and then

that's the copyright symbol and then we'll just say acme co

we'll just say acme co if you're a fan of the old looney tunes

if you're a fan of the old looney tunes this is the company that made all of the

this is the company that made all of the stuff for the coyote and now we've

stuff for the coyote and now we've completed our html so let's shift over

completed our html so let's shift over to the css and then i'm going to press

to the css and then i'm going to press ctrl b to hide the file tree and then

ctrl b to hide the file tree and then i'm going to drag vs code over to the

i'm going to drag vs code over to the left half of the page and we'll look at

left half of the page and we'll look at our page here on the right now we can

our page here on the right now we can see we've added some content but it is

see we've added some content but it is not conforming at all to the size of

not conforming at all to the size of screen we have we need to make some

screen we have we need to make some changes in the css to apply this

changes in the css to apply this correctly to our page i'm going to press

correctly to our page i'm going to press alt z to wrap the code so we can see it

alt z to wrap the code so we can see it all on the window so if the line is too

all on the window so if the line is too long it wraps down to the next line such

long it wraps down to the next line such as this import from google fonts where

as this import from google fonts where we have the nanito font here we have our

we have the nanito font here we have our basic reset with a margin of zero

basic reset with a margin of zero padding of zero and box sizing border

padding of zero and box sizing border box and now i'm going to add to this

box and now i'm going to add to this reset something that we cover covered in

reset something that we cover covered in the image lesson

the image lesson was adding an image reset where we need

was adding an image reset where we need it to say display block and that removes

it to say display block and that removes the little space that is by default

the little space that is by default under images because they are inline

under images because they are inline elements

elements but then instead of width 100

but then instead of width 100 which you would often see here i just

which you would often see here i just want to say max width of 100

want to say max width of 100 and that means

and that means it will not overflow its container and

it will not overflow its container and at the same time we need to add a height

at the same time we need to add a height of auto now you'll see many say do not

of auto now you'll see many say do not add a height to images however

add a height to images however we're doing this because we added a

we're doing this because we added a height in the html to prevent that

height in the html to prevent that content layout shift and that is the new

content layout shift and that is the new approach so i recommend following that

approach so i recommend following that at this point and if you don't add the

at this point and if you don't add the height it will stick with the height

height it will stick with the height assigned in the html which would be the

assigned in the html which would be the original 500 pixels so this height auto

original 500 pixels so this height auto then will adjust according to the width

then will adjust according to the width as well so if we save that we have

as well so if we save that we have completed our basic reset now so we have

completed our basic reset now so we have our asterisk which selects all elements

our asterisk which selects all elements and then our image selection here for

and then our image selection here for the full reset we're applying and we can

the full reset we're applying and we can already see a change our images are

already see a change our images are actually now fitting into the design

actually now fitting into the design even though the design isn't the way we

even though the design isn't the way we want things yet it does look a little

want things yet it does look a little better than it did okay we'll scroll for

better than it did okay we'll scroll for some more room and i'm going to select

some more room and i'm going to select this general styles comment and i want

this general styles comment and i want to make another comment in between and

to make another comment in between and instead of general styles here i'm going

instead of general styles here i'm going to keep it all caps

to keep it all caps and i'll type

and i'll type utility

utility classes and after that i'm going to add

classes and after that i'm going to add a utility class and it's going to be

a utility class and it's going to be called no wrap and then inside the no

called no wrap and then inside the no wrap class we'll choose the white space

wrap class we'll choose the white space property it's white dash space and there

property it's white dash space and there we'll say no wrap i'm going to use this

we'll say no wrap i'm going to use this because jane has a last name that has a

because jane has a last name that has a space in it and we don't want her name

space in it and we don't want her name to break in half if the text wraps so

to break in half if the text wraps so let's go back to the html

let's go back to the html and hear jane's name in the fig caption

and hear jane's name in the fig caption and we'll put a span element with a

and we'll put a span element with a class

class of no wrap

of no wrap and now we still need to scroll over or

and now we still need to scroll over or i could wrap the code but since we're

i could wrap the code but since we're only doing this one thing i'll just

only doing this one thing i'll just scroll i'm going to collect the closing

scroll i'm going to collect the closing span that was automatically added and

span that was automatically added and put it after the end of her last name

put it after the end of her last name we'll save that you won't really notice

we'll save that you won't really notice a change but now if the text wraps it

a change but now if the text wraps it will not break her last name into okay

will not break her last name into okay back to the style css now we're going to

back to the style css now we're going to move on to the general styles section

move on to the general styles section and here we have the font shorthand

and here we have the font shorthand which adds a font size and a font family

which adds a font size and a font family all in one then we have a min height of

all in one then we have a min height of 100 viewport units we'll keep all of

100 viewport units we'll keep all of that and get rid of this blank line

that and get rid of this blank line we have a fallback background color

we have a fallback background color and then we have a background image set

and then we have a background image set with a radial gradient which starts in

with a radial gradient which starts in the center at white smoke and works its

the center at white smoke and works its way out to this darker color

way out to this darker color and then we have display flex and flex

and then we have display flex and flex direction column and that is what stacks

direction column and that is what stacks our header on top of the main on top of

our header on top of the main on top of the footer and keeps it in that order

the footer and keeps it in that order okay after that we have a section where

okay after that we have a section where we applied grid to the header nav main

we applied grid to the header nav main and footer and we're just going to

and footer and we're just going to delete that so if you are following

delete that so if you are following along with the starter code go ahead and

along with the starter code go ahead and remove that if you're following along

remove that if you're following along without it well you don't need to do

without it well you don't need to do anything there now we have the header

anything there now we have the header and the footer position sticky because

and the footer position sticky because we have the header at the top the footer

we have the header at the top the footer at the bottom and we want them to stay

at the bottom and we want them to stay there especially if the page scrolls and

there especially if the page scrolls and then a background color of a darker

then a background color of a darker color and then white smoke for the font

color and then white smoke for the font color but what else we would like to add

color but what else we would like to add here

here is a text dash align

is a text dash align and put center so we'll go ahead and add

and put center so we'll go ahead and add that so we can center this text okay

that so we can center this text okay just below we have the header with a top

just below we have the header with a top of zero and that keeps the header at the

of zero and that keeps the header at the top notice we also have a footer down

top notice we also have a footer down here with the bottom of zero

here with the bottom of zero in between we have the nav and the main

in between we have the nav and the main so for the nav we're going to keep the

so for the nav we're going to keep the background color of white we can remove

background color of white we can remove this color of black for the font color

this color of black for the font color the padding at one half rim that's fine

the padding at one half rim that's fine and we still want the two pixel border

and we still want the two pixel border on the bottom but now let's add some new

on the bottom but now let's add some new styles here let's put the font dash

styles here let's put the font dash weight and make that bolder

weight and make that bolder there we go bolder and then i'm going to

there we go bolder and then i'm going to put display flex here

put display flex here and then we'll say justify content and

and then we'll say justify content and we'll space dash

we'll space dash evenly to spread out

evenly to spread out the employee names in this nav menu and

the employee names in this nav menu and now you can see they are in bold and

now you can see they are in bold and they are spaced out evenly here in our

they are spaced out evenly here in our nav menu i'm going to scroll up just a

nav menu i'm going to scroll up just a little bit more and after the nav and

little bit more and after the nav and before the main we're going to style

before the main we're going to style these links so let's add

these links so let's add nav and then a for the anchor element

nav and then a for the anchor element and also nav

and also nav and then a with the visited pseudo class

and then a with the visited pseudo class for after a link has been visited and

for after a link has been visited and let's just shift that color back to the

let's just shift that color back to the black color that we had before so when

black color that we had before so when we save we should see those change to

we save we should see those change to black now now after the nav anchor and

black now now after the nav anchor and the anchor visited we also want to style

the anchor visited we also want to style nav anchor with a hover and nav

nav anchor with a hover and nav anchor with a focus

anchor with a focus and you might even want to add an active

and you might even want to add an active in there or you might like to see it

in there or you might like to see it flash a different color which is another

flash a different color which is another pseudo class you could do i'm not doing

pseudo class you could do i'm not doing that one right now but let's put a color

that one right now but let's put a color here

here and i'll go with hsla which you can also

and i'll go with hsla which you can also of course

of course pick by navigating through the visual

pick by navigating through the visual studio code color picker but i've

studio code color picker but i've already got this picked out it's zero

already got this picked out it's zero zero percent here

zero percent here 20

20 in the last one that's easy to remember

in the last one that's easy to remember and then 0.6 or essentially 60 percent

and then 0.6 or essentially 60 percent transparency and then i'll put the

transparency and then i'll put the semicolon there at the end and save and

semicolon there at the end and save and we're not going to see this in mobile

we're not going to see this in mobile mode because we're not really going to

mode because we're not really going to hover but as we get to a wider design if

hover but as we get to a wider design if we were to show that we could notice

we were to show that we could notice noticeably see that change as we hovered

noticeably see that change as we hovered over now if they had focus here we could

over now if they had focus here we could possibly see that so let me tab through

possibly see that so let me tab through there we see the lighter color as we tab

there we see the lighter color as we tab to each of the names so we can test that

to each of the names so we can test that in mobile view by tabbing through and

in mobile view by tabbing through and setting that focus

setting that focus okay we're ready to style the main

okay we're ready to style the main element now so i will scroll up for that

element now so i will scroll up for that we want to keep that flex grow so it

we want to keep that flex grow so it does fill out the page

does fill out the page no matter what but after flex grow we

no matter what but after flex grow we can add a few more things here so let's

can add a few more things here so let's put

put display of flex once again and then

display of flex once again and then we'll have a flex dash direction

we'll have a flex dash direction and we'll set that to column

and we'll set that to column and then we're going to align

and then we're going to align dash items and we'll set that to center

dash items and we'll set that to center now let's put a gap which is shorthand

now let's put a gap which is shorthand essentially for column and row gap this

essentially for column and row gap this is going to be 1.5 rim

is going to be 1.5 rim and a padding

and a padding of one rim and if we save we should see

of one rim and if we save we should see some changes there we do a little bit so

some changes there we do a little bit so the images aren't to the full edge of

the images aren't to the full edge of the screen

the screen and it moved a few things around for us

and it moved a few things around for us but we still have more changes to apply

but we still have more changes to apply directly to the cards themselves i'm

directly to the cards themselves i'm going to copy the comment we have here

going to copy the comment we have here for the small media query

for the small media query and i'm going to create a section for

and i'm going to create a section for the profile card class so here i could

the profile card class so here i could just switch this from small to

just switch this from small to profile card

profile card and underneath that we will start to

and underneath that we will start to style the card class so i'll scroll this

style the card class so i'll scroll this up as we continue to grow the styles and

up as we continue to grow the styles and here it would be a card class now inside

here it would be a card class now inside this class one thing i'm going to put is

this class one thing i'm going to put is scroll dash margin dash top and you

scroll dash margin dash top and you would have to experiment with this to

would have to experiment with this to get the right size i've played around

get the right size i've played around with a little bit and i believe eight

with a little bit and i believe eight rim is the right size what this does is

rim is the right size what this does is when we scroll to joe or matt or jane

when we scroll to joe or matt or jane when that is scrolled then it pushes

when that is scrolled then it pushes down from the top so it doesn't scroll

down from the top so it doesn't scroll underneath the header so you want to

underneath the header so you want to have a little margin on the top from the

have a little margin on the top from the scroll and this property will do that

scroll and this property will do that after that let's set a width and we're

after that let's set a width and we're going to use the min function now the

going to use the min function now the min function says hey at a minimum

min function says hey at a minimum use this width and we'll set it to 100

use this width and we'll set it to 100 so it can grow to 100 width of the

so it can grow to 100 width of the container but it also takes a max so it

container but it also takes a max so it says do not grow any larger than and

says do not grow any larger than and we'll put 350 pixels here so we'll fill

we'll put 350 pixels here so we'll fill out whatever the container is up to 350

out whatever the container is up to 350 pixels and we can specify all of that in

pixels and we can specify all of that in one line

one line for the width if we use the min function

for the width if we use the min function after that let's go ahead and put

after that let's go ahead and put another background color for this

another background color for this area of the page which will be the cards

area of the page which will be the cards i'm going to go with cbd

i'm going to go with cbd 5e1 that i'd previously picked up more

5e1 that i'd previously picked up more of a gray or a lighter gray

of a gray or a lighter gray and then we can go ahead and put a

and then we can go ahead and put a border and i'll go 2 pixels

border and i'll go 2 pixels solid black

solid black and then let's add a border dash

and then let's add a border dash radius and we'll go 15 pixels here let's

radius and we'll go 15 pixels here let's save that much and see the change

save that much and see the change there's some definite change there now

there's some definite change there now let's add a padding

let's add a padding of one rim all the way around and that

of one rim all the way around and that changed that up a little bit so now we

changed that up a little bit so now we have some space in there once again

have some space in there once again now let's add a display of flex for the

now let's add a display of flex for the card itself

card itself the flex direction

the flex direction is going to be column once again

is going to be column once again and then we'll also say align items

and then we'll also say align items there it is and we'll choose center and

there it is and we'll choose center and save now something you may notice right

save now something you may notice right away is the employee name didn't center

away is the employee name didn't center that's because it's inside the figure so

that's because it's inside the figure so this paragraph is outside and it became

this paragraph is outside and it became a flex item however the fig caption did

a flex item however the fig caption did not become a flex item because it's

not become a flex item because it's inside the figure which is the flex item

inside the figure which is the flex item so we'll still need to make a change for

so we'll still need to make a change for that so underneath the card now we can

that so underneath the card now we can select

select the card class and the figure element

the card class and the figure element within

within we'll also set it to flex

we'll also set it to flex and then we'll set the flex flow

and then we'll set the flex flow and that will be columns so that's

and that will be columns so that's column direction and then it's also the

column direction and then it's also the flex wrap property and we'll set it to

flex wrap property and we'll set it to no wrap and if we save we don't really

no wrap and if we save we don't really see a change at this point but it will

see a change at this point but it will be good to have that there

be good to have that there okay then let's set the card

okay then let's set the card image element itself and now we can say

image element itself and now we can say border and let's put a thick border on

border and let's put a thick border on that 5 pixels

that 5 pixels double

double and a flat black with the 333

and a flat black with the 333 hexadecimal code

hexadecimal code and then a border dash radius of 50

and then a border dash radius of 50 because it's a square so we can turn it

because it's a square so we can turn it into

into a circle and now finally before we move

a circle and now finally before we move on to media queries or different sizes

on to media queries or different sizes let's add the card

let's add the card fig caption styles

fig caption styles and for the fig caption we're going to

and for the fig caption we're going to say font dash weight and put bolder

say font dash weight and put bolder we'll put a font dash size of two rim

we'll put a font dash size of two rim a margin of one rim and now we need to

a margin of one rim and now we need to text align

text align center

center for that fig caption

for that fig caption and there we have joe's name in bold and

and there we have joe's name in bold and it's centered and really we're finished

it's centered and really we're finished with our smallest screen design before

with our smallest screen design before we get to our first media query so we've

we get to our first media query so we've applied all of the main

applied all of the main general styles and then the specific

general styles and then the specific card class styles

card class styles and now we have our design here there's

and now we have our design here there's one more thing i would like to add

one more thing i would like to add though because right now if i click on

though because right now if i click on joe

joe of course he's right there if i click on

of course he's right there if i click on jane it just jumps to her automatically

jane it just jumps to her automatically and if you remember i believe it was our

and if you remember i believe it was our flexbox lesson

flexbox lesson we allowed that to scroll and just have

we allowed that to scroll and just have a nice little feature and we need to add

a nice little feature and we need to add that actually under general styles but

that actually under general styles but it will be under the html element and

it will be under the html element and there we should put scroll behavior

there we should put scroll behavior there it is and we'll put smooth

there it is and we'll put smooth then we can just leave that all on one

then we can just leave that all on one line but i would like to put a space

line but i would like to put a space between the html and the body styles oh

between the html and the body styles oh and then of course using prettier it

and then of course using prettier it auto formatted for me so now with that

auto formatted for me so now with that scroll behavior of smooth and if i click

scroll behavior of smooth and if i click on joe

on joe it just scrolls to joe and we've got

it just scrolls to joe and we've got that scroll margin top set so he didn't

that scroll margin top set so he didn't stop underneath the header

stop underneath the header and then it scrolls to matt and it

and then it scrolls to matt and it scrolls to jane all like it should now

scrolls to jane all like it should now we're ready to go to our first media

we're ready to go to our first media query which is at

query which is at 576 pixels for the small media query

576 pixels for the small media query that we have here let's go ahead and

that we have here let's go ahead and delete the styles we were using before

delete the styles we were using before in the previous lesson that just

in the previous lesson that just displayed the changes for us and let's

displayed the changes for us and let's apply what we're actually going to

apply what we're actually going to change so we'll select the main element

change so we'll select the main element and here we're going to change the

and here we're going to change the justify content

justify content and it's going to be center and before

and it's going to be center and before if we look at the main element and what

if we look at the main element and what we had before this will overwrite that

we had before this will overwrite that property and we didn't have justify

property and we didn't have justify content here before so that's okay it

content here before so that's okay it will be set now when we get to this size

will be set now when we get to this size after justify content we're going to set

after justify content we're going to set the flex

the flex flow and it would be row

flow and it would be row and wrap so now we do want them to wrap

and wrap so now we do want them to wrap if they will take up more than the width

if they will take up more than the width that they have we'll have two rows of

that they have we'll have two rows of profile and finally let's switch the

profile and finally let's switch the padding to one rim

padding to one rim and then after the main element we're

and then after the main element we're going to adjust something about the card

going to adjust something about the card class as well and this will be the width

class as well and this will be the width and the min will still set at 100

and the min will still set at 100 percent but the max will now let go up

percent but the max will now let go up to 400 pixels and then let's rearrange

to 400 pixels and then let's rearrange the order so it'll be easier to see our

the order so it'll be easier to see our break point so here we'll take the card

break point so here we'll take the card and the last child which would be jane

and the last child which would be jane and we'll make her first by setting the

and we'll make her first by setting the order to minus one

order to minus one so now let's grab chrome i'll make it

so now let's grab chrome i'll make it full screen and we'll switch over to

full screen and we'll switch over to responsive and if we do that

responsive and if we do that we'll drag this down to where we're at

we'll drag this down to where we're at 576

576 right now we're still not at that break

right now we're still not at that break point so this was our mobile phone that

point so this was our mobile phone that we had and now we just passed 576 and

we had and now we just passed 576 and you can see jane's at the top so it just

you can see jane's at the top so it just got a little wider it doesn't change

got a little wider it doesn't change much but it changes changes a little bit

much but it changes changes a little bit we can make the cards a little bit

we can make the cards a little bit bigger

bigger just because

just because of where they're at and then if we get

of where they're at and then if we get bigger before the next break point well

bigger before the next break point well we hit it there so it didn't wrap yet

we hit it there so it didn't wrap yet but changing the width might allow them

but changing the width might allow them to wrap because we did switch that to

to wrap because we did switch that to allow wrap at this size okay i'll bring

allow wrap at this size okay i'll bring chrome back to the right

chrome back to the right and now this switch because our width

and now this switch because our width once again switched but we'll go ahead

once again switched but we'll go ahead and tackle the rest of the media queries

and tackle the rest of the media queries and then we'll see the changes at each

and then we'll see the changes at each breakpoint as we go so now for medium

breakpoint as we go so now for medium let's go ahead and remove these styles

let's go ahead and remove these styles as well

as well and here we'll put the nav

and here we'll put the nav and the first thing we'll do is set it

and the first thing we'll do is set it to display of none at this point because

to display of none at this point because we're at ipad size and they should all

we're at ipad size and they should all fit on the screen now without scrolling

fit on the screen now without scrolling the next would be a card once again

the next would be a card once again we'll put a width

we'll put a width and as you might guess we'll use the min

and as you might guess we'll use the min function we'll say one hundred percent

function we'll say one hundred percent again but now we'll make them smaller so

again but now we'll make them smaller so we definitely fit a couple side by side

we definitely fit a couple side by side and they all fit on the page so after

and they all fit on the page so after that let's select the card figure

that let's select the card figure element

element and there we'll set flex flow

and there we'll set flex flow and we'll say column dash

and we'll say column dash reverse so we'll notice a change there

reverse so we'll notice a change there as well

as well in the order that would appear and then

in the order that would appear and then we'll set the card

we'll set the card fig caption

and now let's set the margin to very very small here 0.1 em

very small here 0.1 em and then just zero

and then just zero and maybe we'll want to keep that maybe

and maybe we'll want to keep that maybe we want we can play around with that

we want we can play around with that then card and the paragraph for the card

then card and the paragraph for the card i'll leave that a lowercase

i'll leave that a lowercase and now i'll set that to margin dash top

and now i'll set that to margin dash top one rim

one rim and save let's see if we can make this

and save let's see if we can make this any larger here so we're at 594 we made

any larger here so we're at 594 we made our first break point

our first break point but we're not making it to the next one

but we're not making it to the next one unless we make vs code a little bit

unless we make vs code a little bit bigger again so we'll drag this over and

bigger again so we'll drag this over and now as we get a little larger

now as we get a little larger there we go now let's switch this to the

there we go now let's switch this to the ipad size itself and you can see they

ipad size itself and you can see they all fit on the page for the ipad and if

all fit on the page for the ipad and if we get smaller than that we're somewhere

we get smaller than that we're somewhere in between maybe a surface duo there

in between maybe a surface duo there we're at 540 so we didn't hit the first

we're at 540 so we didn't hit the first break point yet so it's just kind of a

break point yet so it's just kind of a weird spot in between where we are there

weird spot in between where we are there but it does work it's just a little bit

but it does work it's just a little bit larger view

larger view of the mobile view

of the mobile view as we look at it that way so now we've

as we look at it that way so now we've covered our first two break points as

covered our first two break points as well as our starting point let's go

well as our starting point let's go ahead and add the third at the large

ahead and add the third at the large stop and that's 992 pixels let's delete

stop and that's 992 pixels let's delete what we had here for the body from the

what we had here for the body from the last tutorial and once again select the

last tutorial and once again select the card class

card class we'll select the width again and we'll

we'll select the width again and we'll use the min function we'll say 100

use the min function we'll say 100 percent

percent and then 400 pixels here and if you

and then 400 pixels here and if you remember we made it smaller so it would

remember we made it smaller so it would all fit on an ipad we were at 325 pixels

all fit on an ipad we were at 325 pixels so even though previously before that we

so even though previously before that we were at 400 pixels we need to switch it

were at 400 pixels we need to switch it back because it hits that break point in

back because it hits that break point in between okay after the card selection

between okay after the card selection there let's switch the order around

there let's switch the order around again so we once again know this has

again so we once again know this has changed so we'll say card and now we'll

changed so we'll say card and now we'll say nth child and we'll select the

say nth child and we'll select the second child element and we'll give that

second child element and we'll give that an order of minus one and it should

an order of minus one and it should switch the order for us again those are

switch the order for us again those are the only changes we're going to make

the only changes we're going to make there so let's go on to the xl size as

there so let's go on to the xl size as well

well and we'll select what we have there and

and we'll select what we have there and delete it from the previous tutorial

delete it from the previous tutorial we'll select the card class

we'll select the card class now we'll set width again use the min

now we'll set width again use the min function but now i'm going to use a

function but now i'm going to use a function inside of the min function and

function inside of the min function and that is the calc function

that is the calc function calc function is great because it lets

calc function is great because it lets us mix

us mix other units together or different units

other units together or different units together i should say so i'm going to

together i should say so i'm going to set the width of each card to 33 percent

set the width of each card to 33 percent minus

minus one rim

one rim and then we'll have a max of 500 pixels

and then we'll have a max of 500 pixels because that is the size the images are

because that is the size the images are and we don't want the images to get any

and we don't want the images to get any larger than their original size or

larger than their original size or they'll start to get blurry so we'll

they'll start to get blurry so we'll leave that as the max but this will

leave that as the max but this will allow them to grow dynamically with a

allow them to grow dynamically with a percentage value so let's stop there and

percentage value so let's stop there and save our file i'll once again take this

save our file i'll once again take this to the larger screen now something else

to the larger screen now something else we can do is click the three dots here

we can do is click the three dots here and say show media queries so now we can

and say show media queries so now we can see our media queries here so there's

see our media queries here so there's 576

576 768 we're only seeing the width we're

768 we're only seeing the width we're not seeing a good height

not seeing a good height 992 and finally

992 and finally 1200. so now let's switch this to some

1200. so now let's switch this to some sizes we might normally see such as 1920

sizes we might normally see such as 1920 by 1080

by 1080 and then i'll just

and then i'll just make this smaller and smaller as we go

make this smaller and smaller as we go notice we have got joe's name and jane's

notice we have got joe's name and jane's name and matt's name all on top of their

name and matt's name all on top of their cards now because of that column reverse

cards now because of that column reverse that we did so that was a nice change to

that we did so that was a nice change to let us know we have made something

let us know we have made something different now this is using the

different now this is using the percentage size that we used with that

percentage size that we used with that calc function so notice how they just

calc function so notice how they just gradually get smaller

gradually get smaller until we're at the next break point

until we're at the next break point which is 1200

which is 1200 there we go now this is at 50 percent so

there we go now this is at 50 percent so it looks a little tiny here but overall

it looks a little tiny here but overall we're squeezing it down because of these

we're squeezing it down because of these two but overall we can see what is

two but overall we can see what is happening and so now they're stacked on

happening and so now they're stacked on top of each other with two rows

top of each other with two rows and now they're stacked on top of each

and now they're stacked on top of each other again and we're kind of in that

other again and we're kind of in that larger ipad size getting a little

larger ipad size getting a little smaller

smaller now we're at that larger mobile size and

now we're at that larger mobile size and now we're down to finally underneath 576

now we're down to finally underneath 576 which becomes definitely a mobile device

which becomes definitely a mobile device so

so we really have identified several

we really have identified several devices or sizes along the way that we

devices or sizes along the way that we could target and you could specifically

could target and you could specifically target more than that one we haven't

target more than that one we haven't talked about yet though is taking

talked about yet though is taking something like an iphone i'll go ahead

something like an iphone i'll go ahead and remove these media queries now i'll

and remove these media queries now i'll hide them

hide them and turning it horizontal right now

and turning it horizontal right now this isn't going to work so let's make

this isn't going to work so let's make some changes for this as well i'll leave

some changes for this as well i'll leave the phone like this

the phone like this and drag vs code back and we can make

and drag vs code back and we can make some changes for our final break point

some changes for our final break point which is the mobile device landscape

which is the mobile device landscape scrolling all the way up here let's look

scrolling all the way up here let's look at this break point you can see we're

at this break point you can see we're selecting a max height of 425 pixels

selecting a max height of 425 pixels and a minimum aspect ratio of 7 to 4 so

and a minimum aspect ratio of 7 to 4 so the width would be 7 units and the

the width would be 7 units and the height would be 4 in comparison so let's

height would be 4 in comparison so let's select everything we have here now

select everything we have here now except this display none for the nav we

except this display none for the nav we want to keep that

want to keep that and let's go ahead and put an h1 here

and let's go ahead and put an h1 here with a font dash size

with a font dash size 1.5 rim

1.5 rim and we can leave that all on one line

and we can leave that all on one line but when we save it will get formatted

but when we save it will get formatted if we're using prettier like i am that

if we're using prettier like i am that prettier code extension or vs code

prettier code extension or vs code extension now i'll go ahead and put some

extension now i'll go ahead and put some styles on the main element we'll go with

styles on the main element we'll go with flex flow which will set the direction

flex flow which will set the direction to row

to row and then no wrap so we should have only

and then no wrap so we should have only one row

one row then justify content we'll set this to

then justify content we'll set this to space

space evenly

evenly and after that let's align items

and after that let's align items and let's set this to stretch to give

and let's set this to stretch to give them all the same height in case the

them all the same height in case the content would make them different

content would make them different heights

heights and then we can go ahead and style the

and then we can go ahead and style the card just a little bit so

card just a little bit so under here i'll type the card class

under here i'll type the card class and i'm going to put a width

and i'm going to put a width use the min function

use the min function and now instead of 100 width right away

and now instead of 100 width right away i'll use that calc function again we'll

i'll use that calc function again we'll say 33

say 33 this time minus

this time minus 0.25 rim instead of one rim

0.25 rim instead of one rim and we'll put the max for any card at

and we'll put the max for any card at 200 pixels

200 pixels okay then we can set something more

okay then we can set something more specific on the card let's do the fig

specific on the card let's do the fig caption

looks like i need to scroll up for some room here so i'll do that as well

room here so i'll do that as well and for the fig caption let's put the

and for the fig caption let's put the font size

font size 1.25 round

1.25 round and then let's go ahead and select the

and then let's go ahead and select the paragraph below

paragraph below and we could put these on the same line

and we could put these on the same line actually so let's just go ahead and put

actually so let's just go ahead and put a comma here

a comma here and put

and put dot card paragraph and we're going to go

dot card paragraph and we're going to go ahead and set that same style on both

ahead and set that same style on both and save

and save okay now that we've made those changes

okay now that we've made those changes let's drag this back over

let's drag this back over and then we'll turn our phone

and then we'll turn our phone horizontally

horizontally and we fit all of the cards right in

and we fit all of the cards right in here together which is nice let's see if

here together which is nice let's see if we could do that in a different size as

we could do that in a different size as well maybe the iphone plus

well maybe the iphone plus yes it works as well too it may not work

yes it works as well too it may not work as well in the smallest screen i have a

as well in the smallest screen i have a feeling these will be just a little

feeling these will be just a little taller than we would want probably let's

taller than we would want probably let's see

see yeah they're a little taller but it's

yeah they're a little taller but it's not too bad you might expect to have to

not too bad you might expect to have to scroll when you have one of the smaller

scroll when you have one of the smaller phones so that wouldn't be

phones so that wouldn't be really a breaking thing to me but you

really a breaking thing to me but you could work with that if you really

could work with that if you really wanted to target this specific device

wanted to target this specific device but overall for most phones i believe

but overall for most phones i believe this would work well in the horizontal

this would work well in the horizontal mode so there's some nice changes you

mode so there's some nice changes you can go back through and tweak a few

can go back through and tweak a few things one thing i want to check is that

things one thing i want to check is that very very small margin that we set and

very very small margin that we set and let me find what size that was on again

let me find what size that was on again because i wondered if we even needed

because i wondered if we even needed that or if i was just playing around

that or if i was just playing around with that back when i was working with

with that back when i was working with the code that is such a small margin on

the code that is such a small margin on the top and bottom and this is at the

the top and bottom and this is at the ipad size so let's see what it looks

ipad size so let's see what it looks like if i comment this out i'll select

like if i comment this out i'll select it all press shift alt and the letter a

it all press shift alt and the letter a comments out that code

comments out that code bring this over so i can switch to an

bring this over so i can switch to an ipad

ipad and there's the ipad size

and there's the ipad size and let's make it a little bit bigger so

and let's make it a little bit bigger so we can see everything there we go yeah

we can see everything there we go yeah it looks good without it so i would

it looks good without it so i would probably remove that as well and i'll

probably remove that as well and i'll drag this back over

drag this back over and then we'll just take this out of the

and then we'll just take this out of the code

code and the rest i think i'll leave as is

and the rest i think i'll leave as is and of course you can play around with

and of course you can play around with this i do not do this perfectly myself

this i do not do this perfectly myself everything is trial and error basically

everything is trial and error basically as you go so mess around with this code

as you go so mess around with this code don't accept it just the way it is see

don't accept it just the way it is see what you can change what you like better

what you can change what you like better one way or the other

one way or the other let's move on to css pseudo selectors

let's move on to css pseudo selectors pseudo selectors include both pseudo

pseudo selectors include both pseudo classes and pseudo elements so the

classes and pseudo elements so the obvious question is what is the

obvious question is what is the difference between a pseudo class and a

difference between a pseudo class and a pseudo element well a pseudo class is a

pseudo element well a pseudo class is a selector that selects elements that are

selector that selects elements that are in a specific state

in a specific state so if we look at our starter code and

so if we look at our starter code and this is the code that wrapped up the

this is the code that wrapped up the mini project in the last lesson so we're

mini project in the last lesson so we're just starting with that and if we scroll

just starting with that and if we scroll down to the links we can see some of

down to the links we can see some of these different states we're styling for

these different states we're styling for the focus state

the focus state the hover state the visited state and

the hover state the visited state and then just a basic link which we actually

then just a basic link which we actually could have added on

could have added on the pseudo class link here as well if we

the pseudo class link here as well if we wanted to because that is the unvisited

wanted to because that is the unvisited link so there's different states there

link so there's different states there there's even an active one that we could

there's even an active one that we could have styled

have styled and for all of those those are different

and for all of those those are different specific states of the element so a

specific states of the element so a pseudo class now a pseudo element is

pseudo class now a pseudo element is similar but they act like you've added a

similar but they act like you've added a new html element into your document and

new html element into your document and also pseudo elements use two colons

also pseudo elements use two colons instead of the one we see here with

instead of the one we see here with pseudo classes so we'll look at those as

pseudo classes so we'll look at those as well but we're going to look at pseudo

well but we're going to look at pseudo classes first and again this starter

classes first and again this starter code is what we have from the previous

code is what we have from the previous tutorial the mini project that created

tutorial the mini project that created this small staff page of three employees

this small staff page of three employees for the acme co that we see here and

for the acme co that we see here and created profile cards for each one so

created profile cards for each one so that link will be available in the

that link will be available in the description if you want to download the

description if you want to download the starter source code we're not really

starter source code we're not really going to change the project for the

going to change the project for the better today i'm just going to use it

better today i'm just going to use it for some examples that you may not want

for some examples that you may not want to keep in the project at all but i'm

to keep in the project at all but i'm going to show you how pseudo classes and

going to show you how pseudo classes and pseudo elements work now we're already

pseudo elements work now we're already familiar with the different pseudo

familiar with the different pseudo classes here that we've applied to links

classes here that we've applied to links and we've looked at a couple of other

and we've looked at a couple of other pseudo classes along the way during this

pseudo classes along the way during this css for beginners tutorial series one

css for beginners tutorial series one other one that we could add here is

other one that we could add here is active so let's go ahead and put a nav

active so let's go ahead and put a nav and an anchor

and an anchor and then we'll put

and then we'll put active

active and let's just style this so we can

and let's just style this so we can really tell the difference so we'll say

really tell the difference so we'll say red so it'll just really stand out but

red so it'll just really stand out but this should be when we hold down on the

this should be when we hold down on the button on the link and then it turns red

button on the link and then it turns red i have my mouse button for the click

i have my mouse button for the click held down right now when i let go of

held down right now when i let go of course it goes ahead and completes and

course it goes ahead and completes and scrolls to the id for the employee that

scrolls to the id for the employee that we expect it to but that is the active

we expect it to but that is the active state now let's refactor a couple of

state now let's refactor a couple of these for the better with things we can

these for the better with things we can learn about new pseudo classes today so

learn about new pseudo classes today so notice here we have a descendant

notice here we have a descendant selector and that means we have a nav

selector and that means we have a nav and then we're selecting any anchor

and then we're selecting any anchor element inside the nav element and then

element inside the nav element and then we're applying the state but then when

we're applying the state but then when we choose focus besides hover we have to

we choose focus besides hover we have to say nav a again well we can stop some of

say nav a again well we can stop some of that by using the is pseudo class so if

that by using the is pseudo class so if i put is here

i put is here and then put a parenthesis after it then

and then put a parenthesis after it then i can eliminate repeating this nav

i can eliminate repeating this nav element here

element here and then just once again say anchor

and then just once again say anchor focus so we're just putting the one nav

focus so we're just putting the one nav but now we're saying inside of that if

but now we're saying inside of that if it is an anchor with hover or anchor

it is an anchor with hover or anchor with focus

with focus then style accordingly so this should

then style accordingly so this should give us the same results and as i mouse

give us the same results and as i mouse over here on our page we see that it

over here on our page we see that it still works and we've made our code a

still works and we've made our code a little drier and dry is an acronym for

little drier and dry is an acronym for do not repeat

do not repeat so we managed to write just a little

so we managed to write just a little less code and get the same result by

less code and get the same result by using the is pseudo selector now

using the is pseudo selector now sometimes we can discover a pseudo

sometimes we can discover a pseudo selector and again these are pseudo

selector and again these are pseudo classes i say pseudo selector

classes i say pseudo selector synonymously but we are making a

synonymously but we are making a selection but make no mistake we are

selection but make no mistake we are using pseudo classes right now

using pseudo classes right now sometimes we can discover a pseudo class

sometimes we can discover a pseudo class that will also save us some time and

that will also save us some time and that is the case here besides link and

that is the case here besides link and visited where we're styling both let me

visited where we're styling both let me remove all of this

remove all of this and then i can just put any dash

and then i can just put any dash link

link and the any link pseudo class selects

and the any link pseudo class selects both the link and the visited pseudo

both the link and the visited pseudo class so now when i save we should once

class so now when i save we should once again have the same results now this is

again have the same results now this is unvisited or if we click jane now we

unvisited or if we click jane now we visited jane and she still has the

visited jane and she still has the styling that we expect that we had

styling that we expect that we had previously in the project but we have

previously in the project but we have once again made our code just a little

once again made our code just a little drier by learning more about pseudo

drier by learning more about pseudo classes now just for an example i'm

classes now just for an example i'm going to scroll up where we have our

going to scroll up where we have our header and footer right here and we're

header and footer right here and we're choosing both of those in a list of

choosing both of those in a list of elements essentially to apply the same

elements essentially to apply the same styles now i will not make this code

styles now i will not make this code drier by applying this but i just want

drier by applying this but i just want to show the example we could use is here

to show the example we could use is here and then list these elements inside

and then list these elements inside and

and there's really no reason to do it other

there's really no reason to do it other than this example right now but i do

than this example right now but i do want to show the difference so i'm going

want to show the difference so i'm going to go ahead and save right now this will

to go ahead and save right now this will be the same as what we had before but

be the same as what we had before but we've just added this extra code but

we've just added this extra code but notice when i mouse over here in visual

notice when i mouse over here in visual studio code we get the selector

studio code we get the selector specificity and it is displayed it's 0 0

specificity and it is displayed it's 0 0 1 so it's not high specificity we could

1 so it's not high specificity we could override it

override it just in this header area here we can

just in this header area here we can overwrite what's on the header or we

overwrite what's on the header or we have a footer area down here just a

have a footer area down here just a little bit lower and we could put

little bit lower and we could put something there and it would overwrite

something there and it would overwrite what we have in here

what we have in here but if we put something else in here

but if we put something else in here like a class and i'll temporarily do

like a class and i'll temporarily do this it won't make our project look good

this it won't make our project look good but now we have put a class

but now we have put a class inside the is as well

inside the is as well and notice our specificity selector is

and notice our specificity selector is going to pop up and it's changed instead

going to pop up and it's changed instead of zero zero one now it's a whole level

of zero zero one now it's a whole level higher it is zero one zero so it has

higher it is zero one zero so it has higher specificity and now if i were to

higher specificity and now if i were to put a different color here in the header

put a different color here in the header for example so i will go ahead and do

for example so i will go ahead and do that

that and i'll just give it red so we would

and i'll just give it red so we would definitely notice and save notice the

definitely notice and save notice the text in our header is still the white

text in our header is still the white smoke color it is not red and that's

smoke color it is not red and that's because this has a higher specificity

because this has a higher specificity even though it comes first and it's not

even though it comes first and it's not down here in the cascade

down here in the cascade the higher specificity keeps these

the higher specificity keeps these styles however if i remove this class

styles however if i remove this class and it goes back to the lower

and it goes back to the lower specificity

specificity now it turned red so that's something to

now it turned red so that's something to note about using is it's going to adopt

note about using is it's going to adopt whatever has the highest specificity

whatever has the highest specificity within its parentheses now one other

within its parentheses now one other thing we can do let me put card back

thing we can do let me put card back is instead of using is

is instead of using is there is another pseudo class that works

there is another pseudo class that works almost identically and it's where it

almost identically and it's where it will accomplish the same thing except

will accomplish the same thing except it does not have any specificity so

it does not have any specificity so notice when i mouse over it the

notice when i mouse over it the specificity is 0 0 0 or basically a lack

specificity is 0 0 0 or basically a lack thereof it does not have any so you can

thereof it does not have any so you can overwrite whatever is inside the where

overwrite whatever is inside the where pseudo class so that's also worth

pseudo class so that's also worth knowing so i just wanted to use this to

knowing so i just wanted to use this to demonstrate we're not really going to

demonstrate we're not really going to leave these here

leave these here for your finished code but just remember

for your finished code but just remember those tips about the specificity when it

those tips about the specificity when it comes to is

comes to is and where pseudo classes now i'm going

and where pseudo classes now i'm going to scroll down to the card class so we

to scroll down to the card class so we have that right here is the profile card

have that right here is the profile card right underneath the card class

right underneath the card class i'm going to type card once again and

i'm going to type card once again and then i'm going to give it

then i'm going to give it a target pseudo class inside the target

a target pseudo class inside the target pseudo class i'm going to say border 2

pseudo class i'm going to say border 2 pixels

pixels solid and give this rebecca purple

solid and give this rebecca purple and save now let's see what this does

and save now let's see what this does you can see jane has a purple border now

you can see jane has a purple border now two pixels solid purple all around her

two pixels solid purple all around her profile card

profile card she is the last profile card that we

she is the last profile card that we selected here so if i choose joe instead

selected here so if i choose joe instead now he has the purple border because he

now he has the purple border because he was the target if i scroll back up jane

was the target if i scroll back up jane no longer has that purple border so what

no longer has that purple border so what we're saying with the target pseudo

we're saying with the target pseudo class is whoever is selected whoever is

class is whoever is selected whoever is the target

the target of our selection will have that purple

of our selection will have that purple border and now matt has that purple

border and now matt has that purple border so that could be a useful class

border so that could be a useful class if you really want to highlight whatever

if you really want to highlight whatever was selected and if you remember in our

was selected and if you remember in our html how we're doing that is using the

html how we're doing that is using the anchor tag but then it is a page link

anchor tag but then it is a page link it's not going to a different page it

it's not going to a different page it just has the pound sign or the hashtag

just has the pound sign or the hashtag if you will for profile 1 or profile 2

if you will for profile 1 or profile 2 or profile 3 that matches up with the

or profile 3 that matches up with the ids

ids of these cards which are in article

of these cards which are in article elements so there is the id of profile

elements so there is the id of profile one and then if we come down to the next

one and then if we come down to the next article profile two

article profile two and so on so these are just on page

and so on so these are just on page links with anchors and whoever is the

links with anchors and whoever is the target

target gets that outline now i'm going to

gets that outline now i'm going to scroll down just a little bit further

scroll down just a little bit further under the card class once again and then

under the card class once again and then the image element so after that let's

the image element so after that let's add another card

add another card and then let's add an image and first

and then let's add an image and first let's go ahead and just put in

let's go ahead and just put in alt now if you haven't seen this yet

alt now if you haven't seen this yet this means i'm selecting

this means i'm selecting any image with the alt attribute so we

any image with the alt attribute so we can base our selectors on attributes

can base our selectors on attributes inside this i'm going to once again add

inside this i'm going to once again add a border let's make this really big so

a border let's make this really big so 10 pixels

10 pixels solid red and if i save we should see

solid red and if i save we should see that around all of our images because

that around all of our images because they do all have alt tags or alt

they do all have alt tags or alt attributes added to their image tag

attributes added to their image tag actually is how i should say that so

actually is how i should say that so what if we wanted to say

what if we wanted to say just let us know which images we forgot

just let us know which images we forgot to put an alt attribute on well we can

to put an alt attribute on well we can do that with the not pseudo class so

do that with the not pseudo class so after image

after image we'll say not and then wrap the

we'll say not and then wrap the attribute

attribute in parentheses so this would actually

in parentheses so this would actually serve to help us check our page to make

serve to help us check our page to make sure we've remembered to add alt

sure we've remembered to add alt attributes to each image so now

attributes to each image so now none of the images have the red border

none of the images have the red border because we did provide alt attributes

because we did provide alt attributes for all of them so let's just go here

for all of them so let's just go here temporarily

temporarily to our html

to our html and let's remove the alt attribute from

and let's remove the alt attribute from one of these images so here we have

one of these images so here we have joe's alt attribute we'll just go ahead

joe's alt attribute we'll just go ahead and delete

and delete and save and now if we look at our page

and save and now if we look at our page joe has the red border because we forgot

joe has the red border because we forgot to put an alt attribute there for him

to put an alt attribute there for him now i'm going of course fix that with

now i'm going of course fix that with ctrl z

ctrl z put that back and save and that fixes

put that back and save and that fixes our page but that could be very useful

our page but that could be very useful and you could use not the pseudo class

and you could use not the pseudo class not for other things as well remember

not for other things as well remember it's going to select whatever does not

it's going to select whatever does not have what you specify and now let's look

have what you specify and now let's look at the nth child selector which we have

at the nth child selector which we have used a little bit in previous tutorials

used a little bit in previous tutorials so we'll say card and then no space

so we'll say card and then no space we'll say in

we'll say in child now this can be confusing and it's

child now this can be confusing and it's somewhat because of the way it's worded

somewhat because of the way it's worded you would think we were looking for the

you would think we were looking for the child

child of the card class but that's not really

of the card class but that's not really true we're going to be selecting the

true we're going to be selecting the cards themselves so if we say nth child

cards themselves so if we say nth child and the second one we would be selecting

and the second one we would be selecting the second profile card so now let's go

the second profile card so now let's go ahead and change the background color so

ahead and change the background color so we can really see which card we've

we can really see which card we've selected and i'll say papaya whip

selected and i'll say papaya whip and we'll save

and we'll save and

and here's the thing to consider now we've

here's the thing to consider now we've got matt

got matt selected but he's the last profile card

selected but he's the last profile card and we said we wanted the second but if

and we said we wanted the second but if you remember from the previous lesson

you remember from the previous lesson we've used media queries to rearrange

we've used media queries to rearrange the order of our cards however if we

the order of our cards however if we look back at the html

look back at the html matt truly is the second card in our

matt truly is the second card in our html so this nth child selector is going

html so this nth child selector is going to be based on the actual original order

to be based on the actual original order within the html and maybe not what we

within the html and maybe not what we see on the page if we have reordered

see on the page if we have reordered the order that was in the html with

the order that was in the html with media queries or even without media

media queries or even without media queries we could go ahead and reorder

queries we could go ahead and reorder them if we wanted to but the nth child

them if we wanted to but the nth child will not be based on that now we could

will not be based on that now we could put in other selectors here too so let's

put in other selectors here too so let's put in odd and save

put in odd and save and now notice

and now notice matt was the second child so the first

matt was the second child so the first and the third are odd and that would be

and the third are odd and that would be jane and joe

jane and joe likewise we could put in even instead

likewise we could put in even instead and it will probably select matt once

and it will probably select matt once again and not select jane and joe

again and not select jane and joe because matt is the second which is even

because matt is the second which is even and of course joe and jane first and

and of course joe and jane first and third are odd so i think you get the

third are odd so i think you get the idea for pseudo classes so now let's

idea for pseudo classes so now let's move on to some pseudo elements that we

move on to some pseudo elements that we can add right underneath the card class

can add right underneath the card class and the fig caption element and this

and the fig caption element and this would be a descendant selector so we've

would be a descendant selector so we've got the card class and the descendants

got the card class and the descendants are any fig captions within the card

are any fig captions within the card class so now after that let's specify

class so now after that let's specify card and fig caption once again

card and fig caption once again but now we'll use two colons and then

but now we'll use two colons and then let's say

let's say after and what we'll do after is create

after and what we'll do after is create a pseudo element that will have content

a pseudo element that will have content and then we can specify what content

and then we can specify what content goes inside let's just put hello to

goes inside let's just put hello to start with

start with and after that well i'll just leave it

and after that well i'll just leave it at that to begin with here i need to get

at that to begin with here i need to get rid of that extra quote there we go and

rid of that extra quote there we go and save and now let's look at our page so

save and now let's look at our page so now we've got jane devrell hello it says

now we've got jane devrell hello it says hello right at the end

hello right at the end after joe's last name coder hello is

after joe's last name coder hello is immediately after so maybe we should put

immediately after so maybe we should put a space and we could highlight that and

a space and we could highlight that and now we'll see the hello at the end of

now we'll see the hello at the end of each last name a little easier but it

each last name a little easier but it was added to each one of the fig

was added to each one of the fig captions now we could notice something

captions now we could notice something else about this too i can select all

else about this too i can select all that text but i can't select the text

that text but i can't select the text that here that is our pseudo element

that here that is our pseudo element content again it's not really an element

content again it's not really an element it was just added in

it was just added in with this after pseudo element selector

with this after pseudo element selector so now instead of hello i want to go

so now instead of hello i want to go ahead and remove that and i'm going to

ahead and remove that and i'm going to put in an emoji just some sparkles here

put in an emoji just some sparkles here and then

and then i'll put display

i'll put display and block so this will be on its own

and block so this will be on its own line and save and now we've got an emoji

line and save and now we've got an emoji following each name on each of our

following each name on each of our profile cards and likewise i could

profile cards and likewise i could switch this to before and what it would

switch this to before and what it would normally be on the left side or before

normally be on the left side or before their first name but now because it's a

their first name but now because it's a block display

block display it's above each name so i'm going to

it's above each name so i'm going to scroll for a little more room and let's

scroll for a little more room and let's add some more new content here for our

add some more new content here for our fig caption as well actually for our

fig caption as well actually for our paragraph now so let's say card

paragraph now so let's say card and then the paragraph

and then the paragraph and we'll select the before pseudo

and we'll select the before pseudo element

element and for content here we can type a

and for content here we can type a specific value say open dash quote

specific value say open dash quote and now if i save this

and now if i save this we will get a double quote added to the

we will get a double quote added to the left as we see here it's actually

left as we see here it's actually probably a single quote that's added

probably a single quote that's added after our other single quote but we can

after our other single quote but we can also add a close quote so i'm just going

also add a close quote so i'm just going to

to copy this down with shift alt and the

copy this down with shift alt and the down arrow

down arrow and i'll switch this to an after

and instead of open quote we'll have close quote

close quote and save and now they've turned into

and save and now they've turned into double quotes and they're wrapping

double quotes and they're wrapping around the single quotes that we already

around the single quotes that we already had but we've added quotes here without

had but we've added quotes here without having that quote element that we were

having that quote element that we were relying on here inside of our html

relying on here inside of our html notice inside of each paragraph we have

notice inside of each paragraph we have the q element which is a quote that we

the q element which is a quote that we were using for quotes so we could remove

were using for quotes so we could remove those because one handy thing here is we

those because one handy thing here is we can style these however we want to so

can style these however we want to so let's look at an example of that we

let's look at an example of that we could say font dash size i'll put it 3

could say font dash size i'll put it 3 em so that's going to rely on whatever

em so that's going to rely on whatever the font size is of the paragraph

the font size is of the paragraph element to get the em size

element to get the em size and then let's say

and then let's say position

position absolute if you remember when we learned

absolute if you remember when we learned about positions

about positions we'll say top and we can make this a

we'll say top and we can make this a minus so minus

minus so minus 0.25 em

0.25 em and then left

and then left minus 0.5 em

minus 0.5 em now something else to remember about

now something else to remember about position absolute it always needs its

position absolute it always needs its parent to have position relative so here

parent to have position relative so here we need to select the paragraph

we need to select the paragraph itself

itself and give it position

and give it position relative

relative we can save that and notice our quote on

we can save that and notice our quote on the left got a lot larger so we were

the left got a lot larger so we were able to really style this quote

able to really style this quote separately

separately from the rest of the paragraph now let's

from the rest of the paragraph now let's do something similar for the after quote

do something similar for the after quote so once again

so once again give it a font size of 3 em

give it a font size of 3 em position

position absolute

absolute give it the same top as well so that

give it the same top as well so that would be minus 0.25 em

would be minus 0.25 em but now we'll say right

but now we'll say right minus 0.5 em and save and now we have

minus 0.5 em and save and now we have matching closing quotes on the right

matching closing quotes on the right again we're adding these as pseudo

again we're adding these as pseudo elements so let's go back to our html

elements so let's go back to our html quickly and remove those other quotes

quickly and remove those other quotes that we had so that would be

that we had so that would be the q element i'll highlight that press

the q element i'll highlight that press ctrl d twice to get the other two

ctrl d twice to get the other two hit backspace and now i'll select the

hit backspace and now i'll select the closing cue

closing cue ctrl d twice to get the other two

ctrl d twice to get the other two backspace and save so we removed those

backspace and save so we removed those other quotes that we had and now we have

other quotes that we had and now we have our big quotes in place of those and we

our big quotes in place of those and we can see they've applied to each one of

can see they've applied to each one of the profile cards with our pseudo

the profile cards with our pseudo elements just a couple of more pseudo

elements just a couple of more pseudo elements to look at before we're

elements to look at before we're finished so for the fig caption let's

finished so for the fig caption let's once again

once again say card and then fig

say card and then fig caption

caption two colons and now let's say first dash

two colons and now let's say first dash letter

letter and here inside of this we'll say font

and here inside of this we'll say font dash size

dash size once again go to

once again go to three let's say rem here because we're

three let's say rem here because we're applying it directly to that letter

applying it directly to that letter and we should get a larger letter to

and we should get a larger letter to start out with but we don't

start out with but we don't and why don't we that's because

and why don't we that's because this got larger itself let me go ahead

this got larger itself let me go ahead and comment that out and save and now

and comment that out and save and now notice our emoji is back to a smaller

notice our emoji is back to a smaller size so this first letter actually

size so this first letter actually applied to the emoji so let me uncomment

applied to the emoji so let me uncomment that and save and you'll see the emoji

that and save and you'll see the emoji get larger again so what happens if we

get larger again so what happens if we put this

put this after instead of before

after instead of before now the first letter of each name got

now the first letter of each name got larger so that's something to consider

larger so that's something to consider too if you use

too if you use the first letter pseudoelement it's

the first letter pseudoelement it's going to apply to the before pseudo

going to apply to the before pseudo element

element if the before pseudo-element exists now

if the before pseudo-element exists now instead of just the first letter you

instead of just the first letter you could also choose first line if i

could also choose first line if i remember correctly and yes we just made

remember correctly and yes we just made the whole name larger by choosing the

the whole name larger by choosing the first line

first line let's move on to css variables

let's move on to css variables css variables are very very useful

css variables are very very useful imagine a large project if you will and

imagine a large project if you will and we have a hexadecimal color code as you

we have a hexadecimal color code as you see here for our body element and i've

see here for our body element and i've had to use this code twice just inside

had to use this code twice just inside of this body element but imagine in a

of this body element but imagine in a large project where we have had to apply

large project where we have had to apply this color code many times throughout

this color code many times throughout the project and then our boss says he

the project and then our boss says he wants to change that color in the

wants to change that color in the project we would need to go through and

project we would need to go through and find every instance of this hexadecimal

find every instance of this hexadecimal code and change it but when we use css

code and change it but when we use css variables we would only need to change

variables we would only need to change this hexadecimal code in one place and

this hexadecimal code in one place and that's what makes them so useful let's

that's what makes them so useful let's see how this is accomplished you can see

see how this is accomplished you can see we just have a basic page here with a

we just have a basic page here with a header nav main area and a footer and

header nav main area and a footer and we're going to refactor some of this

we're going to refactor some of this using css variables so let's start out

using css variables so let's start out by putting in a comment for our

by putting in a comment for our variables so i'm just going to copy this

variables so i'm just going to copy this reset comment

reset comment and right underneath it

and right underneath it i'll paste it and change this text

i'll paste it and change this text to variables

to variables and now we're going to put our variables

and now we're going to put our variables inside of a pseudo class that you may

inside of a pseudo class that you may not have seen yet and that is the root

not have seen yet and that is the root pseudo class

pseudo class everything inherits from that that is

everything inherits from that that is referencing the document root so the

referencing the document root so the html tag would even inherit from this

html tag would even inherit from this root pseudo class so we put it at the

root pseudo class so we put it at the top and now we can define variables

top and now we can define variables inside that will apply everywhere in the

inside that will apply everywhere in the project we're going to start out with

project we're going to start out with color because if you do not use

color because if you do not use variables for anything else in css it

variables for anything else in css it makes much sense to use them for colors

makes much sense to use them for colors now we start out by naming a variable

now we start out by naming a variable and they all start with two hyphens or

and they all start with two hyphens or two dashes if you will now you can name

two dashes if you will now you can name them in upper or lower case i prefer

them in upper or lower case i prefer uppercase

uppercase i am a developer and overall we usually

i am a developer and overall we usually name static values in javascript and

name static values in javascript and other programming languages

other programming languages with uppercase they're referred to as

with uppercase they're referred to as constants so i kind of like to see them

constants so i kind of like to see them in uppercase and that tells me as a

in uppercase and that tells me as a developer the definition for this

developer the definition for this variable is probably near the top of the

variable is probably near the top of the file as a constant and so that's how i

file as a constant and so that's how i remember it you do not have to do it

remember it you do not have to do it that way but i'm going to use all

that way but i'm going to use all uppercase today for these variable names

uppercase today for these variable names so for our background color let's just

so for our background color let's just pull what we have inside of our project

pull what we have inside of our project already we have this hexadecimal code i

already we have this hexadecimal code i will copy

will copy and then i'll put in the hashtag and put

and then i'll put in the hashtag and put in the code and now we have created a

in the code and now we have created a variable for the background color now to

variable for the background color now to apply this in the rest of our css

apply this in the rest of our css instead of the code here we're going to

instead of the code here we're going to use a small function that's available in

use a small function that's available in css called var and then parentheses

css called var and then parentheses and then we put in

and then we put in our variable name

our variable name and it's as simple as that now we will

and it's as simple as that now we will still have that background color and we

still have that background color and we can copy this

can copy this and we can also use it here or anywhere

and we can also use it here or anywhere else in the page that we're using that

else in the page that we're using that color code and once we save

color code and once we save i'm going to go ahead and go live i did

i'm going to go ahead and go live i did not have live server serving this page

not have live server serving this page so we should see it again and now it

so we should see it again and now it looks the same because we applied this

looks the same because we applied this variable you will see if i remove this

variable you will see if i remove this control x just to cut it out temporarily

control x just to cut it out temporarily and i guess i didn't change our

and i guess i didn't change our background color here i should remove

background color here i should remove because that is the fallback so let me

because that is the fallback so let me switch this to

switch this to black just quickly and now i'll go ahead

black just quickly and now i'll go ahead and remove this

and remove this and apply and we can see it's black and

and apply and we can see it's black and that's all i wanted to show you was that

that's all i wanted to show you was that the variable is applying and so we're

the variable is applying and so we're using the background color actually as a

using the background color actually as a fallback to this background image

fallback to this background image statement that's using a radial gradient

statement that's using a radial gradient but we want both there so i'm going to

but we want both there so i'm going to replace black once again with our

replace black once again with our variable

variable and save and that's how we're applying

and save and that's how we're applying now the background color saved in this

now the background color saved in this variable okay now let's do the next one

variable okay now let's do the next one so i'm going to name this

so i'm going to name this alt once again capitals here alt

alt once again capitals here alt bg color

bg color and now let's find our alt bg color

and now let's find our alt bg color where we had a little darker color down

where we had a little darker color down here and here it is our background color

here and here it is our background color for the header

for the header and the footer so i can go ahead and

and the footer so i can go ahead and control x to just cut that out notice it

control x to just cut that out notice it doesn't take the hashtag so we'll have

doesn't take the hashtag so we'll have to put that back

to put that back but now i'll put the hashtag

but now i'll put the hashtag the color code and now we have our alt

the color code and now we have our alt background color so we can just copy

background color so we can just copy this variable

this variable and we can scroll down to where that was

and we can scroll down to where that was for the header and the footer i believe

for the header and the footer i believe there it is

there it is and we'll put in

and we'll put in of course it needs to be in the var

of course it needs to be in the var function and put parentheses around it

function and put parentheses around it and save and we still have that same

and save and we still have that same background color now notice we're using

background color now notice we're using white smoke in more than one place and

white smoke in more than one place and then we used white down here but white

then we used white down here but white smoke would also be sufficient so if we

smoke would also be sufficient so if we wanted to go ahead and replace this

wanted to go ahead and replace this with white smoke it will still look

with white smoke it will still look about the same and it does

about the same and it does so now we should create a variable for

so now we should create a variable for the white smoke as well but we're using

the white smoke as well but we're using it in two different spots we're also

it in two different spots we're also using it as a radial so if we want to

using it as a radial so if we want to remember that

remember that it's okay to go ahead and create two

it's okay to go ahead and create two variables that have the same value and

variables that have the same value and that's what i'm going to do right now so

that's what i'm going to do right now so i'll have a radial color so anywhere in

i'll have a radial color so anywhere in my project that i will use a radial

my project that i will use a radial gradient

gradient i might want to use this white smoke but

i might want to use this white smoke but then i'm also just going to have a

then i'm also just going to have a light color for parts of the page

light color for parts of the page and i'll use white smoke there too but

and i'll use white smoke there too but it would be weird if i put radial color

it would be weird if i put radial color in another part of the page i might be

in another part of the page i might be able to get away with putting light

able to get away with putting light color in as part of that radial gradient

color in as part of that radial gradient but i just wanted to show this example

but i just wanted to show this example that you could use two variables and

that you could use two variables and they could have the same value and it's

they could have the same value and it's okay to do that so let's go ahead and

okay to do that so let's go ahead and copy this radial color variable first

and actually before copying that i want to show you something else about using a

to show you something else about using a var function

var function and how we can type this out and how

and how we can type this out and how visual visual studio code will help you

visual visual studio code will help you so now we have our var with the

so now we have our var with the parentheses if i start to type the two

parentheses if i start to type the two hyphens notice vs code gives me a list

hyphens notice vs code gives me a list of the variables that we've created

of the variables that we've created already so that's very handy and it even

already so that's very handy and it even gives you their values over here to the

gives you their values over here to the right i'm just going to choose radial

right i'm just going to choose radial color and use it in my radial gradient

color and use it in my radial gradient and once again nothing is changing so if

and once again nothing is changing so if we're making the conversions right and

we're making the conversions right and refactoring our page we shouldn't see

refactoring our page we shouldn't see changes it should continue to remain as

changes it should continue to remain as it is over here now let's go ahead and

it is over here now let's go ahead and replace

replace any area that has white smoke and i can

any area that has white smoke and i can press ctrl f and just search for white

press ctrl f and just search for white smoke

smoke and it says there's three or four three

and it says there's three or four three of four so we have four actual instances

of four so we have four actual instances so now

so now i'm going to say

i'm going to say var

var parentheses dash dash and choose

parentheses dash dash and choose light color

light color and that will also be our white smoke

and that will also be our white smoke value so now i can select white smoke

value so now i can select white smoke press ctrl d

press ctrl d to select the other instances but notice

to select the other instances but notice two of the instances are

two of the instances are the value that we have

the value that we have in our variables so we don't want to

in our variables so we don't want to replace those so let's just find the one

replace those so let's just find the one that we do want to replace which is the

that we do want to replace which is the background for the nav

background for the nav and now paste that in and save our

and now paste that in and save our project continues to look good and now

project continues to look good and now you can see we're also using the color

you can see we're also using the color black here for text in the nav for the

black here for text in the nav for the bottom border for the nav and maybe in

bottom border for the nav and maybe in other places in the project as well so

other places in the project as well so let's go ahead and create one more

let's go ahead and create one more variable and that will just be our dark

variable and that will just be our dark color for the our color theme

and that's what i'll name it and here we'll just put in the hexadecimal code

we'll just put in the hexadecimal code for black and now that we have that we

for black and now that we have that we can find

can find other places that are using that code

other places that are using that code and replace it

and replace it so we'll once again do control f

so we'll once again do control f i'll paste in that value and it says two

i'll paste in that value and it says two of three so these are the only two

of three so these are the only two actually the third one would be our

actually the third one would be our variable above

variable above so we need that then type far

so we need that then type far now dash dash and it is our dark color

now dash dash and it is our dark color now i'll copy this and simply replace

now i'll copy this and simply replace the code down here with that

the code down here with that and we have replaced it as well now

and we have replaced it as well now notice for the border we still have two

notice for the border we still have two pixels solid and then we're just

pixels solid and then we're just providing the var for the color value we

providing the var for the color value we can also use css variables for far more

can also use css variables for far more than just colors so let's scroll back up

than just colors so let's scroll back up to the top

to the top and look in our body element and we see

and look in our body element and we see a font property here first and this is a

a font property here first and this is a shorthand because we're supplying not

shorthand because we're supplying not only the font size but we're also

only the font size but we're also supplying the font family so let's

supplying the font family so let's define a couple of variables and we can

define a couple of variables and we can use both in the same definition here so

use both in the same definition here so as we come up to the top again inside of

as we come up to the top again inside of our root i'm going to put slash in here

our root i'm going to put slash in here i'm going to put

i'm going to put font

font for our comment and now for the first

for our comment and now for the first variable i'll do two dashes and ff for

variable i'll do two dashes and ff for font family

font family and then we can just copy the value we

and then we can just copy the value we have here

have here which is nunito with the fallback sans

which is nunito with the fallback sans serif

serif so i copy that i'll bring it up to our

so i copy that i'll bring it up to our variable

variable and we've added that now i'll do two

and we've added that now i'll do two more dashes and in fs or capital fs for

more dashes and in fs or capital fs for font size and here i'll put 1.5

font size and here i'll put 1.5 rim

rim and then in case we want a larger font

and then in case we want a larger font size somewhere i'm going to put in an fs

size somewhere i'm going to put in an fs dash xl for an extra large font that we

dash xl for an extra large font that we may use somewhere later and i can put

may use somewhere later and i can put three rim for it

three rim for it and save and now we've defined our font

and save and now we've defined our font family font size and font size extra

family font size and font size extra large so let's put the font family and

large so let's put the font family and font size to work right away and we can

font size to work right away and we can do that here so we'll put a

do that here so we'll put a var variable or a var function actually

var variable or a var function actually and now we can pull our variable from

and now we can pull our variable from our list and this is font size

our list and this is font size then we'll highlight the font family put

then we'll highlight the font family put another var

another var two dashes and we'll highlight the font

two dashes and we'll highlight the font family variable there and save and it

family variable there and save and it should look the same now as you may be

should look the same now as you may be gathering we're not limited as to what

gathering we're not limited as to what we can put in these variables so it's

we can put in these variables so it's not limited to the font or the color we

not limited to the font or the color we can also use it for other things let's

can also use it for other things let's quickly scroll down and take a look at

quickly scroll down and take a look at our nav area here you can see we have

our nav area here you can see we have the light color the dark color and the

the light color the dark color and the dark color again used as a border but

dark color again used as a border but then we have a padding here of 0.5 rim

then we have a padding here of 0.5 rim and we could possibly also add a

and we could possibly also add a property or two here so let's start with

property or two here so let's start with the padding and let's define that above

the padding and let's define that above as a general style because we could give

as a general style because we could give this padding to other parts of the page

this padding to other parts of the page as well in a project so i'll just put

as well in a project so i'll just put general here

general here and then we'll do two dashes

and then we'll do two dashes new padding

new padding and we'll put in our 0.5

and we'll put in our 0.5 rim

rim lowercase rim there we go

lowercase rim there we go save that quickly scroll down to the nav

save that quickly scroll down to the nav and apply that as well so instead of the

and apply that as well so instead of the 0.5 here we'll be using a var

0.5 here we'll be using a var parentheses two dashes

parentheses two dashes choose padding from the list

choose padding from the list that's good now what if we wanted to

that's good now what if we wanted to apply a shadow

apply a shadow so let's look at how to apply a shadow

so let's look at how to apply a shadow we'll use a box

we'll use a box shadow property and here we're looking

shadow property and here we're looking at an x offset for the first value which

at an x offset for the first value which i'll put in a 0

i'll put in a 0 a y offset for the second value and i'm

a y offset for the second value and i'm going to put in 6 pixels for that

going to put in 6 pixels for that and then there is a blur value which

and then there is a blur value which i'll put in 5 pixels

i'll put in 5 pixels and then there is a spread value and i'm

and then there is a spread value and i'm going to put in minus 5 pixels here and

going to put in minus 5 pixels here and what this does is essentially creates a

what this does is essentially creates a shadow right underneath you could

shadow right underneath you could provide an x and y and have the shadow

provide an x and y and have the shadow off to the right and underneath or

off to the right and underneath or coming from another direction if you're

coming from another direction if you're picturing the sun overhead essentially

picturing the sun overhead essentially that's what this shadow is going to

that's what this shadow is going to create because it should come straight

create because it should come straight down

down okay after supplying that then we also

okay after supplying that then we also need to have a color and we already have

need to have a color and we already have a dark color so let's put in the var and

a dark color so let's put in the var and dash dash

dash dash dark dash color

dark dash color and save and if we look at our nav now

and save and if we look at our nav now it has a nice little shadow right

it has a nice little shadow right underneath the bottom line i could try

underneath the bottom line i could try to make this bigger so it stands out let

to make this bigger so it stands out let me put it like 15 pixels

me put it like 15 pixels and there we see the big shadow

and there we see the big shadow underneath but that's not what we want

underneath but that's not what we want we want just a subtle shadow and we can

we want just a subtle shadow and we can save that but what if we wanted to use

save that but what if we wanted to use this shadow in other parts of the

this shadow in other parts of the project also so maybe we should just

project also so maybe we should just highlight

highlight that or we could highlight all of this

that or we could highlight all of this and that's what i'm going to do and i'll

and that's what i'm going to do and i'll copy that

copy that and then bring it up here under our

and then bring it up here under our general styles that we have for our

general styles that we have for our variables not the general styles

variables not the general styles underneath

underneath and here i'll put

and here i'll put shadows because it would look kind of

shadows because it would look kind of strange to have the shadows coming from

strange to have the shadows coming from different directions as if there was

different directions as if there was more than one sun looking at your

more than one sun looking at your project so having the shadows fall all

project so having the shadows fall all in the same direction makes sense

in the same direction makes sense and then

and then we can define shadows using

we can define shadows using another variable and that's okay we've

another variable and that's okay we've defined this variable above it and it

defined this variable above it and it knows what it is and there we're putting

knows what it is and there we're putting it in and this definition is completely

it in and this definition is completely legitimate so we'll save that and then

legitimate so we'll save that and then we'll scroll back down to our nav and

we'll scroll back down to our nav and just bring in our shadows variable for

just bring in our shadows variable for the whole thing so i'm going to delete

the whole thing so i'm going to delete that much

that much and then change what we have here

and then change what we have here to our shadows variable

to our shadows variable and save and the shadow still applies

and save and the shadow still applies now we could use this same concept for

now we could use this same concept for our borders as well so this is a border

our borders as well so this is a border bottom but we've also just defined

bottom but we've also just defined borders before and it uses the same

borders before and it uses the same structure so let's just take this value

structure so let's just take this value which is two pixels solid and the dark

which is two pixels solid and the dark color

color copy that

copy that and create a borders variable above as

and create a borders variable above as well

well just underneath shadows

just underneath shadows and i want all caps again

and i want all caps again and then we'll put in that value and it

and then we'll put in that value and it uses the dark color variable

uses the dark color variable we can save that and then come back down

we can save that and then come back down once again to the nav and where we have

once again to the nav and where we have the borders

the borders we'll just put in that value and it will

we'll just put in that value and it will only apply to the border bottom as we

only apply to the border bottom as we define it here so here's our borders and

define it here so here's our borders and save now let's move to the html file i'm

save now let's move to the html file i'm going to close our find window as well

going to close our find window as well it's time to add some extra content to

it's time to add some extra content to our main area of the page so i'm going

our main area of the page so i'm going to scroll down to the main area

to scroll down to the main area highlight the h2 we have hit backspace

highlight the h2 we have hit backspace to remove that and i want to put in 12

to remove that and i want to put in 12 divs so i'm going to type div i want

divs so i'm going to type div i want lower case here div and then dot and i'm

lower case here div and then dot and i'm going to name the class that applies to

going to name the class that applies to all 12 divs square

all 12 divs square so now we have div dot square and then

so now we have div dot square and then with an emmet abbreviation i can type

with an emmet abbreviation i can type times 12 and press tab and instantly

times 12 and press tab and instantly have 12 divs

have 12 divs now that i have that i have no content

now that i have that i have no content inside the divs so i'm going to select

inside the divs so i'm going to select the last one which is just the closing

the last one which is just the closing tag

tag for the div

for the div and then we can go to i believe the edit

and then we can go to i believe the edit menu

menu and let's find no it might be the

and let's find no it might be the selection menu there it is and let's

selection menu there it is and let's find select all occurrences and that is

find select all occurrences and that is control shift and l control d selects

control shift and l control d selects the next occurrence but the combination

the next occurrence but the combination of control shift and l will select all

of control shift and l will select all or you can just select it here from the

or you can just select it here from the selection menu so now we've selected all

selection menu so now we've selected all of those

of those and i'm going to press the left arrow

and i'm going to press the left arrow key to go to the beginning and i'm going

key to go to the beginning and i'm going to paste in an emoji i have of a laptop

to paste in an emoji i have of a laptop and i want that in the last

and i want that in the last well i guess the last 11 number 2

well i guess the last 11 number 2 through 12. the very first one i'm going

through 12. the very first one i'm going to put in a paragraph and just put the

to put in a paragraph and just put the word hey in so we see something

word hey in so we see something different

different and if we save that you can see we have

and if we save that you can see we have hey and then 11 laptops

hey and then 11 laptops after that i'm going to come down to

after that i'm going to come down to let's say the eighth one right about

let's say the eighth one right about here and i'm also going to put in

here and i'm also going to put in square dash dash

square dash dash not important let's do

not important let's do highlight because we just might want to

highlight because we just might want to apply another class to one of these divs

apply another class to one of these divs and you can see i have my code wrapping

and you can see i have my code wrapping so this line wraps down to the next line

so this line wraps down to the next line but that is the change we are making to

but that is the change we are making to the html we'll make all other changes

the html we'll make all other changes now back in the css i'm going to scroll

now back in the css i'm going to scroll up just a little bit if you'll notice

up just a little bit if you'll notice the header nav main and footer

the header nav main and footer all have these values and the display is

all have these values and the display is grid i no longer want that for the main

grid i no longer want that for the main element so i'm going to remove the main

element so i'm going to remove the main element from that and save and you can

element from that and save and you can see our content is now stacked on top of

see our content is now stacked on top of each other as divs or block elements one

each other as divs or block elements one on top of each other on the far left so

on top of each other on the far left so now let's move down to the main area and

now let's move down to the main area and apply some more styles here right now

apply some more styles here right now main is just a flex item in the larger

main is just a flex item in the larger flex container that is the body element

flex container that is the body element but we're going to make it a flex

but we're going to make it a flex display as well or i should say display

display as well or i should say display flex

flex after that let's justify the content and

after that let's justify the content and space dash evenly

space dash evenly and then after that we can align

and then after that we can align items and we'll align the items to the

items and we'll align the items to the center if we save we have definitely

center if we save we have definitely seen our flex items inside the main now

seen our flex items inside the main now change

change let's change flex dash flow

let's change flex dash flow to row

to row and then wrap if it needs to

and then wrap if it needs to now let's add a gap and i'm going to use

now let's add a gap and i'm going to use the min function here that will pick the

the min function here that will pick the smaller of whichever of these values so

smaller of whichever of these values so i'll say

i'll say 4 viewport units or

4 viewport units or pixels so whichever would be smaller it

pixels so whichever would be smaller it will use for the gap and remember gap is

will use for the gap and remember gap is shorthand for row gap and column gap as

shorthand for row gap and column gap as well okay now let's put a padding value

well okay now let's put a padding value and i'll put it up here above

and i'll put it up here above and i'll just say padding

and i'll just say padding and i want 10 pixels on the top and

and i want 10 pixels on the top and bottom but 0 on the left and right and

bottom but 0 on the left and right and this is different than the padding

this is different than the padding variable we applied you could have other

variable we applied you could have other parts of your project that have

parts of your project that have different padding but if you know

different padding but if you know there's a value you will reuse more than

there's a value you will reuse more than once then it's also a good time to

once then it's also a good time to declare a variable for that okay now

declare a variable for that okay now that we've defined those things for the

that we've defined those things for the main we won't see a huge change here

main we won't see a huge change here because we haven't defined our class for

because we haven't defined our class for the square yet

the square yet now what we have done previously is take

now what we have done previously is take the code that i had and extract those

the code that i had and extract those values

values into variables and i often do that when

into variables and i often do that when i'm designing something however now i

i'm designing something however now i know what variables i want to use so i'm

know what variables i want to use so i'm just going to write them at the top for

just going to write them at the top for the square

the square and then we will come down and define

and then we will come down and define the class for the square but just know

the class for the square but just know this is a little backwards typically i

this is a little backwards typically i would probably

would probably define them first and then extract them

define them first and then extract them like we previously did for these other

like we previously did for these other variables

variables okay for the square we have a couple of

okay for the square we have a couple of variables to create and the first one is

variables to create and the first one is going to be dash dash

going to be dash dash square we'll start all of them out with

square we'll start all of them out with that and let's do the background color

that and let's do the background color here i'm going to choose papaya

here i'm going to choose papaya whip

whip and that's kind of a cool name for a

and that's kind of a cool name for a color after that we will go with

color after that we will go with square once again

square once again and then

and then dash not a space just a dash and size

dash not a space just a dash and size now we're going to have the same height

now we're going to have the same height and width when we create a square i'm

and width when we create a square i'm going to use the max function now and

going to use the max function now and this will pick the larger of these two

this will pick the larger of these two values either 150 pixels or 20 viewport

values either 150 pixels or 20 viewport units so it will continue to grow as the

units so it will continue to grow as the page window gets bigger okay with our

page window gets bigger okay with our variables now defined i want to come

variables now defined i want to come down to the class

down to the class and let me highlight an area here we had

and let me highlight an area here we had general styles i'll take this comment as

general styles i'll take this comment as well

well so we can comment before we begin the

so we can comment before we begin the square and if there were other features

square and if there were other features for our app this is the area that i

for our app this is the area that i would put them and i might say features

would put them and i might say features right here you also might comment each

right here you also might comment each individual feature if you wanted to i'll

individual feature if you wanted to i'll just say features for now and we'll put

just say features for now and we'll put in our square class so we'll start out

in our square class so we'll start out with a background dash color

with a background dash color here we can use our var

here we can use our var two dashes and we want to pick square

two dashes and we want to pick square background color

background color after that we're going to have a width

after that we're going to have a width and that would be a var two dashes and

and that would be a var two dashes and it looks like we have enough variables

it looks like we have enough variables now we need to scroll which is okay

now we need to scroll which is okay we'll choose

we'll choose square size now i'm going to do shift

square size now i'm going to do shift alt and the down arrow because we want

alt and the down arrow because we want the same value

the same value for the height of the squares as well

for the height of the squares as well okay after the width and the height

okay after the width and the height let's create a border we've already got

let's create a border we've already got a variable for that so we'll stick with

a variable for that so we'll stick with the same border that we had previously

the same border that we had previously defined

defined and after that border we want a border

and after that border we want a border dash radius here we have not defined

dash radius here we have not defined anything so we'll just go with 15 pixels

anything so we'll just go with 15 pixels then let's use a display of grid

then let's use a display of grid and let's place that content in the

and let's place that content in the center so this will center our content

center so this will center our content let's save what we have so far

let's save what we have so far well that's a big difference so now we

well that's a big difference so now we have our squares we have the content in

have our squares we have the content in each one centered and we have a

each one centered and we have a different color background as well just

different color background as well just a couple more properties now for the

a couple more properties now for the square so let's define a font dash size

square so let's define a font dash size use our var again and now

use our var again and now we defined an extra large font size

we defined an extra large font size let's use that and when we save our

let's use that and when we save our emojis get larger and so does the text

emojis get larger and so does the text okay let's apply a box shadow here too i

okay let's apply a box shadow here too i need lowercase there we go box shadow

need lowercase there we go box shadow and let's once again use a variable we

and let's once again use a variable we created for shadows

created for shadows and there it is and if we save we get a

and there it is and if we save we get a little shadow under each square also now

little shadow under each square also now if you remember inside of our html we

if you remember inside of our html we also added this square highlight class

also added this square highlight class so let's go ahead and create it also

so let's go ahead and create it also and underneath our features i'll type

and underneath our features i'll type square dash dash

square dash dash highlight again in lowercase

highlight again in lowercase and now i want to show an example of

and now i want to show an example of when you might redefine a variable

when you might redefine a variable so

so we want to apply this square background

we want to apply this square background color and imagine we had all of these

color and imagine we had all of these squares

squares and now we just want to overwrite one

and now we just want to overwrite one rather than having to go in and change

rather than having to go in and change different things about our definition

different things about our definition for square

for square so this will only apply to the class

so this will only apply to the class square highlight and we can change the

square highlight and we can change the value

value of this variable so let's choose

of this variable so let's choose background color once again and let's

background color once again and let's make this corn flower

make this corn flower blue

blue that is an interesting name as well when

that is an interesting name as well when we save

we save this only applies to the one square we

this only applies to the one square we added the square highlight class too but

added the square highlight class too but we have redefined this variable

we have redefined this variable for that class now let's add a feature

for that class now let's add a feature that css variables makes very easy to do

that css variables makes very easy to do and it's in high demand let's add a dark

and it's in high demand let's add a dark mode

mode in addition to our light mode that we

in addition to our light mode that we have here so to add a dark mode we're

have here so to add a dark mode we're just going to define a separate color

just going to define a separate color theme but we're going to do it inside of

theme but we're going to do it inside of a media query so just underneath our

a media query so just underneath our styles we can put this media query

styles we can put this media query towards the top so we'll say at media

towards the top so we'll say at media and then parentheses we have prefers

and then parentheses we have prefers dash color dash scheme

dash color dash scheme and then we'll say

and then we'll say dark

dark and then inside of this media query

and then inside of this media query let's put our pseudo class once again

let's put our pseudo class once again and now we can define our dark mode

and now we can define our dark mode inside of this class so for

inside of this class so for the bg color and notice we're using the

the bg color and notice we're using the same variable names that we did here so

same variable names that we did here so we don't have to go and change those

we don't have to go and change those anywhere else in our code so we're just

anywhere else in our code so we're just redefining these variables

redefining these variables we'll put black for the background color

we'll put black for the background color then for the alt dash bg color

then for the alt dash bg color let's put a flat black

let's put a flat black and then for the

and then for the radial color

radial color we'll go ahead and put in kind of a gray

we'll go ahead and put in kind of a gray let's see if we can lighten this up any

let's see if we can lighten this up any i don't know if it will take the caps

i don't know if it will take the caps yep it will so let's try to lighten up

yep it will so let's try to lighten up the gray just a little bit but we still

the gray just a little bit but we still want a gray color

something like that so we'll just go with that for now and we'll see how it

with that for now and we'll see how it looks

looks after that let's put in

after that let's put in the square

the square background color

background color and here let's go with more like a

and here let's go with more like a purple and then we'll try to lighten it

purple and then we'll try to lighten it up

up so after we get the purple

so after we get the purple let's come over here towards the light

let's come over here towards the light and something in that range and i'm just

and something in that range and i'm just kind of guessing but we'll see what we

kind of guessing but we'll see what we get so when we save

get so when we save it switches to the dark mode and that's

it switches to the dark mode and that's because i prefer the dark mode and have

because i prefer the dark mode and have my system set that way and i'll show you

my system set that way and i'll show you how to do that now if you do not prefer

how to do that now if you do not prefer the dark mode this won't go into effect

the dark mode this won't go into effect so if i just put prefers light here just

so if i just put prefers light here just some other value it doesn't really

some other value it doesn't really matter i could put prefers dave for all

matter i could put prefers dave for all that

that for the anything else that would change

for the anything else that would change essentially it's going to ignore what's

essentially it's going to ignore what's inside of here so

inside of here so prefers light and we're back to this

prefers light and we're back to this because

because uh we prefer the dark mode and

uh we prefer the dark mode and we're already using the opposite of that

we're already using the opposite of that so again like i said i could put my name

so again like i said i could put my name here it doesn't make a difference but if

here it doesn't make a difference but if we put prefers dark

we put prefers dark then it does switch to this dark mode so

then it does switch to this dark mode so now just to show you let's look inside

now just to show you let's look inside i'm on windows let's look inside of the

i'm on windows let's look inside of the settings i right click on the desktop

settings i right click on the desktop and choose personalize

and choose personalize and then i go to colors and it says

and then i go to colors and it says choose your color so if i actually did

choose your color so if i actually did prefer light mode

prefer light mode then the dark doesn't apply and you can

then the dark doesn't apply and you can see how it even changes my window here

see how it even changes my window here but i am going to set it back to dark

but i am going to set it back to dark and our web page responds so that is how

and our web page responds so that is how you set up a custom dark mode

you set up a custom dark mode with your css as well so you've got your

with your css as well so you've got your app media prefers color scheme and dark

app media prefers color scheme and dark and then just define your dark mode

and then just define your dark mode theme inside of here by overriding the

theme inside of here by overriding the other color variable values that you've

other color variable values that you've already defined

already defined today we're going to look at css

today we're going to look at css functions our starter code is much like

functions our starter code is much like the ending code for the last lesson

the ending code for the last lesson however let's quickly look at the html

however let's quickly look at the html and as you can see our page over here on

and as you can see our page over here on the right i have added an h2 heading a

the right i have added an h2 heading a paragraph

paragraph and then a link inside of a section

and then a link inside of a section element that is inside of the main

element that is inside of the main element and i have commented out the

element and i have commented out the divs we previously had in the last

divs we previously had in the last lesson but we will come back to those so

lesson but we will come back to those so i wanted to leave those in our css

i wanted to leave those in our css remains the same from the last lesson

remains the same from the last lesson and we can look at some functions we

and we can look at some functions we have already used in previous lessons if

have already used in previous lessons if we just scroll down there are color

we just scroll down there are color functions and we can see here inside of

functions and we can see here inside of our prefers color scheme this is one

our prefers color scheme this is one change i've already made because i

change i've already made because i wanted the light theme to show up but if

wanted the light theme to show up but if you remember if we put dark here i need

you remember if we put dark here i need lower case or prefer lowercase if i save

lower case or prefer lowercase if i save i get dark mode because my system

i get dark mode because my system preferences

preferences are for dark mode but you can switch

are for dark mode but you can switch this to light

this to light and then this dark mode will not apply

and then this dark mode will not apply so let's look at this we've got rgb

so let's look at this we've got rgb which is a function and if i were to

which is a function and if i were to click here inside the color for vs code

click here inside the color for vs code and then we click the bar at the top as

and then we click the bar at the top as we've learned about colors we can see

we've learned about colors we can see other values in hsl it has parentheses

other values in hsl it has parentheses as well and a value or values inside

as well and a value or values inside that's also a function hwb is a function

that's also a function hwb is a function so these are color functions and that's

so these are color functions and that's what you see here we've also used image

what you see here we've also used image functions and if i scroll down just a

functions and if i scroll down just a little further and we get to the body or

little further and we get to the body or the main element we should have

the main element we should have something yep there in the body we've

something yep there in the body we've got a radial gradient function and as

got a radial gradient function and as we've learned in the past we can also

we've learned in the past we can also use linear gradient but those are

use linear gradient but those are functions they have the term radial

functions they have the term radial gradient or linear gradient and then

gradient or linear gradient and then parentheses and then something is passed

parentheses and then something is passed inside some value and then as we see

inside some value and then as we see here we're also using a reference

here we're also using a reference function which is var and we learned

function which is var and we learned about var just in the previous lesson as

about var just in the previous lesson as we're using css variables so we use var

we're using css variables so we use var and put the variable inside to get the

and put the variable inside to get the value from that variable another

value from that variable another reference function we learned in the

reference function we learned in the past when we were working with images

past when we were working with images was url with parentheses and that's how

was url with parentheses and that's how we loaded images into a background image

we loaded images into a background image spot and there are many useful css

spot and there are many useful css functions so many that i can't cover

functions so many that i can't cover them all but i will put a link in the

them all but i will put a link in the description and the resources to the mdn

description and the resources to the mdn page that does list all of the css

page that does list all of the css functions today i want to cover some

functions today i want to cover some that i think you will use often or

that i think you will use often or frequently and a few of those are math

frequently and a few of those are math functions and we've used some of those

functions and we've used some of those too but i want to dive just a little bit

too but i want to dive just a little bit deeper so let's scroll back up to where

deeper so let's scroll back up to where we have defined our font size right now

we have defined our font size right now it's currently 1.5 rim

it's currently 1.5 rim which one ram would be 16 pixels so 1.5

which one ram would be 16 pixels so 1.5 is currently 24 pixels if we were to

is currently 24 pixels if we were to select our paragraph here and look at

select our paragraph here and look at what was applied inside of dev tools we

what was applied inside of dev tools we would be able to see that but now let's

would be able to see that but now let's talk about the min function first so

talk about the min function first so instead of 1.5 we can type min

instead of 1.5 we can type min and then let's put something like 2.25

and then let's put something like 2.25 rim

rim and then we'll put 3

and then we'll put 3 vh which is viewport units but it's also

vh which is viewport units but it's also specifically referencing the height not

specifically referencing the height not the width and that is very useful when

the width and that is very useful when you're working with fonts now let's talk

you're working with fonts now let's talk about what this min function does it's

about what this min function does it's always going to select the smallest of

always going to select the smallest of the two available and notice one of

the two available and notice one of these is an absolute value so it

these is an absolute value so it wouldn't make sense to put in

wouldn't make sense to put in 2.75 ram or something like that here for

2.75 ram or something like that here for the second value because it would then

the second value because it would then always select the smallest so we've put

always select the smallest so we've put in one absolute value and one value that

in one absolute value and one value that will change

will change based on the height of the page so let's

based on the height of the page so let's save this

save this and then we don't see a whole lot

and then we don't see a whole lot changing here right now but we will when

changing here right now but we will when we look at the height of the page so i

we look at the height of the page so i will bring this over to take up the full

will bring this over to take up the full page

page and then let's inspect to open the dev

and then let's inspect to open the dev tools you could also do control shift

tools you could also do control shift and the letter i whichever you prefer

and the letter i whichever you prefer then i'm going to choose the computed

then i'm going to choose the computed tab here inside of devtools and we'll

tab here inside of devtools and we'll scroll till we see the font

scroll till we see the font size and that should be coming up here

size and that should be coming up here shortly there it is 36 pixels so that is

shortly there it is 36 pixels so that is 2.5

2.5 rim which we set

rim which we set as one of the values and remember it

as one of the values and remember it will always choose the smallest of the

will always choose the smallest of the two the second value was three viewport

two the second value was three viewport units of height so if we start to shrink

units of height so if we start to shrink the page we'll notice our font is

the page we'll notice our font is shrinking now let's look at the font

shrinking now let's look at the font size again and i'll have to scroll but

size again and i'll have to scroll but it's 28.632

it's 28.632 you can always tell it's being

you can always tell it's being calculated when you get a decimal

calculated when you get a decimal afterwards because we're not usually

afterwards because we're not usually going to enter that in ourselves so the

going to enter that in ourselves so the font size is changing now the three

font size is changing now the three viewport units of height

viewport units of height are smaller than the 2.5 rims so it's

are smaller than the 2.5 rims so it's choosing that instead but then what we

choosing that instead but then what we should consider

should consider is the absolute value is actually a

is the absolute value is actually a maximum it will never get larger

maximum it will never get larger than that 2.5 rim so if we scroll back

than that 2.5 rim so if we scroll back at some point it should stop growing and

at some point it should stop growing and we notice it stopped growing now if we

we notice it stopped growing now if we come back to 2.5 rim we have 36 pixels

come back to 2.5 rim we have 36 pixels and i said 2.5 ram i believe this is

and i said 2.5 ram i believe this is actually

actually 2.25 rim which would be 2 2 rim would be

2.25 rim which would be 2 2 rim would be 32 pixels and then 0.25 would be another

32 pixels and then 0.25 would be another four for 36. let's look back at our code

four for 36. let's look back at our code when i close devtools pull this over and

when i close devtools pull this over and we can verify yes 2.25 ram and then

we can verify yes 2.25 ram and then three

three viewport units of height i'm going to

viewport units of height i'm going to quickly scroll down to the main element

quickly scroll down to the main element because having this centered is just

because having this centered is just bothering me a little bit so i'll scroll

bothering me a little bit so i'll scroll down and make some changes here so we

down and make some changes here so we won't keep what we have right here let's

won't keep what we have right here let's comment all of this out that we were

comment all of this out that we were using previously in the last lesson with

using previously in the last lesson with those divs

those divs and now instead let's say

and now instead let's say display

display flex

flex and then we'll say flex

and then we'll say flex flow and we'll make it a column and say

flow and we'll make it a column and say no wrap

no wrap and then justify content and there we'll

and then justify content and there we'll say flex

say flex dash start and we can save and now it is

dash start and we can save and now it is all pulled up towards the top let's pull

all pulled up towards the top let's pull in some padding though but not the 10

in some padding though but not the 10 pixels that we had here let's pull in

pixels that we had here let's pull in our padding variable i can put the

our padding variable i can put the comment after that so for that

comment after that so for that we'll say var and then dash dash

we'll say var and then dash dash padding

padding and save that now let's go ahead and

and save that now let's go ahead and remove the padding from our nav because

remove the padding from our nav because it has a little extra padding compared

it has a little extra padding compared to the header and footer

to the header and footer and then let's change the value of the

and then let's change the value of the padding just a little bit as i scroll

padding just a little bit as i scroll back up to the top let's look for that

back up to the top let's look for that padding variable we see 0.5

padding variable we see 0.5 rem so let's make this

rem so let's make this ems and then it's based on the font size

ems and then it's based on the font size of the element it is applied to so if we

of the element it is applied to so if we save don't notice much of a difference

save don't notice much of a difference but that's what i would prefer to do for

but that's what i would prefer to do for that padding okay as i scroll back up

that padding okay as i scroll back up we've looked at men and we've decided or

we've looked at men and we've decided or learned that it will select the smallest

learned that it will select the smallest of the two values it's given it doesn't

of the two values it's given it doesn't really matter which order you provide

really matter which order you provide these values but because of that there

these values but because of that there are some things to consider when we

are some things to consider when we provide the values one you should only

provide the values one you should only provide one absolute value or you know

provide one absolute value or you know which one it will always choose so the

which one it will always choose so the other one should be relative and it's

other one should be relative and it's better to choose viewport height units

better to choose viewport height units for fonts than it is viewport width so

for fonts than it is viewport width so we're keeping a certain size in there

we're keeping a certain size in there and you can play around with it but i

and you can play around with it but i think you'll see why i lean towards

think you'll see why i lean towards choosing viewport height units and i

choosing viewport height units and i don't put a percentage here because

don't put a percentage here because really that percentage is really easy to

really that percentage is really easy to just kind of uh equal

just kind of uh equal what the rim is as well so 100 would be

what the rim is as well so 100 would be 16 rim

16 rim which would be army not 16 ram 16 pixels

which would be army not 16 ram 16 pixels which would be one rim so two rims would

which would be one rim so two rims would be 200 percent so this would be the

be 200 percent so this would be the equivalent of 225

equivalent of 225 so i choose to put in the viewport

so i choose to put in the viewport height units as my relative unit when

height units as my relative unit when i'm applying this to font now you can

i'm applying this to font now you can use this min function for images and

use this min function for images and other things and i believe we did that

other things and i believe we did that just a little bit in the past but i

just a little bit in the past but i wanted to explain more about that so now

wanted to explain more about that so now let's move on to the max function

let's move on to the max function which is essentially the opposite of the

which is essentially the opposite of the min function so max is always going to

min function so max is always going to choose the larger of the two values we

choose the larger of the two values we provide so just so we can better see a

provide so just so we can better see a change i'm going to switch this from

change i'm going to switch this from 2.25 to 1.75

2.25 to 1.75 now it's always going to choose

now it's always going to choose whichever is larger either three

whichever is larger either three viewport height units or

viewport height units or 1.75 rim so let's once again take a look

1.75 rim so let's once again take a look at our page

at our page and i'll open up the dev tools once

and i'll open up the dev tools once again as well go over to the computed

again as well go over to the computed side

side and now i'm going to inspect this

and now i'm going to inspect this specific element so we can see that the

specific element so we can see that the font size is currently 37.68

font size is currently 37.68 so that's fairly large but it's based on

so that's fairly large but it's based on the height will it shrink if i bring

the height will it shrink if i bring this down yes it's instantly shrinking

this down yes it's instantly shrinking now it's down to 34.56

now it's down to 34.56 but at some point it will stop shrinking

but at some point it will stop shrinking as well and now it has and as we look

as well and now it has and as we look that's 28 pixels which i put

that's 28 pixels which i put 1.75 rem if i remember correctly so that

1.75 rem if i remember correctly so that would be 16 would be one ram and .75

would be 16 would be one ram and .75 would be 12 and that gives us 28 pixels

would be 12 and that gives us 28 pixels so now we see the opposite in effect and

so now we see the opposite in effect and it continues to grow as the page gets

it continues to grow as the page gets taller but at some point it stops

taller but at some point it stops shrinking

shrinking and that's what we have there for the 28

and that's what we have there for the 28 pixels okay so let's close this and go

pixels okay so let's close this and go back and look at our max once again now

back and look at our max once again now the same applies here you should have

the same applies here you should have one absolute value and then you should

one absolute value and then you should have a value that is relative that

have a value that is relative that adjusts itself and the viewport height

adjusts itself and the viewport height units again for font makes total sense

units again for font makes total sense to do that so just like with min the

to do that so just like with min the absolute value we provided was the

absolute value we provided was the largest it would ever get well now the

largest it would ever get well now the absolute value that we provide inside of

absolute value that we provide inside of max is the smallest it will ever get and

max is the smallest it will ever get and i know that is like contrary to what

i know that is like contrary to what they're named so remember max actually

they're named so remember max actually provides a minimum absolute value and

provides a minimum absolute value and min actually provides

min actually provides a maximum absolute value so which of

a maximum absolute value so which of these would i use well actually i won't

these would i use well actually i won't use either one of these there is a third

use either one of these there is a third function we can use and it is called

function we can use and it is called clamp and it's a newer function it

clamp and it's a newer function it hasn't been around as long but it has

hasn't been around as long but it has good support now and there we can

good support now and there we can provide a minimum so i'm going to say

provide a minimum so i'm going to say 1.75

1.75 just like we used in our max

just like we used in our max and then we put in the ideal size which

and then we put in the ideal size which i'll put in our relative units of

i'll put in our relative units of viewport height of 3 units and then we

viewport height of 3 units and then we can put in a maximum so i'll put in our

can put in a maximum so i'll put in our 2.25

2.25 that we used inside of our min function

that we used inside of our min function so this lets us provide both we had

so this lets us provide both we had a maximum inside of the min function and

a maximum inside of the min function and that's right here and then we had a

that's right here and then we had a minimum that was inside of the max

minimum that was inside of the max function and i've got it right here and

function and i've got it right here and then we always use the viewport height

then we always use the viewport height units of 3 for that relative and it's in

units of 3 for that relative and it's in between so you've got minimum ideal and

between so you've got minimum ideal and maximum so now if we save and bring this

maximum so now if we save and bring this back once again we should see some

back once again we should see some changes but it will stop growing and

changes but it will stop growing and stop shrinking at different points

stop shrinking at different points okay so we're

okay so we're on the paragraph we'll inspect that

on the paragraph we'll inspect that specifically go to the computed tab and

specifically go to the computed tab and now we'll look at the font size is

now we'll look at the font size is currently 35.376

currently 35.376 so that is somewhere in between now we

so that is somewhere in between now we can shrink this down and we're noticing

can shrink this down and we're noticing the font size is shrinking but it stops

the font size is shrinking but it stops shrinking now at 28 pixels now we can

shrinking now at 28 pixels now we can bring this back up and i believe we said

bring this back up and i believe we said 2.25 so 36 pixels would be the largest

2.25 so 36 pixels would be the largest it would get and we achieved that now so

it would get and we achieved that now so if we scroll back down there it starts

if we scroll back down there it starts to shrink

to shrink so clamp works with both the minimum and

so clamp works with both the minimum and maximum and we'll choose an ideal size

maximum and we'll choose an ideal size in between when necessary let's close

in between when necessary let's close devtools again and bring the browser

devtools again and bring the browser back over to the right and now let's go

back over to the right and now let's go ahead and apply clamp to one more

ahead and apply clamp to one more variable that we can create here and i'm

variable that we can create here and i'm going to create a font size dash

going to create a font size dash sm for small and here i'll change this

sm for small and here i'll change this to 1.25 and then instead of 3 i'll use

to 1.25 and then instead of 3 i'll use two viewport units and then instead of

two viewport units and then instead of 2.25 i'm going to make this

2.25 i'm going to make this one

one well then i've still got the two

well then i've still got the two 1.5 rim for the maximum and save so now

1.5 rim for the maximum and save so now we have a small size as well now let's

we have a small size as well now let's add just a little more content to see

add just a little more content to see how this can apply so i'm scrolling back

how this can apply so i'm scrolling back down to the main area

down to the main area and we'll take our padding that we have

and we'll take our padding that we have inside the main i'm going to cut that

inside the main i'm going to cut that out with control x and underneath main

out with control x and underneath main i'm going to style that section that we

i'm going to style that section that we have so i want lower case though

have so i want lower case though main section

main section inside the section i'm going to say flex

inside the section i'm going to say flex dash

dash grow set that to 1 and then i'll put in

grow set that to 1 and then i'll put in our padding and then we're going to add

our padding and then we're going to add in a side variable

in a side variable underneath that section i said variable

underneath that section i said variable a aside element underneath that section

a aside element underneath that section element in our html so i'm going to say

element in our html so i'm going to say main aside

main aside and now let's go ahead and style this

and now let's go ahead and style this choose a background dash color

choose a background dash color and i've got a color picked out and

and i've got a color picked out and we'll use this hsla function here i'll

we'll use this hsla function here i'll say zero

say zero zero percent

zero percent twenty percent and remember the last one

twenty percent and remember the last one is the opacity which is the transparency

is the opacity which is the transparency say 0.8

say 0.8 and then we have a color that we'll use

and then we have a color that we'll use and this will be for the font and we'll

and this will be for the font and we'll just use our light color variable that

just use our light color variable that we've already constructed

we've already constructed then we'll use our font size

then we'll use our font size and here we'll say vr and then our var

and here we'll say vr and then our var dash dash

dash dash fs dash

fs dash sm for that small size we just created

sm for that small size we just created let's make this font italic so we can

let's make this font italic so we can really tell the difference

really tell the difference and then the padding

and then the padding will once again

will once again be that padding variable we created

be that padding variable we created there it is

there it is and save now we also want to provide a

and save now we also want to provide a media query and this will help adjust

media query and this will help adjust our aside because when the screen gets

our aside because when the screen gets too small we should stack them so

too small we should stack them so underneath all of our current css let's

underneath all of our current css let's go ahead and add at media screen

go ahead and add at media screen and then we'll say min dash width

and then we'll say min dash width and we'll choose our small break point

and we'll choose our small break point that we had in previous lessons of 576

that we had in previous lessons of 576 pixels

pixels and now for the main here

and now for the main here we'll say flex dash flow and we'll

we'll say flex dash flow and we'll switch it to row

switch it to row no wrap so now they'll be side by side

no wrap so now they'll be side by side and we'll say justify content

and we'll say justify content space

space between

between okay after we've styled that main

okay after we've styled that main element let's go ahead and add the main

element let's go ahead and add the main section here

section here and now

and now we'll adjust the width of the section

we'll adjust the width of the section and we'll use another css function to do

and we'll use another css function to do that and that is calc and for calc we'll

that and that is calc and for calc we'll say 70

say 70 and you can mix different units so we're

and you can mix different units so we're mixing a percent

mixing a percent and a pixel

and a pixel and then after that we'll go ahead and

and then after that we'll go ahead and provide a width for the aside as well so

provide a width for the aside as well so we'll say main aside

we'll say main aside and here we'll say width we'll use calc

and here we'll say width we'll use calc once again and we'll say 30 percent

once again and we'll say 30 percent minus

minus 5 pixels so

5 pixels so what we have here is actually 10 pixels

what we have here is actually 10 pixels that will be between

that will be between the section and the aside on larger

the section and the aside on larger screens anything larger than

screens anything larger than 500 or as large as 576 pixels or greater

500 or as large as 576 pixels or greater i'm going to jump over to the html and

i'm going to jump over to the html and scroll down here and this will be in the

scroll down here and this will be in the starter code as well or the at least the

starter code as well or the at least the finish code but i'm going to paste in

finish code but i'm going to paste in this aside here so it also has an h2 and

this aside here so it also has an h2 and a paragraph

a paragraph and that's it so we save and now we can

and that's it so we save and now we can see the column over here on the right

see the column over here on the right because we are larger than 576 or we are

because we are larger than 576 or we are at least 576 pixels wide so we have our

at least 576 pixels wide so we have our section

section and our aside and we can see that font

and our aside and we can see that font let's see how they both resize now as

let's see how they both resize now as we've applied the two different font

we've applied the two different font sizes so i will inspect open up dev

sizes so i will inspect open up dev tools i want to go to computed

tools i want to go to computed and i'm on the section or we can choose

and i'm on the section or we can choose the aside either one and see how those

the aside either one and see how those font sizes apply so i'll look at the

font sizes apply so i'll look at the content here

content here and now they look fairly small because

and now they look fairly small because we're at 50 percent inside of dev tools

we're at 50 percent inside of dev tools just to get it all to fit

just to get it all to fit let's go ahead and start to shrink and

let's go ahead and start to shrink and notice the text shrinks for both but

notice the text shrinks for both but then it eventually stops for both as

then it eventually stops for both as well so we've reached that minimum

well so we've reached that minimum and now it starts to grow in the main

and now it starts to grow in the main and now it's growing in the aside and at

and now it's growing in the aside and at some point they both stop growing as

some point they both stop growing as well so clamp is working well for both

well so clamp is working well for both of those and again remember if this

of those and again remember if this looks a little small it's because we're

looks a little small it's because we're at a 50 percent here when we have dev

at a 50 percent here when we have dev tools open so i'll close that now we see

tools open so i'll close that now we see the full page and now i'll drag it back

the full page and now i'll drag it back over to the right let's go back to our

over to the right let's go back to our css those paragraphs that we have are

css those paragraphs that we have are both content so just underneath the

both content so just underneath the aside i'm going to put in a content

aside i'm going to put in a content class and that's what we've applied to

class and that's what we've applied to those paragraphs let's just say margin

those paragraphs let's just say margin top

top of 20 pixels and see how that looks yeah

of 20 pixels and see how that looks yeah that gives a little space from the

that gives a little space from the heading down to where the rest of the

heading down to where the rest of the content starts i like that just a little

content starts i like that just a little better okay now what about this google

better okay now what about this google link here let's talk about that so just

link here let's talk about that so just underneath the footer we'll go ahead and

underneath the footer we'll go ahead and style this and as we learned in our

style this and as we learned in our pseudo lesson

pseudo lesson we can choose any link and that should

we can choose any link and that should apply to both the non-visited and

apply to both the non-visited and visited links

visited links so let's color this

so let's color this fire break

fire break that will look a little better on the

that will look a little better on the colors that we have

colors that we have but after that

but after that let's go ahead and look at the hover and

let's go ahead and look at the hover and the focus so we'll say anchor hover

the focus so we'll say anchor hover comma

comma and then we'll also have anchor

and then we'll also have anchor [Music]

[Music] focus and then inside of those we'll

focus and then inside of those we'll apply a filter and there are filter

apply a filter and there are filter functions so in the past actually before

functions so in the past actually before we do that let's look at what we were

we do that let's look at what we were doing in the past we were choosing a

doing in the past we were choosing a color maybe hsla and putting that

color maybe hsla and putting that transparency in there or if we could

transparency in there or if we could just leave it the color it is and just

just leave it the color it is and just put in opacity and maybe we'd put that

put in opacity and maybe we'd put that to 0.8

to 0.8 and then when we mouse over

and then when we mouse over it just gets a little fainter you can't

it just gets a little fainter you can't tell as good with the fire brick maybe

tell as good with the fire brick maybe i'll take that down to 0.6

i'll take that down to 0.6 yes now it gets a little weaker when we

yes now it gets a little weaker when we hover over it's a little transparent so

hover over it's a little transparent so that's how you can do that on its own or

that's how you can do that on its own or you can provide that fourth value inside

you can provide that fourth value inside of hsla

of hsla and choose the color as well

and choose the color as well but what we want to do now is provide a

but what we want to do now is provide a filter and filter has several functions

filter and filter has several functions so one thing i like to do with filter is

so one thing i like to do with filter is use the brightness and here i'm going to

use the brightness and here i'm going to say a hundred and fifty percent so

say a hundred and fifty percent so instead of adding transparency now when

instead of adding transparency now when i mouse over the link gets brighter i

i mouse over the link gets brighter i actually really like that i just wasn't

actually really like that i just wasn't able to do it earlier in the lessons so

able to do it earlier in the lessons so i frequently do that for the hover focus

i frequently do that for the hover focus i like the filter brightness now

i like the filter brightness now something else you can do that is a cool

something else you can do that is a cool effect instead of brightness is choose

effect instead of brightness is choose hue

hue rotate and you'll always get a

rotate and you'll always get a complementary color

complementary color if you say 180 degrees so if we save

if you say 180 degrees so if we save that let's see what is 180 degrees

that let's see what is 180 degrees difference in the color wheel if you

difference in the color wheel if you think about colors than firebrick and

think about colors than firebrick and it's this kind of teal or green i don't

it's this kind of teal or green i don't know if i like that one there so some

know if i like that one there so some will have better luck than others and

will have better luck than others and you could play around with the degrees

you could play around with the degrees with that as well myself i'll probably

with that as well myself i'll probably go back to brightness so i'm just going

go back to brightness so i'm just going to control z to undo until i'm back to

to control z to undo until i'm back to that brightness and i like how that

that brightness and i like how that works okay one more function to work

works okay one more function to work with while we're working with these

with while we're working with these paragraphs let's jump to the html again

paragraphs let's jump to the html again and inside of our aside we have this

and inside of our aside we have this lorem text and notice we provided a span

lorem text and notice we provided a span element that is an inline element and

element that is an inline element and it's wrapping around it and then it has

it's wrapping around it and then it has a class of tool tip and then it also has

a class of tool tip and then it also has an attribute that is data dash tool tip

an attribute that is data dash tool tip and we can really provide custom

and we can really provide custom attributes as long as they all start

attributes as long as they all start with data dash and then we can name it

with data dash and then we can name it whatever we want so we named this data

whatever we want so we named this data dash tooltip and it says this is latin

dash tooltip and it says this is latin so now let's make a custom tool tip that

so now let's make a custom tool tip that will show when we hover over lorem

will show when we hover over lorem inside of our aside over here so we

inside of our aside over here so we should see it right up here in the top

should see it right up here in the top right let's jump back to the css

right let's jump back to the css and then just underneath the well let's

and then just underneath the well let's do it underneath the content there we

do it underneath the content there we are

are so now let's put in a

so now let's put in a tooltip class

tooltip class and inside this tool tip we'll say

and inside this tool tip we'll say border dash bottom so this will indicate

border dash bottom so this will indicate that a tool tip exists we'll say one

that a tool tip exists we'll say one pixel dash and let's try orange to see

pixel dash and let's try orange to see how that looks if we save we see the

how that looks if we save we see the little dashed border under lorem that

little dashed border under lorem that indicates there is something about that

indicates there is something about that now we also want to get this position

now we also want to get this position relative because we will be using a

relative because we will be using a position absolute when we choose where

position absolute when we choose where the tooltip shows up so after we've

the tooltip shows up so after we've applied those styles to the tooltip

applied those styles to the tooltip class then we need

class then we need tool tip

tool tip hover pseudo class but now we can stack

hover pseudo class but now we can stack a pseudo element and this is the before

a pseudo element and this is the before pseudo element

pseudo element so now we've applied the tooltip class

so now we've applied the tooltip class the hover pseudo class and now the

the hover pseudo class and now the before pseudo element and with that i'm

before pseudo element and with that i'm going to choose content

going to choose content and here is where we can use a function

and here is where we can use a function it's the attribute function and now we

it's the attribute function and now we just name the attribute so this is our

just name the attribute so this is our data dash

data dash tool tip

tool tip and if i save this

and if i save this we'll notice this appear when i hover

we'll notice this appear when i hover over and now it just appeared at the

over and now it just appeared at the beginning in front of lorem it says this

beginning in front of lorem it says this is latin lorem

is latin lorem when i hover over and that's not what we

when i hover over and that's not what we want but you can see how this works okay

want but you can see how this works okay let's go ahead and style the rest so

let's go ahead and style the rest so we'll say

we'll say position

position absolute let's put the position at minus

absolute let's put the position at minus 20 pixels which should put it up on top

20 pixels which should put it up on top if we save now and i mouse over it shows

if we save now and i mouse over it shows it top but now it's all scrunched and it

it top but now it's all scrunched and it comes down in there so to get it to

comes down in there so to get it to avoid wrapping on each of those words we

avoid wrapping on each of those words we can say

can say white dash space and then say no wrap

white dash space and then say no wrap now if we save and look now it says this

now if we save and look now it says this is latin up above

is latin up above okay from there let's give this a

okay from there let's give this a background color

background color and now we could use our

and now we could use our var and say

var and say dark color there it is which was black

dark color there it is which was black if i remember correctly

if i remember correctly and after that we can give it padding

and after that we can give it padding and here we could say var and give it

and here we could say var and give it our padding as well so there we go

our padding as well so there we go and then finally let's give it a border

and then finally let's give it a border dash radius of 15

dash radius of 15 pixels and save now when we mouse over

pixels and save now when we mouse over lorem we get a this is latin tool tip

lorem we get a this is latin tool tip that pops up we've learned a lot about

that pops up we've learned a lot about css functions with these paragraphs and

css functions with these paragraphs and this layout but now it's time to go back

this layout but now it's time to go back to grid and learn about some of the grid

to grid and learn about some of the grid functions so first i'll go to the html

functions so first i'll go to the html and i'm going to select both our section

and i'm going to select both our section and our side element inside of the main

and our side element inside of the main element i'll hold down shift and click

element i'll hold down shift and click and now i'll press shift alt and the

and now i'll press shift alt and the letter a to comment that all out and now

letter a to comment that all out and now i'm going to select the divs from the

i'm going to select the divs from the previous lesson once again hold down

previous lesson once again hold down shift alt and the letter a to uncomment

shift alt and the letter a to uncomment those and now we should have those back

those and now we should have those back on the page when we save we should

on the page when we save we should definitely see a difference but we need

definitely see a difference but we need to make some changes to the css also

to make some changes to the css also back in the css file i'll need to scroll

back in the css file i'll need to scroll up to the main section and we can

up to the main section and we can comment out the flex flex flow or

comment out the flex flex flow or display flex flex flow and justify

display flex flex flow and justify content

content and now we will uncomment what we

and now we will uncomment what we previously had here

previously had here but now we'll change some of this and

but now we'll change some of this and we'll actually just delete these three

we'll actually just delete these three middle rows as well

middle rows as well okay we want this to be a display

okay we want this to be a display grid instead of display flex

grid instead of display flex after that we're going to apply

after that we're going to apply grid dash template columns and now we

grid dash template columns and now we can use a grid function and we used this

can use a grid function and we used this when we learned about grid in a lesson

when we learned about grid in a lesson and that is the repeat function so we're

and that is the repeat function so we're going to say repeat this four times so

going to say repeat this four times so that will give us four columns and then

that will give us four columns and then we're going to use a math function that

we're going to use a math function that is specific to grid and that is min max

is specific to grid and that is min max and here we provide a min and a max so

and here we provide a min and a max so i'm going to provide 100 pixels for the

i'm going to provide 100 pixels for the smallest grid item that we would want

smallest grid item that we would want and 300 pixels for the largest now after

and 300 pixels for the largest now after that i also want to adjust this gap i

that i also want to adjust this gap i did this in a previous tutorial as well

did this in a previous tutorial as well but four viewport width units are almost

but four viewport width units are almost always going to be bigger than 15 pixels

always going to be bigger than 15 pixels so min's probably always going to select

so min's probably always going to select 15 pixels here so i will change this to

15 pixels here so i will change this to 2

2 and then i will also switch this to 20

and then i will also switch this to 20 pixels and it should probably adjust now

pixels and it should probably adjust now based on that and after i save you can

based on that and after i save you can see the changes on the page over here on

see the changes on the page over here on the right but we will resize the page

the right but we will resize the page and look at some more changes there as

and look at some more changes there as well but the reason we're not seeing the

well but the reason we're not seeing the grid adapt to the page the way i would

grid adapt to the page the way i would like it to is because we still have in a

like it to is because we still have in a size for the squares we had in a width

size for the squares we had in a width and height previously so let's select

and height previously so let's select both of those lines

both of those lines shift alt and the letter a to comment

shift alt and the letter a to comment those out and save once again and now we

those out and save once again and now we see the grid is filling up the entire

see the grid is filling up the entire space that is available i think we

space that is available i think we should probably provide just a little

should probably provide just a little bit of padding inside that main element

bit of padding inside that main element as well so let's scroll back up to where

as well so let's scroll back up to where we were and just above here the display

we were and just above here the display grid and below the flex grow

grid and below the flex grow let's say padding and let's provide the

let's say padding and let's provide the padding that we have already defined

padding that we have already defined and now once we save we should see it

and now once we save we should see it give just a little space and that looks

give just a little space and that looks better and it should adapt to all sizes

better and it should adapt to all sizes so let's go ahead and drag this over and

so let's go ahead and drag this over and see how everything has applied now it

see how everything has applied now it did adapt to this size so we see all 12

did adapt to this size so we see all 12 grid items and you can see once they've

grid items and you can see once they've reached that 300 width

reached that 300 width then the gap here between the columns is

then the gap here between the columns is going to get larger as the page has to

going to get larger as the page has to adapt but it kept whatever gap we had

adapt but it kept whatever gap we had defined between the rows now as we

defined between the rows now as we resize we'll see that change so i'm once

resize we'll see that change so i'm once again going to right click and choose

again going to right click and choose inspect remember you can also get into

inspect remember you can also get into dev tools by choosing control shift and

dev tools by choosing control shift and the letter i all at the same time are

the letter i all at the same time are pressing those all at the same time okay

pressing those all at the same time okay now that we're here i will select one

now that we're here i will select one item

item and inspect so we've got a div square

and inspect so we've got a div square highlighted we can see it has a width of

highlighted we can see it has a width of 300 pixels as i mouse over that but we

300 pixels as i mouse over that but we can also go to computed

can also go to computed scroll down and see that width as well

scroll down and see that width as well now let's resize

now let's resize and as we get in here to a size where

and as we get in here to a size where they're not the grid items themselves

they're not the grid items themselves aren't changing right now it's the space

aren't changing right now it's the space between the columns but as we squeeze

between the columns but as we squeeze them in now they're changing and now we

them in now they're changing and now we can see that width here is changing as

can see that width here is changing as well so if we scroll down it should be

well so if we scroll down it should be that same number well it's close

that same number well it's close 251.8 right now and as we continue to

251.8 right now and as we continue to squeeze and it keeps scrolling on me but

squeeze and it keeps scrolling on me but as we continue to squeeze it will go

as we continue to squeeze it will go down until they are 100 pixels

down until they are 100 pixels and we're getting close i think

and we're getting close i think and let's take a look now

and let's take a look now and now we're at 105 so we're very very

and now we're at 105 so we're very very close and now the page starts to shift

close and now the page starts to shift as we'd have to put in a media query to

as we'd have to put in a media query to get it to adapt after that because they

get it to adapt after that because they will no longer shrink in any way they at

will no longer shrink in any way they at this point when the page starts to break

this point when the page starts to break essentially is when they have stopped

essentially is when they have stopped adjusting so they are at 100 pixels

adjusting so they are at 100 pixels right there and if i bring this down we

right there and if i bring this down we should now see that 100 pixels and if we

should now see that 100 pixels and if we bring it out they begin to grow so now

bring it out they begin to grow so now 250 pixels apiece all the way up to 300.

250 pixels apiece all the way up to 300. now notice our grid gap that we defined

now notice our grid gap that we defined and it stays what we defined it as until

and it stays what we defined it as until they stop growing and after they stop

they stop growing and after they stop growing then they start to separate the

growing then they start to separate the columns because it needs to fill out the

columns because it needs to fill out the page

page but as they are scrunched in it keeps

but as they are scrunched in it keeps that space between the rows and the

that space between the rows and the columns because remember the gap

columns because remember the gap property is both a grid gap and a row

property is both a grid gap and a row gap value it's a shorthand so we can see

gap value it's a shorthand so we can see how all of that works together so we

how all of that works together so we provided the min max we used repeat as

provided the min max we used repeat as well and then we used min once again on

well and then we used min once again on the gap property

the gap property let's move on to css transforms

let's move on to css transforms transitions and animations and before we

transitions and animations and before we finish today we'll make a css only

finish today we'll make a css only animated hamburger icon and drop down

animated hamburger icon and drop down nav menu as you see here let's look at

nav menu as you see here let's look at our starter code today you can see i've

our starter code today you can see i've got an

got an index.html file and inside this

index.html file and inside this index.html file i've just got a main

index.html file i've just got a main element and it contains three divs i

element and it contains three divs i don't usually use divs but for this

don't usually use divs but for this example they're good we're just creating

example they're good we're just creating squares with all of them and you can see

squares with all of them and you can see i have a class of squares set on each

i have a class of squares set on each one the final div also has a class of

one the final div also has a class of animate and then i've got a different

animate and then i've got a different emoji inside of each div and then in the

emoji inside of each div and then in the file tree you can see i've got some

file tree you can see i've got some other files as well but for these first

other files as well but for these first examples of transforms transitions and

examples of transforms transitions and animations i'm just going to use the

animations i'm just going to use the index.html file and then the

index.html file and then the style.css file after this though we will

style.css file after this though we will go ahead and create an animated mobile

go ahead and create an animated mobile menu and it will have an animated

menu and it will have an animated hamburger icon as well as the drop down

hamburger icon as well as the drop down navigation menu inside of it but for now

navigation menu inside of it but for now let's just learn about the basics of

let's just learn about the basics of transforms transitions and animations

transforms transitions and animations now inside of the style.css file you can

now inside of the style.css file you can see i'm importing the nunito font from

see i'm importing the nunito font from google i've got a basic css reset here

google i've got a basic css reset here inside the html element styles i've set

inside the html element styles i've set the font just a little larger to one and

the font just a little larger to one and a half rims and we're applying the

a half rims and we're applying the nunito font that we've imported

nunito font that we've imported and then the body element is set to a

and then the body element is set to a min height of 100 viewport units it's a

min height of 100 viewport units it's a display of flex and a column so the main

display of flex and a column so the main element that's inside of the body is set

element that's inside of the body is set to flex grow one so it also extends to

to flex grow one so it also extends to the full visible page that we see the

the full visible page that we see the body take up and from there the main

body take up and from there the main element is also set to display flex for

element is also set to display flex for anything within it and it's set to a

anything within it and it's set to a column as well and everything is

column as well and everything is centered and then there will be a gap of

centered and then there will be a gap of one rim between the flex items within

one rim between the flex items within the main element and those flex items

the main element and those flex items are the three divs that we previously

are the three divs that we previously looked at inside of the html file

looked at inside of the html file they've got a width and a height of 200

they've got a width and a height of 200 pixels so they're squares they've got a

pixels so they're squares they've got a border of one pixel solid black and then

border of one pixel solid black and then i set each one to display

i set each one to display grid so we can center the content easily

grid so we can center the content easily just by saying place content center so

just by saying place content center so it centers those emojis i'll drag our

it centers those emojis i'll drag our code over to the left side of the screen

code over to the left side of the screen and we can see this page right now with

and we can see this page right now with our starter code here on the right we've

our starter code here on the right we've got our three divs each one is 200 by

got our three divs each one is 200 by 200 pixels and then we've centered the

200 pixels and then we've centered the emoji inside of each one now we're ready

emoji inside of each one now we're ready to apply some individual styles to each

to apply some individual styles to each of these divs so i'm going to scroll for

of these divs so i'm going to scroll for some more room inside of the css file

some more room inside of the css file i'm also going to press ctrl

i'm also going to press ctrl b to hide the file tree so i have a

b to hide the file tree so i have a little more room to type and we'll

little more room to type and we'll review some pseudo

review some pseudo class selectors

class selectors to select each one of these divs so

to select each one of these divs so first i'll put in div in lower case and

first i'll put in div in lower case and then the first pseudo class i'm going to

then the first pseudo class i'm going to use is first child so this should select

use is first child so this should select the first div and we can test that by

the first div and we can test that by changing the color change the background

changing the color change the background color to dodge or blue and save and

color to dodge or blue and save and using the live server extension it

using the live server extension it updates automatically when we save and

updates automatically when we save and we can see that first div gets a

we can see that first div gets a background color of dodger blue so i'm

background color of dodger blue so i'm going to highlight this div selector and

going to highlight this div selector and press shift alt and the down arrow twice

press shift alt and the down arrow twice so i get it twice more inside of our

so i get it twice more inside of our code and then i can just change this to

code and then i can just change this to nth child and then we need a parenthesis

nth child and then we need a parenthesis and i'll put in the number two and now

and i'll put in the number two and now i'll switch the second div

i'll switch the second div to yellow and then finally we can use

to yellow and then finally we can use last child for the last div and we just

last child for the last div and we just need one s there we go and i'll change

need one s there we go and i'll change this one to lime green so now let's save

this one to lime green so now let's save and see if the colors change and they do

and see if the colors change and they do so we've successfully selected all three

so we've successfully selected all three of these divs individually now the first

of these divs individually now the first property we'll look at is transform so

property we'll look at is transform so inside of the first child

inside of the first child i'll select that and use transform

i'll select that and use transform and then what we'll put in for a value

and then what we'll put in for a value first is translate x you can see we have

first is translate x you can see we have different choices here that visual

different choices here that visual studio code gives us now x will move it

studio code gives us now x will move it left or right and if we use percents it

left or right and if we use percents it bases the percent on the size of the div

bases the percent on the size of the div so when i put in

so when i put in 50 percent it should move it halfway

50 percent it should move it halfway over and we can compare to the other

over and we can compare to the other divs to see if this is correct and yes

divs to see if this is correct and yes it moves our first div 50 percent of the

it moves our first div 50 percent of the way over of the width of the div not of

way over of the width of the div not of the page or the element that it's within

the page or the element that it's within but of the element itself so that is the

but of the element itself so that is the 50 percent and the positive number moves

50 percent and the positive number moves it to the right a negative number would

it to the right a negative number would move it to the left now we can use other

move it to the left now we can use other units besides percents so in the next

units besides percents so in the next div i'll say

div i'll say transform once again

transform once again and then i'll use translate y which

and then i'll use translate y which should move it up or down and here i'll

should move it up or down and here i'll use two rim and let's see what happens

use two rim and let's see what happens it moved it down to rem so likewise if i

it moved it down to rem so likewise if i give it a negative 2 rim it should move

give it a negative 2 rim it should move it up and as you might have guessed

it up and as you might have guessed instead of just translate x or translate

instead of just translate x or translate y

y we can use the shorthand and use them

we can use the shorthand and use them together so and the third one i'll say

together so and the third one i'll say transform

transform and then i'll just use translate and now

and then i'll just use translate and now the first value is the x value so i'll

the first value is the x value so i'll say 100 percent and we can combine

say 100 percent and we can combine different units so here i'll say -2 rim

different units so here i'll say -2 rim and save and now you can see it moves it

and save and now you can see it moves it to the right 100 percent

to the right 100 percent and then the -2 rim did move it up so

and then the -2 rim did move it up so now we're back to our original gap

now we're back to our original gap between the second div and the third div

between the second div and the third div because we also moved that second div

because we also moved that second div minus two ram so if we were to just

minus two ram so if we were to just switch this to translate x and then

switch this to translate x and then remove the minus two rim you can see

remove the minus two rim you can see that the gap is larger so if we wanted

that the gap is larger so if we wanted to move this up even more to make it

to move this up even more to make it obvious i could just delete the

obvious i could just delete the translate x go back to translate and

translate x go back to translate and let's say

let's say minus

minus five rim and save and now you can see it

five rim and save and now you can see it moves way up so it's a little easier to

moves way up so it's a little easier to see that it's working so we now know

see that it's working so we now know that translate x moves things left and

that translate x moves things left and right and translate y moves things up

right and translate y moves things up and down and we can use them both

and down and we can use them both together but for now let's just comment

together but for now let's just comment these out so i'll press shift alt and

these out so i'll press shift alt and the letter a to comment them out after i

the letter a to comment them out after i have highlighted them

have highlighted them and do that for the third one as well

and do that for the third one as well and we'll move on to the next value that

and we'll move on to the next value that we can use for transform which is rotate

we can use for transform which is rotate so i'll once again put in transform and

so i'll once again put in transform and i'm going to leave these commented out

i'm going to leave these commented out values in here so you can play around

values in here so you can play around with them from my source code if you

with them from my source code if you want to

want to so this transform will be

so this transform will be rotate and you can see once again we

rotate and you can see once again we have choices like x y and z so i'm going

have choices like x y and z so i'm going to choose x

to choose x and now let's say rotate

and now let's say rotate 180

180 degrees and this will of course apply to

degrees and this will of course apply to the first one and when i save these

the first one and when i save these other changes will revert because we've

other changes will revert because we've commented them out too

commented them out too so there we have now rotated

so there we have now rotated 180 degrees let's do a smaller rotation

180 degrees let's do a smaller rotation and you can see what happens as well so

and you can see what happens as well so something looks a little strange about

something looks a little strange about this box doesn't it that's because it's

this box doesn't it that's because it's rotating

rotating from the top

from the top backwards so it's kind of like a pizza

backwards so it's kind of like a pizza box if you consider it that way this

box if you consider it that way this bottom part is coming towards you and

bottom part is coming towards you and the top part is moving away from you as

the top part is moving away from you as far as that rotation and that means once

far as that rotation and that means once we get to 90 degrees

we get to 90 degrees it disappears because

it disappears because you are now at eye level with that flat

you are now at eye level with that flat top or the card consider this a card as

top or the card consider this a card as well instead of just a pizza box and

well instead of just a pizza box and you're flipping it over from the top and

you're flipping it over from the top and so once we go 180 degrees it is flipped

so once we go 180 degrees it is flipped all the way over

all the way over and now notice the rocket is pointing to

and now notice the rocket is pointing to the bottom right instead of the top

the bottom right instead of the top right and that's because that card has

right and that's because that card has been flipped over from top to bottom so

been flipped over from top to bottom so as you might guess then if we apply

as you might guess then if we apply transform

transform and then rotate

and then rotate y

y let's choose that out of our list here

let's choose that out of our list here and now if we sit this to say 45 degrees

and now if we sit this to say 45 degrees so we can see what's happening first

so we can see what's happening first it will be just the opposite so

it will be just the opposite so this now looks a little skinnier because

this now looks a little skinnier because we're flipping it i believe from left to

we're flipping it i believe from left to right let's go ahead and do the 180

and yes now the flame is just the opposite so we took the right side and

opposite so we took the right side and made it the left side but it's flipped

made it the left side but it's flipped over so imagine having the same image on

over so imagine having the same image on both sides but it's the opposite of that

both sides but it's the opposite of that so we're flipping this side to this side

so we're flipping this side to this side and then of course what was here over to

and then of course what was here over to this side so we're seeing this from the

this side so we're seeing this from the back as if the image was burned all the

back as if the image was burned all the way through and so

way through and so left to right

left to right would be the way to consider y as far as

would be the way to consider y as far as the rotation and top to bottom would be

the rotation and top to bottom would be the way to consider x for the rotation

the way to consider x for the rotation and now let's apply one more down here

and now let's apply one more down here to our final div so we'll say

to our final div so we'll say transform and now we'll use rotate z

transform and now we'll use rotate z and let's go ahead and choose 90 degrees

and let's go ahead and choose 90 degrees with rotate z and see what happens

with rotate z and see what happens it didn't disappear did it it turned

it didn't disappear did it it turned so we did have our taco facing the

so we did have our taco facing the normal way and now it is turned over

normal way and now it is turned over here so

here so this might be clockwise let's see what

this might be clockwise let's see what happens if we do 180 yes and now it's

happens if we do 180 yes and now it's upside down so that's actually what this

upside down so that's actually what this is doing is rotating clockwise with a

is doing is rotating clockwise with a positive number a negative number of

positive number a negative number of course would take it counterclockwise

course would take it counterclockwise it's worth noting that although we can

it's worth noting that although we can use rotate z it is just the same as if

use rotate z it is just the same as if we just said rotate so if i save this we

we just said rotate so if i save this we won't see a change likewise if we make

won't see a change likewise if we make it 135 degrees it'll move on around and

it 135 degrees it'll move on around and yes we did see the change now you can

yes we did see the change now you can tell it rotated because of the taco has

tell it rotated because of the taco has a different position here in the middle

a different position here in the middle but we could put this some odd number as

but we could put this some odd number as well and it won't have such a perfect

well and it won't have such a perfect rotation to see the change so there we

rotation to see the change so there we once again go it does rotate the full

once again go it does rotate the full box not just the emoji okay i'll once

box not just the emoji okay i'll once again comment these out but leave them

again comment these out but leave them in the code so if you do download the

in the code so if you do download the source code you can see these in there

source code you can see these in there and we're going to move on to the next

and we're going to move on to the next possible transformation

possible transformation and that's going to be scale that's very

and that's going to be scale that's very useful at times i meant for this to be

useful at times i meant for this to be on the same line here for the comment

on the same line here for the comment okay for scale we'll say transform once

okay for scale we'll say transform once again and then we'll say

again and then we'll say scale x as you might guess and let's

scale x as you might guess and let's make this 120

make this 120 and see what happens to this top box

and see what happens to this top box it got bigger but only to the left and

it got bigger but only to the left and the right as with x which is a lot like

the right as with x which is a lot like the translate x but now it just grew to

the translate x but now it just grew to 120 percent of the size but it only

120 percent of the size but it only expanded

expanded on the horizontal plane here to the left

on the horizontal plane here to the left and the right not up and down at all so

and the right not up and down at all so as you might guess if we apply the

as you might guess if we apply the opposite to the second div transform y

opposite to the second div transform y oops i transform and then we need

oops i transform and then we need actually

actually scale y there we go put that at 120

scale y there we go put that at 120 percent

percent we'll see the growth goes to the top and

we'll see the growth goes to the top and the bottom and it doesn't expand on the

the bottom and it doesn't expand on the left and the right at all and finally if

left and the right at all and finally if we look at this last child and now i'm

we look at this last child and now i'm going to scroll for just a little room

going to scroll for just a little room i'll put in transform once again and

i'll put in transform once again and here i'll just put scale and like

here i'll just put scale and like translate we can put in both the x and

translate we can put in both the x and the y values so i'll say 50 x

the y values so i'll say 50 x and 50 y and save and we can see

and 50 y and save and we can see instead of growing it actually shrank

instead of growing it actually shrank because it's just half the size that it

because it's just half the size that it was now before we finish with transform

was now before we finish with transform there is one more possible thing to

there is one more possible thing to cover with it and i'll comment all of

cover with it and i'll comment all of these out as well

these out as well and what we want to do there it's called

and what we want to do there it's called skew oops i selected that below there it

skew oops i selected that below there it is

is and now one more to select before we

and now one more to select before we move on to transform skew

move on to transform skew so now once again on this first div

so now once again on this first div we'll say

we'll say transform and we'll say

transform and we'll say skew x and with that we'll say minus 10

skew x and with that we'll say minus 10 degrees and let's see what happens

degrees and let's see what happens and you can see now we've got a leaning

and you can see now we've got a leaning box instead of the normal box that we

box instead of the normal box that we had and that's kind of cool sometimes

had and that's kind of cool sometimes when you want to get that effect now

when you want to get that effect now let's do the opposite with y so

let's do the opposite with y so transform

transform and then we'll say

and then we'll say skew

skew i can spell skew correctly and here

i can spell skew correctly and here we'll once again say a degree but let's

we'll once again say a degree but let's choose a different value maybe minus 10

choose a different value maybe minus 10 degrees instead of 10 no we said minus

degrees instead of 10 no we said minus 10 before maybe i should go 10 degrees

10 before maybe i should go 10 degrees let me go ahead and try that

let me go ahead and try that and yeah we can see we get the opposite

and yeah we can see we get the opposite if we use a positive number instead of

if we use a positive number instead of the negative but we skewed this y also

the negative but we skewed this y also so it's leaning a little differently

so it's leaning a little differently than this one here on the top where the

than this one here on the top where the sides tilted now the top line's tilted

sides tilted now the top line's tilted at the top and the bottom actually

at the top and the bottom actually instead of the left and the right and

instead of the left and the right and finally as we did with scale and

finally as we did with scale and translate we can provide both in the

translate we can provide both in the same so transform and now we'll just say

same so transform and now we'll just say skew instead of skew x or y and here

skew instead of skew x or y and here i'll say minus 10 degrees and now i'll

i'll say minus 10 degrees and now i'll stick with minus 10 degrees here as well

stick with minus 10 degrees here as well and when we save we can see that applies

and when we save we can see that applies to both so it's leaning on the left and

to both so it's leaning on the left and the right and the lines have changed on

the right and the lines have changed on the top and the bottom as well now i've

the top and the bottom as well now i've touched on some of the basic uses with

touched on some of the basic uses with all of these transformations and there

all of these transformations and there are many more that you can reference in

are many more that you can reference in mdn and so as always i'm putting the mdn

mdn and so as always i'm putting the mdn link for transform and all of these

link for transform and all of these different possibilities in the course

different possibilities in the course description inside of the resources so

description inside of the resources so you'll find that on github when you go

you'll find that on github when you go to the course resources and now that

to the course resources and now that we've covered everything you can do with

we've covered everything you can do with transform i'll reset these back and

transform i'll reset these back and we're going to start looking at

we're going to start looking at transitions let's apply a transition to

transitions let's apply a transition to when we hover over the divs so we'll say

when we hover over the divs so we'll say div and then use our pseudo class

div and then use our pseudo class selector hover

selector hover and then inside of this we'll change the

and then inside of this we'll change the background color when we hover over that

background color when we hover over that will be easy to tell and let's use the

will be easy to tell and let's use the color midnight blue

color midnight blue next we need to provide the transition

next we need to provide the transition property that we are changing and that

property that we are changing and that is the background dash color

is the background dash color from there let's set the transition dash

from there let's set the transition dash duration and we'll set that to two

duration and we'll set that to two seconds and save so now when we mouse

seconds and save so now when we mouse over one of these i'll do the middle one

over one of these i'll do the middle one it takes two seconds and it changes to

it takes two seconds and it changes to midnight blue the same with the top

midnight blue the same with the top and the same with the bottom now we can

and the same with the bottom now we can also provide a transition

also provide a transition dash delay there it is let's set this to

dash delay there it is let's set this to just a half second we don't want to wait

just a half second we don't want to wait too long and now when i mouse over it

too long and now when i mouse over it doesn't change immediately but then it

doesn't change immediately but then it starts to so it waits that half second

starts to so it waits that half second first now this is important to know if

first now this is important to know if you put two transitions together that

you put two transitions together that transition delay does not go between the

transition delay does not go between the transitions it's just before it starts

transitions it's just before it starts so we have a half second delay and then

so we have a half second delay and then it goes ahead and does the two second

it goes ahead and does the two second transition to midnight blue now i

transition to midnight blue now i mentioned having a second transition or

mentioned having a second transition or a second transform that we're providing

a second transform that we're providing here so let's go ahead and do one other

here so let's go ahead and do one other pseudo selector i'll say div

pseudo selector i'll say div hover again but now we'll only apply

hover again but now we'll only apply this to the last child actually i need

this to the last child actually i need to say last child first

to say last child first and then hover there we go

and then hover there we go now for this i'll say

now for this i'll say transform and we'll just rotate

transform and we'll just rotate and let's rotate 180 degrees so this

and let's rotate 180 degrees so this would just apply to the last one but we

would just apply to the last one but we don't have a transition applied to that

don't have a transition applied to that yet either but we can up here if we want

yet either but we can up here if we want to in the same line so after background

to in the same line so after background color i can just put a comma

color i can just put a comma and say

and say transform

transform and then during the duration if i want

and then during the duration if i want that to be a different duration i can

that to be a different duration i can just say 3 seconds here

just say 3 seconds here and then if i don't want to delay or i

and then if i don't want to delay or i want the same delay i could just leave

want the same delay i could just leave it as is so let's just leave it as is so

it as is so let's just leave it as is so we've got background color two seconds

we've got background color two seconds transform three seconds

transform three seconds and we'll save and now if i hover over

and we'll save and now if i hover over this last one it waits that half second

this last one it waits that half second and then it begins to rotate and notice

and then it begins to rotate and notice it takes three seconds to rotate but

it takes three seconds to rotate but only two seconds to change colors once

only two seconds to change colors once i'll do this again you can see the color

i'll do this again you can see the color is fully changed before it stops

is fully changed before it stops rotating okay but that is a lot of

rotating okay but that is a lot of different lines here we've got

different lines here we've got transition property transition duration

transition property transition duration transition delay

transition delay and as you might guess there is a

and as you might guess there is a shorthand so i'm going to comment all of

shorthand so i'm going to comment all of those out with shift alt and the letter

those out with shift alt and the letter a

a and now i'm just going to say

and now i'm just going to say transition

transition and here i can say

and here i can say all of the transitions

all of the transitions instead of any specific one i'll say i

instead of any specific one i'll say i want them all to last two seconds and

want them all to last two seconds and all of them to have a half second delay

all of them to have a half second delay and i can save that and handle it all in

and i can save that and handle it all in one line so now when i mouse over

one line so now when i mouse over it just takes two seconds and it

it just takes two seconds and it finishes these still apply the same

finishes these still apply the same just a two second switch to the color

just a two second switch to the color now we can also provide a timing

now we can also provide a timing function here and there are some

function here and there are some definitions or other ones that are

definitions or other ones that are already defined essentially that we can

already defined essentially that we can put in here so the default

put in here so the default is ease but we could also put in some

is ease but we could also put in some others let's go ahead and set this up by

others let's go ahead and set this up by saying transition and now let's see

saying transition and now let's see timing function this is what we would be

timing function this is what we would be looking for a lot of different values

looking for a lot of different values that could go in here but the default is

that could go in here but the default is ease but once i start typing ease you

ease but once i start typing ease you can also see there's ease in ease in and

can also see there's ease in ease in and out or just ease out now what this means

out or just ease out now what this means and i usually can't tell much of a

and i usually can't tell much of a difference between ease and ease in and

difference between ease and ease in and out but it starts slow and then it

out but it starts slow and then it speeds up

speeds up and then once again it slows down at the

and then once again it slows down at the end so i'll just choose ease even though

end so i'll just choose ease even though that's the default

that's the default and let's go ahead and look at this now

and let's go ahead and look at this now well we can see more in the rotation so

well we can see more in the rotation so it starts slow it speeds up and it ends

it starts slow it speeds up and it ends slow now the opposite of that would be

slow now the opposite of that would be to say linear so it does everything at

to say linear so it does everything at an even pace and now you can see

an even pace and now you can see it just there's not a huge difference

it just there's not a huge difference but there's a little bit of difference

but there's a little bit of difference so you can provide this function and if

so you can provide this function and if you do so you can provide it right here

you do so you can provide it right here after how long the transition will take

after how long the transition will take so right here is where we might say

so right here is where we might say linear and of course move this comment

linear and of course move this comment over here

over here and save and now this should still apply

and save and now this should still apply the linear see it's not as fast as the

the linear see it's not as fast as the e's i kind of like the ease or let's try

e's i kind of like the ease or let's try ease in and out and see if we notice

ease in and out and see if we notice much of a change i don't usually but

much of a change i don't usually but let's see what we get does speed up and

let's see what we get does speed up and slows back down so i do like that a

slows back down so i do like that a little bit better personally than linear

little bit better personally than linear but both are available and remember if

but both are available and remember if you don't apply one ease on its own is

you don't apply one ease on its own is the default so even if we didn't say

the default so even if we didn't say ease in and out or linear or anything

ease in and out or linear or anything and we just left it as this it would

and we just left it as this it would apply the ease timing function as is now

apply the ease timing function as is now we've learned about transform and

we've learned about transform and transitions that can help us make a

transitions that can help us make a little more impact with the

little more impact with the transformations let's scroll for some

transformations let's scroll for some more room and now learn about animations

more room and now learn about animations that's just a little different so i'm

that's just a little different so i'm going to go ahead and start defining the

going to go ahead and start defining the class animate if you remember we applied

class animate if you remember we applied this class to this last div

this class to this last div inside of the html

inside of the html so for animate the first thing we need

so for animate the first thing we need to do is name our animation so we should

to do is name our animation so we should have animation dash

have animation dash name and here i'm just going to name

name and here i'm just going to name this slide

this slide then an animation

then an animation dash duration and i'll give this five

dash duration and i'll give this five seconds

seconds an animation let's spell that correctly

an animation let's spell that correctly again

again timing function and thank goodness

timing function and thank goodness visual studio code helps me spell here

visual studio code helps me spell here i'll say ease in

i'll say ease in and out so you can see this is a lot

and out so you can see this is a lot like a transition so far but you will

like a transition so far but you will notice a difference as well

notice a difference as well and we can provide an animation delay

and we can provide an animation delay let's let's delay this by one second

let's let's delay this by one second that's just a little bit longer we can

that's just a little bit longer we can also give

also give an animation iteration count so i'm

an animation iteration count so i'm going to have it repeat this animation

going to have it repeat this animation five times now let's go ahead and just

five times now let's go ahead and just go with those properties for now but

go with those properties for now but this in itself won't apply the animation

this in itself won't apply the animation we need to define key frames for the

we need to define key frames for the animation so we say at

animation so we say at keyframes and then we need to have an

keyframes and then we need to have an identifier here and the identifier is

identifier here and the identifier is the animation name slide

the animation name slide so now inside of this we'll say at zero

so now inside of this we'll say at zero percent essentially at the beginning of

percent essentially at the beginning of the animation we will

the animation we will transform

transform and then we'll translate x

and then we'll translate x and here inside of translate x i'll just

and here inside of translate x i'll just say zero so we're starting at square one

say zero so we're starting at square one we're not doing anything right when it

we're not doing anything right when it begins but then at 33 percent or one

begins but then at 33 percent or one third of the way through will once again

third of the way through will once again say

say transform and now i'll say translate

transform and now i'll say translate x

x and we'll move this 600 pixels to the

and we'll move this 600 pixels to the right so this will probably go way off

right so this will probably go way off the screen

the screen and then we'll rotate

180 degrees and notice there's no comma between those which is strange but

between those which is strange but that's the way it likes it in css so

that's the way it likes it in css so we'll just leave it like that after that

we'll just leave it like that after that i'm going to highlight this and do shift

i'm going to highlight this and do shift alt and the down arrow we'll change this

alt and the down arrow we'll change this 6

6 33 to a 66 so now we're two thirds of

33 to a 66 so now we're two thirds of the way through

the way through and now i'll switch this to a minus 600

and now i'll switch this to a minus 600 pixels

pixels and a minus 180 degrees so we're

and a minus 180 degrees so we're applying more than one thing here again

applying more than one thing here again no comma

no comma and then finally we'll get to a hundred

and then finally we'll get to a hundred percent

percent and at a hundred percent

and at a hundred percent i'm going to go ahead and say transform

i'm going to go ahead and say transform and our translate

and our translate x once again will be back to the zero

x once again will be back to the zero position

position and after that let's change the

and after that let's change the background color when we get to the

background color when we get to the final position to rebecca purple and

final position to rebecca purple and there will be a reason we want to see

there will be a reason we want to see this and how it changes so notice now it

this and how it changes so notice now it started animating right when i saved it

started animating right when i saved it didn't wait for a hover it's an

didn't wait for a hover it's an animation and let me go ahead and

animation and let me go ahead and pull this over to the full screen so we

pull this over to the full screen so we can see the full animation

and there's at least three now notice it changes back to green when

now notice it changes back to green when the animation starts again and that's

the animation starts again and that's something else to discuss

something else to discuss but let's go ahead and let it finish the

but let's go ahead and let it finish the five times and you can see it's going

five times and you can see it's going the 600 pixels in each direction it's

the 600 pixels in each direction it's rotating as we want it to and it changes

rotating as we want it to and it changes colors at the end but then it changes

colors at the end but then it changes back to green and it's back in that

back to green and it's back in that starting state so since we have a

starting state so since we have a smaller screen over here let's maybe

smaller screen over here let's maybe change these to 300 it'll probably still

change these to 300 it'll probably still make it to the edge or beyond of the

make it to the edge or beyond of the screen but we'll leave it at that and

screen but we'll leave it at that and then let's go ahead and add some more

then let's go ahead and add some more animation properties above and the next

animation properties above and the next one that i want to add is the animation

one that i want to add is the animation dash direction now the default here is

dash direction now the default here is just normal

just normal but that's not exactly what we have to

but that's not exactly what we have to choose so let's get those back up here

choose so let's get those back up here and there's alternate alternate reverse

and there's alternate alternate reverse reverse let's say alternate so that

reverse let's say alternate so that means it's going to go forward the first

means it's going to go forward the first time and then it's going to reverse the

time and then it's going to reverse the next time so when i save this it will

next time so when i save this it will start again

start again had that one second delay it went a

had that one second delay it went a little to the left a little to the right

little to the left a little to the right and then it stops now it went to the

and then it stops now it went to the left instead of the right first back to

left instead of the right first back to the right and stops and so on so now

the right and stops and so on so now we've seen those changes the next

we've seen those changes the next property to look at is animation fill

property to look at is animation fill mode so we'll say animation dash

mode so we'll say animation dash fill mode and now what happens here is

fill mode and now what happens here is we are talking about the actual ending

we are talking about the actual ending state

state so the default is backwards as you see

so the default is backwards as you see visual studio code brings up and that

visual studio code brings up and that means it goes back to the original state

means it goes back to the original state it now has that green background again

it now has that green background again but if we say

but if we say forwards

forwards when it stops

when it stops it should now go to that other state

it should now go to that other state then i'm going to shorten this up so

then i'm going to shorten this up so here we'll save it so it goes forward

here we'll save it so it goes forward once and then backwards once and then

once and then backwards once and then we'll be at the ending state so there

we'll be at the ending state so there was our forward now we go backward

was our forward now we go backward but when we get to the very end let's

but when we get to the very end let's see if it goes back to green or not well

see if it goes back to green or not well it did because we alternated so let's

it did because we alternated so let's switch this alternation back to normal

switch this alternation back to normal because

because it was the opposite when it did the

it was the opposite when it did the alternate the second time so there we

alternate the second time so there we end at purple

end at purple then it goes back to green and starts

then it goes back to green and starts again

again and now we're back to purple

and now we're back to purple and it stayed purple that's the point of

and it stayed purple that's the point of this animation fill mode since we set it

this animation fill mode since we set it to forwards instead of backwards it

to forwards instead of backwards it keeps the ending state so it stayed

keeps the ending state so it stayed purple now again there are some other

purple now again there are some other animation properties that you can dive

animation properties that you can dive into the mdn link that i'm going to

into the mdn link that i'm going to leave in the course resources because

leave in the course resources because there's a lot more you can do i'm just

there's a lot more you can do i'm just touching on the basics here today but

touching on the basics here today but once again look at how many properties

once again look at how many properties we had to use and we can use shorthand

we had to use and we can use shorthand instead of all those so i will comment

instead of all those so i will comment all of those out and now let's just

all of those out and now let's just apply the shorthand we'll say

apply the shorthand we'll say animation

animation that's going to last five seconds let's

that's going to last five seconds let's use

use ease in and out

ease in and out and then we'll say

and then we'll say one second delay and then let's do the

one second delay and then let's do the animation twice

animation twice let's say normal so it does it the same

let's say normal so it does it the same way both times

way both times and then the ending state will be

and then the ending state will be forwards

forwards and the animation name of course we have

and the animation name of course we have to provide and that is slide so if we do

to provide and that is slide so if we do that this should apply the same as we

that this should apply the same as we had all of these properties above but

had all of these properties above but this is shorthand so you can see how all

this is shorthand so you can see how all of these values fit into that one

of these values fit into that one shorthand line here for animation now

shorthand line here for animation now we've completed the basics about

we've completed the basics about transformations transitions and

transformations transitions and animations so let's go ahead and begin

animations so let's go ahead and begin working on that animated mobile nav menu

working on that animated mobile nav menu that will give us an animated hamburger

that will give us an animated hamburger icon and animated drop down menu that

icon and animated drop down menu that users could apply so to do that we need

users could apply so to do that we need to look at our other starter code i'm

to look at our other starter code i'm going to show the file tree again i'm

going to show the file tree again i'm also going to stop live server for now

also going to stop live server for now because we'll launch a different html

because we'll launch a different html file i'm going to drag this back over to

file i'm going to drag this back over to the full window

the full window and then we'll look at the menu.html

and then we'll look at the menu.html this will also be in your starter code

this will also be in your starter code and for the menu html we have got a

and for the menu html we have got a basic page here but there's a little

basic page here but there's a little more than in the previous example we

more than in the previous example we have a header element inside of the body

have a header element inside of the body and you can see this header element has

and you can see this header element has a section inside of it and it has the

a section inside of it and it has the class header title line and here we have

class header title line and here we have our h1 that says acme co and then we

our h1 that says acme co and then we have a button as well

have a button as well and inside this button is a div

and inside this button is a div and it has the class menu icon the

and it has the class menu icon the button has the class menu button and

button has the class menu button and then we have a nav element and inside

then we have a nav element and inside the nav element is an unordered list

the nav element is an unordered list with four list items now they are

with four list items now they are basically fake links with just the

basically fake links with just the hashtag that you would use as an anchor

hashtag that you would use as an anchor for the same page but i am going ahead

for the same page but i am going ahead and passing one link to a products page

and passing one link to a products page and this products page is basically just

and this products page is basically just like the menu.html page but of course it

like the menu.html page but of course it links back to the menu.html page just so

links back to the menu.html page just so we can see the difference there i have

we can see the difference there i have absolutely nothing in the main element

absolutely nothing in the main element this is all about the header and

this is all about the header and creating the menu around this header

creating the menu around this header structure so from there let me close

structure so from there let me close this style css and the index.html let's

this style css and the index.html let's look at the menu css that is being

look at the menu css that is being imported and what we have for starter

imported and what we have for starter code before we really start animating

code before we really start animating this menu so what we have again is the

this menu so what we have again is the import of the font basic css reset and

import of the font basic css reset and then we're setting two css variables

then we're setting two css variables just for the colors that we'll reuse in

just for the colors that we'll reuse in different areas the background colors of

different areas the background colors of flat black and then white smoke for the

flat black and then white smoke for the font color

font color and then the html itself once again just

and then the html itself once again just like the previous example has a font

like the previous example has a font size of one and a half rim set the font

size of one and a half rim set the font family to nanito so that's all inherited

family to nanito so that's all inherited the body has 100 viewport units min

the body has 100 viewport units min height and then is set to flex and a

height and then is set to flex and a column again and then the header itself

column again and then the header itself has a background color that's the header

has a background color that's the header background color and we set the basic

background color and we set the basic color here so we don't see a whole lot

color here so we don't see a whole lot of difference but i'm going to go ahead

of difference but i'm going to go ahead and launch this page now with live

and launch this page now with live server and drag visual studio code over

server and drag visual studio code over to the left

to the left and it looks like it launched the other

and it looks like it launched the other page so i'll need to change that

page so i'll need to change that and then inside of here i'm going to say

and then inside of here i'm going to say slash

slash menu.html now right now this doesn't

menu.html now right now this doesn't look too great we don't have a whole lot

look too great we don't have a whole lot that looks good for sure we have our

that looks good for sure we have our acme co here and then we've got our

acme co here and then we've got our links here as well and maybe a little

links here as well and maybe a little something odd there but now we'll start

something odd there but now we'll start to apply some other styles i'm going to

to apply some other styles i'm going to do ctrl b again to hide the file tree

do ctrl b again to hide the file tree and we can start with that header title

and we can start with that header title line and if you remember i believe

line and if you remember i believe that's what this is is the button we had

that's what this is is the button we had the acmeco h1 and then we had a button

the acmeco h1 and then we had a button all inside of that section element that

all inside of that section element that had the class header title line so i'll

had the class header title line so i'll put

put header dash

header dash title dash line and we'll start to apply

title dash line and we'll start to apply a few styles there let's give a padding

a few styles there let's give a padding 0.25 rim on top and bottom and 0.5 rim

0.25 rim on top and bottom and 0.5 rim on the left and the right

on the left and the right we'll set it to a display of flex

we'll set it to a display of flex and from there let's go ahead and set

and from there let's go ahead and set the flex dash flow

the flex dash flow and this will be a row instead of a

and this will be a row instead of a column and we'll say no wrap again

column and we'll say no wrap again and then after that let's justify the

and then after that let's justify the content and we want space between so we

content and we want space between so we go hard left and hard right with the

go hard left and hard right with the content we have which should be the h1

content we have which should be the h1 and the button i'll save this much and

and the button i'll save this much and we do see the change so now we see a

we do see the change so now we see a line over here that would be the button

line over here that would be the button we didn't really do much with it yet and

we didn't really do much with it yet and we've got our h1 over here okay after

we've got our h1 over here okay after our

our header title line class let's get the

header title line class let's get the next class which was menu dash button

next class which was menu dash button this is the button itself and i did use

this is the button itself and i did use a button element so we don't have to

a button element so we don't have to apply some other things and it's great

apply some other things and it's great for accessibility such as hitting the

for accessibility such as hitting the tab button it will automatically get

tab button it will automatically get focus on a button element if we used a

focus on a button element if we used a div for example we'd have to put in a

div for example we'd have to put in a tab index and there's some other

tab index and there's some other advantages as well but that's a big one

advantages as well but that's a big one okay for the menu button we'll say

okay for the menu button we'll say background dash color

background dash color and now we'll set that to transparent

and now we'll set that to transparent because we don't want that normal button

because we don't want that normal button color that we get and then we'll also

color that we get and then we'll also set the border to none because buttons

set the border to none because buttons usually do come with a border now let's

usually do come with a border now let's go ahead and give this some shape with

go ahead and give this some shape with the width

the width of 48 pixels

of 48 pixels and a height

and a height of 48 pixels which is kind of thumb size

of 48 pixels which is kind of thumb size i'll save this much and we definitely

i'll save this much and we definitely see a change it's gone we don't see the

see a change it's gone we don't see the 48 by 48 because we haven't done

48 by 48 because we haven't done anything else with it yet at this point

anything else with it yet at this point let's set the display

let's set the display to flex

to flex justify content and we want that

justify content and we want that center we also want to

center we also want to align the items

align the items center

center and i'll scroll just a little bit and

and i'll scroll just a little bit and after that we're going to set a position

after that we're going to set a position to

to relative if you remember the position

relative if you remember the position tutorial earlier in the css series that

tutorial earlier in the css series that means we're probably going to position

means we're probably going to position something absolute inside of the button

something absolute inside of the button but those are the button styles and if

but those are the button styles and if we say we really won't see a change at

we say we really won't see a change at this point because we don't have

this point because we don't have anything inside of that button and we've

anything inside of that button and we've set it to be transparent

set it to be transparent okay now we want the menu icon which is

okay now we want the menu icon which is the div

the div inside of the button but we're also

inside of the button but we're also going to select the menu dash icon

going to select the menu dash icon before pseudo element and the menu dash

before pseudo element and the menu dash icon

icon after pseudo element so all three of

after pseudo element so all three of these will be affected by this

these will be affected by this and we'll say

and we'll say background dash color

background dash color now let's use our variable

now let's use our variable and we want the header color just it's

and we want the header color just it's that white smoke color that we defined

that white smoke color that we defined above now here we'll set the width

above now here we'll set the width to 40 pixels and we'll give this a

to 40 pixels and we'll give this a height

height of 5 pixels

of 5 pixels and then i'll go ahead and save so you

and then i'll go ahead and save so you can see what we have we have one line

can see what we have we have one line essentially here a big dash that's 40

essentially here a big dash that's 40 pixels wide and 5 pixels high so now

pixels wide and 5 pixels high so now let's go ahead and set the

let's go ahead and set the border

border radius and we'll set that to 5 pixels

radius and we'll set that to 5 pixels and now this is going to be position

and now this is going to be position absolute i'll scroll again for a little

absolute i'll scroll again for a little more room and after that we're going to

more room and after that we're going to go ahead and set our transition

go ahead and set our transition right here because it will apply to all

right here because it will apply to all of these so we'll say all instead of any

of these so we'll say all instead of any specific property and then we want it to

specific property and then we want it to apply faster than we did in our examples

apply faster than we did in our examples in just a half second

in just a half second and we'll save that much now notice we

and we'll save that much now notice we only have

only have the one line and it does have the

the one line and it does have the rounded edges so it's one of the three

rounded edges so it's one of the three lines we expect in our hamburger menu

lines we expect in our hamburger menu but we applied this to all so where are

but we applied this to all so where are the others well the quick answer is

the others well the quick answer is they're all stacked on top of each other

they're all stacked on top of each other right now so we need to make a few more

right now so we need to make a few more changes before we see them the first

changes before we see them the first change is just going to apply to the

change is just going to apply to the menu icon

menu icon before

before and the menu dash icon

and the menu dash icon after but not the menu icon itself and

after but not the menu icon itself and here we just need to set the content to

here we just need to set the content to a blank basically an empty quotes here

a blank basically an empty quotes here because

because if we don't do that they won't be

if we don't do that they won't be visible so even though we didn't put

visible so even though we didn't put anything in there we need to set the

anything in there we need to set the content to empty value and then we can

content to empty value and then we can go ahead and set the menu dash icon

go ahead and set the menu dash icon before and we're going to need to

before and we're going to need to transform it now so we'll say transform

transform it now so we'll say transform and now we'll translate and we're going

and now we'll translate and we're going to provide two values here so

to provide two values here so i guess i could just do one first let's

i guess i could just do one first let's do translate

do translate y and i'll show you why we need to do

y and i'll show you why we need to do two values so i'll say minus 12

two values so i'll say minus 12 pixels and save

pixels and save and now look they're not even up here at

and now look they're not even up here at all that is not what we want so

all that is not what we want so really it starts in the middle and since

really it starts in the middle and since this is 40 pixels we need to have

this is 40 pixels we need to have translate because the x value needs to

translate because the x value needs to be minus

be minus 20 pixels and then the y value can be

20 pixels and then the y value can be the minus 12 to put it up above

the minus 12 to put it up above the actual one that was in the middle

the actual one that was in the middle defined by menu icon so now when i save

defined by menu icon so now when i save it gets pulled back over and i was

it gets pulled back over and i was expecting them to be the same length let

expecting them to be the same length let me make sure i put everything that i

me make sure i put everything that i thought i did and i'll come back and go

thought i did and i'll come back and go over that but right now two different

over that but right now two different links of lines however what i expected

links of lines however what i expected here did happen we've got the minus 20

here did happen we've got the minus 20 pixels to pull it back even and the

pixels to pull it back even and the minus 12 pixels to put it on top

minus 12 pixels to put it on top i'm going to select this now do shift

i'm going to select this now do shift alt and the down arrow and then change

alt and the down arrow and then change the before

the before to after

to after and now i'll also need minus 20 pixels

and now i'll also need minus 20 pixels here but now i'll need a plus 12 pixels

here but now i'll need a plus 12 pixels to put this next one underneath

to put this next one underneath and save and now they have straightened

and save and now they have straightened out that's what i needed was the

out that's what i needed was the hamburger menu all three the same so the

hamburger menu all three the same so the menu icon is the one in the middle and

menu icon is the one in the middle and then the top one is the before and the

then the top one is the before and the bottom one is the after pseudo element

bottom one is the after pseudo element and now i know why it was longer before

and now i know why it was longer before because they were stacked on top of each

because they were stacked on top of each other but this bottom one started in the

other but this bottom one started in the middle which then made it look like it

middle which then made it look like it extended the middle line which it was

extended the middle line which it was actually the two together but not

actually the two together but not starting at the same place

starting at the same place okay from there we can go ahead and

okay from there we can go ahead and apply some more styles to the nav i'm

apply some more styles to the nav i'm going to scroll for some more room and

going to scroll for some more room and we'll select the nav element now the nav

we'll select the nav element now the nav element is going to start out with a

element is going to start out with a display of none but i'm going to go

display of none but i'm going to go ahead and set up block here first so we

ahead and set up block here first so we can actually see what we're doing with

can actually see what we're doing with the nav element and then i'll come back

the nav element and then i'll come back and change it we also want a transform

and change it we also want a transform dash origin telling the transformation

dash origin telling the transformation where to start

where to start and we want it in the top and center

and we want it in the top and center because it's going to drop down

because it's going to drop down and now we're going to apply an

and now we're going to apply an animation but we haven't defined that

animation but we haven't defined that animation yet so let's go ahead and

animation yet so let's go ahead and define it first and underneath here

define it first and underneath here we'll say

we'll say at

at keyframes

keyframes and then we'll say

and then we'll say show menu

show menu and now we'll say at the zero percent

we will transform and then we want scale

and then we want scale y

y and we'll set that to zero

and we'll set that to zero and then after that we want the next one

and then after that we want the next one to be at eighty percent

to be at eighty percent and that's going to also be a transform

and that's going to also be a transform and this will also be a scale y

and this will also be a scale y but this will be 1.2 notice we don't

but this will be 1.2 notice we don't have to just stop at one so it actually

have to just stop at one so it actually will go 20 percent beyond

will go 20 percent beyond the intended size and that's going to

the intended size and that's going to give it just a little bit of a bounce

give it just a little bit of a bounce like kind of like stretching a blind

like kind of like stretching a blind down and then letting go of the blind

down and then letting go of the blind and it snaps back up just a little bit

and it snaps back up just a little bit so then we'll say at 100

so then we'll say at 100 we use

we use transform

transform and we'll say scale y and now we'll just

and we'll say scale y and now we'll just put it back to one and then after it

put it back to one and then after it snaps back up it will lose that 20

snaps back up it will lose that 20 percent so let's save that that will be

percent so let's save that that will be our show menu keyframes for how this

our show menu keyframes for how this transition will work i'm going to come

transition will work i'm going to come back to the nav and again like i said

back to the nav and again like i said change the display to none and i'm also

change the display to none and i'm also going to apply that animation but right

going to apply that animation but right now we just want to see what we're doing

now we just want to see what we're doing and not really have the animation or

and not really have the animation or have the nav hidden so we'll go ahead

have the nav hidden so we'll go ahead and come back to both of those things

and come back to both of those things right now we'll grab that unordered list

right now we'll grab that unordered list inside of the nav

inside of the nav we'll say list style type but not disk

we'll say list style type but not disk we'll set that to none

we'll set that to none and then we can set that unordered list

and then we can set that unordered list to a display

to a display of flex

of flex and then we'll set the flex flow there

and then we'll set the flex flow there to

to column and no wrap

column and no wrap and after that we can select the list

and after that we can select the list items so nav and li

items so nav and li and then we'll give them a padding of

and then we'll give them a padding of 0.5 ram all the way around

0.5 ram all the way around and let's put a border on top

and let's put a border on top to one pixel

to one pixel solid

solid and here i'll need var so i can set that

and here i'll need var so i can set that header dash

header dash color

color let's save this much and see what we've

let's save this much and see what we've got well we can see the menu is coming

got well we can see the menu is coming together we haven't really styled the

together we haven't really styled the links or positioned these at all

links or positioned these at all but we now clearly have a menu that

but we now clearly have a menu that would drop down that has individual

would drop down that has individual sections to it so let's go ahead and

sections to it so let's go ahead and style those links now so after the nav

style those links now so after the nav li we'll have nav

li we'll have nav lowercase please and the anchor tag so

lowercase please and the anchor tag so all of the links will be

all of the links will be display

display block instead of what they normally are

block instead of what they normally are which is inline

which is inline and then we'll say text align and set

and then we'll say text align and set them center

them center and then i'm going to give them a width

and then i'm going to give them a width of 80 percent

of 80 percent if i were to not be applying an

if i were to not be applying an animation if i did not apply an

animation if i did not apply an animation to these links

animation to these links then i would probably set them to a

then i would probably set them to a hundred percent and just change the

hundred percent and just change the background color and the text link so

background color and the text link so they would take up the whole space

they would take up the whole space but

but because i want to apply an animation

because i want to apply an animation today i'm setting these to 80 because

today i'm setting these to 80 because the animation will make it grow so that

the animation will make it grow so that is the consideration there and because

is the consideration there and because of that i'm also setting the margin to

of that i'm also setting the margin to uh auto so it will center these block

uh auto so it will center these block elements that they are now block

elements that they are now block elements when they normally aren't but

elements when they normally aren't but what we get

what we get are centered links right now we don't

are centered links right now we don't have an animation or a transformation i

have an animation or a transformation i should say applied to any of these yet

should say applied to any of these yet but we will

but we will after that we'll go ahead and select

after that we'll go ahead and select the nav

the nav we need the anchor and there we go the

we need the anchor and there we go the any link pseudo selector which is a

any link pseudo selector which is a pseudo class so this applies to both the

pseudo class so this applies to both the non-visited and visited links

non-visited and visited links and we'll say color we'll set our var

and we'll say color we'll set our var to the

to the header color once again so they stay

header color once again so they stay that same color whether they've been

that same color whether they've been visited or not

visited or not we'll set the font weight

we'll set the font weight to bold

to bold and text

and text decoration

decoration to none and that will remove the

to none and that will remove the outlines we have under those words now

outlines we have under those words now when we save they're nice and bold and

when we save they're nice and bold and they are that white smoke color that we

they are that white smoke color that we expect them to be and finally let's go

expect them to be and finally let's go ahead and apply this transformation

ahead and apply this transformation which will animate the links just a

which will animate the links just a little bit

little bit so we'll say nav and then hover

so we'll say nav and then hover and then we'll also apply this to the

and then we'll also apply this to the nav and if they have focus both of those

nav and if they have focus both of those we'll say transform

we'll say transform and now we can say scale and we'll go to

and now we can say scale and we'll go to 1.2 which is essentially saying 120

1.2 which is essentially saying 120 so they should grow 20 percent

so they should grow 20 percent and then we can set the transition right

and then we can set the transition right here as well so i'll just say all

here as well so i'll just say all 0.3 seconds so we don't want to wait too

0.3 seconds so we don't want to wait too long and now when i mouse over

long and now when i mouse over notice how they grow

notice how they grow and that works just great and this will

and that works just great and this will also happen if we tab through the page

also happen if we tab through the page you can see the outline and this is good

you can see the outline and this is good for accessibility we'll select each one

for accessibility we'll select each one of these as we go through so you do not

of these as we go through so you do not want to remove the outline you could

want to remove the outline you could change the colors or style it if you

change the colors or style it if you want to but i usually leave it basically

want to but i usually leave it basically as the default it does help with

as the default it does help with accessibility so you definitely want it

accessibility so you definitely want it there so you can tab through these as

there so you can tab through these as well now let's go back to our nav menu

well now let's go back to our nav menu and make those changes i talked about so

and make those changes i talked about so nav instead of display block should be

nav instead of display block should be none to start out

none to start out and then we also want to apply that

and then we also want to apply that animation which will be animation using

animation which will be animation using the shorthand here so we'll say show

the shorthand here so we'll say show menu that's the name of the animation

menu that's the name of the animation 0.5 seconds is the duration the default

0.5 seconds is the duration the default would be ease so we could say ease or

would be ease so we could say ease or ease in and out again i can't tell much

ease in and out again i can't tell much of a difference between the two and then

of a difference between the two and then we'll go with forwards so it leaves it

we'll go with forwards so it leaves it in that finishing state as we noticed in

in that finishing state as we noticed in our example before the square changed to

our example before the square changed to purple and stayed purple at the end

purple and stayed purple at the end instead of reverting back to green so

instead of reverting back to green so we'll say forwards here now this won't

we'll say forwards here now this won't apply a whole lot yet but when i save it

apply a whole lot yet but when i save it will disappear so now we need to do some

will disappear so now we need to do some other things so it will appear when we

other things so it will appear when we hover over the header or when we have

hover over the header or when we have focus anywhere in the header i'll put

focus anywhere in the header i'll put these final styles right above the nav

these final styles right above the nav here in our css and they're going to

here in our css and they're going to start with the is pseudo selector which

start with the is pseudo selector which will save us a little space i'm going to

will save us a little space i'm going to say header

say header and then hover but this will also apply

and then hover but this will also apply to the header

to the header focus dash within

focus dash within and now after that we can specify

and now after that we can specify the menu dash icon so you can see what

the menu dash icon so you can see what the is sudo selector helped us with

the is sudo selector helped us with otherwise we would have had to set a

otherwise we would have had to set a header hover menu icon header focus

header hover menu icon header focus within menu icon so it saved us just a

within menu icon so it saved us just a little bit so what we're going to do is

little bit so what we're going to do is say background

say background color and we'll set that to transparent

and then we'll also go ahead and say transform

go ahead and say transform well let me hold off on the transform

well let me hold off on the transform i'll come back to the transform let's

i'll come back to the transform let's just go with background color

just go with background color transparent to start out with for the

transparent to start out with for the menu icon and after that i'm just going

menu icon and after that i'm just going to select this

and drop this down now remember the menu icon itself is just this middle line

icon itself is just this middle line which means we'll be

which means we'll be losing the middle line when we mouse

losing the middle line when we mouse over

over now after that we'll say menu icon

now after that we'll say menu icon before

before so now we're selecting just the top line

so now we're selecting just the top line and instead of background color here i'm

and instead of background color here i'm going to want

going to want transform

transform and then i'm going to set a couple of

and then i'm going to set a couple of things one thing is the translate x and

things one thing is the translate x and that is because remember we already had

that is because remember we already had to translate x back minus 20 pixels we

to translate x back minus 20 pixels we need to do this again or it will end up

need to do this again or it will end up in a different area so we'll once again

in a different area so we'll once again say minus 20 pixels for the translate x

say minus 20 pixels for the translate x and then we're going to rotate and we'll

and then we're going to rotate and we'll rotate this line 45 degrees

rotate this line 45 degrees and we'll leave it at that now i'm going

and we'll leave it at that now i'm going to select all of this and do shift alt

to select all of this and do shift alt and the down arrow again i'm also going

and the down arrow again i'm also going to press alt z just so you can see what

to press alt z just so you can see what isn't showing over there so it's is

isn't showing over there so it's is header hover header focus within and

header hover header focus within and then we're selecting the menu icon

then we're selecting the menu icon before

before and now i'm switching this one to after

and now i'm switching this one to after once again i need translate x minus 20

once again i need translate x minus 20 pixels but now instead of 45 degrees i

pixels but now instead of 45 degrees i need minus 45 degrees

need minus 45 degrees finally i'm going to copy this one more

finally i'm going to copy this one more time

time select all of that down but instead of

select all of that down but instead of the menu icon before or after

the menu icon before or after i'm going to switch this

i'm going to switch this to the nav element itself it's not a

to the nav element itself it's not a class this is going to be the element

class this is going to be the element there we go

there we go and now we need to change that display

and now we need to change that display to block so it actually shows up because

to block so it actually shows up because before remember we had

before remember we had none

none so those are the different changes we

so those are the different changes we have made for when we hover over the

have made for when we hover over the header or when we have focus within the

header or when we have focus within the header which is important if we're going

header which is important if we're going to tab through so now let me hover over

to tab through so now let me hover over the header

the header and you can see our hamburger menu

and you can see our hamburger menu changes to an x

changes to an x and that's usually desirable so the

and that's usually desirable so the middle line disappeared we set that

middle line disappeared we set that background color to transparent then we

background color to transparent then we rotated the other lines the before and

rotated the other lines the before and the after so now they form an x and of

the after so now they form an x and of course we also had to set this to

course we also had to set this to display block for the menu to show and

display block for the menu to show and now as i hover over these that other

now as i hover over these that other transformation of course makes each one

transformation of course makes each one of the words grow by 20 so we can tell

of the words grow by 20 so we can tell what we're hovering over

what we're hovering over and then likewise if there's focus

and then likewise if there's focus within here now i remove this and it

within here now i remove this and it changes so there we go and we can see

changes so there we go and we can see that little bounce at the bottom too

that little bounce at the bottom too there we go

there we go now maybe we want to set a background

now maybe we want to set a background color on

color on the nav itself because i'm noticing

the nav itself because i'm noticing that's bouncing a little bit lower and

that's bouncing a little bit lower and going into the white there so let's go

going into the white there so let's go back to the nav

back to the nav and find where oh it was actually

and find where oh it was actually underneath here so let's set a

underneath here so let's set a background color on the nav itself

background color on the nav itself and here we'll say

and here we'll say var and grab that same

var and grab that same header background color

header background color and save now let's check out the bounce

and save now let's check out the bounce with the menu and yeah now we see that

with the menu and yeah now we see that color stays with this last word instead

color stays with this last word instead of dipping into the white there that

of dipping into the white there that looks good but there's one more

looks good but there's one more transform that we can apply and it's the

transform that we can apply and it's the one that i didn't before this goes to an

one that i didn't before this goes to an x which is great but let's apply this to

x which is great but let's apply this to the hamburger menu as well so this is

the hamburger menu as well so this is the menu icon and right here we'll say

the menu icon and right here we'll say transform and now let's rotate and let's

transform and now let's rotate and let's do

do 720 degrees so that's going to be a few

720 degrees so that's going to be a few full turns there at least a couple so

full turns there at least a couple so now when i hover over you get the spin

now when i hover over you get the spin and then we have the x

and then we have the x and that's a nice little effect as well

and that's a nice little effect as well so there everything is complete i hope

so there everything is complete i hope this has helped you learn a lot about

this has helped you learn a lot about transformations transitions and even

transformations transitions and even animations because they're very useful

animations because they're very useful but you don't want to overdo it too many

but you don't want to overdo it too many on a page can just be too much

on a page can just be too much before we get to the final project in

before we get to the final project in this css for beginner series there's one

this css for beginner series there's one more topic to cover and that's

more topic to cover and that's organizing your css i've included a

organizing your css i've included a markdown file with this lesson and the

markdown file with this lesson and the sample code and it just is going to

sample code and it just is going to contain an outline of suggestions to

contain an outline of suggestions to organize your css and i say suggestions

organize your css and i say suggestions because there are no hard and fast rules

because there are no hard and fast rules there are different theories and

there are different theories and different takes on this but the first

different takes on this but the first one

one is possibly the most important and that

is possibly the most important and that is follow

is follow your team

your team that's a very important rule to go with

that's a very important rule to go with because if your team has already

because if your team has already established how they're organizing the

established how they're organizing the file you need to follow that pattern

file you need to follow that pattern you're probably a junior dev getting

you're probably a junior dev getting started with them and you don't really

started with them and you don't really want to rock the boat there just follow

want to rock the boat there just follow and

and of course use the pattern that they have

of course use the pattern that they have and i'm sure there are reasons for that

and i'm sure there are reasons for that pattern after that we're going to have

pattern after that we're going to have code examples to look at so our second

code examples to look at so our second reason here or second suggestion is to

reason here or second suggestion is to use

use comments to create

comments to create headers or you might call them dividers

headers or you might call them dividers as well labels if you will inside of

as well labels if you will inside of your css now we've seen this already

your css now we've seen this already throughout this series as we've done a

throughout this series as we've done a few mini projects and you've seen that

few mini projects and you've seen that i've provided these headers which are

i've provided these headers which are much like what mdn suggests throughout

much like what mdn suggests throughout the css so here's our reset labeled and

the css so here's our reset labeled and then i have one for the variables and

then i have one for the variables and then inside of the root pseudo selector

then inside of the root pseudo selector here you can see i labeled colors there

here you can see i labeled colors there might be other variables that i would

might be other variables that i would create and so i might have sub labels

create and so i might have sub labels here inside of that pseudo selector for

here inside of that pseudo selector for that then i have utility classes general

that then i have utility classes general styles and now we get down to blocks

styles and now we get down to blocks which is something we're going to talk

which is something we're going to talk about in just a little bit but this is

about in just a little bit but this is just our starter css for the day but you

just our starter css for the day but you can see how i've already organized it

can see how i've already organized it and those comments will really help you

and those comments will really help you get back up to speed if you come back to

get back up to speed if you come back to your project a month later or anybody

your project a month later or anybody else that's working with you they'll

else that's working with you they'll easily find the section that they're

easily find the section that they're looking for

looking for okay the third suggestion here is to

okay the third suggestion here is to sort properties

sort properties and typically you sort those properties

and typically you sort those properties alphabetically but this is not

alphabetically but this is not everybody's choice some people prefer to

everybody's choice some people prefer to sort properties in their own groups that

sort properties in their own groups that they have

they have chosen and mdn has some suggestions for

chosen and mdn has some suggestions for that too so i'm going to put a link in

that too so i'm going to put a link in the resources to that mdn page that has

the resources to that mdn page that has those other suggestions and also a link

those other suggestions and also a link to an article that discusses sorting

to an article that discusses sorting your css properties alphabetically now

your css properties alphabetically now that's not how we write them so i'm

that's not how we write them so i'm going to show you what i do here in just

going to show you what i do here in just a second but i want to give you a memory

a second but i want to give you a memory technique to remember this by sorting

technique to remember this by sorting alphabetically at least in the english

alphabetically at least in the english language we usually say that abc's which

language we usually say that abc's which would be our alphabet so just remember

would be our alphabet so just remember abcs and that will help you remember

abcs and that will help you remember sort alphabetically so

sort alphabetically so abcss if you will okay i'll save the

abcss if you will okay i'll save the markdown file now let me show you an

markdown file now let me show you an example of this and how to do this in

example of this and how to do this in visual studio code typically in a small

visual studio code typically in a small project it's easy to find these and

project it's easy to find these and really i don't sort them so you can see

really i don't sort them so you can see i have margin padding and box sizing now

i have margin padding and box sizing now if i did this alphabetically box sizing

if i did this alphabetically box sizing would be on top but that's not how i

would be on top but that's not how i write css it's not what i'm thinking of

write css it's not what i'm thinking of when i write the properties like if i

when i write the properties like if i create a flexbox for example and we'll

create a flexbox for example and we'll see that as we get down here to the body

see that as we get down here to the body i have these properties i had display

i have these properties i had display flex and then flex flow justify content

flex and then flex flow justify content and then align items well that starts

and then align items well that starts with a but i don't think of it in that

with a but i don't think of it in that order i would write my css in this order

order i would write my css in this order but then to sort it alphabetically say

but then to sort it alphabetically say when i'm done if i'm working with others

when i'm done if i'm working with others and or i want to come back to the

and or i want to come back to the project later and of course just find

project later and of course just find the properties easily select all of

the properties easily select all of these properties and then control p now

these properties and then control p now i'm on windows that may be a little

i'm on windows that may be a little different on mac but ctrl p to open up

different on mac but ctrl p to open up the command palette in visual studio

the command palette in visual studio code and then the greater than symbol

code and then the greater than symbol and type the word sort you can see it

and type the word sort you can see it shows mine says recently used sort lines

shows mine says recently used sort lines ascending but you may not have that so

ascending but you may not have that so type the word sort and then you'll see

type the word sort and then you'll see the different sort choices choose sort

the different sort choices choose sort lines ascending and you can see it

lines ascending and you can see it sorted these alphabetically for me so

sorted these alphabetically for me so sort lines ascending is what you want

sort lines ascending is what you want from the command palette now they're

from the command palette now they're sorted and i know what property say the

sorted and i know what property say the specific property i'm looking for maybe

specific property i'm looking for maybe align items it's right at the top or gap

align items it's right at the top or gap i know it's going to be right here

i know it's going to be right here alphabetically

alphabetically likewise this helps you find issues say

likewise this helps you find issues say you had a second

you had a second gap or a second

gap or a second min height or display just you

min height or display just you accidentally put the property in twice

accidentally put the property in twice and one was defeating the other due to

and one was defeating the other due to the cascade well you would find it when

the cascade well you would find it when you sorted because then it would say put

you sorted because then it would say put both displays on lines right beside each

both displays on lines right beside each other so you would find those issues so

other so you would find those issues so sorting alphabetically the abcss is a

sorting alphabetically the abcss is a good way to go now i'm going to press

good way to go now i'm going to press ctrl z to undo that because i'm going to

ctrl z to undo that because i'm going to come back and change this in a little

come back and change this in a little bit and once again i'm thinking about

bit and once again i'm thinking about these flex properties especially justify

these flex properties especially justify content and align items in that order

content and align items in that order and i know right where to find those

and i know right where to find those again small projects it's much easier to

again small projects it's much easier to just leave it this way

just leave it this way okay back in the markdown here's the big

okay back in the markdown here's the big one that we're going to spend most of

one that we're going to spend most of our time on today and this is for larger

our time on today and this is for larger projects you wouldn't typically do this

projects you wouldn't typically do this in a small project but on a team larger

in a small project but on a team larger projects they usually have a naming

projects they usually have a naming convention

convention methodology so i'll put

methodology so i'll put follow a

follow a naming

naming convention

convention methodology if i could spell that right

methodology if i could spell that right there we go

there we go methodology and a very popular naming

methodology and a very popular naming convention methodology

convention methodology is b e m which stands for block element

is b e m which stands for block element modifier so block

modifier so block element

element modifier there we go so there are others

modifier there we go so there are others this is just a popular one so i want to

this is just a popular one so i want to go over

go over this popular version and of course your

this popular version and of course your team may not use this they this may not

team may not use this they this may not be the one you adopt going forward but

be the one you adopt going forward but do know it exists and know that it is

do know it exists and know that it is used a lot so you may see it out there

used a lot so you may see it out there in code example so now let's go back to

in code example so now let's go back to our code

our code and besides what we have here we start

and besides what we have here we start with a block here at the bottom so you

with a block here at the bottom so you can see i've defined a button class now

can see i've defined a button class now typically even frameworks and libraries

typically even frameworks and libraries that you may learn later to work with on

that you may learn later to work with on larger projects will apply classes

larger projects will apply classes to put most of the styles on the page

to put most of the styles on the page and you can see other than the html and

and you can see other than the html and the body i'm really starting out here

the body i'm really starting out here with the class and now above i have a

with the class and now above i have a utility class here and some variables

utility class here and some variables but other than that just here in the

but other than that just here in the reset i had of course the button and i

reset i had of course the button and i might put an image here and set the

might put an image here and set the display to block or anything else i'd

display to block or anything else i'd want to do in the reset but after i get

want to do in the reset but after i get past the big elements of html and body

past the big elements of html and body i'm probably going to use classes and

i'm probably going to use classes and these naming conventions other

these naming conventions other frameworks and libraries that have been

frameworks and libraries that have been built by third parties those usually

built by third parties those usually apply classes as well so we start out

apply classes as well so we start out with a block and here it is also it says

with a block and here it is also it says aka components you may hear some people

aka components you may hear some people refer to these as components instead of

refer to these as components instead of blocks but they're talking about the

blocks but they're talking about the same thing now this has a semantic

same thing now this has a semantic meaning it's important it's saying we're

meaning it's important it's saying we're defining a button so the button has a

defining a button so the button has a width of 100 a height of 100 pixels both

width of 100 a height of 100 pixels both and a border radius of 15. this is our

and a border radius of 15. this is our basic button style that we want to use

basic button style that we want to use on the page and when we go to our html

on the page and when we go to our html we see three buttons and they all have

we see three buttons and they all have that class button and of course they can

that class button and of course they can have different content

have different content but then we get to the next part of

but then we get to the next part of block element modifier methodology and

block element modifier methodology and we're first going to look at the

we're first going to look at the modifiers i'm going to scroll for a

modifiers i'm going to scroll for a little more room here and i'll get that

little more room here and i'll get that just right up to the top of the page and

just right up to the top of the page and underneath i'm going to paste in some

underneath i'm going to paste in some code and we can see those changes but

code and we can see those changes but notice what i've done i've i put another

notice what i've done i've i put another comment here that says modifiers now

comment here that says modifiers now this isn't something you would need to

this isn't something you would need to do in your code i am just identifying

do in your code i am just identifying these for you for the tutorial but what

these for you for the tutorial but what modifiers are about are about

modifiers are about are about incremental style changes so here we're

incremental style changes so here we're going to have blocks with modifiers so

going to have blocks with modifiers so our button is the block

our button is the block and then we have two dashes not one if

and then we have two dashes not one if we were to name something

we were to name something we might have two words in the name and

we might have two words in the name and we could put one dash in between and

we could put one dash in between and this is why bem uses two dashes and

this is why bem uses two dashes and later we'll see two underlines but these

later we'll see two underlines but these two dashes indicate that this is going

two dashes indicate that this is going to be a modifier and then you can see

to be a modifier and then you can see i've got the name secondary

i've got the name secondary the other one i've got the name lean and

the other one i've got the name lean and the third one i've got border and here

the third one i've got border and here you see a name that has

you see a name that has one dash in it so border and then lg

one dash in it so border and then lg stands for large so a large border so

stands for large so a large border so these are incremental changes we can

these are incremental changes we can make to the blocks with modifiers

make to the blocks with modifiers now we don't replace what we previously

now we don't replace what we previously had the button class we add this in

had the button class we add this in addition in our code so for example here

addition in our code so for example here on our second button

on our second button we could put btn-sec

we could put btn-sec [Music]

[Music] and i'll save once i spell secondary

and i'll save once i spell secondary correctly and now you can see we have a

correctly and now you can see we have a yellow button notice in the html we've

yellow button notice in the html we've applied both the button class and the

applied both the button class and the button secondary class likewise on the

button secondary class likewise on the third button we could put our button

third button we could put our button dash dash

dash dash lean

lean and now we have applied that modifier as

and now we have applied that modifier as well to our block so our button lean

well to our block so our button lean modifier and the third button here is

modifier and the third button here is leaning and i believe we had another one

leaning and i believe we had another one let me look back yep

let me look back yep border large so we could apply another

border large so we could apply another class you can apply as many as you want

class you can apply as many as you want to so we have button dash dash

to so we have button dash dash and then we said border dash

and then we said border dash large and save

large and save and of course now it's outlined in white

and of course now it's outlined in white so it's a little harder to see than what

so it's a little harder to see than what we had with the black border before but

we had with the black border before but we'll change that here in the future but

we'll change that here in the future but it did of course make it a little harder

it did of course make it a little harder to see right now i could press alt z so

to see right now i could press alt z so that wraps well it didn't there it is

that wraps well it didn't there it is it's already wrapping it just wrapped on

it's already wrapping it just wrapped on part of that closing element but there

part of that closing element but there we've applied

we've applied modifiers to the blocks and these

modifiers to the blocks and these modifiers have provided incremental

modifiers have provided incremental changes to our more important semantic

changes to our more important semantic blocks our buttons and those are the

blocks our buttons and those are the starting styles that we want and then of

starting styles that we want and then of course we can modify them with each

course we can modify them with each class that we apply okay let's move on

class that we apply okay let's move on to elements now but before we do that i

to elements now but before we do that i need to add some html over here we're

need to add some html over here we're going to turn our three buttons into a

going to turn our three buttons into a header so i just need to add the rest of

header so i just need to add the rest of the header so i'll type header and add a

the header so i'll type header and add a class of header to start out but that

class of header to start out but that closing header tag is going to need to

closing header tag is going to need to come after all of our buttons as well

come after all of our buttons as well so we'll add that much and save and you

so we'll add that much and save and you can see the changes will be over here to

can see the changes will be over here to the right after that i'm going to add an

the right after that i'm going to add an h1 and it's going to have a different

h1 and it's going to have a different class so it's going to have header two

class so it's going to have header two underscores

underscores and then title

and then title and there we go and then for the title

and there we go and then for the title i'll just put b e m for our block

i'll just put b e m for our block element modifier lesson and save that

element modifier lesson and save that much now we see bem on the page

much now we see bem on the page after that i'm going to add a nav that

after that i'm going to add a nav that will be wrapped around these buttons and

will be wrapped around these buttons and it's going to have a class also that is

it's going to have a class also that is header two underscores and nav and of

header two underscores and nav and of course i need to put the closing nav

course i need to put the closing nav after the buttons as well

after the buttons as well and i can save now we could say we're

and i can save now we could say we're finished with this and apply some

finished with this and apply some classes but let me first describe what

classes but let me first describe what i'm doing here so you can see our

i'm doing here so you can see our component is the header it is the

component is the header it is the important semantic element

important semantic element and now what's within it depends upon

and now what's within it depends upon the header so we have a header with two

the header so we have a header with two underscores and then a title this is the

underscores and then a title this is the element the e in bem the block element

element the e in bem the block element modifier methodology

modifier methodology and then we also have another element

and then we also have another element that is dependent on the header and that

that is dependent on the header and that is the nav

is the nav now inside here we could say are these

now inside here we could say are these buttons dependent on the header or not

buttons dependent on the header or not because if we have a button style we're

because if we have a button style we're using throughout our site and not just

using throughout our site and not just in the header

in the header we would want to leave this as it is

we would want to leave this as it is because this would be important so we

because this would be important so we don't have to redefine the same button

don't have to redefine the same button style somewhere else however if these

style somewhere else however if these are buttons that we're designing a

are buttons that we're designing a specific way

specific way just for the header then they would

just for the header then they would become dependent on that header and if

become dependent on that header and if that was the case then we would say

that was the case then we would say header

header two underscores

two underscores button and of course we would change

button and of course we would change everything else here so i'm going to

everything else here so i'm going to select one button and then control d to

select one button and then control d to get the next

get the next and the next and there's one more there

and the next and there's one more there i've got all five of them now

i've got all five of them now and now i'll arrow to the left and i'll

and now i'll arrow to the left and i'll put header

put header two underscores

two underscores and save and you can see we've changed

and save and you can see we've changed each one of those classes now because

each one of those classes now because they are dependent on the header it's

they are dependent on the header it's also important to note that this does

also important to note that this does not display the structure so you might

not display the structure so you might think you need to put header two

think you need to put header two underscores then nav and two underscores

underscores then nav and two underscores and then button that is not the case you

and then button that is not the case you only want to start out with the major

only want to start out with the major component the block name the b here so

component the block name the b here so header two underscores and then whatever

header two underscores and then whatever the actual element is so in this case

the actual element is so in this case it's a button in this case it's a nav

it's a button in this case it's a nav and in this case well it's an h1 but

and in this case well it's an h1 but we're going to call it title because

we're going to call it title because that semantically makes more sense to me

that semantically makes more sense to me and you can do that again there are no

and you can do that again there are no hard and fast rules but if you're

hard and fast rules but if you're following this pattern the actual rules

following this pattern the actual rules for the pattern are two underscores and

for the pattern are two underscores and then element likewise for the modifier

then element likewise for the modifier two dashes and then the modifier so i'm

two dashes and then the modifier so i'm going to save these changes and then

going to save these changes and then let's go back and modify the styles that

let's go back and modify the styles that we have over here and include those

we have over here and include those elements as well so there is our block

elements as well so there is our block section and we actually need to include

section and we actually need to include the header itself now inside of our

the header itself now inside of our block so i'll start here under our

block so i'll start here under our comments and say header

comments and say header then we're going to have a background

then we're going to have a background color and i'm going to say var and

color and i'm going to say var and change this to our

change this to our header color or background color that

header color or background color that was defined before so there's the b

was defined before so there's the b after that we would also have a color

there we go color and i'm going to put another var

another var two dashes and choose

two dashes and choose color

color after that we're going to have some

after that we're going to have some padding and i'm going to say one rim on

padding and i'm going to say one rim on the top one rim on the left and right

the top one rim on the left and right and one half rim

and one half rim on the bottom

on the bottom we'll make this a display

we'll make this a display of flex

of flex flex

flex dash flow

dash flow whoops flex dash flow is going to be row

whoops flex dash flow is going to be row and no wrap

and no wrap and then we'll justify content and we'll

and then we'll justify content and we'll say space dash

say space dash between

between we'll save that we definitely see a

we'll save that we definitely see a change but not everything we want yet

change but not everything we want yet let's go up and remove some things from

let's go up and remove some things from the body all we really need to keep

the body all we really need to keep are the first three properties let's get

are the first three properties let's get rid of these bottom three

rid of these bottom three and we'll save that and we see a few

and we'll save that and we see a few changes at the top not exactly

changes at the top not exactly everything we want yet but we're getting

everything we want yet but we're getting closer and i think i see i forgot the

closer and i think i see i forgot the word header on the color so if i put

word header on the color so if i put that

that should change those to white letters

should change those to white letters that looks a little better as well and

that looks a little better as well and now let's add an element section that

now let's add an element section that i'm going to put right after our button

i'm going to put right after our button class and i'll just put the comments

class and i'll just put the comments there it looks like it's wrapping here

there it looks like it's wrapping here but what i wanted to add along with just

but what i wanted to add along with just the elements editor is

the elements editor is the comment no standalone meaning in

the comment no standalone meaning in other words they're semantically tied to

other words they're semantically tied to the block they are dependent upon that

the block they are dependent upon that block so it's not just a button it's

block so it's not just a button it's going to be the header button style and

going to be the header button style and likewise it does not represent the

likewise it does not represent the structure so what we do not want

structure so what we do not want is the header underscore two underscores

is the header underscore two underscores nav two underscores button you would not

nav two underscores button you would not want that you would just want header

want that you would just want header underscore button and i don't know why i

underscore button and i don't know why i have the period there looks well that's

have the period there looks well that's weird i'll control z to

weird i'll control z to change that again maybe that's marking

change that again maybe that's marking something let's see if i can just back

something let's see if i can just back up one

up one not

not header nav underscore button and save

header nav underscore button and save okay

okay got the comments there now i actually

got the comments there now i actually need to put in the style well it's going

need to put in the style well it's going to be the same as the button so i'll

to be the same as the button so i'll just copy this

just copy this control x to move it down

control x to move it down put it underneath

put it underneath and paste it in but we're going to

and paste it in but we're going to change this now to our

change this now to our header two underscores and button now we

header two underscores and button now we have our button style back in place for

have our button style back in place for the header but we don't have any of the

the header but we don't have any of the modifiers in place that we applied to

modifiers in place that we applied to the html so i'm going to select

the html so i'm going to select all three instances of the dot btn here

all three instances of the dot btn here arrow to the left

arrow to the left one arrow to the right and type header

one arrow to the right and type header two underscores and now they should once

two underscores and now they should once again be applied and we can see that so

again be applied and we can see that so we have the yellow background here

we have the yellow background here and we also have the leaning button here

and we also have the leaning button here on the third one let's check that border

on the third one let's check that border large maybe we just need to change that

large maybe we just need to change that color to see it better or we could apply

color to see it better or we could apply another class that would help us see it

another class that would help us see it better so besides

better so besides the button

the button lean and border large let's go ahead and

lean and border large let's go ahead and apply the

apply the header to underscore

header to underscore button dash dash

button dash dash secondary to this third button as well

secondary to this third button as well and now we can see the yellow color here

and now we can see the yellow color here and then we see the white border as well

and then we see the white border as well notice there is a space between each

notice there is a space between each class that we apply to these elements in

class that we apply to these elements in the html okay jumping back to the style

the html okay jumping back to the style now we have modifiers that are applied

now we have modifiers that are applied to the elements instead of the blocks

to the elements instead of the blocks you can apply a modifier to either one

you can apply a modifier to either one but just know an element is going to

but just know an element is going to have the two underscores and of course a

have the two underscores and of course a block is just going to be the class

block is just going to be the class defined such as header or previously we

defined such as header or previously we had dot btn for button now this all

had dot btn for button now this all helps with organization and like i said

helps with organization and like i said when you're working on teams it's great

when you're working on teams it's great to have that document communicate what

to have that document communicate what you're working on as fast as possible

you're working on as fast as possible and follow the pattern of the team

and follow the pattern of the team and if you just have a large project on

and if you just have a large project on your own this may help as well one other

your own this may help as well one other thing this can help with and i want to

thing this can help with and i want to show this with the elements section is

show this with the elements section is when we're selecting something

when we're selecting something it's good to say a class like dot header

it's good to say a class like dot header has a specificity of 10

has a specificity of 10 and we've seen that with the specificity

and we've seen that with the specificity calculator that should still be linked

calculator that should still be linked in the course resources however if we

in the course resources however if we did this and then instead of using an

did this and then instead of using an element selector such as bem which is a

element selector such as bem which is a class when it's all said and done this

class when it's all said and done this is just a class a header two underscores

is just a class a header two underscores button instead of

button instead of header space button if we did this which

header space button if we did this which says the class and then the element

says the class and then the element within the class or any button elements

within the class or any button elements within the class this has a specificity

within the class this has a specificity of 11 instead of 10. it's much better to

of 11 instead of 10. it's much better to keep that specificity even and using

keep that specificity even and using classes like this helps you do that as

classes like this helps you do that as well so that is just an added bonus that

well so that is just an added bonus that i wanted to go ahead and mention i hope

i wanted to go ahead and mention i hope all of these suggestions help you

all of these suggestions help you organize your css in the future and i

organize your css in the future and i plan to use some of them coming up next

plan to use some of them coming up next on the final project

on the final project welcome to the final project of this css

welcome to the final project of this css for beginners course at the end of my

for beginners course at the end of my html for beginners course we built a

html for beginners course we built a full website for the little taco shop

full website for the little taco shop that you see here

that you see here it's a basic website with very minimal

it's a basic website with very minimal css applied but it provides a great

css applied but it provides a great foundation for our css final project

foundation for our css final project we're going to take this basic html

we're going to take this basic html website and turn it into

website and turn it into this modern website with responsive

this modern website with responsive design by applying much of what we've

design by applying much of what we've learned about css

learned about css let's get started today by looking at

let's get started today by looking at the starter code and this is available

the starter code and this is available in the course resources you'll want to

in the course resources you'll want to download this code because it is the

download this code because it is the full website that we completed at the

full website that we completed at the end of my html for beginners course and

end of my html for beginners course and it will give us a great foundation for

it will give us a great foundation for this project

this project now if you completed that you already

now if you completed that you already know what all is in the code however if

know what all is in the code however if you hadn't let's quickly go over it we

you hadn't let's quickly go over it we have a few html pages and we're going to

have a few html pages and we're going to make a few changes to those not many

make a few changes to those not many though

though and then we have an image folder img

and then we have an image folder img inside this image folder i've included

inside this image folder i've included some larger images today so we will be

some larger images today so we will be able to delete the smaller images i left

able to delete the smaller images i left those in as well though in case you

those in as well though in case you wanted to launch the project as it was

wanted to launch the project as it was in the beginning as we finished it in

in the beginning as we finished it in the html for beginners course but the

the html for beginners course but the top names when you see the double names

top names when you see the double names they end with the dimensions and of

they end with the dimensions and of course the width on the smaller the

course the width on the smaller the older images is 400 pixels the width on

older images is 400 pixels the width on the newer images is 1000 pixels and i've

the newer images is 1000 pixels and i've included those dimensions in the file

included those dimensions in the file names so for the duplicates you always

names so for the duplicates you always want to choose the one on top

want to choose the one on top and then i have a fourth image that does

and then i have a fourth image that does not have a duplicate because we will add

not have a duplicate because we will add one page today

one page today but let's

but let's select those duplicates and then i'm

select those duplicates and then i'm going to press the delete key and now

going to press the delete key and now we're left with just our larger images

we're left with just our larger images likewise there was an examples folder

likewise there was an examples folder and this just gave us example images of

and this just gave us example images of what the project looked like at the end

what the project looked like at the end of that html course if you wanted to

of that html course if you wanted to complete the challenge at that point you

complete the challenge at that point you were welcome to try to look at these

were welcome to try to look at these images and complete that and then look

images and complete that and then look at my code so let's click that examples

at my code so let's click that examples folder and also press delete as we no

folder and also press delete as we no longer need those files

longer need those files now there is very very minimal css

now there is very very minimal css applied to this project so we will be

applied to this project so we will be cleaning out

cleaning out everything that is in the css file you

everything that is in the css file you can press ctrl a to select all and hit

can press ctrl a to select all and hit backspace and delete those 19 lines of

backspace and delete those 19 lines of css that did exist so that gets us

css that did exist so that gets us started now let's go to the index.html

started now let's go to the index.html which is the home page and we'll start

which is the home page and we'll start by looking at the head section the head

by looking at the head section the head section contains all of the meta tags

section contains all of the meta tags that we would need in a project you can

that we would need in a project you can see author and description however there

see author and description however there is one missing that we're going to have

is one missing that we're going to have to add but since we're creating another

to add but since we're creating another new page and we're going to just include

new page and we're going to just include the about content that is currently

the about content that is currently in the index html we had an about

in the index html we had an about section we're just going to make that a

section we're just going to make that a new page and abstract that just remove

new page and abstract that just remove it

it from the index and put it in its own

from the index and put it in its own page today so let's go ahead and do that

page today so let's go ahead and do that and then i'll show you what's missing

and then i'll show you what's missing from the head section in all of the

from the head section in all of the pages we already have so let's click the

pages we already have so let's click the new file icon

new file icon then type well it looks like maybe i

then type well it looks like maybe i already included it here before i

already included it here before i actually do that but you would want to

actually do that but you would want to click the new file icon because the

click the new file icon because the about page would not be in the starter

about page would not be in the starter code i guess i typed that in earlier but

code i guess i typed that in earlier but now we have a blank html file i'm going

now we have a blank html file i'm going to type an exclamation mark which is an

to type an exclamation mark which is an image shortcut but if the shortcut

image shortcut but if the shortcut doesn't pop up for you you can press

doesn't pop up for you you can press control and the space bar and then you

control and the space bar and then you should see the shortcut menu and select

should see the shortcut menu and select this top abbreviation and this gives us

this top abbreviation and this gives us the outline of a page now there's a

the outline of a page now there's a couple of things it includes that we

couple of things it includes that we don't have in the other html files from

don't have in the other html files from that html beginners project one is this

that html beginners project one is this meta tag that has xua compatible ie

meta tag that has xua compatible ie equals edge

equals edge they still include that with this image

they still include that with this image shortcut but it's not really necessary

shortcut but it's not really necessary unless you're concerned about possibly

unless you're concerned about possibly supporting internet explorer which at

supporting internet explorer which at this point has been discontinued and for

this point has been discontinued and for the most part is no longer in use but

the most part is no longer in use but you could include that the one that i

you could include that the one that i want to make sure we include today is

want to make sure we include today is the next one meta with the name equal to

the next one meta with the name equal to viewport then the content is equal to

viewport then the content is equal to width equals device width and initial

width equals device width and initial scale of 1.0 we absolutely need that

scale of 1.0 we absolutely need that meta tag in the header of all of our

meta tag in the header of all of our html pages so we can make them

html pages so we can make them responsive so i'm going to copy this and

responsive so i'm going to copy this and then i'll go back to that index.html

then i'll go back to that index.html and i'm just going to put it right

and i'm just going to put it right underneath the utf-8

underneath the utf-8 that we have in the medic

that we have in the medic care set which is character set here in

care set which is character set here in the head and of course we can remove

the head and of course we can remove that space and save and then i'm going

that space and save and then i'm going to want to do that in the hours.html as

to want to do that in the hours.html as well

well so i'll put that in get rid of the blank

so i'll put that in get rid of the blank line ctrl s to save one more time in the

line ctrl s to save one more time in the contact dot html and we'll put it right

contact dot html and we'll put it right after the utf

after the utf dash eight line and save so now that

dash eight line and save so now that we've done that back here in our about

we've done that back here in our about we could fill in all of these blank

we could fill in all of these blank things that we have or we could just

things that we have or we could just copy the pattern that we already have

copy the pattern that we already have inside of the index.html so i'm just

inside of the index.html so i'm just going to copy the full head section here

going to copy the full head section here the entire head element with the opening

the entire head element with the opening and closing tags

and closing tags go back to about

go back to about and then i'm going to select it here

and then i'm going to select it here and paste it in now i'll just change

and paste it in now i'll just change some information now i can see some of

some information now i can see some of that's going off the screen so i'll

that's going off the screen so i'll press alt z

press alt z and get that code to wrap so i can see

and get that code to wrap so i can see everything you'll want to change of

everything you'll want to change of course my name in the

course my name in the author meta tag to your name

author meta tag to your name and now for the description instead of

and now for the description instead of the official website here we would just

the official website here we would just want

want about the little taco shop

about the little taco shop so this is the about page and that's

so this is the about page and that's what we have and we could put the same

what we have and we could put the same in the title about the little taco shop

in the title about the little taco shop everything else is pretty much as we

everything else is pretty much as we need it for now so i'll press ctrl s to

need it for now so i'll press ctrl s to save that

save that and of course we see a little auto

and of course we see a little auto formatting now where it included the

formatting now where it included the lines the spaces that you see here but

lines the spaces that you see here but we'll just leave it as is and then we

we'll just leave it as is and then we will come back and get that information

will come back and get that information or abstract that out of the index dot

or abstract that out of the index dot html when we get to that point now

html when we get to that point now moving back to the index.html file i'm

moving back to the index.html file i'm going to scroll down and we have a

going to scroll down and we have a header section already clearly defined

header section already clearly defined but we can see it goes clear off the

but we can see it goes clear off the page i don't have the closing tag here

page i don't have the closing tag here yet however everything we see here is

yet however everything we see here is really all i want in the header now we

really all i want in the header now we had a figure here with an image but

had a figure here with an image but we're going to pull that out of the

we're going to pull that out of the header and put it inside of its own

header and put it inside of its own section so select everything from the

section so select everything from the opening figure to the closing figure and

opening figure to the closing figure and i press control x to cut

i press control x to cut and then i'm going to backspace and

and then i'm going to backspace and remove those spaces then i'm going to

remove those spaces then i'm going to type

type section and press tab and so i get a

section and press tab and so i get a closing tag as well

closing tag as well and then press return or enter so i get

and then press return or enter so i get a new line and then i'm going to ctrl v

a new line and then i'm going to ctrl v to paste that figure in so now the

to paste that figure in so now the section contains the figure and the

section contains the figure and the header contains the nav and the h1 and

header contains the nav and the h1 and i'm going to do that on all of the pages

i'm going to do that on all of the pages but and i'll remove that hr which was

but and i'll remove that hr which was the horizontal rule

the horizontal rule however i want to apply some classes

however i want to apply some classes here as well that will help us format

here as well that will help us format our css so before i make these changes

our css so before i make these changes to the other pages let's apply those

to the other pages let's apply those classes in the final lesson before this

classes in the final lesson before this project we learned about the bem block

project we learned about the bem block element modifier naming convention and

element modifier naming convention and i'm going to use that sum today for each

i'm going to use that sum today for each section of the page so we'll start here

section of the page so we'll start here with a class and we're going to set this

with a class and we're going to set this equal to

equal to header the same as the element name and

header the same as the element name and it will be the parent class for

it will be the parent class for everything inside so when we label the

everything inside so when we label the h1

h1 we'll say class

we'll say class and here i'm going to say header two

and here i'm going to say header two underscores and h1

underscores and h1 likewise for the nav we'll say class

likewise for the nav we'll say class equals and then we'll have header two

equals and then we'll have header two underscores

underscores and nav

and nav and when we get to the unordered list

and when we get to the unordered list we'll say class equals

we'll say class equals and then we'll have header

and then we'll have header two underscores if i could find that

two underscores if i could find that underscore key again and then ul

underscore key again and then ul but then i'm not going to apply classes

but then i'm not going to apply classes to the list items some may want to do

to the list items some may want to do that and that would be okay this is a

that and that would be okay this is a small project and i don't have any plans

small project and i don't have any plans to put styles directly on these list

to put styles directly on these list items so i can accomplish everything

items so i can accomplish everything we're doing today without doing that so

we're doing today without doing that so i'll leave that as is however we do need

i'll leave that as is however we do need to rearrange some of the menu so i'm

to rearrange some of the menu so i'm going to select this top list item for

going to select this top list item for about and press control x to cut it out

about and press control x to cut it out we'll leave the menu as the first

we'll leave the menu as the first selection the second selection will be

selection the second selection will be the hours page the third will be the

the hours page the third will be the contact.html

contact.html so at the bottom i'm going to paste in

so at the bottom i'm going to paste in the

the what was the first list item it's now

what was the first list item it's now the last list item but it will no longer

the last list item but it will no longer be an anchor tag that goes to part of

be an anchor tag that goes to part of this page it's going to go to the about

this page it's going to go to the about dot html page

dot html page so we'll switch that over

so we'll switch that over and we don't really need to have the

and we don't really need to have the whole abbreviation here so i'm going to

whole abbreviation here so i'm going to remove that it was good to learn about

remove that it was good to learn about abbreviations in the html course but now

abbreviations in the html course but now we'll just use the word about because

we'll just use the word about because that pretty much sums it up likewise we

that pretty much sums it up likewise we can change contact us

can change contact us to contact

to contact and store hours can just simply be

and store hours can just simply be changed to hours likewise our menu

changed to hours likewise our menu can just be menu and that will still

can just be menu and that will still indicate what these pages are all about

indicate what these pages are all about now let's scroll down to our section

now let's scroll down to our section that contains the figure and we're going

that contains the figure and we're going to call this a hero section it's the

to call this a hero section it's the part of the page after the header where

part of the page after the header where you usually see a large image or an

you usually see a large image or an attention getter that's often referred

attention getter that's often referred to as the hero section so let's give

to as the hero section so let's give this section a class

this section a class and we'll just set it equal to hero and

and we'll just set it equal to hero and then inside

then inside we're going to put an h2 element that is

we're going to put an h2 element that is not currently there so we'll type h2

not currently there so we'll type h2 press tab and we can complete the

press tab and we can complete the closing tag that way now let's give this

closing tag that way now let's give this h2 a class equal to

h2 a class equal to hero two underscores and h2 and we're

hero two underscores and h2 and we're going to put a welcome here that the

going to put a welcome here that the owner of the little taco shop wants us

owner of the little taco shop wants us to add and it's going to say

to add and it's going to say bien

bien benitos which i believe is saying

benitos which i believe is saying welcome in spanish as well so we'll just

welcome in spanish as well so we'll just have that h2 there and this won't be on

have that h2 there and this won't be on every page it's only going to be on the

every page it's only going to be on the home page

home page after that we have some changes to make

after that we have some changes to make to our figure itself now the figure can

to our figure itself now the figure can just stay there as is so really what

just stay there as is so really what needs to be changed is the image and

needs to be changed is the image and maybe applying a new class to the fig

maybe applying a new class to the fig caption so we're going to start off with

caption so we're going to start off with the image and it's still the tacos and

the image and it's still the tacos and drink image but the dimensions have

drink image but the dimensions have changed so we just need to change the

changed so we just need to change the name so it's going to be 1000 and you

name so it's going to be 1000 and you can see vs code knows what's in our

can see vs code knows what's in our image folder and it wants to help us

image folder and it wants to help us complete that the alt will stay the same

complete that the alt will stay the same the alt attribute the title will stay

the alt attribute the title will stay the same but now we need to go ahead and

the same but now we need to go ahead and supply the actual dimensions so we can

supply the actual dimensions so we can avoid that content layout shift that may

avoid that content layout shift that may happen and that was discussed previously

happen and that was discussed previously in a lesson as well of course we will be

in a lesson as well of course we will be styling this image to be a responsive

styling this image to be a responsive image too

image too and then we're going to give the fig

and then we're going to give the fig caption a class while we're here and

caption a class while we're here and this class is going to be off screen

this class is going to be off screen and what that does if you remember when

and what that does if you remember when we had covered that in a previous lesson

we had covered that in a previous lesson is it will take this caption

is it will take this caption off the screen but it will leave it

off the screen but it will leave it available for screen readers for

available for screen readers for accessibility so that is important as

accessibility so that is important as well so it won't be viewable but it will

well so it won't be viewable but it will be readable and now we need to structure

be readable and now we need to structure these top two sections the header and

these top two sections the header and the hero section in all of the other

the hero section in all of the other html files as well so we have a good

html files as well so we have a good foundation before we start in on the css

foundation before we start in on the css so i'm going to scroll up for now and

so i'm going to scroll up for now and select this header on line 15 and scroll

select this header on line 15 and scroll all the way down to line 44 where the

all the way down to line 44 where the section ends i'll hold down the shift

section ends i'll hold down the shift key and click my mouse

key and click my mouse select all of that because right now our

select all of that because right now our about dot html does not have any of this

about dot html does not have any of this content so i'll press ctrl c to copy

content so i'll press ctrl c to copy and now i'll go to the

and now i'll go to the about.html page

about.html page and inside the body element i'm going to

and inside the body element i'm going to paste all of that in now it will

paste all of that in now it will currently be the same as we have on the

currently be the same as we have on the index page but we can make some changes

index page but we can make some changes here and the first change we're going to

here and the first change we're going to make is to select this last list item

make is to select this last list item and control x to remove it from the

and control x to remove it from the bottom of the list and it will now go

bottom of the list and it will now go once again

once again at the top of the list so ctrl v to

at the top of the list so ctrl v to paste but it's not going to go to the

paste but it's not going to go to the about page we just want to put in a

about page we just want to put in a slash which means it will be the root

slash which means it will be the root page that will take us back to the home

page that will take us back to the home page so we'll type home there

page so we'll type home there and then the next one should go to not

and then the next one should go to not just

just hashtag menu because that means it would

hashtag menu because that means it would be on the same page it should go to the

be on the same page it should go to the home page which is the slash and then

home page which is the slash and then hashtag menu and that will take

hashtag menu and that will take the

the visitor back to not only the home page

visitor back to not only the home page but then to that particular spot on the

but then to that particular spot on the home page which is the menu so now we

home page which is the menu so now we have completed or adjusted the menu

have completed or adjusted the menu for our about page but then we also need

for our about page but then we also need to change this header so instead of

to change this header so instead of welcome to the little taco shop let's

welcome to the little taco shop let's just put

just put little taco shop at the top of our about

little taco shop at the top of our about here

here and then after that we can scroll down

and then after that we can scroll down and change our hero section just a

and change our hero section just a little bit as well so we're not going to

little bit as well so we're not going to have the h2 bambonitos on

have the h2 bambonitos on the about page we're just going to have

the about page we're just going to have the figure and this is going to be a

the figure and this is going to be a different image here so this one will

different image here so this one will take the last part of this image file

take the last part of this image file because this is named taco delicioso

because this is named taco delicioso tacos delicioso if i could pronounce

tacos delicioso if i could pronounce that correctly and then we'll have a

that correctly and then we'll have a different caption here as well which

different caption here as well which should say

should say tacos

tacos delicioso

delicioso i could double check my spelling on that

i could double check my spelling on that as well

as well and let me go ahead and check the title

and let me go ahead and check the title tag the title is basically the same so

tag the title is basically the same so i'll copy that but we'll put an

i'll copy that but we'll put an exclamation mark in there because the

exclamation mark in there because the title and the alt do not have to be the

title and the alt do not have to be the same the dimensions are the same 1000 by

same the dimensions are the same 1000 by 667 we're once again going to have a

667 we're once again going to have a class of off screen on the fig caption

class of off screen on the fig caption but the caption should be different so

but the caption should be different so this will be try these

this will be try these delicious

delicious tacos and we can save and now we have

tacos and we can save and now we have the header

the header and the hero section complete

and the hero section complete on the about page so now we can make the

on the about page so now we can make the same similar changes to the other two

same similar changes to the other two pages we have but we won't need to paste

pages we have but we won't need to paste in the content we really already have it

in the content we really already have it there so let's go to the hours page and

there so let's go to the hours page and we can scroll down

we can scroll down and look at that menu and what we're

and look at that menu and what we're going to have to do is apply those

going to have to do is apply those classes once again but we essentially

classes once again but we essentially already have the menu that we're going

already have the menu that we're going to need to have on the hours page we're

to need to have on the hours page we're already linking to home

already linking to home however the next one should be menu so

however the next one should be menu so let's cut out that about with the

let's cut out that about with the control x

control x and we will link to the home page and

and we will link to the home page and then the hashtag menu

then the hashtag menu and then we'll have hours after that i'm

and then we'll have hours after that i'm sorry we won't have hours after that

sorry we won't have hours after that we're on the hours page we're going to

we're on the hours page we're going to have contact and then we'll have the

have contact and then we'll have the about page which once again

about page which once again needs to remove the slash and the

needs to remove the slash and the hashtag and we'll say about

hashtag and we'll say about dot html

dot html and alt z to wrap this code because we

and alt z to wrap this code because we no longer need the about lts it will

no longer need the about lts it will just be about and then we'll make those

just be about and then we'll make those similar changes here no longer contact

similar changes here no longer contact us it will be contact no longer our menu

us it will be contact no longer our menu it will just be menu

it will just be menu and then home so we can save now let's

and then home so we can save now let's scroll down and we'll take that figure

scroll down and we'll take that figure once again control x to remove it

once again control x to remove it and then underneath the header

and then underneath the header create just a little space i'll

create just a little space i'll highlight that hr to remove it we'll

highlight that hr to remove it we'll type

type section and now in the section we'll

section and now in the section we'll paste in our figure

paste in our figure and then i'll give just a empty line

and then i'll give just a empty line after the section and we're now ready to

after the section and we're now ready to apply the classes as we expect to have

apply the classes as we expect to have them here on the hours page as well or

them here on the hours page as well or we i guess we could go ahead and change

we i guess we could go ahead and change the details on the figure it's going to

the details on the figure it's going to be tacos tray again but it's going to be

be tacos tray again but it's going to be 1000 by 667 i believe but let's check

1000 by 667 i believe but let's check this because vs code will help us so

this because vs code will help us so tacos tray there we go 1000 by 667

tacos tray there we go 1000 by 667 and then the rest of this won't change

and then the rest of this won't change except the dimensions so 1000 by 667

except the dimensions so 1000 by 667 and then the fig caption once again is

and then the fig caption once again is going to need that class

going to need that class equal to

equal to off screen

off screen there we go now we need to add the class

there we go now we need to add the class up above which is hero

up above which is hero and save now let's go ahead and scroll

and save now let's go ahead and scroll up and we'll apply those header classes

up and we'll apply those header classes once again at the top for the hours page

once again at the top for the hours page so we have

so we have class equals

class equals header

header and then i'm just going to copy this to

and then i'm just going to copy this to save just a little time

save just a little time paste it into the h1 paste it into the

paste it into the h1 paste it into the nav and paste it into the ul

nav and paste it into the ul and now this first one is going to be

and now this first one is going to be two underscores in h1 the next one is

two underscores in h1 the next one is going to be two underscores and nav and

going to be two underscores and nav and the last one is going to be two

the last one is going to be two underscores and ul and now we've added

underscores and ul and now we've added the classes we need one more time let's

the classes we need one more time let's make those same changes to the contact

make those same changes to the contact page now so our starter will be the

page now so our starter will be the header

header with a class of header the h1 will then

with a class of header the h1 will then have a class of header

have a class of header two underscores in h1

two underscores in h1 the nav will have the class of net our

the nav will have the class of net our header two underscores and nav

header two underscores and nav and the unordered list will have a class

and the unordered list will have a class of header

of header two underscores and ul for unordered

two underscores and ul for unordered list looks like i put some extra spaces

list looks like i put some extra spaces in there i'll remove but we've applied

in there i'll remove but we've applied the class to the header let's look and

the class to the header let's look and see if we have the menu in the order

see if we have the menu in the order that we want it as well so we want to

that we want it as well so we want to start with home and then about is okay

start with home and then about is okay but once again it needs to be to the

but once again it needs to be to the about page here so we'll say about

about page here so we'll say about dot html

dot html and we're going to remove the

and we're going to remove the abbreviation alt z to just wrap that

abbreviation alt z to just wrap that code so we can see it all

code so we can see it all remove the abbreviation so it's just an

remove the abbreviation so it's just an about link which we will select with

about link which we will select with control x then and remove and put it at

control x then and remove and put it at the bottom of the list

the bottom of the list and the second one should be menu which

and the second one should be menu which is where we really want customers to go

is where we really want customers to go then hours

then hours and about there so that is in the

and about there so that is in the correct order we'll remove the extra

correct order we'll remove the extra wording so we just have menu

wording so we just have menu hours and about and save and now finally

hours and about and save and now finally one more figure to remove to put in its

one more figure to remove to put in its own section element so highlight that

own section element so highlight that control x to remove it

control x to remove it we'll leave the header to itself i'll

we'll leave the header to itself i'll delete that horizontal rule element

delete that horizontal rule element then above here we'll add the section

then above here we'll add the section element inside we'll go ahead and add

element inside we'll go ahead and add the figure the section will be a class

the figure the section will be a class equal to

equal to hero

hero and then here we have tacos close up so

and then here we have tacos close up so this is going to change as well so we'll

this is going to change as well so we'll say tacos now we've got close up 1000 by

say tacos now we've got close up 1000 by 649 which is just a little different so

649 which is just a little different so delete that and now the height here is

delete that and now the height here is 49 the fig caption once again gets the

49 the fig caption once again gets the class

class equal to

equal to off screen and save and now we are

off screen and save and now we are finally ready to write some css and what

finally ready to write some css and what we're going to do at the top is what

we're going to do at the top is what you've seen me do at a lot in a lot of

you've seen me do at a lot in a lot of different tutorials and that is import

different tutorials and that is import some fonts from google i'm going to

some fonts from google i'm going to control b so you can see this full line

control b so you can see this full line for just a second and notice i'm

for just a second and notice i'm importing two fonts here so after the

importing two fonts here so after the url you see family equals and there's

url you see family equals and there's fugaz one and then there's also nunito

fugaz one and then there's also nunito that you've seen me use in several

that you've seen me use in several tutorials using both of those fonts

tutorials using both of those fonts today and if you remember from the

today and if you remember from the typography lesson of how we can go get

typography lesson of how we can go get those fonts from

those fonts from fonts.google.com

fonts.google.com you can do that and then import those

you can do that and then import those into your css as i have after that we're

into your css as i have after that we're going to have a css reset it will be

going to have a css reset it will be fairly minimal

fairly minimal and you have seen minimal ones

and you have seen minimal ones throughout some of the lessons but let's

throughout some of the lessons but let's go ahead and label our sections as we

go ahead and label our sections as we create our style sheet today it's going

create our style sheet today it's going to start out with the everything

to start out with the everything selector the all selector but then a

selector the all selector but then a couple that you may not have seen that

couple that you may not have seen that are commonly in resets that i did not

are commonly in resets that i did not add in the lesson on pseudo elements but

add in the lesson on pseudo elements but you see these pseudo elements so you

you see these pseudo elements so you also see the all selector with the after

also see the all selector with the after and the all selector

and the all selector with before so we're going to do that

with before so we're going to do that for all of those

for all of those and then we'll put in what you typically

and then we'll put in what you typically see me put the margin 0

see me put the margin 0 padding of 0

padding of 0 and then a box sizing of border box now

and then a box sizing of border box now that's not all of the reset that i want

that's not all of the reset that i want to use today but that's a great start we

to use today but that's a great start we also need to put something in for the

also need to put something in for the images and this will make all of the

images and this will make all of the images

images display block which gets rid of that

display block which gets rid of that minimal little space below the images

minimal little space below the images that they were originally designed to be

that they were originally designed to be in line so they have that little spacing

in line so they have that little spacing problem and that will remove that then

problem and that will remove that then we'll set the max width to 100 percent

we'll set the max width to 100 percent and we'll set the height to auto and

and we'll set the height to auto and this will make the images responsive for

this will make the images responsive for our project i'm going to ctrl s to save

our project i'm going to ctrl s to save that much and then scroll just a little

that much and then scroll just a little bit there's a few more styles to add to

bit there's a few more styles to add to this reset

this reset the

the form elements like input text area and

form elements like input text area and button for example the ones that we're

button for example the ones that we're going to use today so we'll say input

going to use today so we'll say input button

button text area all three of these and other

text area all three of these and other form elements that you may use do not

form elements that you may use do not inherit font properties like other

inherit font properties like other elements do so we need to say font

elements do so we need to say font inherit if we want that to happen and

inherit if we want that to happen and when i save we'll probably see them

when i save we'll probably see them formatted yep on three separate lines

formatted yep on three separate lines there but that is the end of my reset

there but that is the end of my reset for this project

for this project okay after that i'm going to add another

okay after that i'm going to add another section and this is where i will define

section and this is where i will define css variables now i'll define these as i

css variables now i'll define these as i need them and then be able to come back

need them and then be able to come back and reference them so i'll just say

and reference them so i'll just say variables here

variables here and then as you know that starts in the

and then as you know that starts in the root selector so i'll just have a

root selector so i'll just have a selector here and then inside i'm going

selector here and then inside i'm going to have some labels too and the first

to have some labels too and the first one that we will do today is font and i

one that we will do today is font and i know what i'm already going to do for

know what i'm already going to do for font so i can at least add one variable

font so i can at least add one variable now and that will be ff for font family

now and that will be ff for font family and the main one that i'm going to use

and the main one that i'm going to use is that

is that neato font and then after that i'm going

neato font and then after that i'm going to have the fallback of sans serif and

to have the fallback of sans serif and then for the headings on the project is

then for the headings on the project is where i'm going to use the other font so

where i'm going to use the other font so i'll say font family headings and here

i'll say font family headings and here i'm going to use

i'm going to use let me spell this correctly fugaz

let me spell this correctly fugaz one

one and then it has a fallback of cursive

and then it has a fallback of cursive okay i can add just a few more variables

okay i can add just a few more variables that i know i'm going to use right away

that i know i'm going to use right away and the other one for fonts is the font

and the other one for fonts is the font size so i'll just call that fs and i'm

size so i'll just call that fs and i'm going to use the clamp function that we

going to use the clamp function that we learned about so the font can grow and

learned about so the font can grow and shrink and this is modern css this helps

shrink and this is modern css this helps us

us prevent adding it prevents us or keeps

prevent adding it prevents us or keeps us from adding

us from adding many media queries as some older css

many media queries as some older css might have done so our page can stay

might have done so our page can stay more responsive without having an

more responsive without having an abundance of media queries attached to

abundance of media queries attached to it so our minimum size today will be one

it so our minimum size today will be one rem

rem and then we'll allow it to grow at 2.2

and then we'll allow it to grow at 2.2 viewport units based on the height

viewport units based on the height and then the max size would be 1.5 rent

and then the max size would be 1.5 rent that's what we'll put in and so that

that's what we'll put in and so that will allow the font to grow as the page

will allow the font to grow as the page gets larger and of course it will stop

gets larger and of course it will stop so it doesn't get any smaller than one

so it doesn't get any smaller than one rim okay after these fonts variables i'm

rim okay after these fonts variables i'm also going to put in another

also going to put in another note here for colors i like to define

note here for colors i like to define all of the colors

all of the colors in variables and that way i can just

in variables and that way i can just change them in one spot and see how they

change them in one spot and see how they work together i will be coming back to

work together i will be coming back to add more colors here but i'm going to

add more colors here but i'm going to start off with a background color and i

start off with a background color and i just want a basic

just want a basic orange it's going to match something

orange it's going to match something that's in the photo that we have

that's in the photo that we have and i think that's going to look good

and i think that's going to look good then i'm also going to use a background

then i'm also going to use a background color dash

color dash fade and that's because we're going to

fade and that's because we're going to use a linear gradient now i've picked

use a linear gradient now i've picked out this color it is a

out this color it is a fade of the orange color so i'm using

fade of the orange color so i'm using rgb that's 25220160

and you'll see it's a faded orange after that

after that i'm going to use background image to

i'm going to use background image to create this

create this gradient that we're going to fade with

gradient that we're going to fade with so here i'll say

so here i'll say linear gradient

linear gradient and then we'll go to the bottom

and then we'll go to the bottom and then we'll put in our variables that

and then we'll put in our variables that we just created above so we'll start

we just created above so we'll start with the background color

with the background color and after the background color we'll put

and after the background color we'll put a comma

a comma another variable

another variable and we'll start in and we'll go to the

and we'll start in and we'll go to the background color fades so we'll start at

background color fades so we'll start at the top with the full orange and we'll

the top with the full orange and we'll fade down to that faded color

fade down to that faded color okay that's looking like a pretty good

okay that's looking like a pretty good start but i could put in just a couple

start but i could put in just a couple more for the body so

more for the body so just underneath this i'm going to put in

just underneath this i'm going to put in two dashes

two dashes and

and body dash

body dash background color so

background color so i'm planning on a different background

i'm planning on a different background color for the body element then i am the

color for the body element then i am the html element and you'll see how that

html element and you'll see how that works here i'm just going to put in a

works here i'm just going to put in a basic white with hexadecimal code

basic white with hexadecimal code and it looks like i left out the

and it looks like i left out the semicolon over there there we go so now

semicolon over there there we go so now everything formats better and then we'll

everything formats better and then we'll just have our standard font color i

just have our standard font color i don't even need to say body font color

don't even need to say body font color it's going to be the main font color

it's going to be the main font color and this will just be a black with

and this will just be a black with hexadecimal code as well okay i will be

hexadecimal code as well okay i will be coming back to add more variables but

coming back to add more variables but right now i want to move on to the next

right now i want to move on to the next section and just add a few

section and just add a few utility classes that i always use so i

utility classes that i always use so i know what i need to put here i'll put in

know what i need to put here i'll put in utility classes normally i would

utility classes normally i would probably just copy and paste these from

probably just copy and paste these from a file that i would already have written

a file that i would already have written them in before but we'll go ahead and

them in before but we'll go ahead and write these out we've got our

write these out we've got our off screen class and this is a style i

off screen class and this is a style i use to move elements off the screen but

use to move elements off the screen but yet keep in the document flow so a

yet keep in the document flow so a screen reader will still read the

screen reader will still read the content but maybe i don't want them to

content but maybe i don't want them to appear visually on the page so i'm going

appear visually on the page so i'm going to say

to say position and we'll set that to absolute

position and we'll set that to absolute and then i'll say left and we'll say

and then i'll say left and we'll say minus 10 000 pixels so it will be way

minus 10 000 pixels so it will be way off the page

off the page the next class i need is no wrap and

the next class i need is no wrap and this is when i want to ensure that some

this is when i want to ensure that some of the text does not wrap in an area

of the text does not wrap in an area that is awkward and we can do that with

that is awkward and we can do that with the white space property

the white space property and then we'll just set that to no wrap

and then we'll just set that to no wrap and we'll see how we apply that class

and we'll see how we apply that class later and the final one is simply a

later and the final one is simply a center when i want to center text that

center when i want to center text that say in a paragraph or in a heading we

say in a paragraph or in a heading we need the

need the text align and we can set that to center

text align and we can set that to center with the utility styles complete we're

with the utility styles complete we're now ready to finally start applying some

now ready to finally start applying some styles directly to elements and classes

styles directly to elements and classes so i'm going to bring vs code to the

so i'm going to bring vs code to the left and go ahead and launch the project

left and go ahead and launch the project to the right now remember we removed the

to the right now remember we removed the few styles that did exist and everything

few styles that did exist and everything we've created so far really doesn't

we've created so far really doesn't apply to the page except for that reset

apply to the page except for that reset at the beginning so we have removed more

at the beginning so we have removed more than we have added to the current

than we have added to the current project but we now have variables ready

project but we now have variables ready to apply and utility classes ready to

to apply and utility classes ready to apply but we also want to add what i

apply but we also want to add what i would call general styles so let's put

would call general styles so let's put in a section here

in a section here and we'll

and we'll label this the same way we have the

label this the same way we have the other sections are in the same style

other sections are in the same style and now with our general styles heading

and now with our general styles heading we'll start with the html element itself

we'll start with the html element itself now i'm going to use a different color

now i'm going to use a different color on the html element that will be the

on the html element that will be the background for the body element but if

background for the body element but if you remember from some previous lessons

you remember from some previous lessons we also use scroll behavior on the html

we also use scroll behavior on the html element and we'll set this to smooth

element and we'll set this to smooth and this allows a smooth transition to

and this allows a smooth transition to when we

when we link to other parts of the page and

link to other parts of the page and we'll still be doing that on the home

we'll still be doing that on the home page this index.html

page this index.html when we go to the menu that will be

when we go to the menu that will be located

located below the big image and so in the second

below the big image and so in the second half of the page so we'll have scroll

half of the page so we'll have scroll behavior smooth

behavior smooth and if i save that you won't see any

and if i save that you won't see any changes to the page because that affects

changes to the page because that affects more of a behavior but i'm going to try

more of a behavior but i'm going to try to save after every property applied so

to save after every property applied so you can see those changes the next one

you can see those changes the next one we'll apply is font size and we'll use a

we'll apply is font size and we'll use a variable for font size that we already

variable for font size that we already created

created and now when i apply that will save and

and now when i apply that will save and you see the font size instantly got

you see the font size instantly got larger and that reminds me

larger and that reminds me earlier when i applied the font size

earlier when i applied the font size variable above i believe or that was in

variable above i believe or that was in the background color fade let me bring

the background color fade let me bring this back to full screen quickly because

this back to full screen quickly because i think it's in the linear gradient uh

i think it's in the linear gradient uh vs code tried to help me out and it

vs code tried to help me out and it accidentally added a second var to each

accidentally added a second var to each of these that should have been noted

of these that should have been noted when the video was created as well so

when the video was created as well so hopefully you've already caught that

hopefully you've already caught that error but i need to correct it here so

error but i need to correct it here so now we just want one bar each in that

now we just want one bar each in that linear gradient and we'll save and if we

linear gradient and we'll save and if we come back now to the page

come back now to the page we don't see a difference yet because

we don't see a difference yet because that's not applied but it will be

that's not applied but it will be applied here very soon so down here in

applied here very soon so down here in the general styles once again in the

the general styles once again in the html we have increased the font size now

html we have increased the font size now let's say font

let's say font family

family and we'll use the other variable we

and we'll use the other variable we created there which was ff

created there which was ff and if i save again we should see the

and if i save again we should see the font family has changed and it does for

font family has changed and it does for the page

the page after that we're going to set a

after that we're going to set a background color

background color and this will be a variable as well and

and this will be a variable as well and it's the bg color we see here in the

it's the bg color we see here in the list and i just want to make sure vs

list and i just want to make sure vs code doesn't add a second var

code doesn't add a second var now you can see we've changed to that

now you can see we've changed to that orange that we set but now this is

orange that we set but now this is actually the fallback because we're

actually the fallback because we're going to use the background

going to use the background dash image and here we're going to use

dash image and here we're going to use that background image variable we

that background image variable we created

created and we'll find that here in the list as

and we'll find that here in the list as well and save and now we should see it

well and save and now we should see it go from orange to that lighter orange as

go from orange to that lighter orange as we scroll down the screen and that's

we scroll down the screen and that's what happens so it's a linear gradient

what happens so it's a linear gradient from a full orange to a lighter orange

from a full orange to a lighter orange but this will change as well as we apply

but this will change as well as we apply some styles to the body so we'll see how

some styles to the body so we'll see how this is going to be applied to the

this is going to be applied to the overall page now here we're going to

overall page now here we're going to have a background dash

have a background dash color as well and this is the variable

color as well and this is the variable and here we started this with body so

and here we started this with body so it's the body background color

it's the body background color and now we'll go to the next line and

and now we'll go to the next line and save i can see this is wrapping just a

save i can see this is wrapping just a little bit so i'm going to press alt z

little bit so i'm going to press alt z so anytime it wraps it'll just go down

so anytime it wraps it'll just go down to the next line for us so we can see

to the next line for us so we can see everything

everything okay now we want to set a font color now

okay now we want to set a font color now currently you notice it changed

currently you notice it changed everything because the body is

everything because the body is completely over the html element that

completely over the html element that will change when we adjust the width of

will change when we adjust the width of the body as well but for now we'll just

the body as well but for now we'll just see white again so now the color for the

see white again so now the color for the font will be

font will be variable and this will be the font color

variable and this will be the font color variable that we set

variable that we set and really we shouldn't see a change

and really we shouldn't see a change because it's basically the default font

because it's basically the default font color of black

color of black now let's have a min height for the body

now let's have a min height for the body and we'll set that to 100 viewport units

and we'll set that to 100 viewport units of height

of height and if i save we shouldn't see much of a

and if i save we shouldn't see much of a change because it's already taking up

change because it's already taking up over 100 viewport units of height

over 100 viewport units of height already after that we'll set a max width

already after that we'll set a max width to 800 pixels now i'm not sure of the

to 800 pixels now i'm not sure of the width here to the left but we can see

width here to the left but we can see really 800 pixels is still within the

really 800 pixels is still within the range of this so let's drag this over

range of this so let's drag this over and look at the full page expanded now

and look at the full page expanded now and now we can see here was the 800

and now we can see here was the 800 pixels and now we see the html element

pixels and now we see the html element behind that goes ahead and expands to

behind that goes ahead and expands to the full width of whatever

the full width of whatever viewport is available so we see that

viewport is available so we see that orange that linear gradient fade here we

orange that linear gradient fade here we will change this so the body will be in

will change this so the body will be in the middle and we'll see orange to the

the middle and we'll see orange to the left and the right

left and the right i'll move this back to the right for now

i'll move this back to the right for now and now underneath this we need to

and now underneath this we need to define a couple more things one is going

define a couple more things one is going to be the margin for the body zero on

to be the margin for the body zero on the top and bottom but auto on the left

the top and bottom but auto on the left and right will center this so when i

and right will center this so when i save again we don't see the change here

save again we don't see the change here but when i drag this over we now see the

but when i drag this over we now see the body is centered bringing this back to

body is centered bringing this back to the right we want to add some borders a

the right we want to add some borders a border on the left and the right so i

border on the left and the right so i need to set a borders variable and a

need to set a borders variable and a border color variable so i'm going to

border color variable so i'm going to scroll back up here to the colors

scroll back up here to the colors and let's set this border color variable

and let's set this border color variable first so we'll say border

first so we'll say border dash color

dash color and this is going to be a flat black so

and this is going to be a flat black so 333 for the hexadecimal you can see it's

333 for the hexadecimal you can see it's a flatter black compared to the true

a flatter black compared to the true black that's above it here with zero

black that's above it here with zero zero zero then i'm going to put in

zero zero then i'm going to put in another comment here and just put

another comment here and just put borders some might put the border color

borders some might put the border color under borders but i want all of the

under borders but i want all of the colors grouped together so that's just

colors grouped together so that's just my preference

my preference now here four borders let's go ahead

now here four borders let's go ahead and set this borders variable that we

and set this borders variable that we might use more than once in our project

might use more than once in our project as well and this is going to be one

as well and this is going to be one pixel

pixel solid

solid and now let's go ahead and use the

and now let's go ahead and use the borders color

borders color variable that we created now vs code

variable that we created now vs code once again put in

once again put in two vars so i have to watch out for that

two vars so i have to watch out for that when i've already typed var sometimes it

when i've already typed var sometimes it wants to insert that for me okay we've

wants to insert that for me okay we've created a border color variable and a

created a border color variable and a borders variable we'll scroll back down

borders variable we'll scroll back down to the body element

to the body element and to finish out the body element we're

and to finish out the body element we're going to say

going to say border left

border left we're going to set this to

we're going to set this to borders

and now i'm going to press shift alt and the down arrow so it just copies that

the down arrow so it just copies that down because i also want a border

down because i also want a border dash right but i don't want it on the

dash right but i don't want it on the top or the bottom

top or the bottom and then i'm going to set well let me go

and then i'm going to set well let me go ahead and save and if i bring this over

ahead and save and if i bring this over you can probably see the borders

you can probably see the borders just barely outlining the left and the

just barely outlining the left and the right

right but now i want to set a box shadow as

but now i want to set a box shadow as well on the body

well on the body and that will be 0 0

and that will be 0 0 so what we would typically see for the x

so what we would typically see for the x and y but then there's a blur and i'll

and y but then there's a blur and i'll set that to 10 pixels

set that to 10 pixels and i'll use that border color again

and i'll use that border color again there we go

there we go and

and save

save and now of course we can't see it here

and now of course we can't see it here but when i drag this back over we can

but when i drag this back over we can see there's a little bit of blur

see there's a little bit of blur along each side and that's what we want

along each side and that's what we want just a nice subtle effect so as we

just a nice subtle effect so as we scroll the page and we'll see it stand

scroll the page and we'll see it stand out even more on this lighter orange at

out even more on this lighter orange at the bottom you can see the blur

the bottom you can see the blur along the left and the right of the body

along the left and the right of the body here where we have our center column

here where we have our center column okay dragging this back i'm going to

okay dragging this back i'm going to scroll for some more room and then we

scroll for some more room and then we have just a few more general styles to

have just a few more general styles to apply before we get to classes and the

apply before we get to classes and the different sections of the page let's

different sections of the page let's have our and i'll want lower case here

have our and i'll want lower case here h1 h2 and h3 headings on the page i'm

h1 h2 and h3 headings on the page i'm going to apply the font family which was

going to apply the font family which was for the headings so that's dash dash ff

for the headings so that's dash dash ff and then we'll select headings

and then we'll select headings and that will change

and that will change the headings font you can see that

the headings font you can see that change on the page immediately and then

change on the page immediately and then we're going to apply some letter spacing

we're going to apply some letter spacing now we could do this with pixels or

now we could do this with pixels or different values i'm going to use ems

different values i'm going to use ems which would essentially be the same

which would essentially be the same as referring to the font size that's

as referring to the font size that's already on each heading so the spacing

already on each heading so the spacing will vary

will vary based on which type of heading that it

based on which type of heading that it is

is and if we looked at this as a rim

and if we looked at this as a rim instead of an em

instead of an em then it would be one tenth of that

then it would be one tenth of that setting so what we have for the font

setting so what we have for the font size already at the smallest was one rim

size already at the smallest was one rim but at the largest it was one and a half

but at the largest it was one and a half so that could be anywhere from 16 pixels

so that could be anywhere from 16 pixels to 24 pixels so one tenth of that would

to 24 pixels so one tenth of that would be anywhere from 1.6 pixels to 2.4

be anywhere from 1.6 pixels to 2.4 pixels but this will just space out this

pixels but this will just space out this font i think this heading font needs

font i think this heading font needs just a little extra space so when we

just a little extra space so when we save you can see the letters have now

save you can see the letters have now spaced out just a little bit more

spaced out just a little bit more now i'll select the h2 and the h3 but

now i'll select the h2 and the h3 but not the h1 we have a couple of styles we

not the h1 we have a couple of styles we want to apply here so we have a margin

want to apply here so we have a margin dash

dash bottom

bottom so on the bottom only we'll set that to

so on the bottom only we'll set that to 1 m

1 m and now we're going to use a separate

and now we're going to use a separate color so i need to define a highlight

color so i need to define a highlight color up above in the variables again so

color up above in the variables again so here we have

here we have dash dash and i'll say highlight dash

dash dash and i'll say highlight dash color because we might highlight other

color because we might highlight other things on the page besides headers with

things on the page besides headers with this variable as well so i called it

this variable as well so i called it highlight color it's a color i've picked

highlight color it's a color i've picked out to go with the orange but it's not

out to go with the orange but it's not orange it's 51

orange it's 51 178 51

178 51 and save and you can see it's a green

and save and you can see it's a green color much like we'd see here on the

color much like we'd see here on the bottle of giarito's

bottle of giarito's over here this mandarin has a nice

over here this mandarin has a nice orange but it also has a bit of a green

orange but it also has a bit of a green in the label so let's try that with the

in the label so let's try that with the highlight color as well so now using

highlight color as well so now using this highlight color

this highlight color and scrolling back down to the h2 and

and scrolling back down to the h2 and the h3

the h3 we'll set the color here and we'll be

we'll set the color here and we'll be var

var and we'll use

and we'll use highlight color now that we have that

highlight color now that we have that and saved we should see that change on

and saved we should see that change on the page and yes our bienvenidos and

the page and yes our bienvenidos and about lts and taco trivia has all

about lts and taco trivia has all changed as well as our menu and remember

changed as well as our menu and remember this about section is going to get moved

this about section is going to get moved to the about page we just haven't moved

to the about page we just haven't moved it yet

it yet okay after the h2 and the h3

okay after the h2 and the h3 i'm going to select the paragraphs on

i'm going to select the paragraphs on the page

the page and set their line height which this is

and set their line height which this is something i frequently do it looks a

something i frequently do it looks a little bit better

little bit better and

and we'll just set it to a little bit larger

we'll just set it to a little bit larger value it doesn't have to have a specific

value it doesn't have to have a specific m or ram or pixel here line height going

m or ram or pixel here line height going way back to our typography lesson can

way back to our typography lesson can just be a numerical value here so we've

just be a numerical value here so we've set it to 1.5 you might not see much of

set it to 1.5 you might not see much of a change from that but there's a little

a change from that but there's a little bit let me take it away

bit let me take it away and save

and save and yeah you might see just a bit of a

and yeah you might see just a bit of a change there but not a whole lot but i

change there but not a whole lot but i like something i do like to add okay the

like something i do like to add okay the paragraph has the line height

paragraph has the line height let's look at our links on the page up

let's look at our links on the page up here so these are going to be our main

here so these are going to be our main links

links on the whole project really we don't

on the whole project really we don't have a whole lot of extra links so i'm

have a whole lot of extra links so i'm going to select the anchor which would

going to select the anchor which would be

be a link of course you have to have an

a link of course you have to have an href with it but just to select the link

href with it but just to select the link itself and then we can say

itself and then we can say any link which is a pseudo class

any link which is a pseudo class selector

selector and this

and this link pseudo class selector if you

link pseudo class selector if you remember selects both the lick

remember selects both the lick links that have not been clicked and

links that have not been clicked and links that have already been visited and

links that have already been visited and so here we'll say color

so here we'll say color and now we're going to need to set a

and now we're going to need to set a link color variable as well as hover and

link color variable as well as hover and active so i'm going to scroll back up

active so i'm going to scroll back up and find that colors list of variables

and find that colors list of variables and we'll go ahead

and we'll go ahead and set the

and set the link color variable link dash color

link color variable link dash color this will just be a black color again

this will just be a black color again and then we'll set also

and then we'll set also link

link dash hover

dash hover and here we'll use hsla which will allow

and here we'll use hsla which will allow us to

us to have a black color but then we'll also

have a black color but then we'll also have this transparency and i'm going to

have this transparency and i'm going to say 0.6

say 0.6 so it's 40 percent transparent

so it's 40 percent transparent and 60

and 60 visible essentially

visible essentially after the link hover variable we'll also

after the link hover variable we'll also set a link dash

set a link dash active

active and for that we're going to set it to

and for that we're going to set it to orange which is the same as that html

orange which is the same as that html background

background let's save those three variables and

let's save those three variables and scroll back to our links that we're

scroll back to our links that we're styling and here for link color we'll

styling and here for link color we'll say var and then dash dash

say var and then dash dash link and it is our link color that we're

link and it is our link color that we're selecting

selecting and then the next one we'll have would

and then the next one we'll have would be the anchor with a hover

be the anchor with a hover but then also let's say anchor and you

but then also let's say anchor and you could say focus but here i'm going to

could say focus but here i'm going to use focus

use focus visible which the difference is

visible which the difference is the focus might remain on the selected

the focus might remain on the selected element

element however focus visible after it's used it

however focus visible after it's used it will change and it might not not make

will change and it might not not make much of a difference in this project but

much of a difference in this project but it's something i have started to use

it's something i have started to use more and more instead of just using

more and more instead of just using focus so here i'm going to say color

focus so here i'm going to say color var and we'll set this to once again

var and we'll set this to once again link but it's link hover

link but it's link hover and we'll put the semicolon after that

and we'll put the semicolon after that as well we can save those changes we see

as well we can save those changes we see we've got black links here the hover of

we've got black links here the hover of course is already working so you can see

course is already working so you can see it fade now as we hover over each one of

it fade now as we hover over each one of those but then after both of those we

those but then after both of those we still need the active state as well so

still need the active state as well so we have the active pseudo class selector

we have the active pseudo class selector and here we're going to say color

and here we're going to say color and not color with parentheses color and

and not color with parentheses color and then var parentheses

then var parentheses dash dash

dash dash link and it's going to be active there

link and it's going to be active there we go

we go save and so now if we were actively

save and so now if we were actively selecting a link so when i click on it

selecting a link so when i click on it you can see it turns orange and menu is

you can see it turns orange and menu is still fairly small up here but when i

still fairly small up here but when i hold down the mouse button the link

hold down the mouse button the link turns orange and now our general styles

turns orange and now our general styles are finished for the project so we are

are finished for the project so we are ready to move on to the header section

ready to move on to the header section so i'll add a label inside of our style

so i'll add a label inside of our style sheet for the header

sheet for the header and then we will start applying styles

and then we will start applying styles to the header section i'll scroll up so

to the header section i'll scroll up so this header is at the very top here and

this header is at the very top here and well at the very top there we go and

well at the very top there we go and then the first style will apply is now

then the first style will apply is now to the header class because we started

to the header class because we started using bem the block element modifier

using bem the block element modifier naming convention when we get to the

naming convention when we get to the sections

sections and the first one we applied that to was

and the first one we applied that to was the header so we'll say position

the header so we'll say position and we'll make the header a sticky

and we'll make the header a sticky positioned element we'll put the top at

positioned element we'll put the top at zero so it's at the very top and then we

zero so it's at the very top and then we need to put the z index to a setting of

need to put the z index to a setting of one so it stays on top of everything

one so it stays on top of everything else that might scroll under it and when

else that might scroll under it and when i save we don't see much of a change yet

i save we don't see much of a change yet but we certainly will soon

but we certainly will soon the next thing we'll style is the header

the next thing we'll style is the header two underscores and the h1 so the title

two underscores and the h1 so the title of the page itself

of the page itself and here we're going to say

and here we're going to say text

text align

align and we'll set that to center and save

and we'll set that to center and save and you can see that text did center now

and you can see that text did center now we've got just a few more variables to

we've got just a few more variables to add so i'm going to scroll back up to

add so i'm going to scroll back up to the variables once again and we're at

the variables once again and we're at the colors list and i'm going to add a

the colors list and i'm going to add a header dash bg color

header dash bg color and here we're going to set that

and here we're going to set that background color to black as well

background color to black as well after that we'll set a header dash color

after that we'll set a header dash color and i'm going to set that to white

and i'm going to set that to white and then after the header color while

and then after the header color while i'm here i'm going to go ahead and set a

i'm here i'm going to go ahead and set a nav

nav background color and set that to white

background color and set that to white also so we've set three new colors there

also so we've set three new colors there then underneath the border section

then underneath the border section i'm going to add another label and say

i'm going to add another label and say standard

standard padding and i'm going to create a couple

padding and i'm going to create a couple of variables here so

of variables here so padding let's say dash tb and that means

padding let's say dash tb and that means top bottom so you might want to

top bottom so you might want to abbreviate that differently to

abbreviate that differently to communicate that better i just happen to

communicate that better i just happen to use that abbreviation this time i'm

use that abbreviation this time i'm going to set this just to 0.25

going to set this just to 0.25 em

em and then the next one is

and then the next one is padding dash side not size but side so

padding dash side not size but side so on the left and the right and

on the left and the right and differently here i want this to be two

differently here i want this to be two point five

point five percent so total if i apply this to both

percent so total if i apply this to both sides it will take up five percent of

sides it will take up five percent of the width going to save that you won't

the width going to save that you won't see a change applied because we haven't

see a change applied because we haven't applied any of these variables yet and

applied any of these variables yet and then while i'm here one more to add will

then while i'm here one more to add will be a

be a standard margin

standard margin and underneath that we'll just say

and underneath that we'll just say margin variable and i'm going to use

margin variable and i'm going to use clamp again here so at the smallest it

clamp again here so at the smallest it will be 1 em and then we'll set it to

will be 1 em and then we'll set it to 2.5 viewport height units and then 1.5

2.5 viewport height units and then 1.5 em will be the largest it would possibly

em will be the largest it would possibly be now that this is for the top and the

be now that this is for the top and the bottom on the left and the right i'm

bottom on the left and the right i'm going to set it to zero so even though

going to set it to zero so even though that wrapped what we did was apply clamp

that wrapped what we did was apply clamp to the first value of the margin

to the first value of the margin shorthand

shorthand and then we applied zero to the second

and then we applied zero to the second value which would be the left and the

value which would be the left and the right

right okay with those variables defined now

okay with those variables defined now let's scroll back down to that header

let's scroll back down to that header section where we were applying other

section where we were applying other styles so we had the header and we were

styles so we had the header and we were at the header h1 i'm going to apply the

at the header h1 i'm going to apply the background color now so i'll say

background color now so i'll say background dash color

background dash color this will be var and then we'll have our

this will be var and then we'll have our header background color that we could

header background color that we could select

select and i'll save and we can see that change

and i'll save and we can see that change now it is all black so we need to apply

now it is all black so we need to apply a color

a color and this will be var as well two dashes

and this will be var as well two dashes and header color

and header color and now that we've selected that we will

and now that we've selected that we will save and now we can see welcome to the

save and now we can see welcome to the little taco shop across the top once

little taco shop across the top once again

again after the color let's apply some padding

after the color let's apply some padding and we're using the shorthand here for

and we're using the shorthand here for padding so we'll say var

padding so we'll say var two dashes and padding and this will be

two dashes and padding and this will be top and bottom first and then we'll say

top and bottom first and then we'll say var

var two dashes for

two dashes for padding and this would be the padding on

padding and this would be the padding on the sides and we'll save and we got just

the sides and we'll save and we got just a little bit of padding now to apply

a little bit of padding now to apply itself to the top and the bottom left

itself to the top and the bottom left and the right

and the right for the header looks like i'm not

for the header looks like i'm not closing that out properly so put that

closing that out properly so put that extra curly brace there we go and we're

extra curly brace there we go and we're finished with the header h1 now so now

finished with the header h1 now so now let's move down to

let's move down to header two underscores and nav

header two underscores and nav now for the nav we're going to have a

now for the nav we're going to have a separate background color variable that

separate background color variable that we created so var two dashes

we created so var two dashes and here it will say

and here it will say nav background color

nav background color and now something to discuss quickly you

and now something to discuss quickly you may be wondering why i created these

may be wondering why i created these extra variables and yet some of them

extra variables and yet some of them have the same color values well i'm

have the same color values well i'm specifically naming them so i know where

specifically naming them so i know where they apply and later on when we create a

they apply and later on when we create a dark mode

dark mode they may vary more than they are varying

they may vary more than they are varying now in the light mode so it's good to

now in the light mode so it's good to have that extra control and extra

have that extra control and extra labeling over these color variables okay

labeling over these color variables okay now that i've applied that background

now that i've applied that background color let's add a

color let's add a border i want lower case here border

border i want lower case here border dash bottom to our nav

dash bottom to our nav and there i'm going to say var and apply

and there i'm going to say var and apply that

that borders variable that we created so

borders variable that we created so there's borders

there's borders and i can save that and we now see a

and i can save that and we now see a line across the bottom here of the nav

line across the bottom here of the nav because it's also within this header

because it's also within this header element

element and then after that border let's say

and then after that border let's say font dash weight we'll set that to bold

font dash weight we'll set that to bold when we save we should see those links

when we save we should see those links change a little bit the font definitely

change a little bit the font definitely changed there

changed there and what else can we apply let's say box

and what else can we apply let's say box dash

dash shadow

shadow 0 for the x 6 pixels for the y

0 for the x 6 pixels for the y 5 pixels for the blur but this is going

5 pixels for the blur but this is going to be a shadow that looks like it's

to be a shadow that looks like it's coming straight down so then we'll also

coming straight down so then we'll also set a minus 5 pixels

set a minus 5 pixels and that offsets that blur and then

and that offsets that blur and then we'll have var and we'll set the color

we'll have var and we'll set the color here to the border dash

here to the border dash color and save

color and save and now we get this nice little straight

and now we get this nice little straight down shadow underneath that bottom

down shadow underneath that bottom border

border of the nav the navigation but also

of the nav the navigation but also essentially the header itself and

essentially the header itself and finally we need to style the unordered

finally we need to style the unordered list so adding the

list so adding the header to underscores unordered list

header to underscores unordered list and here we'll start out with some

and here we'll start out with some padding and i'll say var

padding and i'll say var dash dash

dash dash padding and this would be the top and

padding and this would be the top and the bottom and then once again we'll say

the bottom and then once again we'll say var

var hash dash padding and this would be the

hash dash padding and this would be the side value

side value save that now you can see those dots for

save that now you can see those dots for the unordered list were brought back in

the unordered list were brought back in so we know we've added that extra

so we know we've added that extra padding it has just a little more room

padding it has just a little more room but now let's say list

but now let's say list style

style type we'll set that to none which should

type we'll set that to none which should remove those dots beside each list item

remove those dots beside each list item now a display of flex and when i save

now a display of flex and when i save you'll see that change because it

you'll see that change because it instantly makes it a row by default

instantly makes it a row by default we'll say justify content

we'll say justify content space bash

space bash evenly

evenly and we'll save and now it spaces out

and we'll save and now it spaces out those items

those items and then let's add a gap

and then let's add a gap and let's call the gap one rim so

and let's call the gap one rim so what we expect there and so we

what we expect there and so we definitely have

definitely have a

a gap between those items even if they

gap between those items even if they were all squeezed together if the screen

were all squeezed together if the screen got smaller and now a couple of quick

got smaller and now a couple of quick notes on the header before we move on

notes on the header before we move on one is we did learn how to make an

one is we did learn how to make an animated mobile header but we're not

animated mobile header but we're not applying it to this project because it

applying it to this project because it would essentially be overkill we've just

would essentially be overkill we've just got the four links and four pages to the

got the four links and four pages to the project and we can easily link to those

project and we can easily link to those on mobile or in desktop by just listing

on mobile or in desktop by just listing them out here on the page so you don't

them out here on the page so you don't always have to apply everything you know

always have to apply everything you know how to do to every project and i didn't

how to do to every project and i didn't want to do that to this project and it's

want to do that to this project and it's worth noting why

worth noting why also we previously had welcome to the

also we previously had welcome to the little taco shop across here but that's

little taco shop across here but that's really a lot so quickly i will open the

really a lot so quickly i will open the file tree

file tree go to the

go to the index.html and bring this back and let's

index.html and bring this back and let's scroll up and find our h1

scroll up and find our h1 welcome to the little taco shop and

welcome to the little taco shop and let's just remove the welcome to the

let's just remove the welcome to the because what we really want is just

because what we really want is just little taco shop across the top

little taco shop across the top after that we can go back to the file

after that we can go back to the file tree once again select the css and hide

tree once again select the css and hide the file tree i know we're squeezing all

the file tree i know we're squeezing all the code over here to half the screen so

the code over here to half the screen so we can see the page more often but when

we can see the page more often but when i bring it back you'll find that it's

i bring it back you'll find that it's not wrapping and it may be a little

not wrapping and it may be a little easier for you to read so if you're

easier for you to read so if you're working on it with me maybe you're just

working on it with me maybe you're just viewing the code like this so you can

viewing the code like this so you can see those longer lines where we've used

see those longer lines where we've used some variables are not wrapping to a

some variables are not wrapping to a second line now when i bring it over and

second line now when i bring it over and look at it like this so i just wanted to

look at it like this so i just wanted to show you that i'm going to bring this

show you that i'm going to bring this back to the left and now likewise we can

back to the left and now likewise we can bring the project over and look at it in

bring the project over and look at it in full screen as well and you'll see it's

full screen as well and you'll see it's coming together a little bit better

coming together a little bit better we've definitely got some changes to

we've definitely got some changes to make yet however this has certainly

make yet however this has certainly helped and if we look at the other pages

helped and if we look at the other pages since we put in that work ahead of time

since we put in that work ahead of time to put in the correct image

to put in the correct image changes to the html to create those hero

changes to the html to create those hero sections and of course apply the classes

sections and of course apply the classes to the header and the nav as well we see

to the header and the nav as well we see those changes applied as we go to each

those changes applied as we go to each page already so we're making a lot of

page already so we're making a lot of progress we just have some more progress

progress we just have some more progress yet to make so now i'll drag this back

yet to make so now i'll drag this back to the right

to the right and we can begin the next section and

and we can begin the next section and that next section is our hero section so

that next section is our hero section so right underneath our last header style

right underneath our last header style we'll create a new label and we'll call

we'll create a new label and we'll call this the hero section with the label

this the hero section with the label and for that we'll start out with our

and for that we'll start out with our hero class which if you remember is

hero class which if you remember is applied to that section element

applied to that section element we'll say it's position relative because

we'll say it's position relative because we're going to place something absolute

we're going to place something absolute inside of that hero section as well

inside of that hero section as well after that we have a hero h2 and if you

after that we have a hero h2 and if you remember this is only

remember this is only on the home page our index.html and that

on the home page our index.html and that is our bienvenidos welcome here so after

is our bienvenidos welcome here so after that we can go ahead and apply some

that we can go ahead and apply some styles to that and the background dash

styles to that and the background dash color

color for that h2

for that h2 is going to be a new variable i need to

is going to be a new variable i need to create so let's scroll back up to this

create so let's scroll back up to this color that will have in our variables

color that will have in our variables list once again there's all the colors

list once again there's all the colors so at the bottom here we're going to

so at the bottom here we're going to call this two dashes in hero dash color

call this two dashes in hero dash color and now this color is very much like our

and now this color is very much like our highlight color so it's rgb

highlight color so it's rgb five one one seven eight

five one one seven eight five one but then we also need

five one but then we also need a transparency color here so we could

a transparency color here so we could make this rgb a so we can have that

make this rgb a so we can have that transparency and then this will be 0.75

and i don't need the extra parentheses so that means it will be 75 percent

so that means it will be 75 percent viewable and 25 percent transparent so

viewable and 25 percent transparent so when we scroll back down let's apply

when we scroll back down let's apply this to that hero background color here

this to that hero background color here so we'll say var

so we'll say var dash dash hero and there's the hero

dash dash hero and there's the hero color

color after this hero color and i can save and

after this hero color and i can save and we're not seeing much of a change right

we're not seeing much of a change right now but we will here in the future we'll

now but we will here in the future we'll say a color and actually i'm realizing i

say a color and actually i'm realizing i just labeled that wrong and i also need

just labeled that wrong and i also need a hero color but i also need a hero

a hero color but i also need a hero background color so if i could label

background color so if i could label those correctly in my mind it would

those correctly in my mind it would definitely help us out so let's go back

definitely help us out so let's go back up here this should be the hero

up here this should be the hero background color that i just created

background color that i just created instead of the hero color so let's label

instead of the hero color so let's label this

this bg there we go underneath this we're

bg there we go underneath this we're going to have a

going to have a hero dash color

hero dash color and the hero color itself should just be

and the hero color itself should just be white once again for now okay now we

white once again for now okay now we should apply these correctly you can see

should apply these correctly you can see when you get many colors it can be very

when you get many colors it can be very helpful to label those and think about

helpful to label those and think about them in

them in a good order and i'm not always doing

a good order and i'm not always doing that even when i do take all the other

that even when i do take all the other precautions so now i've got a hero

precautions so now i've got a hero background color for the background

background color for the background color and here

color and here this should be var

this should be var dash hero

dash hero color for the font and now save and

color for the font and now save and since it disappeared i think i may have

since it disappeared i think i may have possibly applied something incorrectly

possibly applied something incorrectly even now so let me shoot back up to the

even now so let me shoot back up to the top and take a second look at these hero

top and take a second look at these hero colors here and i see what i've done

colors here and i see what i've done wrong i have rbga instead of rgba so it

wrong i have rbga instead of rgba so it just takes one typo to set something off

just takes one typo to set something off rgba and now we should be good and we

rgba and now we should be good and we have the green color there and you can

have the green color there and you can see our green background now for that h2

see our green background now for that h2 with the white lettering here at the top

with the white lettering here at the top and of course we're going to change this

and of course we're going to change this some more if you remember when i

some more if you remember when i previewed the project at the beginning

previewed the project at the beginning we saw this is really an animated

we saw this is really an animated drop down let's add some more styles to

drop down let's add some more styles to this h2 before we approach the animation

this h2 before we approach the animation so we'll say padding and here we'll have

so we'll say padding and here we'll have 0.25 m and then 0.5 m on the left and

0.25 m and then 0.5 m on the left and the right we save that we can see that

the right we save that we can see that extra padding applied

extra padding applied letter spacing

letter spacing and here let's give this a 0.1

and here let's give this a 0.1 rim so again just that ten percent which

rim so again just that ten percent which should space it out just a little bit

should space it out just a little bit after the letter spacing let's say

after the letter spacing let's say text dash shadow

text dash shadow and so we can apply a shadow to this

and so we can apply a shadow to this lettering we'll say two pixels x offset

lettering we'll say two pixels x offset 2 pixels y

2 pixels y 5 pixels blur

5 pixels blur and now let's use that border color

and now let's use that border color variable

variable that we have used in the past for

that we have used in the past for shadows and we save now that helps that

shadows and we save now that helps that white stand out just a little bit it

white stand out just a little bit it lifts it up off of that green background

lifts it up off of that green background just a bit because of that shadow

just a bit because of that shadow now we need to say

now we need to say position

position absolute

absolute and we're going to move this to the top

and we're going to move this to the top and it's going to be

and it's going to be minus 100

minus 100 pixels

pixels and first let me save this before i move

and first let me save this before i move it so you can see what changes it

it so you can see what changes it instantly

instantly makes it

makes it an element that is not in the document

an element that is not in the document flow and a block element would of course

flow and a block element would of course span the 100 percent width but now

span the 100 percent width but now because it is removed from that flow due

because it is removed from that flow due to position absolute it does not have

to position absolute it does not have 100 width as a block element normally

100 width as a block element normally would okay now let's go ahead and move

would okay now let's go ahead and move it off the page to start out when the

it off the page to start out when the page loads so this would be minus

page loads so this would be minus 100 pixels but before i do that even i

100 pixels but before i do that even i guess i should show where we're going to

guess i should show where we're going to place it to the left and the left would

place it to the left and the left would be 20 pixels this value will not change

be 20 pixels this value will not change so it's just moved in just a little bit

so it's just moved in just a little bit but now

but now the top will be minus 100 pixels and now

the top will be minus 100 pixels and now it should disappear

it should disappear and it will disappear it has disappeared

and it will disappear it has disappeared but it will of course be animated and

but it will of course be animated and drop down and reappear once we apply

drop down and reappear once we apply that animation

that animation and now we need to create the animation

and now we need to create the animation itself and then we'll apply it so here

itself and then we'll apply it so here let's say at

let's say at keyframes as we learned in our animation

keyframes as we learned in our animation lesson

lesson and let's say show welcome is the name

and let's say show welcome is the name of our animation

of our animation we'll start out with a zero percent so

we'll start out with a zero percent so where it starts out at the very

where it starts out at the very beginning

beginning we'll say the top is going to be minus

we'll say the top is going to be minus 20 pixels instead of that minus 100

20 pixels instead of that minus 100 and now we'll transform we're going to

and now we'll transform we're going to do two transforms we're going to have a

do two transforms we're going to have a skew

skew and that will make that lean just a

and that will make that lean just a little bit we'll say zero degrees

little bit we'll say zero degrees and then minus five degrees

and then minus five degrees after that we'll also have a scale y

after that we'll also have a scale y and we'll set that to zero to start out

and we'll set that to zero to start out with

with okay after the zero percent now let's

okay after the zero percent now let's say at 80 percent

say at 80 percent and this is where i like to give it just

and this is where i like to give it just a little bit more than it actually ends

a little bit more than it actually ends up with so it gives it just a little bit

up with so it gives it just a little bit of extra movement or bounce so we'll say

of extra movement or bounce so we'll say the top is 30 pixels now will definitely

the top is 30 pixels now will definitely be visible

be visible the transform it needs to start out

the transform it needs to start out essentially

essentially with the skew again and we're going to

with the skew again and we're going to move the skew just a little bit so i'm

move the skew just a little bit so i'm just going to copy these so we can just

just going to copy these so we can just change the values inside

change the values inside paste those in and so now instead of 0

paste those in and so now instead of 0 degrees it's going to be 10 degrees here

degrees it's going to be 10 degrees here we'll leave that at -5 degrees and the

we'll leave that at -5 degrees and the scale instead of 0 is going to be

scale instead of 0 is going to be 1.2

1.2 and now let's get our finishing values

and now let's get our finishing values at 100 percent for the animation

at 100 percent for the animation here this will be a top at 20 pixels

here this will be a top at 20 pixels and then we'll once again have the

and then we'll once again have the transform and i'm just going to copy

transform and i'm just going to copy that down

that down and this would be a

and this would be a minus 10 degrees and a minus 5 degrees

minus 10 degrees and a minus 5 degrees and then the scale is going to be 1

and then the scale is going to be 1 instead of 1.2

instead of 1.2 and when i save you won't see anything

and when i save you won't see anything yet because we haven't applied the

yet because we haven't applied the animation but now let's go ahead and

animation but now let's go ahead and apply that animation here so we'll say

apply that animation here so we'll say animation

animation and this is the show

and this is the show welcome animation

welcome animation we'll make it take a half second to

we'll make it take a half second to complete we'll start with the ease in

complete we'll start with the ease in and out transition

and out transition and let's give it a delay now i could

and let's give it a delay now i could make this longer to be more dramatic but

make this longer to be more dramatic but let's give it say a

let's give it say a one second delay so we see the page load

one second delay so we see the page load and then we get a little welcome drop

and then we get a little welcome drop down

down and we'll use the forwards property here

and we'll use the forwards property here which means it will keep the state

which means it will keep the state of when the animation ends so it will

of when the animation ends so it will remain visible as well let's save and

remain visible as well let's save and see what happens

see what happens there's our welcome now to see it again

there's our welcome now to see it again we'll have to of course navigate away

we'll have to of course navigate away and come back to the home page

and come back to the home page but then we see our welcome drop down

but then we see our welcome drop down that's a nice little animation to go

that's a nice little animation to go with our project now let's move this

with our project now let's move this over to a full screen

over to a full screen and of course this is how it appears

and of course this is how it appears here but if i go ahead and press ctrl

here but if i go ahead and press ctrl shift and i or we were to right click

shift and i or we were to right click and choose inspect

and choose inspect let's choose a mobile device like the

let's choose a mobile device like the iphone 6 7 and 8 and make sure it's

iphone 6 7 and 8 and make sure it's still positioned correctly i can go to a

still positioned correctly i can go to a hundred percent view we can see it a

hundred percent view we can see it a little bit better

little bit better let's reload

let's reload and there's our welcome so yes it's not

and there's our welcome so yes it's not crowding into the image too much and

crowding into the image too much and everything looks good it's always good

everything looks good it's always good of course to check your mobile design as

of course to check your mobile design as you go and i've been leaving the screen

you go and i've been leaving the screen open so we can see everything but

open so we can see everything but typically i do design for the smallest

typically i do design for the smallest first and you do want to check this

first and you do want to check this along the way and we will continue to

along the way and we will continue to check it so for now i'm going to go back

check it so for now i'm going to go back to full screen

to full screen and drag this back over to the right

and drag this back over to the right with the animation complete i'm going to

with the animation complete i'm going to drag vs code back over to full screen

drag vs code back over to full screen now and we need to look at a couple of

now and we need to look at a couple of sections in the html that are on every

sections in the html that are on every page before we get to specifics about

page before we get to specifics about each page and those remaining sections

each page and those remaining sections are the main element and the footer

are the main element and the footer element so let's go to the footer of the

element so let's go to the footer of the index html first

index html first because i usually like to style that

because i usually like to style that after the header so once we get down to

after the header so once we get down to the footer itself we can see we have

the footer itself we can see we have footer here with no class currently

footer here with no class currently let's go ahead and add the class of

let's go ahead and add the class of footer as we did with the header before

footer as we did with the header before and then let's also apply some classes

and then let's also apply some classes here to our copyright line so we have

here to our copyright line so we have copyright and then the html entity which

is the copyright symbol right here and then we have the little taco shop well

then we have the little taco shop well we want to wrap this in some span

we want to wrap this in some span elements inside of this paragraph so

elements inside of this paragraph so these lines do not break where we do not

these lines do not break where we do not expect them to we don't want the little

expect them to we don't want the little taco shop or we could just put little

taco shop or we could just put little taco shop we don't want this line to

taco shop we don't want this line to break so let's put a span element here

break so let's put a span element here and now of course it generates the

and now of course it generates the closing span element immediately i'll

closing span element immediately i'll put the closing paragraph

put the closing paragraph tag on a separate line and paste the

tag on a separate line and paste the closing span afterwards i'm going to do

closing span afterwards i'm going to do the same here too for copyright

the same here too for copyright i guess i need to create the element

i guess i need to create the element instead of just typing span there we go

instead of just typing span there we go we can copy that

we can copy that closing span and put it here so we've

closing span and put it here so we've wrapped both of these in span elements

wrapped both of these in span elements now let's give them both the class

now let's give them both the class equal to no wrap one of those utility

equal to no wrap one of those utility classes we created that ensures

classes we created that ensures that this line will not break in the

that this line will not break in the middle of this content and this line

middle of this content and this line will not break in the middle of this

will not break in the middle of this content

content so that helps us by

so that helps us by ensuring this presents itself in the way

ensuring this presents itself in the way we want it to this will not prevent it

we want it to this will not prevent it from being all on one line but if we're

from being all on one line but if we're on a smaller device and it needs to wrap

on a smaller device and it needs to wrap the lines it's going to break where we

the lines it's going to break where we want it to and not in the middle of that

want it to and not in the middle of that content somewhere else let me go ahead

content somewhere else let me go ahead and remove that extra line there

and remove that extra line there and then let's apply some styles to the

and then let's apply some styles to the footer but we can also put this footer

footer but we can also put this footer in each of the html pages so after i

in each of the html pages so after i save the index and copy the footer i can

save the index and copy the footer i can go to the hours page and i can replace

go to the hours page and i can replace the footer that is here and we will not

the footer that is here and we will not need that hr that horizontal rule so

need that hr that horizontal rule so i'll highlight it as well just to remove

i'll highlight it as well just to remove it when i paste that in

it when i paste that in let's do the same for the contact page

let's do the same for the contact page and put that in here paste and save and

and put that in here paste and save and then we'll also need to do that in the

then we'll also need to do that in the about page but if you remember the about

about page but if you remember the about page doesn't have everything else yet so

page doesn't have everything else yet so it doesn't even have a main element that

it doesn't even have a main element that we will be adding but let's save this

we will be adding but let's save this for now and now go back to the index now

for now and now go back to the index now that we've updated the html for the

that we've updated the html for the footer let's do the same for the main

footer let's do the same for the main element and this will not take much at

element and this will not take much at all

all right now we have a main element with no

right now we have a main element with no class and as you can expect we'll put a

class and as you can expect we'll put a class equal

class equal to main here

to main here and then here we have an article that

and then here we have an article that has the id of about well this is going

has the id of about well this is going to be moved to the about page so let's

to be moved to the about page so let's select this full article here

select this full article here down to the closing tag and then i'll

down to the closing tag and then i'll control x i'll go to the about.html

control x i'll go to the about.html and this is going to go inside

and this is going to go inside of a main element that has the class of

of a main element that has the class of main and you can see i created that with

main and you can see i created that with the image shortcut by typing main dot

the image shortcut by typing main dot main and it instantly created the main

main and it instantly created the main element that has a class of main

element that has a class of main inside we'll paste that article which

inside we'll paste that article which will be the content inside of this main

will be the content inside of this main element now i'll save this much and

element now i'll save this much and we'll come back but now let's go back to

we'll come back but now let's go back to the index.html

the index.html where we need to label the article

where we need to label the article that's inside of this main element so

that's inside of this main element so i'm going to highlight that hr and

i'm going to highlight that hr and remove it as well

remove it as well but now the article that's in here has

but now the article that's in here has an id of menu but it also needs to have

an id of menu but it also needs to have some classes and the first class we're

some classes and the first class we're going to apply here is going to be main

going to apply here is going to be main two underscores

two underscores article because each main element on

article because each main element on each of these index pages in the project

each of these index pages in the project contains an article if not more than one

contains an article if not more than one article so we will label that and we'll

article so we will label that and we'll make sure that this is the only article

make sure that this is the only article that's inside the main and if it's not

that's inside the main and if it's not we will need to change it but it looks

we will need to change it but it looks like it is and that's fine it contains

like it is and that's fine it contains the menu which we will come back to as

the menu which we will come back to as well but those are the two main classes

well but those are the two main classes that every html page in the project will

that every html page in the project will need so let's go to the hours now

need so let's go to the hours now scroll up to the main here

scroll up to the main here and it looks like it doesn't currently

and it looks like it doesn't currently have an article but we need to apply the

have an article but we need to apply the class

class equal

equal main and to stay consistent here let's

main and to stay consistent here let's go ahead and add an article element to

go ahead and add an article element to this html page so we have article i will

this html page so we have article i will go ahead and cut out the closing tag and

go ahead and cut out the closing tag and paste it above the closing main tag and

paste it above the closing main tag and now let's give this

now let's give this the class that is expected as well so it

the class that is expected as well so it is

is main two underscores article

main two underscores article and save that now let's go to the

and save that now let's go to the contact page

contact page and here in the contact page you can see

and here in the contact page you can see we have two sections

we have two sections and an h2 so let's go ahead and apply

and an h2 so let's go ahead and apply the class equal to main and let's change

the class equal to main and let's change these section elements to articles to

these section elements to articles to stay consistent with the rest of the

stay consistent with the rest of the main content here and you can see we

main content here and you can see we have

have a opening and closing and we have two

a opening and closing and we have two section elements so i'm going to press

section elements so i'm going to press ctrl d and i got the closing ctrl d

ctrl d and i got the closing ctrl d again to get the opening of the second

again to get the opening of the second one and ctrl d one more time to get that

one and ctrl d one more time to get that closing tag

closing tag now i can just type article once and it

now i can just type article once and it changed all of those

changed all of those but now i need to select just the

but now i need to select just the opening article so i'm going to select

opening article so i'm going to select the full thing including the less than

the full thing including the less than and greater than sign

and greater than sign ctrl d again and it just selects the

ctrl d again and it just selects the opening article of the second one the

opening article of the second one the right arrow to get to the end the left

right arrow to get to the end the left arrow wants to get just behind the word

arrow wants to get just behind the word article and now i can add a space type

article and now i can add a space type class

class and set that equal

and set that equal to main two underscores

to main two underscores and article and now this should be

and article and now this should be applied

applied to both so we've got it here on the top

to both so we've got it here on the top article and we've got it on the second

article and we've got it on the second article that is on the contact page one

article that is on the contact page one other quick change to the contact page

other quick change to the contact page is i want to put the our location

is i want to put the our location information above the contact form so

information above the contact form so let's control x

let's control x and then just move up here above this

and then just move up here above this article

article and paste in our other article so we've

and paste in our other article so we've just switched that information around so

just switched that information around so now that our location information with

now that our location information with the telephone is on top and the contact

the telephone is on top and the contact form is on bottom and finally let's go

form is on bottom and finally let's go to the about html and you can see we

to the about html and you can see we have a class of main that we applied

have a class of main that we applied already but now

already but now let's apply the same class here that is

let's apply the same class here that is main two underscores and article and

main two underscores and article and save because i believe if i remember

save because i believe if i remember correctly there was only one article for

correctly there was only one article for this page as well so now we've made all

this page as well so now we've made all the adjustments for the main element and

the adjustments for the main element and the footer element on each of the html

the footer element on each of the html pages let's select the style.css file

pages let's select the style.css file once again and pull our code over to the

once again and pull our code over to the left so we can see the project on the

left so we can see the project on the right and now we can continue to make

right and now we can continue to make some more changes after we have styled

some more changes after we have styled the hero section we're now ready for the

the hero section we're now ready for the footer section so i'm going to put in a

footer section so i'm going to put in a label in the style sheet for footer

label in the style sheet for footer and now we can apply those styles with

and now we can apply those styles with the footer class

the footer class and here this is going to be

and here this is going to be position

position sticky as well as the header because we

sticky as well as the header because we want it to stay in place so the bottom

want it to stay in place so the bottom will be zero so that will put it

will be zero so that will put it directly at the bottom

directly at the bottom and i'll save that much and let's go

and i'll save that much and let's go ahead and scroll so we can see the

ahead and scroll so we can see the footer down here it's our copyright with

footer down here it's our copyright with copyright symbol and the little taco

shop now let's go ahead and add a background

now let's go ahead and add a background color

color [Music]

[Music] and this background color

and this background color will be the variable and we'll just

will be the variable and we'll just apply

apply the header background color so it stays

the header background color so it stays in sync with the header

in sync with the header and if i save yes it all turns black so

and if i save yes it all turns black so we need to of course apply the color

we need to of course apply the color and this should be the

and this should be the header color as well

and we can save that and now we see the font is white there on top of the black

font is white there on top of the black background

background let's apply some padding as it looks

let's apply some padding as it looks pretty scrunched right now so we'll say

pretty scrunched right now so we'll say padding top and bottom we are using that

padding top and bottom we are using that shorthand again so the next one would be

shorthand again so the next one would be padding side

padding side and now we'll go ahead and save that so

and now we'll go ahead and save that so there's just a little extra padding

there's just a little extra padding around that

around that now let's put text

now let's put text align

align and set that to center and save and so

and set that to center and save and so now we can see our copyright with the

now we can see our copyright with the copyright symbol and the little taco

shop is centered and we have our footer across the bottom it stays in place when

across the bottom it stays in place when we scroll as does the header i'm going

we scroll as does the header i'm going to copy this heading we put in here for

to copy this heading we put in here for the footer and then i'm going to scroll

the footer and then i'm going to scroll up and put in a very similar heading for

up and put in a very similar heading for the main element so i want all caps

the main element so i want all caps again to make that change

again to make that change after that let's directly style that

after that let's directly style that main class first

main class first and speaking of copying it's going to

and speaking of copying it's going to get the same padding that we had here so

get the same padding that we had here so i'll just copy that

i'll just copy that and put that in for the main and when i

and put that in for the main and when i save we'll see we get a little extra

save we'll see we get a little extra space here with our menu our menu is not

space here with our menu our menu is not looking so great right now and it's one

looking so great right now and it's one of the last things we'll do so let's

of the last things we'll do so let's start looking at some of these other

start looking at some of these other pages the hours look pretty good they

pages the hours look pretty good they got just a little bit of extra space

got just a little bit of extra space from that padding or the about has a

from that padding or the about has a little more information on it as well

little more information on it as well and so we can see some of that there

and so we can see some of that there let's go back to the hours for now okay

let's go back to the hours for now okay after we've applied that basic padding

after we've applied that basic padding to the main element itself

to the main element itself we have the main

we have the main two underscore

two underscore article class

article class and here let's apply a scroll dash

and here let's apply a scroll dash margin dash top

margin dash top and this will be 6.5 rims you usually

and this will be 6.5 rims you usually have to play around with this value to

have to play around with this value to see what works based on your project and

see what works based on your project and how much space possibly your nav is

how much space possibly your nav is taking up because what this is going to

taking up because what this is going to do is enable the article information to

do is enable the article information to show instead of scrolling underneath the

show instead of scrolling underneath the header and then let's set a margin here

header and then let's set a margin here and we'll just use our var

and we'll just use our var and margin and save now this is

and margin and save now this is something we actually would see back on

something we actually would see back on the home page now if we choose menu and

the home page now if we choose menu and it scrolls well we're not on a device

it scrolls well we're not on a device right now that would actually use up the

right now that would actually use up the page or we haven't expanded this menu to

page or we haven't expanded this menu to take up more room but what will happen

take up more room but what will happen will

will be it will prevent the menu from

be it will prevent the menu from scrolling underneath this header if we

scrolling underneath this header if we have a taller menu or we're taking up

have a taller menu or we're taking up more room by the time we have finished

more room by the time we have finished the styles that's probably what will

the styles that's probably what will happen

happen okay a couple of extra things to put now

okay a couple of extra things to put now and one of these at least we'll see

and one of these at least we'll see differently on maybe the contact page

differently on maybe the contact page because it has some extra room here

because it has some extra room here already

already so let's go ahead and apply these styles

so let's go ahead and apply these styles let's say

main and we'll select the article as well and now let's say the first

well and now let's say the first child pseudo selector and we'll give

child pseudo selector and we'll give this a margin dash top of one em so this

this a margin dash top of one em so this would be the

would be the first child that we would see here the

first child that we would see here the first article and that would be the same

first article and that would be the same on any page it gives just a little more

on any page it gives just a little more room between that hero image and the

room between that hero image and the rest

rest and now i'm going to copy this down so

and now i'm going to copy this down so shift alt and the down arrow

shift alt and the down arrow add the extra space and this will be for

add the extra space and this will be for the last child and we do have the one

the last child and we do have the one page

page that has

that has two different children and that has the

two different children and that has the our location and the contact form so for

our location and the contact form so for this last child we want to calculate

this last child we want to calculate some height here so

some height here so say min dash

say min dash height we're going to calculate

height we're going to calculate we'll take 100

we'll take 100 vh which would be 100 width or 100

vh which would be 100 width or 100 height pardon me of what is available

height pardon me of what is available now let's just subtract 20

now let's just subtract 20 rims from that and save

rims from that and save to give it just a little extra room to

to give it just a little extra room to scroll and this might be more visible

scroll and this might be more visible when we don't have as much content such

when we don't have as much content such as well the about page has some if we go

as well the about page has some if we go to the hours page let's see now we have

to the hours page let's see now we have some extra room here as well so if we

some extra room here as well so if we remove this

remove this and then save

and then save we don't have that extra room it's kind

we don't have that extra room it's kind of scrunched it's nice to have that

of scrunched it's nice to have that extra scrolling room and that's why that

extra scrolling room and that's why that is being applied so again preference as

is being applied so again preference as a lot of cs css is a preference

a lot of cs css is a preference now we have just a little extra room

now we have just a little extra room there for the scroll and now we're ready

there for the scroll and now we're ready to move on to individual page sections

to move on to individual page sections i'm going to drag vs code back over to

i'm going to drag vs code back over to full screen i'll scroll up here and

full screen i'll scroll up here and copy the main comment divider that we

copy the main comment divider that we have or label if you will

have or label if you will and here i'm going to switch this

and here i'm going to switch this to

to about and save so we'll start in on our

about and save so we'll start in on our about page in the about section i'm

about page in the about section i'm going to do something different here

going to do something different here that some may agree with or may not

that some may agree with or may not agree with with bem but i don't want to

agree with with bem but i don't want to refer to the main

refer to the main as the parent for the about information

as the parent for the about information i want the word about there so we know

i want the word about there so we know it's on the about page so i'm going to

it's on the about page so i'm going to add another class here

add another class here that is just called about and that goes

that is just called about and that goes to the article so then what i refer to

to the article so then what i refer to inside of this article instead of

inside of this article instead of referencing maine as the parent i'm

referencing maine as the parent i'm going to reference about it just makes

going to reference about it just makes more sense to me for these classes in

more sense to me for these classes in particular and i've only got a couple to

particular and i've only got a couple to apply but i want class about and then

apply but i want class about and then i'm going to use two underscores trivia

i'm going to use two underscores trivia and then on the paragraph that has the

and then on the paragraph that has the answer i'm going to say class

answer i'm going to say class and then equals and this will be about

and then equals and this will be about answer so we have about trivia and about

answer so we have about trivia and about answer and even better than that i think

answer and even better than that i think i might put the word trivia here as well

i might put the word trivia here as well so trivia dash answer is just a two word

so trivia dash answer is just a two word label but that makes more sense to me as

label but that makes more sense to me as well so we've got about trivia and about

well so we've got about trivia and about trivia answer and i did want

trivia answer and i did want two underscores

two underscores there as well so there we go

there as well so there we go now let's switch back to the style css

now let's switch back to the style css and put those classes in here so we'll

and put those classes in here so we'll have our about 200 scores in trivia

have our about 200 scores in trivia remember i put in about class in there

remember i put in about class in there but i don't really have any styles in

but i don't really have any styles in addition to apply there i just wanted to

addition to apply there i just wanted to refer to that about class as the parent

refer to that about class as the parent and so we'll leave it at that margin

and so we'll leave it at that margin will be that variable that we defined

will be that variable that we defined for a margin

for a margin and then for the about trivia answer so

and then for the about trivia answer so we'll have about two underscores trivia

we'll have about two underscores trivia dash answer

dash answer and here we're going to set a margin

and here we're going to set a margin dash top

dash top equal to 1m and save let's pull this

equal to 1m and save let's pull this over and see those changes applied to

over and see those changes applied to the about so here we go

the about so here we go and see we've got a little extra space

and see we've got a little extra space here too which also helps our scroll and

here too which also helps our scroll and then when we show the answer

then when we show the answer that is nicely formatted as well moving

that is nicely formatted as well moving on to the contact form so i will focus

on to the contact form so i will focus on that and let's scroll up to see this

on that and let's scroll up to see this content that we have on this page we

content that we have on this page we definitely have enough height here when

definitely have enough height here when we have two different articles working

we have two different articles working with forms can be difficult but let's

with forms can be difficult but let's see how we can apply the styles here i'm

see how we can apply the styles here i'm going to put in a new label in our style

going to put in a new label in our style sheet

sheet and i will put

and i will put contact right here and then let's scroll

contact right here and then let's scroll up to make that the very top of the page

up to make that the very top of the page and now let's start off with our

and now let's start off with our contact two underscores in h2 but i

contact two underscores in h2 but i don't believe we've applied these

don't believe we've applied these classes yet so let's drag this over to

classes yet so let's drag this over to full screen look at our contact page and

full screen look at our contact page and see what classes we need to apply to the

see what classes we need to apply to the rest of this html i'm going to leave the

rest of this html i'm going to leave the address as is it needs no further

address as is it needs no further classes however the contact form itself

classes however the contact form itself does and i'm going to apply that same

does and i'm going to apply that same philosophy that i did to the about page

philosophy that i did to the about page where i have main article but i don't

where i have main article but i don't want to refer to the

want to refer to the main element as the parent i want to

main element as the parent i want to refer to contact so i'm going to put a

refer to contact so i'm going to put a contact class here at the beginning for

contact class here at the beginning for the article now for the h2 i'm going to

the article now for the h2 i'm going to put class and i'm going to set that

put class and i'm going to set that equal to contact two underscores and h2

equal to contact two underscores and h2 likewise for the form we can make this a

likewise for the form we can make this a contact form so i'll put class

contact form so i'll put class equals

equals contact two underscores and form we'll

contact two underscores and form we'll do the same for the field set i'm going

do the same for the field set i'm going to start copying this so i just have to

to start copying this so i just have to change the one word

change the one word and instead of contact form this would

and instead of contact form this would be contact

be contact field set

field set and now for the legend we're not going

and now for the legend we're not going to apply that class but we're just going

to apply that class but we're just going to put this off screen and we already

to put this off screen and we already have a utility class for that so this

have a utility class for that so this class will be

class will be off screen

off screen for the p here we'll go ahead and put in

for the p here we'll go ahead and put in this

this contact form once again but we're just

contact form once again but we're just going to change the word form

going to change the word form to p for paragraph and it looks like i

to p for paragraph and it looks like i should have selected the full element

should have selected the full element and then the next one as well and now

and then the next one as well and now i'll arrow to the end one arrow to go

i'll arrow to the end one arrow to go inside

inside and paste in this class and now i can

and paste in this class and now i can change

change both at the same time and put in the p

both at the same time and put in the p for paragraph we'll save now we need to

for paragraph we'll save now we need to do something similar

do something similar for the label so let's go ahead and

for the label so let's go ahead and select

select all three of the labels

all three of the labels and then we can arrow to the end

and then we can arrow to the end paste in our class and then once again

paste in our class and then once again arrow over

arrow over change form and change this to contact

change form and change this to contact label

label now let's do this for the inputs so i'll

now let's do this for the inputs so i'll select the first one ctrl d and

select the first one ctrl d and there are only two inputs so that's all

there are only two inputs so that's all we need arrow to the right

we need arrow to the right and paste in the class and then change

and paste in the class and then change the contact form once again and i

the contact form once again and i shouldn't have done that but now i can

shouldn't have done that but now i can control d to select it as well and then

control d to select it as well and then we have contact input as well but now

we have contact input as well but now we're going to have a contact text area

we're going to have a contact text area so i just need to paste that in and

so i just need to paste that in and switch this

switch this to text area

to text area and i believe nope there's one more and

and i believe nope there's one more and that would be the button and we have two

that would be the button and we have two buttons so control d to select the

buttons so control d to select the second one

second one arrow to the right to be at the end

arrow to the right to be at the end paste this in

paste this in and this class is contact button so ctrl

and this class is contact button so ctrl d to select both of those now that we've

d to select both of those now that we've applied all of the classes that we're

applied all of the classes that we're going to use in the form let's go back

going to use in the form let's go back to the style sheet and drag it back to

to the style sheet and drag it back to the left and we'll be looking at the

the left and we'll be looking at the form here on the right or the h2 we're

form here on the right or the h2 we're simply going to set the margin to zero

simply going to set the margin to zero and save that

and save that now the field set and notice the label

now the field set and notice the label of the field set is already gone because

of the field set is already gone because we applied or the legend because we

we applied or the legend because we applied that off screen so it no longer

applied that off screen so it no longer had the contactless words here but we'll

had the contactless words here but we'll put in

put in contact two underscores and field set

contact two underscores and field set and this will be a border of none so it

and this will be a border of none so it will just remove that look even though

will just remove that look even though the field set is still there

the field set is still there after that contact two underscores

after that contact two underscores paragraph

paragraph here we'll set a margin to one m on the

here we'll set a margin to one m on the top and bottom zero on the left and the

top and bottom zero on the left and the right that gives us some more space we

right that gives us some more space we could certainly tell that difference

could certainly tell that difference then the contact two underscores label

then the contact two underscores label here we'll say display

here we'll say display of block

of block and font weight

and font weight of bold and we'll definitely see these

of bold and we'll definitely see these changes

changes makes our form look better as well

makes our form look better as well now we'll select both

now we'll select both the contact two underscores input

the contact two underscores input and the contact two underscores

and the contact two underscores text

text area

area for this we'll say padding is 0.5 m

for this we'll say padding is 0.5 m we can save and we'll see some change

we can save and we'll see some change there the inputs got a little larger

there the inputs got a little larger then we'll say a border dash

then we'll say a border dash radius of 15 pixels save and you can see

radius of 15 pixels save and you can see they're rounded i'm going to scroll now

they're rounded i'm going to scroll now that the form has grown a little larger

that the form has grown a little larger so we can see everything again

so we can see everything again okay after the border radius we're going

okay after the border radius we're going to have a border dash

to have a border dash width of 2 pixels to just make it a

width of 2 pixels to just make it a little larger around each of the inputs

little larger around each of the inputs and then a width of 100 percent and save

and then a width of 100 percent and save and now those inputs take up the full

and now those inputs take up the full width that they have available to them

width that they have available to them our buttons down here still need a

our buttons down here still need a little bit of help so let's say dot

little bit of help so let's say dot contact two underscores

contact two underscores button

button now we'll say padding

now we'll say padding 0.5 m for those and save we can see the

0.5 m for those and save we can see the padding gets a little larger for those

padding gets a little larger for those now

now and then we'll apply a border radius to

and then we'll apply a border radius to match the other border radius 15 pixels

match the other border radius 15 pixels and this should possibly be a variable

and this should possibly be a variable that i have not created but that would

that i have not created but that would allow us to just change it in one place

allow us to just change it in one place and it would change it for the form as

and it would change it for the form as well as the button

well as the button underneath that we should have

underneath that we should have border

border width

width and oh not border width on the buttons

and oh not border width on the buttons i'm sorry

i'm sorry let's have a background

let's have a background color

color let's say bar and let's pick that

let's say bar and let's pick that highlight color so we can have a

highlight color so we can have a different color on these buttons

different color on these buttons that looks good except the font doesn't

that looks good except the font doesn't look so great there so for the var let's

look so great there so for the var let's say the header color

say the header color and that should turn that white and make

and that should turn that white and make it stand out just a little bit more

it stand out just a little bit more those buttons definitely look better

those buttons definitely look better than they did before so a quick check

than they did before so a quick check let's take the border radius property

let's take the border radius property and control c and then i'm going to do

and control c and then i'm going to do control f to search for it and let's see

control f to search for it and let's see how many times it has occurred

how many times it has occurred it's just twice here inside of our

it's just twice here inside of our project so if you wanted to

project so if you wanted to you could absolutely make a contact

you could absolutely make a contact border radius

border radius variable and then you would just change

variable and then you would just change it in one spot and of course the form

it in one spot and of course the form the inputs and the buttons would match

the inputs and the buttons would match but you don't have to i did not clearly

but you don't have to i did not clearly at this point but that would be an

at this point but that would be an option so now before moving on to the

option so now before moving on to the menu let's look at each section that

menu let's look at each section that we've already styled for our page and

we've already styled for our page and here's the full page so our about page

here's the full page so our about page has a nice huge hero image

has a nice huge hero image and we see the about lts some

and we see the about lts some information and our taco trivia that

information and our taco trivia that looks good the hours page another nice

looks good the hours page another nice hero section and a simple bit of

hero section and a simple bit of information about the hours

information about the hours and let's look at the

and let's look at the contact page

contact page we scroll down we see the our location

we scroll down we see the our location information after the hero and the

information after the hero and the contact form as well so that all looks

contact form as well so that all looks good i think the menu is still going to

good i think the menu is still going to need some work and we might apply

need some work and we might apply another style or two yet that we haven't

another style or two yet that we haven't but we're making a lot of good progress

but we're making a lot of good progress let's go ahead and control shift i to

let's go ahead and control shift i to see how everything's looking in a mobile

see how everything's looking in a mobile device as well so maybe we could choose

device as well so maybe we could choose fit to window and we see this iphone 6 7

fit to window and we see this iphone 6 7 and 8 let's look at the

and 8 let's look at the iphone

iphone 5 and that also looks good let's reload

5 and that also looks good let's reload and see how that animation works

and see how that animation works that works as well so yes the menu needs

that works as well so yes the menu needs some help but how do the other pages

some help but how do the other pages look oh the other pages still say

look oh the other pages still say the little taco shop hours instead of

the little taco shop hours instead of just little taco shop

just little taco shop or something similar and again we're on

or something similar and again we're on the smallest device that we might ever

the smallest device that we might ever see right now which is the iphone 5 se

see right now which is the iphone 5 se things may have changed in the future of

things may have changed in the future of course if you're viewing this at a later

course if you're viewing this at a later time

time so here

so here it wraps the two lines on the header but

it wraps the two lines on the header but anything larger than the absolute

anything larger than the absolute smallest device it looks like it won't

smallest device it looks like it won't as long as we adjust our headers here

as long as we adjust our headers here instead of say the little taco shop

instead of say the little taco shop hours we can just say little taco shop

hours we can just say little taco shop here it just says contact us

here it just says contact us and on the about page once again it just

and on the about page once again it just says little taco shop i think we want

says little taco shop i think we want our header to be consistent and say

our header to be consistent and say little taco shop

little taco shop no matter which page we go to

no matter which page we go to so let's go ahead and make those changes

so let's go ahead and make those changes as well in the html as we go back to the

as well in the html as we go back to the code so i'm going to close this back out

code so i'm going to close this back out drag this back to the right

drag this back to the right and bring the code over to the full

and bring the code over to the full screen quickly going to each html page

screen quickly going to each html page we'll make sure that the heading matches

we'll make sure that the heading matches so it should just say little taco shop

so it should just say little taco shop where we have the header h1 for each

where we have the header h1 for each page

page scroll to the top of the hours and we'll

scroll to the top of the hours and we'll see what we have here it says

see what we have here it says the little taco shop hours so we'll go

the little taco shop hours so we'll go ahead and remove

ahead and remove the and hours

the and hours save that file the contact page

save that file the contact page said contact us well we would prefer it

said contact us well we would prefer it still say

still say little

little taco shop here and of course the h2s

taco shop here and of course the h2s will handle the other labels on the page

will handle the other labels on the page so

so we had our location and below that we

we had our location and below that we should also have the contact form as

should also have the contact form as well there we go let's see what was here

well there we go let's see what was here yep our contact form so that looks good

yep our contact form so that looks good and the about html

and the about html should also just say little taco shop

should also just say little taco shop and it does and of course the titles of

and it does and of course the titles of the page say more about the page as well

the page say more about the page as well so about the little taco shop here

so about the little taco shop here the title at the top of this says

the title at the top of this says contact us lts

i guess to keep consistency we could say about lts on this other page as we're

about lts on this other page as we're going with that abbreviation several

going with that abbreviation several places so

places so about lts there the description can

about lts there the description can still say about the little taco shop

still say about the little taco shop and then hours let's see what the

and then hours let's see what the title is here lts hours that's great and

title is here lts hours that's great and of course for the index we want the

of course for the index we want the title to be the little taco shop so

title to be the little taco shop so everything is looking good once again in

everything is looking good once again in the html let's go back to the css and

the html let's go back to the css and start working on the menu now before

start working on the menu now before applying styles to the menu i want to

applying styles to the menu i want to pull up an mdn reference so i'm just

pull up an mdn reference so i'm just going to paste this link in and i'll

going to paste this link in and i'll make sure it is in the course materials

make sure it is in the course materials as well so the course resources but here

as well so the course resources but here on the grid layout and accessibility

on the grid layout and accessibility page in mdn it says grid and the dangers

page in mdn it says grid and the dangers of markup flattening so what we're going

of markup flattening so what we're going to be doing is taking the html table

to be doing is taking the html table that's in the index page that comprises

that's in the index page that comprises the menu that is displayed and we're

the menu that is displayed and we're going to make it a grid

going to make it a grid too often

too often many people just use div elements to

many people just use div elements to make their grid and a grid needs

make their grid and a grid needs that flat structure essentially for the

that flat structure essentially for the grid items so it can review or refer to

grid items so it can review or refer to each grid item

each grid item in that regard because it's not going to

in that regard because it's not going to look at subgrid items subgrid is a

look at subgrid items subgrid is a proposal they're discussing here but

proposal they're discussing here but it's not implemented as well so we want

it's not implemented as well so we want to avoid that dangers i'm going to pull

to avoid that dangers i'm going to pull the code back over and bring up the

the code back over and bring up the index.html

index.html and we can see our table and right now

and we can see our table and right now the table is not flat notice how it has

the table is not flat notice how it has parent

parent elements like the t head element and of

elements like the t head element and of course table row elements and then

course table row elements and then inside

inside we get the

we get the th and td elements for those table cells

th and td elements for those table cells whether they're a header element or

whether they're a header element or they're just a table data element

they're just a table data element and so grid doesn't work that way it

and so grid doesn't work that way it needs flat elements but we can still

needs flat elements but we can still work with this we don't want to remove

work with this we don't want to remove the semantic markup of a table to

the semantic markup of a table to further illustrate my point instead of

further illustrate my point instead of just having this here underneath i'm

just having this here underneath i'm going to paste in what you might see a

going to paste in what you might see a table constructed of for a grid using

table constructed of for a grid using divs

divs now this is a flattened markup table

now this is a flattened markup table essentially that would be applied to

essentially that would be applied to grid and notice how i just used divs and

grid and notice how i just used divs and applied all of these classes

applied all of these classes and this is what you do not want to do

and this is what you do not want to do but i guarantee you will probably see

but i guarantee you will probably see this somewhere when a grid is applied

this somewhere when a grid is applied and you see a table on the page i'm

and you see a table on the page i'm going to press ctrl z though because

going to press ctrl z though because this once again is not what we want to

this once again is not what we want to do and you can tell by this markup

do and you can tell by this markup it is not flattened however there is a

it is not flattened however there is a solution for this

solution for this and it is a display setting that we can

and it is a display setting that we can put in the css that will help us convert

put in the css that will help us convert our table to a grid i'm going to drag

our table to a grid i'm going to drag this back to the left so we can look at

this back to the left so we can look at one more web page and i will link to

one more web page and i will link to this as well in the course resources and

this as well in the course resources and it's the can i use web page and i'm

it's the can i use web page and i'm looking at display contents

looking at display contents notice what it says about display

notice what it says about display contents it causes an element's children

contents it causes an element's children to appear as if they were the direct

to appear as if they were the direct children of the element's parent

children of the element's parent essentially

essentially that ignores that parent element and

that ignores that parent element and that will flatten the elements for grid

that will flatten the elements for grid to use without removing those elements

to use without removing those elements so we just need to put display contents

so we just need to put display contents on some of these parent elements that

on some of these parent elements that grid will not use it says this can be a

grid will not use it says this can be a useful

useful or this can be useful when a wrapper

or this can be useful when a wrapper element should be ignored when using css

element should be ignored when using css grid or similar layout techniques

grid or similar layout techniques and then when we scroll and look at

and then when we scroll and look at everything as far as how well it is

everything as far as how well it is applied now let me pull this out to the

applied now let me pull this out to the full page so we can see everything from

full page so we can see everything from can i use

can i use you can see it's got basically 95

you can see it's got basically 95 percent acceptance here and we're not

percent acceptance here and we're not going to worry about internet explorer

going to worry about internet explorer again and most every other major browser

again and most every other major browser is accepting that use here uh opera mini

is accepting that use here uh opera mini is one that's not in uc browser for

is one that's not in uc browser for android but chrome safari

android but chrome safari safari on ios chrome for android we're

safari on ios chrome for android we're good in almost every major use case here

good in almost every major use case here so i'm comfortable with using that as we

so i'm comfortable with using that as we switch our html table

switch our html table over to a grid and again i will link to

over to a grid and again i will link to both of those for you back to our

both of those for you back to our website here

website here back to the right

back to the right and now i will pull this back over to

and now i will pull this back over to look at our code in a full screen so we

look at our code in a full screen so we can get the ideas of what we're doing

can get the ideas of what we're doing with the table as i did with the contact

with the table as i did with the contact and about pages i applied a separate

and about pages i applied a separate class here to refer to as the parent and

class here to refer to as the parent and i'm going to do the same here it's going

i'm going to do the same here it's going to be the menu class

to be the menu class and then i will refer to these

and then i will refer to these again with bem notation but i'm going to

again with bem notation but i'm going to refer to menu as the parent so here

refer to menu as the parent so here we're going to have a class i'm going to

we're going to have a class i'm going to set this equal to menu two underscores

set this equal to menu two underscores and h2

and h2 for the our menu heading then the table

for the our menu heading then the table itself

itself say class

say class and then menu two underscores and

and then menu two underscores and container because this is going to

container because this is going to contain our menu for the caption for the

contain our menu for the caption for the table

table we'll use this class

we'll use this class and set this to off screen our utility

and set this to off screen our utility class once again as we will not want to

class once again as we will not want to view this caption on the page

view this caption on the page but we do want to retain it for

but we do want to retain it for accessibility now we will be setting the

accessibility now we will be setting the table head and the tr element the table

table head and the tr element the table body element

body element and the table foot element to that

and the table foot element to that display contents so grid actually

display contents so grid actually ignores those the content we want for

ignores those the content we want for the grid and the content that we

the grid and the content that we actually want screen readers to read

actually want screen readers to read will be inside of the th

will be inside of the th and td elements so that's where we'll

and td elements so that's where we'll apply the classes here so all of the

apply the classes here so all of the opening

opening th's that we have here i'm going to

th's that we have here i'm going to select

select three right there and we might even have

three right there and we might even have a fourth but i think we just want three

a fourth but i think we just want three right now for the menu headers so

right now for the menu headers so we'll take this over with the arrow to

we'll take this over with the arrow to the right and i'll say class

the right and i'll say class equals and this is going to be menu two

equals and this is going to be menu two underscores

underscores and header now something else i want to

and header now something else i want to do here one thing i noticed and i must

do here one thing i noticed and i must have done this in the html course as

have done this in the html course as well so if you went through that you can

well so if you went through that you can apply the scope column to this first

apply the scope column to this first cell as well and i'm not sure why i

cell as well and i'm not sure why i didn't before it might have just been an

didn't before it might have just been an oversight the second thing is we were

oversight the second thing is we were looking once again at how to do

looking once again at how to do abbreviations in html but i want the

abbreviations in html but i want the full word quantity here now so i'm going

full word quantity here now so i'm going to remove the abbreviation

to remove the abbreviation and just have the word quantity in the

and just have the word quantity in the second th cell for the table

second th cell for the table okay after we have got the menu headers

okay after we have got the menu headers now we're going to have menu item

now we're going to have menu item classes

classes so we will come through here

so we will come through here and then whether it is the th or the td

and then whether it is the th or the td in these other cells i'm going to make

in these other cells i'm going to make it a menu item so i'm going to start off

it a menu item so i'm going to start off with the remainder of these

with the remainder of these table data cells

table data cells because there are several i'm pressing

because there are several i'm pressing ctrl d to get all of them selected

ctrl d to get all of them selected and i think that's going to be it no one

and i think that's going to be it no one more maybe there we go one more so at

more maybe there we go one more so at the end of that i'll arrow to the right

the end of that i'll arrow to the right i'll put class

i'll put class and i'm going to set this equal to menu

and i'm going to set this equal to menu two underscores and item okay scrolling

two underscores and item okay scrolling back up to where we have the crunchy and

back up to where we have the crunchy and then of course we have the soft label

then of course we have the soft label down here we're going to apply classes

down here we're going to apply classes here as well i'll have a class

here as well i'll have a class i'm going to set this equal to menu two

i'm going to set this equal to menu two underscores item and then i want a

underscores item and then i want a second class here that is just going to

second class here that is just going to be menu two underscores and cr for

be menu two underscores and cr for crunchy as we'll need to refer to that

crunchy as we'll need to refer to that later for the grid possibly

later for the grid possibly and then for soft we're going to do the

and then for soft we're going to do the same thing so it's going to be a class

same thing so it's going to be a class equals menu two underscores item and

equals menu two underscores item and then menu two underscores sf for soft

then menu two underscores sf for soft and finally let's scroll down to the

and finally let's scroll down to the very bottom where we have chips and

very bottom where we have chips and salsa it spans three columns so besides

salsa it spans three columns so besides menu item here i also want menu two

menu item here i also want menu two underscores

underscores and cs and i believe i have now applied

and cs and i believe i have now applied all of the classes that i wanted to

all of the classes that i wanted to apply for the menu itself one other

apply for the menu itself one other thing i am going to do while i'm here in

thing i am going to do while i'm here in the html is remove this line break

the html is remove this line break and then we have a paragraph here and

and then we have a paragraph here and i'm going to apply our utility class

i'm going to apply our utility class of

of center

center to this paragraph that has our back to

to this paragraph that has our back to top link that should appear underneath

top link that should appear underneath the table let's go back to our style

the table let's go back to our style sheet and let's drag this to the left so

sheet and let's drag this to the left so we can see changes applied to the table

we can see changes applied to the table now as we apply these styles i'll start

now as we apply these styles i'll start by scrolling up so we can start at the

by scrolling up so we can start at the very top of our available space and i'm

very top of our available space and i'm going to put in a label for the style

going to put in a label for the style sheet for the menu

sheet for the menu now underneath this the first thing i'm

now underneath this the first thing i'm going to do is select the t-head element

going to do is select the t-head element the t-body element

the t-body element the t-foot element

the t-foot element and the tr element and this is the only

and the tr element and this is the only table in the project so i feel safe

table in the project so i feel safe doing this without classes if it was a

doing this without classes if it was a larger project i might have made a

larger project i might have made a display contents class and then applied

display contents class and then applied this to each that class to each one of

this to each that class to each one of these elements so here i'm going to say

these elements so here i'm going to say display

display contents it also took those parents out

contents it also took those parents out of the flow so now

of the flow so now even though they're still in the page it

even though they're still in the page it made them all run into one line so we

made them all run into one line so we will definitely see changes now as we

will definitely see changes now as we make the table

make the table so or the grid i should say

so or the grid i should say let's create that menu container class

let's create that menu container class if you remember this is applied to the

if you remember this is applied to the table element itself so we'll say

table element itself so we'll say display grid and if i save after each

display grid and if i save after each change we should definitely see changes

change we should definitely see changes as we go so now just by applying display

as we go so now just by applying display grid it changed how that viewed after

grid it changed how that viewed after our display contents was applied now

our display contents was applied now let's say grid dash

let's say grid dash template dash columns

template dash columns and we're going to use the repeat

and we're going to use the repeat function

function we want three columns

we want three columns each with one fragment so let's save now

each with one fragment so let's save now and we once again see changes to that

and we once again see changes to that table now let's go ahead and map out our

table now let's go ahead and map out our grid

grid template

template areas but we really haven't assigned any

areas but we really haven't assigned any specific classes like those that we

specific classes like those that we applied to crunchy or soft so it might

applied to crunchy or soft so it might still look a little strange when we do

still look a little strange when we do this

this essentially though

essentially though we only need to assign

we only need to assign the labels to the ones that are going to

the labels to the ones that are going to take up more than one grid square so

take up more than one grid square so other in other words i can just kind of

other in other words i can just kind of create the other labels without

create the other labels without assigning them to elements so i'm going

assigning them to elements so i'm going to have hd1 hd2 and hd3 i won't end up

to have hd1 hd2 and hd3 i won't end up assigning those to classes at all

assigning those to classes at all then i'm going to have cr

then i'm going to have cr cr1 this is crunchy as you might guess

cr1 this is crunchy as you might guess the abbreviation hd was for header and

the abbreviation hd was for header and then crunchy one price for one taco now

then crunchy one price for one taco now i'm just going to

i'm just going to ctrl alt

ctrl alt and the down arrow a couple of times

and the down arrow a couple of times because one here is going to get changed

because one here is going to get changed to

to two and then one here is going to get

two and then one here is going to get changed to three

changed to three okay after that let's create one line

okay after that let's create one line here for soft so we'll have soft taco

here for soft so we'll have soft taco soft one

soft one and then

and then soft

soft one price

one price after that

after that shift alt down arrow shift alt down

shift alt down arrow shift alt down arrow

arrow select one control d change those to a

select one control d change those to a two select one ctrl d change those to a

two select one ctrl d change those to a three

three and save and so now we have the

and save and so now we have the crunchyrose and the soft rows and the

crunchyrose and the soft rows and the header so at the very end we're going to

header so at the very end we're going to have the chips and salsa rows so cscs cs

have the chips and salsa rows so cscs cs because it had a row span of three

because it had a row span of three after that we have essentially mapped

after that we have essentially mapped out those grid areas it doesn't look

out those grid areas it doesn't look like we want it to yet though because we

like we want it to yet though because we haven't assigned

haven't assigned that crunchy label to the crunchy label

that crunchy label to the crunchy label that we or class that we have and the

that we or class that we have and the soft label to the soft class or the

soft label to the soft class or the chips and salsa label to that class so

chips and salsa label to that class so we still need to add those

we still need to add those likewise let's go ahead and add a small

likewise let's go ahead and add a small gap 0.1 em so as we discussed before

gap 0.1 em so as we discussed before that could be as small as 1.6 pixels or

that could be as small as 1.6 pixels or about as large as 2.4 depending on the

about as large as 2.4 depending on the font size applied

font size applied then let's give a margin bottom of one

then let's give a margin bottom of one em as well now let's apply some of those

em as well now let's apply some of those labels so our grid looks a little bit

labels so our grid looks a little bit better so we'll start out with the menu

better so we'll start out with the menu two underscores cr for crunchy and here

two underscores cr for crunchy and here we'll apply the grid area label of cr

we'll apply the grid area label of cr when we save we don't see much of a

when we save we don't see much of a change yet but i hope to in the near

change yet but i hope to in the near future

future menu two underscores and sf for soft and

menu two underscores and sf for soft and here we'll say grid area

here we'll say grid area sf

sf save again so we see a little bit more

save again so we see a little bit more of a change

of a change and then we'll say

and then we'll say menu two underscores cs

menu two underscores cs this will be grid

this will be grid area cs

area cs and save we definitely have seen some

and save we definitely have seen some changes in the grid it's not what we

changes in the grid it's not what we want yet but we're getting there let's

want yet but we're getting there let's make the color

make the color here a

here a var

var dash dash

dash dash highlight

highlight color for this

color for this okay so we've got a chips and salsa that

okay so we've got a chips and salsa that is now green and then we'll say font

is now green and then we'll say font weight

weight bold as well and save that looks good

bold as well and save that looks good now let's go ahead and apply some of

now let's go ahead and apply some of this to the other areas as well so let's

this to the other areas as well so let's say

say menu two underscore cr and

menu two underscore cr and menu two underscores sf

menu two underscores sf here i'm going to take these two and

here i'm going to take these two and maybe i should have organized this

maybe i should have organized this differently on my thought pattern but i

differently on my thought pattern but i want both of those there as well however

want both of those there as well however there's also some other styles so i want

there's also some other styles so i want a height

a height of 100 percent

of 100 percent as it takes up some of that extra space

as it takes up some of that extra space why is that not applying to crunchy i

why is that not applying to crunchy i may have to go back and see what i did

may have to go back and see what i did wrong there

wrong there but let's go ahead and say these are

but let's go ahead and say these are also grids

and then we want to place the content center which is the point of making them

center which is the point of making them a grid so we could do that yes the

a grid so we could do that yes the crunchy style is not being applied so we

crunchy style is not being applied so we have

have menu cr

menu cr and that is what needs to be applied

and that is what needs to be applied there let's go back and look at our

there let's go back and look at our html and see if that class was applied

html and see if that class was applied properly

properly to the cr section oh it's just one

to the cr section oh it's just one underscore it needs to be two

underscore it needs to be two save and now

save and now go back to style and bring this over and

go back to style and bring this over and now crunchy and soft both have that same

now crunchy and soft both have that same style and everything is aligned better

style and everything is aligned better that makes more sense as to why it

that makes more sense as to why it wasn't coming together quite as quickly

wasn't coming together quite as quickly as i expected and before we move on

as i expected and before we move on let's see if we could apply this

let's see if we could apply this differently now we still need the grid

differently now we still need the grid area here for menu cs but we could

area here for menu cs but we could possibly remove these

possibly remove these and let's see if we could include

and let's see if we could include the dot menu to underscore cs without

the dot menu to underscore cs without really making something strange there i

really making something strange there i think that's fine and it's a little more

think that's fine and it's a little more efficient we aren't repeating those two

efficient we aren't repeating those two lines and now let's look at these

lines and now let's look at these headers and we could possibly add those

headers and we could possibly add those in as well so one more comma and we'll

in as well so one more comma and we'll say menu two underscores header

say menu two underscores header and save and yes i think that style is

and save and yes i think that style is going to work out as well however we

going to work out as well however we still need menu to underscores header

still need menu to underscores header because we want to add a border dash

because we want to add a border dash bottom

bottom to each of those so we'll say bar

to each of those so we'll say bar and bring in our borders variable that

and bring in our borders variable that we have created

we have created and save so now we have a border across

and save so now we have a border across each one of those headings now let's

each one of those headings now let's scroll for some more room and we're

scroll for some more room and we're going to select that menu header again i

going to select that menu header again i could spell menu two underscores header

could spell menu two underscores header and then we also want

and then we also want menu two underscores item

menu two underscores item now for both of these we want a width of

now for both of these we want a width of one hundred percent

one hundred percent and then we'll set a padding to 1 em

and then we'll set a padding to 1 em and let's put a

and let's put a border

border and then let's set medium

and then let's set medium [Music]

[Music] ridge and we'll set the var equal to

ridge and we'll set the var equal to border color there we go

and when we save that we've got borders around everything so in that regard

around everything so in that regard maybe we could remove

maybe we could remove that border bottom

that border bottom and still be good and we save yes and it

and still be good and we save yes and it looks the same so one was just

looks the same so one was just overriding the other and now let's

overriding the other and now let's select just the menu items

and here we'll put a display of grid and we will once again place the content

we will once again place the content in the center and when we save that

in the center and when we save that looks good as well now we didn't apply

looks good as well now we didn't apply that above to the menu item where we set

that above to the menu item where we set the same grid and center because we also

the same grid and center because we also really didn't want to apply these other

really didn't want to apply these other styles to those menu items we wanted to

styles to those menu items we wanted to keep them

keep them this separate color and not have the

this separate color and not have the font be bold but that's looking pretty

font be bold but that's looking pretty good right now as far as converting this

good right now as far as converting this menu table and leaving that semantic

menu table and leaving that semantic html in place we can apply some final

html in place we can apply some final touches to this menu as well but earlier

touches to this menu as well but earlier when we were referencing

when we were referencing the border

the border dash radius property we said we were

dash radius property we said we were only doing it twice

only doing it twice and therefore i didn't go ahead and

and therefore i didn't go ahead and create a variable but now i want to use

create a variable but now i want to use it again and so now that i'm using it in

it again and so now that i'm using it in another place i definitely do want to

another place i definitely do want to create that variable so i'm going to

create that variable so i'm going to scroll back up

scroll back up to the variable section and underneath

to the variable section and underneath borders

borders i'm going to create a

i'm going to create a border dash radius variable

border dash radius variable and just set that to 15 pixels so now

and just set that to 15 pixels so now that i've created that we can use that

that i've created that we can use that variable

variable in all of the places that we are

in all of the places that we are applying a border radius so now let's go

applying a border radius so now let's go ahead and change

ahead and change these two that currently exist to var

these two that currently exist to var dash border

dash border radius there we go

radius there we go and save that so no other changes will

and save that so no other changes will be made there but now we can apply these

be made there but now we can apply these final touches to our menu table as well

final touches to our menu table as well and we can use that border radius

and we can use that border radius property now i could apply classes to

property now i could apply classes to the header and the footer but i'm not

the header and the footer but i'm not and they are being ignored for some

and they are being ignored for some things concerning the grid when we set

things concerning the grid when we set that to display contents however they

that to display contents however they are still part of the document so we can

are still part of the document so we can still use them for selectors so i'm

still use them for selectors so i'm going to select the t head

going to select the t head and then the th inside of the t head and

and then the th inside of the t head and say the first

say the first child which should be the very first

child which should be the very first cell that says tacos and here we're

cell that says tacos and here we're going to set the border dash top

going to set the border dash top dash left

dash left dash radius

dash radius and now we'll use our

and now we'll use our border radius variable once again

border radius variable once again and when we save we can see this now has

and when we save we can see this now has the border radius of 15 pixels

the border radius of 15 pixels so likewise i'm going to just copy this

so likewise i'm going to just copy this down so i don't have to retype

down so i don't have to retype everything shift alt and the down arrow

everything shift alt and the down arrow this is going to be the t head th

this is going to be the t head th last child and instead of the top left

last child and instead of the top left it's going to be

it's going to be the top right everything else should be

the top right everything else should be the same and now we see that same border

the same and now we see that same border radius applied over here to the right

radius applied over here to the right finally we have this one large chips and

finally we have this one large chips and salsa cell along the bottom of this

salsa cell along the bottom of this table for the menu so here this will be

table for the menu so here this will be the

the t foot

t foot and then we'll select the table data

and then we'll select the table data cell inside

cell inside here we can set the border dash

here we can set the border dash bottom dash left dash radius

bottom dash left dash radius and this will once again be var

and this will once again be var two dashes border and use that border

two dashes border and use that border radius variable

radius variable and once we save this we see

and once we save this we see that applied to the left corner so it

that applied to the left corner so it just needs to be applied to the right

just needs to be applied to the right corner so inside this same

corner so inside this same selector here for t foot td we can now

selector here for t foot td we can now also

also apply this

apply this to the right corner and save and there

to the right corner and save and there we have our rounded corners for our

we have our rounded corners for our table as well we're getting near the end

table as well we're getting near the end but there is a little more to do let's

but there is a little more to do let's go ahead and look at the page in full

go ahead and look at the page in full screen or at the full site now and

screen or at the full site now and here's our back to top we can click we

here's our back to top we can click we have the smooth scrolling that goes

have the smooth scrolling that goes there

there we can go to the hours page everything

we can go to the hours page everything looks pretty good there

looks pretty good there the contact form everything is good here

the contact form everything is good here the about page and the trivia

the about page and the trivia that's all working well and our

that's all working well and our animation shows here let's look by shift

animation shows here let's look by shift control and the letter i to go into a

control and the letter i to go into a mobile view

mobile view notice how well our grid conforms it

notice how well our grid conforms it automatically adapts we didn't have to

automatically adapts we didn't have to apply a media query the grid just works

apply a media query the grid just works in this mobile view and that's great

in this mobile view and that's great let's look at some other views here's a

let's look at some other views here's a little bit maybe larger phone there we

little bit maybe larger phone there we go so it is quite a bit larger it is the

go so it is quite a bit larger it is the iphone 6 7 8 plus

iphone 6 7 8 plus and there we'll size it down to 75

and there we'll size it down to 75 let's go ahead and look at the iphone x

let's go ahead and look at the iphone x that gets taller so that should also

that gets taller so that should also make our text just a little larger based

make our text just a little larger based on how we used clamp with that

on how we used clamp with that everything's still looking pretty good

everything's still looking pretty good the form still adapts to the screen size

the form still adapts to the screen size the menu looks good and it took us right

the menu looks good and it took us right to the menu when i click the menu link

to the menu when i click the menu link the about page

the about page the hours

the hours all is looking pretty good i think we

all is looking pretty good i think we could apply possibly a little bit of

could apply possibly a little bit of space or a class we might have to back

space or a class we might have to back to the top that we applied

to the top that we applied down here i think we at least centered

down here i think we at least centered it so we might change something there

it so we might change something there but overall it's good to just evaluate

but overall it's good to just evaluate your project and see how everything

your project and see how everything looks to you as you go and you can tell

looks to you as you go and you can tell it's looking good on mobile as well so

it's looking good on mobile as well so let's go back to full screen view and

let's go back to full screen view and we're going to make just a couple of

we're going to make just a couple of changes there is one media query i would

changes there is one media query i would like to apply to this project although

like to apply to this project although using modern css

using modern css for the most part we've been able to

for the most part we've been able to avoid media queries we are going to put

avoid media queries we are going to put this media query at the bottom of the

this media query at the bottom of the page so we'll say at

page so we'll say at media

media and then we'll say screen

and then we'll say screen and now say min width

and now say min width and we'll say

and we'll say 576 pixels which is our small break

576 pixels which is our small break point and that is similar to what

point and that is similar to what bootstrap uses the css library or

bootstrap uses the css library or framework if you will

framework if you will and here we have header

and here we have header two underscores h1

two underscores h1 now let's select the pseudo element here

now let's select the pseudo element here and this is the before pseudo element

and this is the before pseudo element and we're going to set some content

and we're going to set some content on this h1 let's give a space and what i

on this h1 let's give a space and what i want to do

want to do is put a taco emoji in here and actually

is put a taco emoji in here and actually i want to put the taco emoji and then

i want to put the taco emoji and then the space so we have a taco space and

the space so we have a taco space and then we have the heading as you might

then we have the heading as you might expect i also want to do this

expect i also want to do this with the after so i will just copy that

with the after so i will just copy that down again shift alt and the down arrow

down again shift alt and the down arrow will switch before to

will switch before to after

after and now with the after

and now with the after we want the space to come first and then

we want the space to come first and then the taco so we've got taco space heading

the taco so we've got taco space heading space

space taco so this should show up on any

taco so this should show up on any screen that's larger than 576 pixels in

screen that's larger than 576 pixels in width so when we save

width so when we save now we have tacos in the heading as well

now we have tacos in the heading as well and that's a great addition for the

and that's a great addition for the little taco shop and it applies to all

little taco shop and it applies to all the pages where we set up our classes

the pages where we set up our classes correctly but if we go to a smaller

correctly but if we go to a smaller screen

screen where we might not be able to fit all of

where we might not be able to fit all of that in

that in they disappear and that is great too so

they disappear and that is great too so that only shows in larger viewports

that only shows in larger viewports let's go to an ipad

let's go to an ipad there we have the tacos so just mobile

there we have the tacos so just mobile it will not try to squeeze those tacos

it will not try to squeeze those tacos in and that is fine let's drag this back

in and that is fine let's drag this back over we can apply just a little bit more

over we can apply just a little bit more to the

to the media query as well and this is just

media query as well and this is just something i want to do for the

something i want to do for the menu two underscores header

menu two underscores header then we're also going to have it in the

then we're also going to have it in the menu to underscore cr which was the

menu to underscore cr which was the crunchy

crunchy menu two underscores sf which was the

menu two underscores sf which was the soft

soft menu two underscore cs

menu two underscore cs which was the chips and salsa we're

which was the chips and salsa we're going to set the font size to 125

going to set the font size to 125 so just a little larger

so just a little larger on these larger screens for the headings

on these larger screens for the headings you really if you wanted to you could do

you really if you wanted to you could do it to all of these but i just really

it to all of these but i just really wanted to make the heading stand out and

wanted to make the heading stand out and so everything we've wrapped around here

so everything we've wrapped around here that you see in green

that you see in green has applied that larger font now just

has applied that larger font now just another 25 percent larger

another 25 percent larger than it was there is one more media

than it was there is one more media query to apply but it's not based on the

query to apply but it's not based on the width it's based on the preference of

width it's based on the preference of light and dark mode we have styled our

light and dark mode we have styled our light mode this would be our normal

light mode this would be our normal viewing for the website but many prefer

viewing for the website but many prefer dark mode these days and that includes

dark mode these days and that includes myself so i definitely like to add dark

myself so i definitely like to add dark mode when the preferences are set for

mode when the preferences are set for that so if your system preference is

that so if your system preference is dark mode that's what will display my

dark mode that's what will display my system preference is dark mode so i'm

system preference is dark mode so i'm going to put this media query

going to put this media query directly under the variables we defined

directly under the variables we defined so

so it will be applied right away because

it will be applied right away because all it really does is change the

all it really does is change the variables

variables for those colors that we're using on the

for those colors that we're using on the site so i will say at media put our

site so i will say at media put our parentheses then put prefers dash

parentheses then put prefers dash color dash

color dash scheme

scheme and here i'm going to say dark so that

and here i'm going to say dark so that is what my system is already set to so

is what my system is already set to so anything we put in here will start to

anything we put in here will start to overwrite what we already have for those

overwrite what we already have for those variables so we need the root pseudo

variables so we need the root pseudo selector it's the pseudo class

selector it's the pseudo class and now let's overwrite

and now let's overwrite the background

the background color and this is going to be

color and this is going to be black now we will not really see the

black now we will not really see the change here because we're not seeing

change here because we're not seeing that orange color until we drag this

that orange color until we drag this over to full screen so if i save

over to full screen so if i save drag this over to the full screen now

drag this over to the full screen now you can see it's dark but it's still

you can see it's dark but it's still fading to that light orange because we

fading to that light orange because we haven't changed that other variable yet

haven't changed that other variable yet either so let's change the

either so let's change the bg

bg color dash fade variable as well and

color dash fade variable as well and i'll just make that gray just like my

i'll just make that gray just like my last name i'll save and now let's drag

last name i'll save and now let's drag this over once again you can see it's

this over once again you can see it's fading to a gray instead of the orange

fading to a gray instead of the orange to a light orange

to a light orange the next color we'll put in here will be

the next color we'll put in here will be the header background color now we'll

the header background color now we'll start to see these changes so

start to see these changes so header bg color

header bg color oh i'm sorry just header color not bg

oh i'm sorry just header color not bg color

color let's make this

white smoke and save

and save and then let's go ahead and change the

and then let's go ahead and change the nav

nav i said color now i need background color

i said color now i need background color and by the way the white smoke i just

and by the way the white smoke i just find that to be easier on my eyes than

find that to be easier on my eyes than the pure white that we've used in other

the pure white that we've used in other spots let's set this to

spots let's set this to rgb

rgb 20 20

20 20 20 which is just a different shade

20 which is just a different shade of black essentially and now you can see

of black essentially and now you can see that background color

that background color for the nav menu definitely got darker

for the nav menu definitely got darker okay so we're going to have to change

okay so we're going to have to change that text eventually too

that text eventually too let's set the hero color and this is for

let's set the hero color and this is for our little animated part that drops down

our little animated part that drops down so our hero color is going to be a

so our hero color is going to be a different

different flat black now when it drops down you

flat black now when it drops down you can see that has also changed

can see that has also changed now let's set the body background color

now let's set the body background color itself so this will be a big change when

itself so this will be a big change when we first see it that will also be this

we first see it that will also be this flat black

flat black and that has made a difference

and that has made a difference now let's go to the font color itself

now let's go to the font color itself which is what's being used on most of

which is what's being used on most of the page and we'll go with that

the page and we'll go with that white smoke that's just a little easier

white smoke that's just a little easier on the eyes than the pure bright white

on the eyes than the pure bright white and so let's find a page that's using

and so let's find a page that's using well here we see it inside of these

well here we see it inside of these table cells here but if we go look at a

table cells here but if we go look at a different page you can see it is being

different page you can see it is being used right here as well

used right here as well okay after the font color let's apply

okay after the font color let's apply the

the highlight color

highlight color and where this was that green let's use

and where this was that green let's use white smoke here as well so when we save

white smoke here as well so when we save i believe that's in the animation

i believe that's in the animation and i'm not seeing that applied right

and i'm not seeing that applied right now i'm not seeing the animation because

now i'm not seeing the animation because i'm not on the right page here we go and

i'm not on the right page here we go and oh no it wasn't in the animation because

oh no it wasn't in the animation because that has the separate

that has the separate background color that is slightly

background color that is slightly transparent but it is in some other

transparent but it is in some other areas like we were using it for the h2s

areas like we were using it for the h2s and h3s and the table headings so we can

and h3s and the table headings so we can see that's now using white smoke as well

see that's now using white smoke as well okay now let's switch the

okay now let's switch the border color that's being used let's

border color that's being used let's also make that white smoke

also make that white smoke now our table is standing out

now our table is standing out and now that border color was a bit of

and now that border color was a bit of the shadow behind the lettering so now

the shadow behind the lettering so now we've got a little bit of white shadow

we've got a little bit of white shadow behind bienvenidos and that stands out

behind bienvenidos and that stands out on that green as well helping the dark

on that green as well helping the dark lettering stand out and we still need to

lettering stand out and we still need to change our link colors so

change our link colors so link dash color

link dash color we'll make that white smoke you can see

we'll make that white smoke you can see we're really making use of that color

we're really making use of that color for this setting

for this setting also say link hover is now going to be

also say link hover is now going to be orange

orange and then

and then link active

link active is going to be the lighter orange so rgb

is going to be the lighter orange so rgb 252 200 103.

252 200 103. and save so now when we hover over a

and save so now when we hover over a link it becomes orange

link it becomes orange when i hold down it's a lighter orange

when i hold down it's a lighter orange and then we go to hours

and then we go to hours everything looks pretty good now you may

everything looks pretty good now you may have your own preferences for dark mode

have your own preferences for dark mode as well but just scan over the site see

as well but just scan over the site see how you think it looks does everything

how you think it looks does everything look like you want it to oh these

look like you want it to oh these buttons need a little bit of help yet

buttons need a little bit of help yet let's check our other page and make sure

let's check our other page and make sure everything else looks good and then we

everything else looks good and then we might need to change something about

might need to change something about those buttons we'll have to see what is

those buttons we'll have to see what is going on there

going on there and that might be a correction that

and that might be a correction that needs to be made in how they're

needs to be made in how they're initially

initially being set as well so let's find

being set as well so let's find where we had a

where we had a button which was a contact button and

button which was a contact button and you can see the header color which

you can see the header color which remained white or white smoke was being

remained white or white smoke was being used but then that highlight color was

used but then that highlight color was the background and that has changed i

the background and that has changed i think we need to change this from header

think we need to change this from header color to button color and give us some

color to button color and give us some or give ourselves some control over what

or give ourselves some control over what color

color is the text on top of the buttons so

is the text on top of the buttons so we've added a button color variable now

we've added a button color variable now we need to define that above and then of

we need to define that above and then of course change it when it gets to dark

course change it when it gets to dark mode as well so we were fine with it at

mode as well so we were fine with it at first when it was the same as the header

first when it was the same as the header color so that's what we'll start off

color so that's what we'll start off with and i believe that is just white so

with and i believe that is just white so we'll put that and also put it in as

we'll put that and also put it in as white here but now we need to change

white here but now we need to change this when we get to dark mode so let's

this when we get to dark mode so let's bring this down into our dark mode

bring this down into our dark mode definitions

definitions add this and let's change it to black

add this and let's change it to black right here

right here and save now let's go ahead and go to

and save now let's go ahead and go to our contact page

our contact page scroll down and now we can see the text

scroll down and now we can see the text on our buttons and so that looks good

on our buttons and so that looks good the about page is looking good let's

the about page is looking good let's make sure the answer looks good for

make sure the answer looks good for trivia that's fine here's an additional

trivia that's fine here's an additional link in our page to the reference for

link in our page to the reference for the trivia

the trivia the menu we scroll right to that

the menu we scroll right to that everything looks good there

everything looks good there ours

ours pretty good i still might want to create

pretty good i still might want to create a little space here with the back to top

a little space here with the back to top but other than that it's fine

but other than that it's fine and back to the home okay so we are down

and back to the home okay so we are down to the final touches of the project so

to the final touches of the project so one of those things might be to organize

one of those things might be to organize the css now this is your own project but

the css now this is your own project but if you're working in a team for example

if you're working in a team for example you might want to organize that i'm

you might want to organize that i'm going to drag this over to full screen

going to drag this over to full screen for this discussion let's say the colors

for this discussion let's say the colors we have here there's there's probably

we have here there's there's probably the largest list that we have of

the largest list that we have of anything

anything in this project is the colors it might

in this project is the colors it might help to just use the abcss technique

help to just use the abcss technique here to organize these so if we

here to organize these so if we highlight all of those press control p

highlight all of those press control p and then the greater than symbol and now

and then the greater than symbol and now we might choose sort lines ascending so

we might choose sort lines ascending so now all of our colors are ordered

now all of our colors are ordered alphabetically and i could find them

alphabetically and i could find them probably much faster now that i've done

probably much faster now that i've done this so considering that maybe we should

this so considering that maybe we should do the same thing for our dark mode

do the same thing for our dark mode we'll highlight all of those

we'll highlight all of those control p

control p greater than symbol and choose sort

greater than symbol and choose sort lines ascending now you're welcome to do

lines ascending now you're welcome to do that for any or all of the properties

that for any or all of the properties and styles that are within this project

and styles that are within this project if you so choose now before we finish

if you so choose now before we finish this project there's one more thing we

this project there's one more thing we can add that would be a very nice touch

can add that would be a very nice touch but it is a preview of what's to come

but it is a preview of what's to come for you yet and that's because it's a

for you yet and that's because it's a touch of javascript

touch of javascript just a little bit and i'll show you what

just a little bit and i'll show you what it does it will update the year so it

it does it will update the year so it will put in the current year no matter

will put in the current year no matter what year it is and you will not have to

what year it is and you will not have to come back and update the copyright on

come back and update the copyright on your site so let's put in a time element

your site so let's put in a time element right here i want lowercase

right here i want lowercase so i'll give this a time with an id

so i'll give this a time with an id attribute of

attribute of year

year so there is our time element and we

so there is our time element and we don't really need to put anything in it

don't really need to put anything in it we'll just leave it as is

we'll just leave it as is with the id of year right there now

with the id of year right there now let's go over to our file tree

let's go over to our file tree and inside the file tree let's create a

and inside the file tree let's create a js folder and inside the js folder let's

js folder and inside the js folder let's create a new file name it main.js

create a new file name it main.js now we only have a few simple lines to

now we only have a few simple lines to put in here so

put in here so i'm going to type

i'm going to type const which will help me define a

const which will help me define a variable and i'm going to name that

variable and i'm going to name that variable year i'm going to set that

variable year i'm going to set that equal to document and when i refer to

equal to document and when i refer to document i am referring to the html

document i am referring to the html document

document and then get

and then get element by id and this will be year so

element by id and this will be year so you know we just set that attribute

you know we just set that attribute and then we are selecting it so we're

and then we are selecting it so we're selecting that time element on whichever

selecting that time element on whichever page we load this javascript into from

page we load this javascript into from there i'm going to define another

there i'm going to define another variable and i want it to be called this

variable and i want it to be called this year notice i'm using camel case to

year notice i'm using camel case to define that

define that i'm going to set this equal to a new

i'm going to set this equal to a new date

date and then i'm going to call the get full

and then i'm going to call the get full year method for that date

year method for that date so now i have the current full year in

so now i have the current full year in the this year variable

the this year variable and i have the element that we just

and i have the element that we just created the time element in the year

created the time element in the year variable so i'm going to say

variable so i'm going to say year

year set

set attribute and then i'm going to select

attribute and then i'm going to select date time

date time and i'm going to set it

and i'm going to set it to the this year variable

to the this year variable and then to display it on the page i

and then to display it on the page i once again want that year element and

once again want that year element and now i'm going to select the text content

now i'm going to select the text content that's what's displayed on the page

that's what's displayed on the page and set it equal to this year and save

and set it equal to this year and save that's all i need are these four lines

that's all i need are these four lines of code

of code and with that we can import this into

and with that we can import this into our page so we'll go back to the index

our page so we'll go back to the index let's scroll to the top because we want

let's scroll to the top because we want to load the javascript last after the

to load the javascript last after the css

css and we do that with a script tag and it

and we do that with a script tag and it will have a source attribute and there

will have a source attribute and there it is so we'll say js slash

it is so we'll say js slash and then we'll just pick our main js

and then we'll just pick our main js nothing goes between the opening and

nothing goes between the opening and closing script tags however you have to

closing script tags however you have to put it this way it always has a closing

put it this way it always has a closing script tag it's not like some of the

script tag it's not like some of the other elements that just has a slash to

other elements that just has a slash to close out the first one you always see

close out the first one you always see it this way we want to add one other

it this way we want to add one other attribute though and that is defer and

attribute though and that is defer and that tells the script to wait until

that tells the script to wait until everything else is loaded before

everything else is loaded before loading the javascript and we will save

loading the javascript and we will save now if we go back

now if we go back to our page

to our page notice it says copyright

2022 little taco shop if you're watching this in a different

if you're watching this in a different year and you add this same code it will

year and you add this same code it will say whatever the current year is there

say whatever the current year is there now if we go to our other pages notice

now if we go to our other pages notice it still just says copyright copyright

it still just says copyright copyright symbol in little taco shop because we

symbol in little taco shop because we haven't added that javascript to the

haven't added that javascript to the other pages yet but we can do that now

other pages yet but we can do that now so let's drag this over

so let's drag this over and we also need to make that same

and we also need to make that same change to the footer on every page so

change to the footer on every page so inside of our copyright line here that

inside of our copyright line here that has the span class

has the span class let's select that with the c

let's select that with the c and then we'll go to the hours page

and then we'll go to the hours page scroll down

scroll down and we will

and we will select the same line and paste in the

select the same line and paste in the new line and save

new line and save the contact page scroll down select the

the contact page scroll down select the copyright line

paste in the new line and save and we also need the about page i

and we also need the about page i believe so now let's scroll down

believe so now let's scroll down and here we'll select that same

and here we'll select that same copyright line

and we'll paste in the new line but we haven't added the javascript yet so

haven't added the javascript yet so let's go back to our index.html

let's go back to our index.html now we could just copy this same script

now we could just copy this same script line and we can use the same javascript

line and we can use the same javascript file for every page so back to the hours

file for every page so back to the hours page

page paste it in underneath our style sheet

paste it in underneath our style sheet line

line back to the contact page we should do

back to the contact page we should do the exact same thing

and then finally the about page we should do the exact same thing

should do the exact same thing then save and now let's once again look

then save and now let's once again look at our site

at our site and notice that no matter which page

and notice that no matter which page we're on we now have the year referenced

we're on we now have the year referenced in the footer along with our copyright

in the footer along with our copyright notice and everything looks

notice and everything looks just as it should okay guys just a few

just as it should okay guys just a few closing notes and you could call them

closing notes and you could call them corrections if you want to i just want

corrections if you want to i just want to adjust a couple of things we're

to adjust a couple of things we're currently on the hours page for the

currently on the hours page for the little taco shop and i previously forgot

little taco shop and i previously forgot to put in an h2

to put in an h2 for this page so i'm going to do that

for this page so i'm going to do that here on line 48

here on line 48 and i'm just going to put hours in there

and i'm just going to put hours in there and save something else that's been

and save something else that's been bothering me about this page the whole

bothering me about this page the whole time was the back to the top

time was the back to the top link that we really don't need anymore

link that we really don't need anymore there's not enough content on this page

there's not enough content on this page for it really to even be there so i'm

for it really to even be there so i'm going to remove that

going to remove that back to the top link on the hours page

back to the top link on the hours page other than that i'm happy with how this

other than that i'm happy with how this page turned out of course

page turned out of course everything is preference when it comes

everything is preference when it comes to css your design choices your

to css your design choices your preferences may be different than mine

preferences may be different than mine so feel free to make your own changes

so feel free to make your own changes also at the

also at the contact.html page i previously removed

contact.html page i previously removed every hr the horizontal rule element but

every hr the horizontal rule element but i think i'd like to put one back here

i think i'd like to put one back here just between the two sections on this

just between the two sections on this page or between the two articles if you

page or between the two articles if you will so i'm going to put this horizontal

will so i'm going to put this horizontal rule back

rule back between those two different articles on

between those two different articles on this one page one other thing i want to

this one page one other thing i want to do

do is just change the text a little bit on

is just change the text a little bit on the buttons so i'm going to click the

the buttons so i'm going to click the file tree quickly go to the style.css

file tree quickly go to the style.css file and here under the contact to

file and here under the contact to underscore button class

underscore button class i'm just going to add a font

i'm just going to add a font weight

weight of bold and save and now once we want

of bold and save and now once we want look at these buttons i just like how

look at these buttons i just like how they look a little bit better with the

they look a little bit better with the bold font always go back and re-evaluate

bold font always go back and re-evaluate your code make your own choices and of

your code make your own choices and of course you don't have to agree with my

course you don't have to agree with my choices the best way to learn is

choices the best way to learn is experiment and see how it works out for

experiment and see how it works out for you so that's the end of the project

you so that's the end of the project congratulations you've completed a large

congratulations you've completed a large overhaul on the little taco shop website

overhaul on the little taco shop website and styled it with modern css

and styled it with modern css very few media queries necessary we

very few media queries necessary we added a nice animation and it does work

added a nice animation and it does work in mobile devices as well even though we

in mobile devices as well even though we didn't need those extra media queries so

didn't need those extra media queries so if we go back to an iphone 6 7 and 8

if we go back to an iphone 6 7 and 8 style we can now see how all of this

style we can now see how all of this looks in a dark mode and it is still

looks in a dark mode and it is still working

working as we expect it to great job completing

as we expect it to great job completing the project and completing the full css

the project and completing the full css for beginners course remember to keep

for beginners course remember to keep striving for progress over perfection

striving for progress over perfection and a little progress every day will go

and a little progress every day will go a very long way please give this video a

a very long way please give this video a like if it's helped you and thank you

like if it's helped you and thank you for watching and subscribing you're

for watching and subscribing you're helping my channel grow have a great day

helping my channel grow have a great day and let's write more code together very

and let's write more code together very soon

انقر على أي نص أو طابع زمني للانتقال إلى تلك اللحظة في الفيديو

معظم النصوص تصبح جاهزة في أقل من 5 ثوانٍ

نسخ بنقرة واحدة125+ لغةالبحث في المحتوىالانتقال إلى الطوابع الزمنية

الصق رابط YouTube

أدخل رابط أي فيديو YouTube للحصول على نصه الكامل

معظم النصوص تصبح جاهزة في أقل من 5 ثوانٍ

احصل على إضافة Chrome

احصل على النصوص فوراً دون مغادرة YouTube. ثبّت إضافة Chrome للوصول بنقرة واحدة إلى نص أي فيديو مباشرةً من صفحة المشاهدة.

أضف إلى Chrome — مجاناً

يعمل مع YouTube وCoursera وUdemy وغيرها من المنصات التعليمية

احصل على النصوص فوراً: فقط عدّل النطاق في شريط العنوان!

YouTube

←

→

↻

https://www.youtube.com/watch?v=UF8uR6Z6KLc

YoutubeToText

←

→

↻

https://youtubetotext.net/watch?v=UF8uR6Z6KLc

نص YouTubeجارٍ تحضير نتائجك…