XHTML and CSS Tutorial - 27 - Background Images Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

why hello there bloody good day and in
this tutorial we're going to be talking
about unordered lists so our 27th
tutorial and yeah it's definitely time
to learn how to style unordered lists so
before we can style an oralist we
probably would need 1 a so let's go
ahead and make an unordered list and
knit right there and add some list items
in here and yep definitely mess that up
so just undo that Wow
I'm messing like this whole thing up
there we go Bucky you get it okay that's
how its constant right here enough
lollygagging around Li Li time to add
some list items so the first item would
be like Apple I just go ahead and copy
this way too lazy to type this again so
okay what's on my mind
Apple I guess we can make this a list of
food that like apple pie and dumplings
because they sound funny and they taste
good mmm not bad combination so now that
we have an unordered list let's go ahead
and check it out a regular dumb ol list
with these dumb old bullet points I mean
this is a you know a nice list of food
but I want to spice things up a bit I
want to make this look nice and Purdy so
the first thing that you might be
thinking is all right Bucky the first
thing that we need to do is either
change these little bullets or get rid
of them all together because I mean this
is old-school just regular bullet holes
I don't think so
so let's go ahead and learn how to
change our bullet points in order to do
that go ahead and write your UL is the
element and the property in order
changes is called list - style - type
now this has a bunch of default arming
excuse me not default but it has a bunch
of built-in things I can only remember
like three off the top of my head um
let's see if I can remember
Square is one now if we go ahead and
refresh this check it out our bullet
holes turn to squares that's that's
probably really hard to see on YouTube
but I assure you they are squares let's
go ahead and make something that's a
little easier circle I know is one that
might be a little easier to see circle
see now you can see that instead of
those are filled in bullet holes there
now nice elegant looking empty circles
so that's pretty cool and actually I
just thought of another one
um I don't know why I thought of this
but it's called katakana and you got to
say it like that you just have to I
didn't make the rules and if you refresh
this you can see these I don't know I
guess they're like Chinese or Japanese
symbols if anyone knows what those
symbols mean then I'll leave me a
comment below because I uh well
obviously because I don't know what they
mean I want to know so anyways that is
the basics of how you change your
unordered list from regular double
bullet points to something else so
another thing that I want to mention is
if you go through and you see you know
you look on the website and you go
through look into all the bullet points
that you can use and none of them really
um tickle your feathers I guess nothing
really make you happy you can go ahead
and download an image or make an image
and use them as your own custom bullet
points so I went ahead and I already
downloaded an image off the internet and
it's just cool little check mark and if
I wanted to use that instead of my
bullet points here's what I would need
to do first of all you don't use a list
style type anymore so go ahead and
delete all that what you use is property
called list style image and of course
anytime we want to use the image and CSS
we use the keyword URL with those
parenthesis in inside our parentheses I
have a file that I already download so
if you do this it's not going to work
because this file isn't on your computer
but anyways I already have this in my
folder it's called check dot ping
so when I go ahead and save this and
refresh is going to go from katakana to
those cool little check marks so now you
can see instead of those bullet points
it has like my own custom whatever I
want so I just want to show you guys
that there is a way to uh you know if
you're not happy with anything they give
you by default then you can make your
own so another thing that I wanted to
cover in this tutorial maybe I'll save
this for next door now we have got time
to do now um let's go ahead and delete
all of this and add a property like
border one fix solid red this is a
problem that I had a long time ago and I
remember that every time I made a
website it would annoy me so I always
use unordered lists when I have like a
navigation bar on the side and the first
thing I want to do is this first of all
on my navigation bar I don't want these
little bullet points so in order to
remove those I go ahead and in my CSS I
go list-style-type and i set this to
none and I'm thinking are a whenever I
do this the bullet points are going to
disappear in all of these which would be
links are going to be pushed nice and
neatly to the left but I refresh and I
get this from I have this huge space to
my left even though there are no bullet
points I just want like shake my
computer and I'm like dude you don't
have any bullet points so you don't have
to move over so can you just hop over
there where you should be go ahead just
hop on over but it doesn't do that in
order to get those to the left let me
explain this first of all by default
your browser gives padding at least left
padding to unordered list um it also
gives a margin I believe by default so
in order to fix the padding I mean you
would think that it would be zero by
default because it just makes sense but
it isn't in order to fix the padding you
need to explicitly set this to zero so
go ahead and type padding in there
and go ahead and type 0 and now once we
go ahead and save this and refresh it
check it out everything is pushed nice
and neatly to the left and of course if
this is too much for you you can alter
the padding accordingly but I just
wanted to show you guys whenever you
guys are you know making a website in
your like hmm making an unordered list
as a navigation column seems like a good
idea and you have this problem well now
you won't have it anymore like I had so
I shot myself in the foot so you guys
won't have to so anyways that's all I
wanted to show you guys trying to save
you a little headache at least umm so
there you have it so thank you guys for
watching this tutorial um I don't know
what I'm covering the next story but
like always it's going to be amazing so
anyways thank you guys don't forget to
check out my website and I'll see you
guys later