Primary Menu

Using the CSS positioning properties is another one of the more basic lessons that you should learn about CSS. Here are some of the uses for this property:

For determining the position of an element within a page.

It can be used for placing an element behind another one.

It can be used for defining what would happen when the element is too large for the page.

These are the most common uses for positioning properties. There are four properties that can be used in positioning. These are the top, bottom, left and right properties. Before these four properties are set, the position property must be defined initially. The method of positioning would also determine a great deal.

You also have to learn about the different positioning methods of which there are four in use today. These positioning methods are the static, fixed, relative and absolute positioning.

The Static Positioning

In static positioning an element is placed on the page in its natural flow. This is the default positioning used in most pages. Elements that are placed in a static position are not affected by the top, bottom, left and right properties.

Fixed Positioning

When you use fixed positioning, the elements will be placed in relation to the window of the browser. This means that it is not going to move if you scroll down the window. Since the elements will move with browser window, an element using fixed positioning will overlap other elements. Here are some examples of codes used for fixed positioning:

p.pos_fixed
{
position:fixed;
top:40px;
right:5px;
}

Relative Positioning

In this type of positioning, the element is placed relatively to its normal location or position on the page. These elements can be moved around. But even when they are moved around the spaces reserved for them remain the same. Here is an example code for a relatively positioned element:

h2.pos_top
{
position:relative;
top:-50px;
}

Absolute Positioning

An element using absolute positioning is placed relatively to an element that uses either fixed or relative positioning. Absolutely positioned elements can overlap others that are placed within a page. Here is an example code that can be used:

h2
{
position:absolute;
left:120px;
top:170px;
}

The Question of Overlapping Elements

When elements are not within the normal flow then it is possible for them to overlap other elements. When this is the case the z-index property is used. This property is used for determining which elements should actually be placed in front and which ones should be placed behind. Here is a sample code for z-index property. As you might notice it can have either a positive or a negative stack order:

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

The stack order is used to determine which element would come first. The element with a stack order that is greater is supposed to come out first than one that has a lower stack order. Now if you do not put in a z-index property for elements that are overlapping, then the element that was placed last in the HTML would be the one shown on top.

The CSS classification properties are used for defining how an element is going to be displayed on a page. It is also used for defining how an element will show when it is within another separate element. Classification properties are also used for defining how an element is going to be positioned and for controlling the degree of visibility.

CSS Classification Properties

Here are the different CSS classification properties in use today:

Clear

Cursor

Display

Float

Position

Visibility

By knowing about all these properties, you would be able to manipulate the way that elements would appear on a page and where they would be placed. This is why classification properties are some of the most basic and at the same time some of the most important properties that you should learn in CSS.

CSS Clear Property

When images and texts appear on another element they are known as floating elements. In order to define how they would appear on that other element CSS clear property is used. This is the property that sets the area on the sides of an element where the floating elements are not allowed to appear. By default, floating elements are allowed on either side so if you want to clear the left or the right you would have to define that. Here is an example:

h2
{
clear: right
}
address
{
clear: both
}

CSS Cursor Property

The CSS cursor property is used for defining the kind of cursor that would show up when focusing on a particular element. You can always choose the default an arrow or you can use one of the other specified cursors. You can use a crosshair for example or a pointer. Other types of cursors that are commonly in use are text, wait and help which is often defined by a question mark. Here is an example of a code that sets the cursor property:

CSS Display Property

This CSS property is used for setting how an element is supposed to be displayed. There are many possible values that can be used for display property. Block, inline and list-item are just some of the values that can be used. In using the block value for example, the element will show as a block level. Here is an example of CSS display property using the block value:

span {display:block;}

CSS Float Property

By using the CSS float property a CSS element can be made to move around. This would allow other elements to wrap around that element. Keep in mind that elements cannot be floated vertically. You can only use this property to move the element on a horizontal manner. When you place elements that are floating one after the other, then they will move around the space that is provided. Here is an example of a code for CSS float property that you might be able to use:

CSS dimension properties is what you use in order to control and change the width and the height of the elements that are on the page that you are working on. You need to tweak this carefully if you want to achieve the right proportions for the different elements on a page.

The Dimension Properties

The following are the CSS width & height properties:

Height property is utilized for defining the height of the element.

Width property is utilized for setting the width of the element.

Line-height property is useful when it comes to defining the height of a line of text.

Max-height property is used in setting the maximum height for a certain element.

Min-height is used in defining the lowest possible height for an element.

Max-width is the property used for defining the largest width that an element can take up.

Min-width is used for defining the lowest width of an element.

The Height and Width Properties

There are three ways that you can set the height and width properties. You can use an actual height measurement, percentage or you can use the word “auto” which means that it will revert to the default value that has been set for the property. Here is an example of this using a height measurement, in this case 200 pixels:

width:200px; height:100px;border:1px solid red;

The Line Height Property

This property is used for defining the space between the lines of text. This is the same with the height and width properties where the property can be set by the actual height, percent value or the default. Here is an example of a code for line height property:

width:200px; height:100px;border:1px solid red;

padding:5px; margin:10px;line-height:30px;

The Maximum and Minimum Height Property

As mentioned earlier the max and min height property are used for setting the highest and the lowest points that can be used for the elements. It can be set using a value or percentage. Here is a good example of a code that sets the maximum height or an element:

The Maximum and Minimum Height Property

These two properties are set for the determining the widest and the narrowest point for the elements on the web page. Like with the other properties that we have mentioned these properties can be set using different means. You can use a value, an actual height or width in pixels which would be indicated by the code, px. That means 100 pixels should be coded as 100px.

Here is an example of a code that sets that min-height property at 200 pixels:

The Problem with Different Browsers

