| ASP | DHTML | HTML | Javascript | Hourglass Web
Design  |
Style Sheets
A Style Sheet is used to create a general formatting file for several others to draw upon.
Coding is either <HEAD><STYLE TYPE=”text/css”>< ! -- nec. info -- ></STYLE></HEAD>
Coding can also be in file_name.css file with no <HEAD> or <STYLE> code, just formatting.
Coding in above example will need to include the following code on all HTML files it affects <LINK REL=”stylesheet” HREF=”http://www.mypage/file_name.css” TYPE=”text/css”>
Classes: can affect any command with this, be it SPAN, P, I, B, DIV, or whatever
.blue {font-family:
arial; font-color: blue; font-style: bold} Common use is ‘title’;
like ALT
Activated by the
‘class code in the page code
<SPAN CLASS=”blue”>Text
goes here</SPAN> or <B CLASS=”blue”>Text goes
here</B>
Example: BODY {font-family: Arial; font-size: 12pt; font-style: italic}
General Attachments BODY, akin to normal BODY, P for Paragraph, or H1 to format header.
General Formatting: H1-6, P, BODY, DIV can all be written into Style Sheets.
Header Format: H1.red {color:#000000; font-size:12pt} <H1 Class=”red”> links to it on page.
Link Format A:link {color: #000000} Determines Link color (A:visited, A:active also work)
Link Format A:hover Changes color when cursor moves over it.
Link Format decoration A:link {text-decoration: none} or ‘underline’
Link Format with Classes: a.red:link {color:red;} activated by <A HREF=”x” CLASS=”red”>
Link Format with Backgrounds: a:link {color:blue; background:#F8F8FF;} Other css codes also.
Link Format with
Cursors link {cursor: crosshair} Choices are: auto, crosshair, default,
e-resize,
hand, help, move,
n-resize, ne-resize, nw-resize, pointer, s-resize, se-resize, sw-resize,
text, w-resize, w-resize,
and wait.
Margins: BODY {margin-left 3cm} or ‘margin-right’, ‘margin-top’, or ‘100px’
Set Borders: P {border-style: ridge} or IMG {border-color: blue}
Tag for Background Color: BODY {background: #FFFFFF}
Tag for Background
Image: BODY {background-image: url(whatever.gif)}
Using {background-repeat: repeat} or ‘repeat-x’, ‘repeat-y’
or ‘no-repeat helps.
Tip: you can use this no-repeat to establish a corporate logo in background
using spacing
To do this, you add the {background-position: 200px 200px;} code to
the above 2.
Use the {background-attachment: fixed;} code to keep the gif wherever
you scroll to.
Tag for Color of text: BODY {color: #660000}
Tag for Font size: BODY {font-size: 14pt}
Tag for Font style: BODY {font-style: italics} normal, oblique, small caps
Tag for Font type: BODY {font-family: Arial}
Tag for Font: BODY {font-weight: bold} extra-light, light, demi-light, medium, demi-bold, extra bold
Text Alignment: BODY {text-align: center} or ‘left’, ‘right’, or ‘justify’
Text Transformation BODY {text-transform: uppercase} or ‘capitalize’, ‘lowercase’.