CSS Part 5: Advanced Topics

**Lop** · 02-07-2009, 12:43 PM

CSS Tutorials
Chapter 5: CSS Advanced Topics

In this chapter, we are going to discuss the following topics. Don't get scared by the title "Advanced Topics". These topics are as simple as they sound. Only thing is you would use them only on certain specialized requirements

Cursor
Position
Layer
Display

1. Cursor
Gotten tired of the default cursor set that comes with HTML. Here comes the cursors in CSS which lets you customize how the mouse cursor would appear when you point to a particular element. Standard CSS supports upto 17 different properties for cursors. Cursors can be applied to an element using the attribute "cursor". Let us see through an example, 5 different cursors on hyperlinks

HTML Code:

<html>
<head>
<style>
    .curCrossHair {cursor: crosshair;}
    .curRightArrow {cursor: e-resize;}
    .curHelp {cursor: help;}
    .curMove {cursor: move;}
    .curHourGlass {cursor: wait;}
</style>
</head>
<body>
    <a href="#" class="curCrossHair">Cross Hair</a><br />
    <a href="#" class="curRightArrow">Right Arrow</a><br />
    <a href="#" class="curHelp">Help !</a><br />
    <a href="#" class="curMove">Move me!</a><br />
    <a href="#" class="curHourGlass">Wait</a><br />
</body>
</html>

The output looks like this:

We have thus defined five different cursors. In rich internet applications, using different cursors can enhance user experience. Visit script.aculo.us - web 2.0 javascript

It uses the .curMove style we defined in this chapter. See how user experience is improved because of it.

2. Position
Using the position attribute, you can define how the elements in your HTML page are positioned. The values for the position attribute are

2.1 Static positioning
2.2 Relative positioning
2.3 Fixed positioning
2.4 Absolute positioning

2.1 Static positioning
Static positioning is the default positioning in HTML pages. So declaring a position:static is redundant. It positions the elements as per the normal flow of HTML

2.2 Relative positioning
If you have several different elements that occupy the same place in HTML page, and if you want certain elements to overlap other elements, then relative positioning is the best choice for you. After specifying positioning to be relative, we can then offset the elements using properties like right, top etc. relative positioning is initiated this way position: relative;

2.3 Absolute Positioning
When we use absolute positioning, the element is positioned as a stack to nearest container element. If it does not belong to any container element, it will be positioned to top left of the browser window. It can be specified like... position: absolute

2.4 Fixed Positioning
In fixed positioning, the container of the element is always the browser window. Also, if you desire an element that shouldn't scroll down, for instance, a timer in an online examination page, used fixed positioning. Because elements having fixed positioning do not scroll along with the window. position: fixed;

3. Layers
Now that we have learnt positioning, you may have noticed that in some cases, elements overlap over one another. using the Layers concept in CSS, you can control which element appears on top of the other. In HTML, there is a concept of priority of elements. The element that comes later in the page will contain higher priority compared to the element that comes previously by default. In CSS, this priority can be altered using an attribute called z-index.

The larger the value of z-index, higher will be the priority of that element.

Let us see a sample code that combines the concepts of both positioning and layers

HTML Code:

<html>
<head>

<style>
    h1
    {
        position: relative;
        top: 30px;
        left: 50px;
        z-index=2;
    }
    
    h2
    {
        position: relative;
        z-index=1;
        background-color=black;
        color=white;
    }

</style>
</head>
<body>

<H1>Now that we have learnt positioning, you may have noticed that in some cases, elements overlap over one another. 
Using the Layers concept in CSS, you can control which element appears on top of the other. 
In HTML, there is a concept of priority of elements. 
The element that comes later in the page will contain higher priority compared to the element that comes previously by default. 
In CSS, this priority can be altered using an attribute called z-index. 
</H1>
<h2>
The larger the value of z-index, higher will be the priority of that element.
</h2>
</body>
</html>

4. Display
Have you ever seen menu's in HTML pages, that appear and disappear on the basis of user interaction. Well these menu's are controlled through Javascript. Javascript can be utilized to control the display i.e., to hide them and show them during runtime. This can be set in CSS using the display property. We are going to talk about two display properties, display: none and display: block;

display:none: This attribute in simple hides the element from user's view. Later on in code, on some user event, a javascript code can be written which then unhides the display.

display: block: Ever felt frustrated by typing
continuously to break the line. Stop worrying this attribute will automatically break the line.

Lets see an example for the display attribute

HTML Code:

<html>
<head>
<style>
    h2 { display: none; }
    a { display: block; }
</style>
</head>
<body>

<a href='cssAdvancedTopics.html'>CSS Test</a>
<a href='cssAdvancedTopics.html'>CSS Test 1</a>
<a href='cssAdvancedTopics.html'>CSS Test 2</a>

<h2>
I won't be visible until javascript does something to me
</h2>
</body>
</html>