Thursday 27th of November 2014 12:58:48 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.

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.

Border colors, and borders in general, are all discussed in muchgreater detail in the Chapter 7, "Boxes and Borders". Inheriting color

By this time, you may have guessed thatcolor is inherited, and you're right.This makes good sense, since if you declare P without increasing the height. This could possibly mean adding ascrollbar to the element, as shown in Figure 8-4.

Figure 8-4

Figure 8-4. One way to handle a short height on a tall element

In practice, most browsers will not do this. They will instead simplyincrease the height of the element, as though the value ofheight had been set to auto.This is permitted under CSS1, which states that browsers can ignoreany value of height other thanauto if an element is not a replaced element such
where n=3 references the client browser's default fontsize, typically 12-point, so that the allowable  n values1 through 7 typically reference 8, 10, 12, 14, 18, 24 and 36 points respectively;"name" references a font name (Arial, Times New Roman or whatever);and "color" is an RGB hexadecimal triple or one of the 16 namedcolors. 

Then you can change font attributes for special pieces of text in-linewith FONT tags: 
<FONT SIZE="n" FACE="name" COLOR="color">... </FONT> the situation. Let's consider an image that is floated to theleft and has left and top margins of -15px . Thisimage is placed inside a DIV that has no padding,borders, or margins. The result will be as shown in
Figure 7-70.

Figure 7-70

Figure 7-70. A floating image with negative top and left margins

The math in this situation works out something like this: assume thetop inner edge of the DIV is at the pixel position100. The browser, in order to figure out where the top inner edge ofthe floated element should be will do this: 100px

7.7.3. List Item Positions

There is one other thing you can do toinfluence the appearance of list items under CSS1, and that'schange the position of the bullet itself, in relation to the contentof the list item. This is accomplished withlist-style-position.

linked pages will download quicker than one huge page requiring lots ofanchor tags!Here's a link to the top of this page.  I stucka hidden anchor tag there: <A NAME="top"> </A>  Use anchorsto improve navigability, but remember that multiple linked pages will downloadquicker than one huge page with lots of anchor tags! <P>Note the use of keywords to make the 
browser display special non-ASCII characters literally, e.g.: X