Friday 21st of November 2008 06:05:27 PM
assume the following case:

<P STYLE="font-size: 12px; line-height: 12px;">This is text, <EM>some of which is emphasized</EM>, plus other text<BR>which is <B STYLE="font-size: 24px;">boldfaced</B> and which is<BR>larger than the surrounding text.</P>

What we have here is a situation where some of the text has afont-size of 12px , while othertext has a size of 24px . However, all of the text

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.

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.




In order to get from this simplified state to something more familiar, all we have to do is determine how wide the element should be, and then break up the line so that the resulting pieces will fit into the width of the element. Thus we arrive at the state shown in Figure 8-46.

Figure 8-46

Figure 8-46. A multiple-line inline element

Basically, nothing's changed. All we did was take the single line and break it into pieces, and then stack those pieces on top of

  • If the ancestor is inline-level, the containing block is set to the content edge of the ancestor. In left-to-right languages, the top and left of the containing block are the top and left content edges of the first box in the ancestor, and the bottom and right edges are the bottom and right content edges of the last box. In right-to-left languages, the right edge of the containing block corresponds to the right content edge of the first box, and the left is taken from the form element, for example, has "focus" when it iscurrently ready to accept input. Therefore, the background ofINPUT elements could be set to yellow in order tohighlight the currently active input:

    INPUT:focus {background: yellow;}

    This style would only be applied to an element as long as it was infocus. As soon as the user switched from one input to another, thestyles would be removed from the former and applied to the latter.This is a welcome capability, as it reduces the need for using

    If you resize the  browser window the image jumps around as the lines re-wrap.  Here's an in-line greyscale image with default settings and unpredictable placement on the page.  If you resize the browser window the image jumps around as the lines re-wrap.  In this case, the image is in the same directory as this HTML file, but you could reference an image in another directory by its relative or absolute path.  You can even specify the URL for an image

    There is one other value for float besides left and right. float: none is used to prevent an element from floating at all. This might seem a little silly, since the easiest way to keep an element from floating is to simply avoid declaring a float, right? Well, first of all, the default value of float is none. In other words, the value has to exist in order for normal, nonfloating behavior to be possible; without it, all elements would float in one way or another.