CSS Tutorial – Stacking Text with CSS

CSS Tutorial – Stacking Text with CSS

In this tutorial, we will be learning how to stack text with the help of the powerful CSS tag, Z-Index.

Step 1 – The XHTML Coding

Create a new XHTML document in your favorite editing program. Once that is finished, copy the code below onto the blank document.

As you can see, the coding is very simple, but don’t let that take you away. This technique is an excellent way to add a CSS touch to your site banner or navigation. Just don’t overdo it and make everything have it 🙂 Anyway, breaking the XHTML down, all we have are 2 div tags with separate identities. One has the id of “text-top” while the other has the id of “text-bottom”. You can probably guess which text will be on top and which text will be on the bottom.

Step 2 – Applying CSS

Now, we’re going to add the CSS code above the XHTML code. Copy and paste the code directly above the current XHTML code.

Alright, once you’ve finished pasting the code, your document should be complete. Save it, and then view it to find that the text is now colored, and stacked. Let’s break down the CSS that helped achieve this.

And that pretty much sums up how this works. Again, this is perfect for any CSS-based banner or navigation you are planning to make. The final result is located in the link below.