Wednesday 23rd of July 2014 03:45:08 PM
you only have to edit one file in order to change the text colors of every last one of your pages. Affecting borders

The value of color can also affect the borders around an element. Let's assume that you've declared these styles, which have the result shown in Figure 6-6:

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.

formatting is handled. The most important is that replaced elements are assumed to have an intrinsic height and width; for example, an image will be a certain number of pixels high and wide. Given this, if either height or width are set to auto for a replaced element, then the value will always evaluate to the intrinsic height or width of the element. Thus, if an image is 150 pixels wide, and its width property is set to the value auto, then its width will evaluate to 150px , as shown in Figure 8-26: negative top margin and no margins on its other sides -- this willkeep the example simple. In addition, we'll make the paragraphbold, so that it's easier to distinguish from its neighbors:

<P STYLE="margin: -1.75em 0 0 0; font-weight: bold;">This paragraph has a negative top margin...</P>

We can see in Figure 7-18 that the paragraph hasbeen pulled up so far that it's practically overlapping the endof the previous paragraph. This is the expected effect. an image has a border, and the BODY is its parent, given this rule:

BODY {color: purple;}

then, by default, the border around the image will be purple. Of course, to get that border to appear, you have to do a little work first.

7.4.1. Borders with Style

they're in keeping with the overall page design. Of course, ifyou don't want your BIG text to generate toomuch extra leading, just use these rules instead:

P {font-size: 12px; line-height: 1.5;}SMALL {font-size: 66%;}BIG {font-size: 200%; line-height: 1em;}


Anything this useful has to have a drawback, right? As it happens,Internet Explorer 3.x will set bottom to be a specific value, with the result shown in Figure 9-6:

top: 0; bottom: 10%; left: auto; right: 0; width: 33%; height: auto;
Figure 9-6

Figure 9-6. Defining a height by using an explicit bottom

In this case, the height of the element must be 90% the height of the containing block, since 100% - - 10% = 90%. This assumes, of course, that there have been no margins, borders, or padding set for the positioned element; otherwise, the effective height would be