LWD logoLori's Web DesignLWD logo

CSS Tips to Format Images and Web Pages

A Cascading Style Sheet (CSS) is a great way to clean up your code and reduce a lot of code bloat because you don't have to repeat font sizes and colors on every little bit of text. When you repeat images several times, like in a list format using buttons, you can load those as a background image and thus eliminate having to include width and height or alt tag on every image. Google recently started using download speed as a ranking factor so it's now even more important to move all formatting to the CSS file.

These CSS tips are written mainly for CSS beginners with step-by-step examples. Some of them are also set up for Responsive design so they will display correctly on all devices.

Click the images or links to see the instrutions

How to Set up 2 Tables Side by Side with Responsive CSS
two tables side by side
This page 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

Design Semi-transparent background over another image

This example will show how to set up a semi-transparent background over another image so parts of the image will show through the background and also how to set up your CSS so this it will float over your image.

How to Set up 2 Backgrounds on a Web Page with CSS.

2 backgrounds
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 CSS3

This tip uses CSS3 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 CSS3.

image with drop shadow
You can add a drop shadow under an image, or text box, with onlu only CSS3 (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 with a Border Around an Image and/or a caption underneath using CSS
image with border
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.

How to Add a Border to a Web Page with CSS
Instructions on 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.

Website Content
Goes Here

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.

format table in css

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.
5 column layout using CSS

Add Colored Borders Around Boxes in CSS and HTML Tables

This CSS tip gives instructions on how to add 3 color borders around boxes or table cells in either CSS or HTML.

Vertically align images with text in CSS
This CSS tip shows how to align images with the text on the page,either above, below or on the same line horizontally.

Here is an image aligned with the middle of text: img

Decorate your Web Pages with Red Hearts in CSS
This tip shows you how to use character entities and color them to produce red hearts and other symbols on a web page:

row of red hearts designed in CSS

How to Add Frames Around Images with CSS

frame an image with CSSAdd any size frame around images with CSS without using table cells. This works on any size image.

Control Mouseovers with CSS on Horizontal and Vertical Menus
Several examples of controlling font colors and indents on mouseover with CSS (and without Javascript) can be seen on the menu samples page.


Also see HTML Tips

~ ~ Other CSS Resources ~ ~

This site provides several articles written for beginners on how to write CSS and also CSS3: CSS3 - Guide, Examples and Resources

Here is a great CSS memory game.

Here is a neat video tutorial on How to Format your CSS file

Copyright © 2011 - updated 1-11-18
Lori's Web Design
All Rights Reserved

Twitter     Google+     Facebook     linked in