Campsite Coders

Learn CSS

Learn to code and become a Front End Web Developer

Campsite Coders Bootcamp Coding Advenuture

How to Style Images with CSS

There are several different styles you can add to your images to make them different than other images on the page. This page will demonstrate a few of the most common styles used on images.

Read below to learn how to write CSS for adding borders around images, centering images, and properly sizing panoramic images so that they are not squished.

How To Center an Image on a Web Page

HTML

html images

CSS

center image on web page with css

RESULTS

image centered on web page

NOTES

In this example, you see that the entire content block is in a wrapper. If we used text-align: center to the #wrapper tag then both the image and the text would be centered. That is not what we wanted. So we gave the image its own ID name and placed the style definition there. But we don't use text-align: center. Instead, we use margin-left: auto & margin: right auto along with the display block.

How To Center an Image and Text Under Image

It is a very common practice to place text under an image on a web page. To center text under an image you will need to create a style rule in your CSS. Start by giving your image a class ID or name and your text, which is wrapped in a span tag, a class ID or name. You then wrap both of these two items in a new div tag that contains a class ID. You then assign the property/value "text-align: center" to the CSS of the div tag that you wrap your image and text.

HTML

html image centered

CSS

css center image

RESULTS

example centered image with text

NOTES


Notice that you center the text of the div, not the actual image or the text.

How To Add Border To an Image

HTML

html image with border

CSS

css image centered

RESULTS

results of centered image

NOTES


Notice that you center the text of the div, not the actual image or the text.


Try creating your own unique check boxes using CSS before moving ahead.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved