CSS

Introduction

Basic

Table & Form

Box

Floats

Page Layout

Grouping

Image Gallery

Portfolio Layout

Z-index

Drop Down Menu

Vertical Menu

Rounded Corners

Image Gallery

Lets make a small and simple image gallery layout web page so lets get started type the following HTML in

<div id="wrapper">
<h1>My Gallery</h1>
</div>

and add the following CSS

body
{
background-color: #2e2e2e;
}
#wrapper
{
background-color: #535353;
width: 510px;
height: 360px;
margin-left: auto;
margin-right: auto;
border: 1px solid #262626;
padding: 20px;
}
h1
{
margin: 0px;
padding: 0px;
font-family: arial;
font-size: 18pt;
color: #c1c1c1;
}

you should have something like this

So lets now add some images so type the following HTML inside wrapper tag under the h1 tag

now copy this 7 more times and change the number of each plant in the src and alt attributes and download the bulk plants images here and then add the following CSS code

.imageBox
{
background-color: black;
width: 100px;
height: 100px;
float: left;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
border: 3px solid #868686;
}

This works by setting margins, borders, dimensions etc on our imageBox class and assigning the class to all the images.