CSS can be used to create an image gallery.

Image Gallery

Example code :

Syntax

The syntax of pseudo-elements:

selector:pseudo-element {property: value}

CSS classes can also be used with pseudo-elements:

selector.class:pseudo-element {property: value}

The :first-line Pseudo-element

The "first-line" pseudo-element is used to add special styles to the first line
of the text in a selector:

p:first-line {color:#0000ff;font-variant:small-caps}

<p>Some text that ends up on two or more lines</p>

The output could be something like this:

In the example above the browser displays the first line formatted according
to the "first-line" pseudo element. Where the browser breaks the line
depends on the size of the browser window.

Note: The "first-line" pseudo-element can only be used with block-level
elements.

Note: The following properties apply to the "first-line" pseudo-element: 

• font properties
• color properties 
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

The :first-letter Pseudo-element

The "first-letter" pseudo-element is used to add special style to the first
letter of the text in a selector:

CSS pseudo-classes are used to add special effects to some selectors.

Syntax

The syntax of pseudo-classes:

selector:pseudo-class {property: value}

CSS classes can also be used with pseudo-classes:

selector.class:pseudo-class {property: value}

Anchor Pseudo-classes

A link that is active, visited, unvisited, or when you mouse over a link can
all be displayed in different ways
in a CSS-supporting browser:

a:link {color: #FF0000}     /* unvisited link */
a:visited {color: #00FF00}  /* visited link */
a:hover {color: #FF00FF}   /* mouse over link */
a:active {color: #0000FF}   /* selected link */

Note: a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS
definition in order to be effective!!

Note: Pseudo-class names are not case-sensitive.

Pseudo-classes and CSS Classes

Pseudo-classes can be combined with CSS classes: 

a.red:visited {color: #FF0000}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

If the link in the example above has been visited, it will be displayed in red.

CSS2 - The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of
another
element.

Note: For :first-child to work in IE a <!DOCTYPE> must be declared.

CSS Positioning Properties

The CSS positioning properties allow you to specify the left, right, top, and
bottom position of an element. It also allows you to set the shape of an
element, place an element behind another, and to specify what should happen when an element's content
is too big to fit in a specified area.

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation
the property is defined (CSS1 or CSS2).

CSS Classification Properties

The CSS classification properties allow you to control how to display an element, set where an image will appear in another
element, position an element relative to its normal position, position an element
using an absolute value, and how to control the visibility of an element.

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation
the property is defined (CSS1 or CSS2).

CSS Dimension Properties

The CSS dimension properties allow you to control the height and width of an
element. It also allows you to increase the space between two lines.

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

W3C: The number in the "W3C" column indicates in which CSS recommendation
the property is defined (CSS1 or CSS2).