Sunday 25th of January 2015 11:11:26 AM

CSS Tutorials

CSS Tutorials

Welcome to the CSS Tutorials. In this section we cover Cascading Style Sheets, the powerful supplement to HTML that allows you complete control over the look of your websites. We'll show you how to create Cascading Style Sheets, and some of the cool tricks you can achieve with them.

For Beginners...

Introduction to CSS
This tutorial covers the basics: what are style sheets? How do I make a style sheet? It also shows some of the cool things you can do with style sheets.

CSS Units
A description of all the units that can be used with CSS, including lengths, percentages, colours and URL's.

For Intermediate Users...

Controlling Background Images and Colours
Learn how to use CSS properties to add background images and colour to your Web pages. Lots of neat tricks and examples are included!

Controlling Fonts with CSS
In this tutorial we take a look at how to control the fonts used in your page body text, using the various font properties that can be controlled with style sheets.

using positioning, where it is very easy to cause elements tooverwrite one another.

3. The right outer edge of a left-floating element may notbe to the right of the left outer edge of any right-floating elementto its right. The left outer edge of a right-floating element may notbe to the left of the right outer edge of any left-floating elementto its left.

This rule also prevents floated elements from

Controlling Text Appearance with CSS
This tutorial shows you how to control the layout of your text using the text properties available in CSS, such as line spacing and text alignment.

Making Lists Look Nicer with CSS
You can really go to town with HTML lists when you add a sprinkle of CSS! This tutorial shows you how to make your lists stand out from the crowd.

For Advanced Users...

CSS Positioning
This tutorial teaches you how to use CSS to position images, text, and other elements on your Web pages. Essential reading for anyone who wants to start using CSS for layout.

marker, such as a small dotor a number. This marker isn't actually part of thelist-item's content area, so you get effects like thoseillustrated in Figure 8-25.

Figure 8-25

Figure 8-25. The content of list items

In CSS1, very little is said about the placement and effects of thismarker with regard to the layout of a document.CSS2 introduces properties specificallydesigned to address this issue, such as

XML is totally extensible

By not predefining any tags in the XML Recommendation, the W3C allowed developers full control over customizing their data as they see fit. This makes XML very attractive to encoding data that already exists in legacy databases (by using database metadata, and other schema information). This extensibility of XML makes it such a great fit when trying to get different systems to work with each other.

XML supports shareable structure (using DTDs)

Since the structure of the XML document can be specified in DTDs they provide a simple way to make it easier to exchange XML documents that conform to a DTD. For example, if two software systems need to exchange information, then if both of the systems conform to one DTD, the two systems can process information from each other. DTDs are not as powerful as some kind of schema architecture for XML, they don't support typing, subclassing, or instantiation mechanisms that a schema architecture must have.

P {font-style: normal;}EM, I {font-style: italic;}

As we can see in Figure 5-25, these styles wouldmake paragraphs use an upright font, as usual, and cause theEM and I elements to use anitalic font -- again, as usual.

Figure 5-25

Figure 5-25. Ordinary document behavior through CSS

On the other hand, you might decide that there should be a subtle

Another solution is to set the styles such that lines are no tallerthan absolutely necessary to hold their content. This is where youmight use a line-height of1.0. This value will multiply itself by everyfont-size to get the same value as thefont-size of every element. Thus, for everyelement, the inline box will be the same as the contentarea.