web blazonry web development scripts and tutorials Get best price on Samsung Galaxy Note 4, Frosted White 32GB (Verizon Wireless)
   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
Baby Name Generator
U.S. Name Generator
Wu Name Generator
Popup Windows (JavaScript)
Upload and Resize an Image (PHP)
How To Install Apache + PHP + MySQL
Intro to Web Databases (PHP, MySQL)

Least Popular Pages
iNews Applet (Java)
Java Resources
Site Monitor (Perl)
PHP Resources
 
 

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