Rainbow.Arch
www.rainbow.arch.scriptmania.com
CSS Guide Links
• What are CSS ?
  • How to insert CSS ?
  • CSS - Text Rollovers
• Cursor Control
  • Cursor Types
  • Change Cursors
• Custom Cursors
  • Desktop Installation
• CSS - Classes
  • CSS - Border Styles
• CSS - Scrollbars
  • Color Scrollbars
  • 1 Color Scrollbars
  • Color-Multi Scrollbars
Site Links
• Home
• Web Tools
• JavaScripts
• CSS Guide
• Site Map
Bookmark Link

CSS Classes

CSS Classes

Using classes with your CSS can make customizing your pages ten times easier, because you can give different occurances of the same element different styles.
Say you wanted every cell of a table to have a different color and font, like this:

pinkgreen
yellowblue

Instead of defining everything with HTML, we use CSS classes. Here is the code:

<table border="1"><tr>
<td class="pink">pink</td>
<td class="green">green</td>
</tr><tr>
<td class="yellow">yellow</td>
<td class="blue">blue</td>
</tr></table>

Then, in your header, you'd define what happens with each different class, like so:

<style type="text/css"><!--
.pink {FONT-FAMILY: Times New Roman,Times; BACKGROUND: #FFCCFF}
.green {FONT-FAMILY: Courier New,Courier; BACKGROUND: #33FFCC}
.blue {FONT-FAMILY: Verdana; BACKGROUND: #00CCFF}
.yellow {FONT-FAMILY: Arial,Helvetica; BACKGROUND: #FFFF66}
--></style>

Now everything you add class="pink" to will have a pink background color and Times New Roman font.

This can also be useful if you want different links to look different ways. For example, links in the menu to look one way, and links in the body/text to be different. In the style sheet of your page you'd usually have this:

a:active {color:pink}
a:visited {color:pink}
a:link {color:pink}
a:hover {color:blue}

If you had a few links you wanted to be a bit different, you'd add this:

a.menu:active {color:blue}
a.menu:visited {color:blue}
a.menu:link {color:blue}
a.menu:hover {color:pink}

Then add class="menu" to the links you'd like different, like this:

<a href="page.html" class="menu">link</a>

CSS Border style values

There are many ways to make borders look differently with CSS, altough the use of border-style most commonly seem to be limited to border-style: solid. It can often be beneficial to use the capabilities within CSS instead of creating a graphic, gif, jpg or png.

Imagine being able to change the border or frame of all illustrations on your site with some keystrokes. Going from a 1px solid black line to a 4px dotted or 3d looking frame can give your images a brand new feel and look.

CSS Border Styles

These examples are the CSS border-styles given by the CSS2 recommendation and should work in all modern browsers. The exact effect the style is supposed to give is included in the example.

<div style="border-style: solid; ">
The border is a single line segment.
<div style="border-style: dashed; ">
The border is a series of short line segments.
<div style="border-style: dotted; ">
The border is a series of dots.
<div style="border-style: double; ">
The border is two solid lines.
<div style="border-style: groove; ">
The border looks as though it were carved into the canvas.
<div style="border-style: hidden; ">
Same as 'none',
except in terms of border conflict resolution for table elements
<div style="border-style: inset; ">
The border makes the entire box look as though it were embedded in the canvas.
<div style="border-style: none; ">
No border. This value forces the value of 'border-width' to be '0'.
<div style="border-style: outset; ">
The opposite of 'inset': the border makes the entire box look as though it were coming out of the canvas.
<div style="border-style: ridge; ">
The opposite of 'groove': the border looks as though it were coming out of the canvas.

The future CSS3 border styles

CSS3 is still a working draft, but there are 3 additions in border styles that should be noted. Your browser probably will not support these yet, so read the comment on each for a description.

<div style="border-style: dot-dash;">
Alternating dots and dashes.
<div style="border-style: dot-dot-dash;">
Two dots and a dash.
<div style="border-style: wave;">
A wavy line.

 

What are CSS ? | Cursor Control | Custom Cursors | CSS - Classes | CSS-Scrollbars
ScriptMania.Com
Few Facts

Browsers that support CSS
and where to get them?

Both Netscape and Microsoft have browsers on the market that support CSS. Opera currently has a CSS compliant browser. The specific versions to look for are as follows.


They're safe to use.
Site Info

544