free blogs
Blogdrive
free blogs



CSS Definitions and Examples


Class
You define a class by giving it a name
with a fullstop (.) just before it:
.tables
.sidetitle
.title
.tables
.borders
and so on..

Once you have defined a class, you can reference it throughout your webpage, as shown below.

This css style set is placed within your HEAD tags:
<style type='text/css'>
.leftside {
color: #336699;
background-color: #C0C0C0;
font-family: helvetcia
}
.rightside {
color: #336699;
background-color: #708EA0;
font-family: arial
}
.mystuff {
color: #336699;
background-color: #C0C0C0;
font-family: verdana
}
</style>

These css references can be placed within your BODY tags:
<div class="leftside">your text here</div>

<span class="rightside">your text here</span>

<div class="mystuff">your text here</div>

Example:
This is how the "leftside" text will look on a page.

ID
Example:
#maincontent
Although you can use an ID the same way you use a Class, an ID should only be used once per page. For instance, you would use an ID for a main area where it is needed only once and class for areas that will use the class more than once.

ie.

#maincontent{}
#leftside{}
#rightside{}

#maincontent {
color: #52648F;
font: 9pt verdana, arial, helvetica;
font-weight: bold;
padding-right: 5px;
padding-left: 5px;
padding-top: 10px
}
#leftside {
border: #DFDFDF 1px solid;
padding-left: 10px;
padding-right: 10px;
color: #666666;
font-weight: normal;
font: 8pt arial, verdana
}
#rightside {
position:absolute;
top:0;
left:0;
padding-right: 5px;
padding-left: 5px;
padding-top: 5px
}

After applying css ID info to a main area, such as main Font and Padding, you can then add Class styles to more specific areas within an ID area.

Font-Size
CSS can use pt (points) and px (pixals) for font size reference. We tend to favor pt (points) as it displays well on both MAC and PC.

Example:
.txt5 {
font-family: verdana;
font-size: 9pt;
}

The popular size range is between 7pt and 12pt.
Anything beyond 12pt gets pretty ugly.

Example:

Font size 7pt
Font size 8pt
Font size 9pt
Font size 10pt
Font size 11pt
Font size 12pt

Inline example:
<span style="font-size: 9pt">your text here</span>

Another quick way to change font sizes in css:
font-size:xx-small
font-size:x-small
font-size:small
font-size:medium
font-size:large
font-size:x-large
font-size:xx-large

Output:
xx-small
x-small
small
medium
large
x-large
xx-large


Font-Family
The value in the example below is a prioritized list of font family names and/or generic family names. The first value or name is the desired font. Others names are often added, separated by a commas to indicate that they are alternatives:

Example:
body {
font-family: Verdana, Arial, helvetica, sans-serif
}


Inline example:
<span style="font-family: Verdana, Arial, helvetica, sans-serif">your text here</span>

Although just about any font can be inserted in the font list, style sheet designers are encouraged to offer at least one generic font family as a last alternative.

Styled links
Name:
:link
:active
:visited
:hover
Because links are active elements, they change with user action. Links have four states called "psuedo-classes":

1) link: An unvisited link waiting to be clicked.
a:link {}
2) visited: A link that has been "visited", or clicked on before.
a:visited {}
3) active: A link that is in the state of being clicked.
a:active {}
4) hover: A link that is being "hovered" over by the mouse cursor.
a:hover {}

Example:


a:link {
color: #039C0B;
text-decoration: none
}
a:visited {
color: #039C0B;
text-decoration: none
}
a:hover {
border:1 solid;
border-color:#FE6001
}
   Click me

All attributes are Inherited except First-Letter and First-Line.

Filters
Filter Names:
Glow
Blur
Dropshadow
Shadow
Wave
Flipv
Fliph
All filters must have values attached to them..
You can Apply these filters to Images or Text.

Examples:

Filter:glow(color=#F8B745,strength=2)}
adds a glow effect around text/image

Filter: Blur (Add = 1, Direction = 90, Strength = 11)
gives your text/image a blurry effect

Filter: Dropshadow;(color=#c0c0c0,offX=2,offY=2)
gives your text/image a dropshadow effect

Filter: Shadow(Color=#94BAC9, Direction=225) width: 257; height: 10
gives your text/image a shadow effect

Filter: Wave(Add=0, Freq=6, LightStrength=2, Phase=2, Strength=2)
gives your text/image a wave effect
Filter: Flipv height:1
flips your text/image vertically
flips your text/image vertically

Filter: Fliph height:1
flips your text/image horizontally
flips your text/image horizontally

Inline Example:
<span style="Filter:dropshadow(color=c0c0c0,offX=2,offY=2) font-size:9pt;width:290px">gives your text/image a dropshadow effect</span>

Colored Scroll Bars
This is one of the most popular css scripts:
you can also use hexidecimal values in place of default webpage colors.
Example of hex codes for the below color:
#808080 = gray
#000000 = black
#FFFFFF = white
<style type="text/css">
body {
scrollbar-base-color: gray;
scrollbar-face-color: gray;
scrollbar-track-color: gray;
scrollbar-arrow-color: black;
scrollbar-3dlight-color: white;
scrollbar-darkshadow-color: black;
scrollbar-highlight-color: black;
scrollbar-shadow-color: black;
}
</style>


Remove Underline On Links
This will remove the underline on your links, making them look neater and is very popular...
<style type="text/css">
A {
text-decoration:none
}
</style>

Scrollbars In Layers
This script allows scrollbars in layers.

Add this in your layer <div> tag:
style="overflow: auto"

So the layer script reads:
<div id="Layer1" style="position:absolute;
width:200px;
height:115px;
overflow: auto">
</div>

The direction property - Left Side Scrollbar
This will reverse the direction of your text as well as change your scrollbar from right to left.
The direction property can be added to the body:

<style type="text/css">
body {
direction:rtl
}
</style>

ltr - Text direction is left-to-right
rtl - Text direction is right-to-left

Cursors
This style allows you to use your own cursor instead of the default arrow.

<style type="text/css">
body {
cursor:url("mycursor.cur")
}
</style>






Copyright © 2004 - 2005 NeverX All rights reserved.
Tag board Rules     Privacy policy     Terms of Service