There is a problem with CSS though that you have to remember. This problem affects the different properties such as those that set the width and height of the elements. The problem is that different browsers might show the properties differently. In some cases there are browsers that would not support certain properties at all. Netscape 7 or IE 6 for example might not support the height and width properties of CSS.

CSS lists are used for creating lists on pages. There are many useful properties that are available for this. With HTML there are only two types of lists, the ordered and the unordered. In the unordered list, the items are marked by bullets, while in the ordered; the items are marked by numbers or letters. By using CSS list properties, the manner by which lists can be created can be expanded even further.

Problem with Different Browsers

Before you learn how to use CSS list properties, you need to know that there are certain problems connected with it. It has something to do with the fact that different browsers tend to show lists using CSS list properties differently from each other. This means it might not end up looking the way that you want it to. So before you start creating your page, you need to consider the way that you want the list to appear on the different browser platforms. The good news is that if the browser does not support the property that you have picked, then it would just show it as a normal list and you wouldn’t be losing that much.

The CSS List Properties

There are four CSS list properties that you can use. These are the following:

The list-style image

The list-style type

The list-style position

The list-style

In the list-style type you can determine the kind of bullet points that would mark off the elements on a list. In list-style image you can use an image or a custom graphic design as bullets for the list that you would be making. The list-style position is used when items in the list are longer than one line. It can define the way that the item would look like on the page. For example, it can be that second line can be made to align with the first or with the bullet.

Item Markers for Lists

There are different types of markers that can be used with the list-style type:

In the examples, the ul would refer to an unordered list while ol would refer to an ordered list.

Using an Image as a Marker

There are times when you might want to try and be more creative with the page that you are making. You might be bored with using shapes, letters and numbers as markers for the lists. You can use an image as an item marker by using the list-style image property. This is an example code for a list that uses an image as a marker:

ul
{
list-style-image: url('sqblue.gif');
}

Shorthand for CSS List Properties

It is also possible to use a shortcut for the CSS List properties. By using shorthand you might be able to define all the properties that you need for the list in one single property.

Again, you should keep in mind that CSS list might display differently on different browsers so you need to be careful about that.

CSS borders are used for determining the kind of border to be used on a page that you are working on. It can be used for setting the color and even of the style to be used on the page.

The Border Style Properties

Before the working on the border properties you need to set the border style first. Here are some of the more important border style values that you should know about:

none- This means that there is going to be no border.

dashed- This means that a dashed border is going to be utilized.

solid- This is to define that a solid border is going to be used.

groove- This means that a 3D groove effect is going to be used on the border. The appearance would depend on the color to be used.

ridged- This means a 3D ridged effect is going to be used on the border. Like the groove effect, it would depend on the color effect.

inset- This is for a 3D inset effect.

outset- This is for a 3D outset effect on the border.

CSS Border Width

The width of the border is determined by the CSS border-width property. It can be set by naming the number of pixels to be taken up by the border or by just picking one of the three values that have been predefined. These pre-defined values are thick, medium and thin.

Here is an example of a code for borders:

{
border-style: groove;
border-width:6px;
}

CSS Border Color

When it comes to determining the color to be used for the border, the border- color property is the one to be set. It can be set by using the simple name of the color such as “blue” for example, through an RGB value like "rgb(255,0,0)", or though a hex value like this, "#ff0000". Here is an example of a code for border color property using a name of a color:

{
border-style:solid;
border-color:green;
}

CSS Border Individual Sides

One property of CSS when it comes to borders is that it can be used for defining different borders on different sides. Here is an example on how that can be done:

Simplifying Border Properties

It is easy to see why border properties can be a little confusing initially. There are so many properties that can be set and have to be changed. As you become more familiar with it however, you will find out that there are ways that you can simplify it. This simplified version is known as border- shorthand property. The border- shorthand property is a shortcut for three crucial properties of the border. These are the width, the style and the color. Here is an example code for that:

border:5px solid red;

These are just some of the basic things that you should know about the border properties in CSS. Obviously from what you have seen here, there are so many things that you can still learn about this topic.

CSS or Cascading Style Sheet is a computer language that is used in describing the way that a document would appear as a web page. It is mainly concerned with the appearance and the format of the document. Right now, the most common use for CSS is for creating the style and appearance of Web pages.

CSS Backgrounds

CSS backgrounds are utilized for defining the way that the backgrounds of some elements would look. There are several things that backgrounds can determine. Here are some of the properties for which CSS can be used:

Background color

Image for the background.

Background repetition.

Background attachments.

Background location and position.

CSS Code Examples

We have included here a few examples of a few CSS codes that are used for determining the factors that we have just enumerated.

CSS Property Background Color

Background color is used for specifying the color of the background that is going to be used for a portion or a document or a page. Background color can be determined by different values. It can be determined by a HEX value – such as "#ff0000". There are two other values that can be used for determining background color and these are RGB value or simply through color name. An example of RGB value determining background color would be "rgb(255,0,0)".

CSS Property Background Image

In determining the actual image of the background the ‚background-image’ property is going to be used. The way that CSS is set, the image is going to be duplicated so that it would cover the whole element. That is the default setting, but there can be changes to it as well.

In setting up the background image for the page that you are working on, it can be set up like this:

body {background-image:url('book.gif');}

CSS Property Background Image

It has been mentioned earlier that CSS actually repeats the image to cover the whole web page. It will do so both vertically and horizontally. There are cases though when the image to be used for the background would not look right when repeated in a certain way. There are images which would look right when repeated in a vertical manner but not when that is done horizontally. There are images for which the opposite is true. In those cases the code should specify as to the manner by which the image ought to be repeated.

In this code the image is going to be repeated both horizontally and vertically: