How to Format Images and Web Pages with CSS

Vertically align images with text in CSS

This CSS tip shows how to align images with the text on the page. Sometimes you want the text aligned either at the top or the bottom of the image or in the middle. This tip also gives instructions on how to align the image with the baseline of the text.

Here is an image aligned with the bottom of text:

How to Set up 2 Tables Side by Side with Responsive CSS

This tip will show you how to set up two tables that are side by-side on a desktop page but revert to a vertical layout on small mobile devices without using a lot of media queries in your CSS file.

How to Design a Semi-Transparent Background over Another image with CSS

This tip will show how to set up a semi-transparent background over another image so parts of the image will show through the background.

It will also show you how to set up your CSS so it will float over your image.

How to Set up 2 different Backgrounds on one Page with CSS.

This CSS tip shows how to set up a small image at the top of a webpage and use a plain color background using the same color as the bottom of the image for the rest of the page so you don't have to use a large image for the whole page or repeat the image down the page. This tip also shows how to get the right color hex number for the background and set it up in the css file.

How to Design a Gradient Background with CSS

This tip uses CSS to set up gradient backgrounds without images, using several colors that gradually change from one shade to another.

This allows the web page to load faster than using an image for the background.

How to add a drop shadow to an image or text box with CSS.

You can add a drop shadow under an image, or text box, with CSS (no shadow images needed). This tip also provides an explanation of drop shadow compatibility in different browsers, how to write the drop shadow code and center the image on the page.

How to Add a Frame or a Border Around an Image and/or a caption underneath using CSS

Information on how to add a frame with a border around an image so it looks like a photograph with either a white or transparent background with an option to use a caption underneath using CSS. This tip also shows how to make picture frames in different widths.

Add Colored Borders Around Divs or Tables with CSS

This tips works on any size block item in CSS, like paragraphs, divs, tables, table cells or web pages.

How to Add a Border to a Web Page with CSS

How to add a border around the edge of a web page, container, box, table or any other item using CSS. This tip also shows how to add varying colors to the border so it looks like it's within a frame.

Format Multiple Tables on one Page in CSS

When you have multiple tables on the same page with different formatting on each one you need a separate CSS rule for each table. This tip shows you how to set up different classes for each table, how to align date in cells either left or right, and apply different colors to the cells.

Using CSS Floats for Columns instead of Tables

How to calculate the width of columns and their margins and center floats on a page with CSS so they don't wrap to the next line.

Decorate your Web Pages with Red Hearts in CSS

How to Add Picture Frames Around Images with CSS

Add a Picture frame around images with CSS without using table cells, with step by step instructions. Add different colors for inner and outer edges of the picture frame. This technique will work on any size image.