CSS Definitions and Examples
November 6th, 2004 | 
Author: 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 >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-FamilyThe 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 >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>
Posted in 
Tags: 
