so let's add some global styles they're
going to include the css reset variables
some utilities and focus styles because
it would take us hours to write css on
our own we're going to be copy pasting
most of it but i'm going to go through
some of it so you're not left alone
so we can create a new global css file
in source if you go here and if we
create a new file
sorry if you don't see the context menu
it's because of the recording but you
just create a new file and if we type
styles followed by a slash this is going
to create a new folder and then we can
say global css
and it's going to create the css and
after that we can just
copy the styles right
so we can copy it over
and let's briefly go over it so here
we're just importing uh the inter phone
from google fonts nothing special about
that we're doing a simple reset
and here is the more interesting part
which is what i love doing for every
project you can define your css
variables here we just have colors the
font sizing spacing our shadow that are
using and even the radius
so yeah if we go further down there's
nothing special we have a grid i
slightly took some artistic liberty and
modernized the to do mvc styles because
they're a bit outdated and not so user
accessible so there's some slight things
i did there
and then we can see i just inherited the
styles for label input buttons where you
would have to repeat the styles for each
one
then adjust the button then we have a
utility class of hidden we're going to
be using later
and here we're setting things up for
focus styling interpret so we have a red
outline that's a box shadow in focus
elements so yeah that's it for styles
and then when you have these styles you
can open the index html in your project
and one here
let's
update the title name so you can say
swell to do and yes so you have a couple
of methods to include global styles in
swelt so we can include it here inside
the link tag but the downside of that is
that that won't work with hot module
reloading so meaning whenever we make a
change the change is going to be
reflected immediately on the page which
is awesome
and why i love working in javascript in
these frameworks but if we include it
here we won't get it update because
whatever wheat is doing under the hood
it just won't know
to update the file so the alternative
for that is to include the global styles
itself in the script tag
so we can say script
and let's just say language typescript
but of course if you're not using
typescript you can just ignore this part
and then let's say import
and see the autocomplete is already
working here
let's say root and if you press ctrl
spacebar we can
continue the autocomplete so you can say
styles and i'm curious it's going to
show global css yeah it never does so
you can just say global css and of
course it's there
and then when we say we should update so
you should have your server running if
you remember if you run npm run dev or
pnpm if you're using that
so we can save it and then if we go here
we can see it updated and that's awesome
it works as expected