Styling images

Fill in the blank

Gap to the border

The gap between an element, and its border (like the red ?):

What CSS property sets the size of that?

Your answer:

Check Give up
Not graded. So why do it?

Fill in the blank

Gap outside the border

The gap outside an element's border, to the edge of its container (the ? in the screen shot):

What CSS property sets the size of the gap?

Your answer:

Check Give up
Not graded. So why do it?

The goal

Let's make a page that looks like this:

Here's the HTML we're going to style:

There's an h1, and then a few p tags. The first p has an img inside it. The img has a class. That's how we're going to select it.

Here's what the unstyled result looks like.

Adela

What's with all that strange text?

It's random text from the Doggo Ipsum website. Just a placeholder.

Sizing the image

Let's adjust the size of the image, like this:

.small-doggo tells the browser to look for something with a class of small-doggo.

width tells the browser to show the image 100 pixels wide. A pixel is more-or-less a dot on the screen. So the image will be about 100 dots wide. The image in the file rosie1.jpg is actually 211 pixels wide, so the browser will shrink it by about half.

Here's the result:

Ray

Could we use height instead of width?

Sure. Pick whichever is more convenient.

Here's the CSS again:

Georgina

What's the max-width about?

max-width makes the image work well on small screens, like cell phones. Just add it to all your images. We'll talk more about small screens later.

Floating images

Now let's float the image:

This makes the image move to the left, with the text flowing around it.

Ray

I bet we could float it to the right.

Yep.

But let's float it to the left for this example.

Clear

Here's our goal again.

The height of the photo is less than the height of the text we want to wrap around it, so it looks fine. Sometimes, though, the image is taller than the text, and that causes a problem.

Say we want to show our catalog of monsters on our website (just go with it). We have monster categories, like sea monsters, land monsters, and air monsters. Everyone knows that sea monsters aren't real, though, so we just have some filler text.

Here's the HTML

Each category has a header, then some text. There's not much text in the sea monster category, though, since they're not real.

We float the image left, and add a border and margin. This is what we end up with:

Oh no! The image is taller than the text associated with it. That messes up the start of the next category.

Argh!

Fear not, there's a fix. Let's add a class to the land monster header, so we can style it.

OK, now let's style the class in the stylesheet:

clear:both says to finish the left and right floats. The result:

Weehoo!

You might never run into this problem, but if you do, this is how you fix it.

Borders

This is what we have so far.

Let's add some borders to the image, with this CSS:

It looks like this:

The border is light grey, solid, and four pixels wide. If we zoom in, you can see that the corners are rounded.

That's what border-radius does.

Margins and padding

We want to separate the text from the image. Let's change the CSS to:

Here's the result:

Padding is the gap between the image and its border. The margin is the space outside the border.

Let's look at the CSS again:

Here, padding and margin use the unit rem. Remember that one rem is the width of the letter "m" in the browser's base font. So the padding is half the width of that letter, and the margin is twice the width of the letter.

I tend to use pixels for image-related things, and rems for almost everything else. Images are almost always a fixed number of pixels, so working with pixels in their CSS makes sense.

You can use percentages for font sizes, as you'll see in a moment.

Body font

We're almost there. One last bit of CSS.

This gives our final result:

W00t!

Push down

Sometimes an image is higher than its container, leading to a problem called push down. Here's some HTML, with equipment Tabatha takes skiing. The highlighted stuff is a div with a highlight class, and an image and some text inside it:

Here's the CSS. The CSS for the highlight class is... er, highlighted:

Here's what it looks like:

(OK, the colors are cray cray. Tabs and I were having fun.)

The count image is higher than the div needs to be, and it pushes through the border.

The solution is to add a line to the container's CSS:

The result:

Yay!

Exercise

Summary

• Size an image with width (or height).
• Set max-width: 100% for small screens.
• You can float images left and right.
• You can set images' borders.
• You can set margin and padding.

Up next

Weehoo! You've learned a lot of stuff! You should get yourself something nice, like a big chocolate chip cookie. Ooo... I like those, with big chunks of semi-sweet chocolate.

Do not give any to your doggo, though. Chocolate is poisonous for doggos.

Next, let's make links. That's the last ingredient we need, to start making complete simple sites.