To add a shadow to a box using CSS 2.1

Minal — Tue, 16 Feb 2010 05:47:00 +0000

In my previous article; ‘To add a shadow to a box using CSS 3 using the box-shadow property’, we explored the box-shadow property in CSS 3, available in browsers like Safari 3+ and Firefox 3.5+. But plenty of users use Internet Explorer, Chrome, Navigator and such other browsers. How can we have a shadow effect in these browsers? One way is through use of images. I have found out a way to get a shadow effect for box like this:

Though it is not similar to what we would get with the box-shadow property, but we can do with it. Here’s the code:

Box Shadow Example

The output of the above code would be like this:

NOTE: The CSS in the above example is internal and not external. However it is advisable to you, to create an external style sheet and add all the styles to it. Then link the style sheet to your webpage.

Classification of elements in CSS

Minal — Mon, 29 Jun 2009 09:17:30 +0000

A document is structured by it elements. The HTML elements that we commonly know are p, div, table, headings, span and many more. In CSS (2.1) each element has its own box that contains the element’s content. Hence these elements are broadly classified as:

Replaced and Non-replaced elements
Block-level and Inline elements

This classification is made on the basis of their nature of presentation.

1. Replaced elements:

Replaced elements are those where the content of the element is replaced with some content external to that document. For example, the ‘img’ element has no content of its own. It takes the path to the file that needs to be displayed in the box created by the element.

2. Non-replaced elements:

All other elements are non-replaced elements. For instance, the ‘p’ (paragraph) element;

Some text

Other non-replaced elements are div, span, headings, lists, tables, etc.

3. Block-level elements:

As the name suggests create a box for their content. It creates a space of its own and adds breaks before and after its box. Examples of Block level elements are ‘p’ and ‘div’.

Lists are also block-level elements. But unlike other block elements, lists have their own set of presentation properties in addition to those inherited from block-level elements. These properties include indentation and bullets (for unordered lists) and numbers (for ordered lists).

4. Inline-level elements:

Inline elements spawn an element box within the line of text and do not break the flow of the line. In other words they do not break from rest of the display. The most used inline element is ‘span’. Other examples are ‘a’, ‘strong’.

Saffron Stroke - Your Web Design Resource » CSS 2.1

To add a shadow to a box using CSS 2.1

Classification of elements in CSS