web blazonry web development scripts and tutorials
 
Web blazonry.com
   PHP       Name Generators       Perl       CSS       Javascript       Java       MySql       How Tos       Resources   

CSS Home



CSS Tutorial
  Introduction
  Getting Started
  The Basics
  Margins
  Fonts and Text
  Backgrounds
  Miscellaneous
  Tips and Tricks
  Problems & Compatibility
  Examples
  CSS Reference Guide

Bookmark and Share





CSS Tutorial: Miscelleanous Topics

Two topics that should be covered that did not fall into another category, hence the all inclusive miscelleanous.

Inheritance
A nice thing about style sheets is that types can inherit certain properties by their parent object. Sound confusing, its not. One of the common inheritance features in standard HTML is the UL and LI tag (on some browsers).

When a LI tag is used inside of an UL tag, the list bullet is smaller. The LI tag changes due to its surrondings, specifically inside a UL tag.

To do this in CSS is rather easy. In this example I'll make the LI text smaller when it is inside a UL tag.

example:

   UL LI { text-size: 80% }
That's all there's to it. Now every LI tag used will be 80% smaller when it is inside a UL tag.

Float and Clear
Two properties that go together like chocolate and peanut-butter are float and clear. Float allows an object to float in its space relative to the other objects around it. I used this on the introduction page in the benefits section. You can use float to produce drop caps and other nice effects. Clear is used to stop a float. AN example will help.

The valid values for float are none, left, and right. The valid values for clear are none, left, right and both.

example:

   .first { font-size: 26pt; float: left; }
   .nomore { clear: left; }
click here to see this example. I have used the .nomore class at different points in different paragraphs, to show how to stop the floating object. The last paragraph I did not use a clear.

... there's lots more ... this is meant to get you started on your way to being comfortable and learning more ...

Apply your style to style sheets. Experiment and see what you can do with this new tool. Read up, look at examples, be creative, and original.

There are numerous properties I did not mention, most are as straight forward as the rest of the properties. Some of these are padding, display, white-space, list style (you can make your LI's images), and borders. For a complete listing of properties see the quick reference guide or the W3C's recommendation paper.

Next >>

 


 

Newest Pages
Test Google Ads Ver. 2
Free Linux Admin Books
Free Linux Books for Programmers
Free Books for Linux on the Desktop
Free PHP Books
Free JavaScript Books
Free Java Books - Advanced
Free Java Books - Basic
Free Perl Books
Free Python Books
Quote of the Day (PHP)
Debugging Part 2
How to Test Google Ads
Most Popular Pages
U.S. Name Generator
Baby Name Generator
Wu Name Generator
Popup Windows (JavaScript)
Intro to Web Databases (PHP, MySQL)
Upload and Resize an Image (PHP)
How To Install Apache + PHP + MySQL

Least Popular Pages
iNews Aplet (Java)
Java Resources)
Site Monitor (Perl)
Load Order of Images(Javascript)
 
 

  privacy policy     ||     © 1997-2010. astonishinc.com   All Rights Reserved.