How to Create Styles:



Script unchangables in Blue
Script changables in Red
All of these styles run in IE 5.5+ Most of these styles run in Opera 8+, Firefox 1.5+ & Google Chrome 4 some to varying degrees.

In the <style> ... </style> tags in the header of your page you place this scripting to get these results:

a.greenOnOrange:link {color:#009900; font-weight: bold; text-decoration:none;}
a.greenOnOrange:visited {color:#009900; font-weight: bold; text-decoration:none;}
a.greenOnOrange:active {color:#009900; font-weight: bold; text-decoration:none;}
a.greenOnOrange:hover {color:#ff8000; font-weight: bold; text-decoration:none;}
Orange Green


a.RedOnBlue:link { color:#ffff00; font-weight: bold; font-size:50px; text-decoration:none; }
a.RedOnBlue:visited {color:#ffff00; font-weight: bold; font-size:50px; text-decoration:none; }
a.RedOnBlue:active { color:#ffff00; font-weight: bold; font-size:50px; text-decoration:none; }
a.RedOnBlue:hover { color:#00ffff; font-weight: bold; font-size:50px; text-decoration:none; }
Red on Blue

a.OverUnder:link {color:#800040; font-weight: bold; font-size:30px; text-decoration:none;}
a.OverUnder:visited {color:#800040; font-weight: bold; font-size:30px; text-decoration:none;}
a.OverUnder:active {color:#800040; font-weight: bold; font-size:30px; text-decoration:none;}
a.OverUnder:hover {color:#000080; font-weight: bold; font-size:30px; text-decoration:overline underline;}

Over/Underline

.menuTitleText {font-weight: bold; font-size: 42px; color: #ff0000; font-family: Algerian; text-decoration: underline}

Menu Title Text

If you do not have Algerian font on your machine you will get another font type that is why it is better to select a font set. e.g. verdana, arial, sans serif;

You can experiment with the colours and the rest!

You can attach a style to many tags, you just insert class="styleName" into your existing <a>, <p>, <div>, <span> or <table> tags.

Like this...
     <a class="orangegreen" href="SomePage.html">Orange Green</a>
     
To get this effect…
     Orange Green

CAUTION:

Some earlier editors tend to mix up your code a bit and this can cause the sytle attachments to the links not to work. Make sure you keep the <a href class="WhateverStyleName"> tag and its corresponding </a> tag directly up against the beginning and end of the actual text, as shown in the examples above. Most times, if you allow a <b>,<u> or other tag to intervene between the <a href> and the text, the style colour changes won’t work.

One more thing you can use Hexidecimal Numbers for the colours. Also add things like font-weight: bold; to change your text.Click to see colour chart.

<style>
a.box:link {font-size: 15pt; font-family:arial; color:orange; }
a.box:visited { font-size: 15pt; font-family:arial; color:orange;}
a.box:active { font-size: 15pt; font-family:arial; color:orange; }
a.box:hover { border-width : thin; border-style: dotted; border-color: #808080; background-color:#ffffff; font-size : 15pt; font-family:arial; color:green;}
</style>

Using this
     <a class="box" href="SomePage.html">This</a>
Would give you This Disgn on Hover.

The following examples are based on local and direct implementation of styles. All of the following could be used with an internal or external global stylesheet.

First, we will show the declaration for each style.

These are some of the more common ones:
font-family: verdana, arial, sans serif; (Declare a font.)
font-size: 10px; (To set the font size)
font-style: italic; (To set a style for the font: normal, italic, oblique)
font-weight: bold; (To set the weight of a font: bold, bolder, lighter )
font-variant: small-caps; (Can only be either normal or small-caps)
text-transform: none; (To control font visualization: none (default), capitalize, uppercase or lowercase)
color: #cc0033; (Set font color Hexadecimal, here it's dark red)
color:rgb(255,128,12); (Set font color Red, Green, Blue here it's Dark Orange)
background: #f3f3f3; (A gray background will surround text)
word-spacing: 12px; (Set space between words, called tracking)
letter-spacing: 15px; (Set space between letters, called kerning)
text-indent: 25px; (Indent the text)
line-height: 15px; (Set the space between lines)
text-align: center; (Left, Right, Center, Justify)
For a full List of Stylesheet Commands:Click Here .

To implement this kind of formatting, you can use a style, stylesheet or simply delimit the text in question using a <span> tag, like this:

This is an example of a multi-styled element in raw HTML code.

<span style="font-family: verdana, arial, sans serif; font-size: 14px; font-style: italic; font-weight: bold; text-transform: capitalize; color: #cc0033; background: lime; word-spacing: 12px; letter-spacing: 25px; text-indent: 15px; line-height: 35px;"> ... Some Text ...<br> >>>Next Line<<<</span>

TheResult is:

... Some Text ...
>>>Next Line<<<

Be sure to watch what you are doing if your using line hight tag

e.g. the only change in this code is line-height: 10px.

<span style="font-family: verdana, arial, sans serif; font-size: 14px; font-style: italic; font-weight: bold; text-transform: capitalize; color: #cc0033; background: lime; word-spacing: 12px; letter-spacing: 25px; text-indent: 15px; line-height: 10px;"> ... Some Text ...<br> >>>Next Line<<<</span>

The Result is:

... Some Text ...
>>>Next Line<<<

 Casscading Style Sheets

Casscading Style Sheets (CSS) are written so that you can keep the same style through out a web site. They are saved under the name "YOURCHOICE.css" and are written slightly different then the styles above.

You have to put this link at the top of each HTML page inside the HEADING
<link title="yourTitle" href="Folder/WhatEver.css" type=text/css rel=stylesheet>

To see the how the CSS is written click on HERE to download the Tute.css and open and veiw it in notepad or some other text editer. e.g. UltraEdit or UltraEdit Studio which I used for all my website

If you use forms on your site, you should know that there is a very simple method to change the "default" appearance of your form elements. Using CSS, we can assign attributes to the various form elements on our pages to conform to an overall design. Just about every element can be assigned styles for fonts, background colors, etc.

Click here to see how.

 

 

BlueBar.gif


     Visitor N°   
       
   
Free Text Counter added 09/02/2014.     

Top