tra007 - Using the CDWS Style Sheets

Add the following code to link to the external style sheets inside the <head> tag of your document. In order for these to work properly, they must appear in this order. In the second one, replace xxx with the template prefix used in the course.

<link rel="stylesheet" href="http://reach.ucf.edu/styles/global.css" type="text/css">

<link rel="stylesheet" href="http://reach.ucf.edu/styles/xxx.css" type="text/css">

Custom Styles:

To apply a custom style add the attribute class to the tag you wish to apply the style. The table below lists the custom styles defined and their purpose.

Class	Use	Examples
`header`	Centers header. Use with div tag around header.	`<div class="header"> ...header code... </div>`
`footer`	Sets the size of the footer text and centers it. Use with div tag around footer.	`<div class="footer"> ...footer code... </div>`
`mid top`	Aligns text at the middle or top of a table cell, respectively.	`<td class="mid">text</td> <td class="top">text</td>`
`c rt lt`	Aligns text center, right and left, respectively.	`<div class="c">text</div> <h1 class="rt">text</h1> <p class="lt">text</p>`
`tcenter`	To center a table wrap a `div` around the table with `class="tcenter"`	`<div class="ctenter"> <table> </div>`
`frt flt`	Float an element right or left.	`<div class="flt"> <img /> </div>`
`border`	Use within any element to add a 1 pixel black border.	`<img src"image.gif" class="border">`
`tborder`	Use within a table to add 1 pixel black border to all cells.	`<table class="tborder">`
`m0`	Sets the margin of the elemtn to 0 to override default margins defined in this style sheet.	`<p class="m0">text</p>`
`m1x m2x m3x m4x`	Sets the margin equal to, twice, three times and four times, the default size to accomplish "indentation" of paragraphs and tables under section headings. Note: This replaces the improper use of blockquote for indenting.	`<div class="m2x"> <table>...</table> </div> <p class="m3x">text</div>`
`ds`	Double space paragraph text or list items.	`<p class="ds">text</li> <ul class="ds">text</ul>`
`bib`	Hanging indent for biographical references	`<p class="bib">text</div>`
`highlight`	Sets the background color of the text to which it is applied to yellow to accomplish "highlighted" text.	`<span class="highlight">text</span>`
`sm`	Sets font size to 75%, same as the text in the footer.	`<div class="sm">text</div>`
`nopad`	Use within the body tag in the header of an organizer page in WebCT to get rid of the extra spacing around the buttons.	`<body class="nopad">`
`bullet`	Adds a graphical bullet that matches the specified template	`<h2 class="bullet">`
`hr`	replaces the horizontal rule with a graphical bar that matches the specified template when a div with class="hr" is wrapped around it.	`<div class="hr"><hr /></div>`

Redifined HTML Tags:

The following tags have been redefined in the CDWS style sheets . These will be the defaults for all documents, unless otherwised specified (inline or in another style sheet). The template specific style sheets, redefine colors to match the template.

Redifined Tag	What will be displayed
`body`	Defaults for text within a `<body>` will be: white background; black text; 15 pixel margin all around;100% font size; Arial, Helvetica or sans-serif font (in that order).
`links`	Default link colors will be: unvisited - #00f (blue); active - #90c (purple); visited - #08f (light blue). Note: The template's css (template specific) redefines these colors to match the template`.`
`ul li ul li li ul li li li`	Defaults for bulleted ists will be: a closed circle for the first bullet; an open circle for the second bullet; a square for the third bullet.
`ol li ol li li ol li li li`	Defaults for numbered ists will be: decimal (1.); lower case letter (a.); lower case roman numeral (i.)
`td`	Defaults for text within a `<td>` will be: 5 pixel padding all around; text aligned left and to the top of the cell.
`th`	Defaults for text within a `<th>` will be: black text on a dark gray background; 5 pixel padding all around. Note: The template's css redefines these colors to match the template.
`h1`	Redefines the size of the `<h1>` tag to 175% of its size with weight normal, and centers it. The template css, redefines its color to match the template.
`h2`	Redefines the size of the `<h2>` tag to 130% of its size with weight normal. The template css, redefines its color to match the template. By default, all heading tags except `h1` will have a margin of 30 pixels, to line up with the paragraphs.
`h3`	Redefines the size of the `<h3>` tag to 110% of its size with weight normal. The template css, redefines its color to match the template. By default, all heading tags except `h1` will have a margin of 30 pixels, to line up with the paragraphs.
`h4`	Redefines the size of the remaing header tags to 105% of its size with weight bold. The template css, redefines its color to match the template. By default, all heading tags except `h1` will have a margin of 30 pixels, to line up with the paragraphs.
`h5, h6`	Redefines the size of the remaining header tags to 100% of its size with weight bold. The template css, redefines its color to match the template. By default, all heading tags except `h1` will have a margin of 30 pixels, to line up with the paragraphs.
`p`	By default, paragraphs will have a margin of 30 pixels, to line up with the section headers.

Left Frame:

The file control.html will not use these external style sheets. Instead insert the following code inside the <head> tag.

<style type="text/css">

<!--

  body {

  background: url(http://reach.ucf.edu/images/xxx/xxxconback.gif) repeat-y left top;

  width: 122px;

  margin: auto;

}

.buttons { 

  text-align: center; 

  width: 115px;

}

-->

</style>

Using the CDWS Style Sheets

Link to the CDWS Style Sheets

Custom Styles:

Redifined HTML Tags:

Left Frame: