Applying CSS

In-line

In-line styles are plonked straight into the HTML tags using the style attribute.

They look something like this:

Save the HTML file. This now links to the CSS file, which is empty at the moment, so won’t change a thing. As you work your way through the CSS Beginner Tutorial, you will be able to add to and change the CSS file and see the results by simply refreshing the browser window that has the HTML file in it, as we did before.

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.

Stacking Text
Stacking Text

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.