CSS Tutorial for Beginners - 19 - CSS Box Model Part 3 Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the 19th tutorial on
beginning CSS in the last several videos
we've looked at the box model and we've
added some content of course some
padding some borders as well as altering
the margin and of course the content was
just simple text in this video we're
going to actually add an image to our
web page and then we're going to apply
some padding and a border to that image
as well as work against the margin again
so I want you to add an image to our
website folder I actually downloaded
this barracuda image from Wikipedia so
you can go ahead and get that image if
you want I think you just have to search
on Barracuda and if you do that I want
you to open this up in Microsoft Paint
and you can reduce the image in there by
50% and that way it'll fit nicely on the
webpage but like I said you don't have
to use this image you could use really
any image of a fish if you want just
copy it to the website folder we want
that in the root directory okay and as
you know from the HTML series if you
watch that we have to add the image to
our HTML first so let's go ahead and do
that and let's maximize this and let's
put this image in between this paragraph
our first paragraph and our h2 header
element and I've already typed this out
so I'll just copy and paste this in here
okay so let's break this down now here
is the IMG tag now the IMG tag is what
defines the image in our HTML page and
think of it as the holding space for the
image that we're going to be using I
also want to point out that there is no
closing tag for the IMG tag so we only
need one tag now the class that we're
going to use to style our image is going
to be called image C right here and
we'll put that into our style sheet in a
minute and this is the source attribute
SRC and this is where we put the name of
our image which of course is barracuda
jpg and as I said before we want to put
that in the same folder that we have our
style sheet and our HTML document so
let's go ahead and save this and we'll
close this out now let's open up our
style sheet and actually
before we do that let's open up our web
page and there you can see we've got the
image of our barracuda and it's right
between the paragraph like we wanted and
the second header and you will remember
that HTML paints everything in the top
down order so the first item that gets
painted is the h1 header and then the
second paragraph and then the third item
of course is this image of this
barracuda now let's go ahead and first
actually we're going to play around with
the margins because we want to Center
this image we don't want this image
residing on the left side of our web
page we want this actually centered and
there's a good way to do this using
margins so let's go ahead and close this
and we'll open up our style sheet and
we're going to go down here and let's
sexually get rid of this space here and
let's go ahead and create our image
class and that of course is the name
that I used in the HTML and of course we
need our squiggly bracket and let's go
ahead and put in some properties okay so
we're going to type in display and block
now I don't want you to worry about the
display property right now I'm going to
do a future video on this so you don't
really have to be concerned about this
right now because this is a video on the
box model and we're going to type in the
margin - left and of course we use that
in the last video and we're going to set
this to auto now that we didn't do in
the last video so this is a new value
that we're looking at and let's just go
ahead and copy and paste this and then
the right side will get the same value
as well now of course in the last video
we were using pixels now what this does
is it allows us to Center this image and
of course the content this time is the
image so when you set the left and right
margins to auto that specifies that they
should split the available margin space
equally and the result is a centered
element and this is really the preferred
way to accomplish horizontal centering
with CSS so you can save this code from
this video and that's the key to CSS you
can save all the code that you put in
here that do various things for other
websites other web pages that's really
the beauty
of CSS so if you get a configuration
that you like save it and then name it
appropriately so let's go ahead and save
this
and let's open this up and there you can
see we've got a centered image and that
looks pretty nice okay now let's go
ahead and add some padding and a border
to our image and with images generally
you want to use a smaller amount of
padding so let's just go ahead and use
3px and we'll see how that looks
and let's give a background color of
silver so instead of using a hex code
we're just going to use the actual name
of the color and then let's go ahead and
use these same borders here and we'll
just yeah we'll just use these same
values so let's save this oops and we'll
open this up and there you can see we've
got a nice border with a little bit of
padding around our image okay that is
going to do it for this tutorial I will
see you guys in the next video