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.
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 {}
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>
