| CSS Style Sample |
Code Notes |
 |
 |
<td class="header">Header<br>
<img src="/templatesCURRENT/images/hdr_undrln.jpg" width="243" height="2">
Caution with headers that are too long, recommend editing |
| |
| |
<td class="headerlite">Headerlite<br>
Light color version of Header. |
| |
| |
<td class="headerred">Headerred<br>
Rose color version of Header. |
| |
| |
Default header styles. |
| |
Subhead 1
This is to be used as a non-linking
subhead
Subhead1
This is to be used as a non-linking
subhead
|
 |
<span class="subhead1">Subhead
1</span>
The rules may not show in Dreamweaver, preview in browser. If no text
follows end line with a break to have underline show up.
<p class="subhead1">Subhead1</p>
using <p> causes rules to stretch table cell wide, but causes descriptive
text to drop too low, use selectively. |
| |
Subhead 2
other text that follows
just a sample of spacing
Subhead2
other text that follows
just a sample of spacing
|
|
<span class="subhead2">Subhead
2</span>
The rules may not show in Dreamweaver, preview in browser
<p class="subhead2">Subhead2</p>
using <p> causes rules to stretch table cell wide, but causes descriptive
text to drop too low, use selectively. |
| |
Subhead3
To be used as linked subhead, followed
by standard bodytext |
|
<a href="http://www.mcc.edu" target="_blank" class="listlink3">Subhead3</a></span><br>
Link must appear within href for style to work properly |
| |
| link2 |
|
This is the link used in body
copy and for other links as well. Note: hrefs
without a class specified will default to the look of this class.
<a href="http://www.mcc.edu" class="link2">
The link must be made within the source code. |
| Listlink |
|
This is 13px, bold linking option |
| Listlink2 |
|
This is 12px, bold linking option, for instance:
bold link within bodytext |
Listlink3 |
|
Is link for Subhead3, it includes
an underline. Should be used as a heading not in the body text.
|
| |
localnav
localnav
localnav-lt
line that follows |
|
These are the styles for the Local
or Left Navigation area
.localnav
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
line-height: 140%;
.locanav-lt
(same as localnav but with a weight of normal) Apply bold tags to first part of link to achieve the effect of the bottom link on the left.
<img src="/images/nav_underline.jpg" alt="" width="129" height="8" /><br />
<a href="http://www.mcc.edu" class="localnav-lt"><b>localnav-lt</b><br />
line that follows</a> |
| |
| callout |
|
This is intended to be used in areas to call
specific attention to a block of copy."callout" has been
used with "hr" above and below.
As we proceed in production, replace with callout2 |
callout2 has been modified to include rules
above and below, this allows for a finer rule than is used on callout |
|
"callout2" was
created to add a little more control and finer lines as was originally
intended. |
| |
| copyright |
|
(changed from 13px to 11px,
#999999 to #666666)
This is used in the footer for
the copyright notice and for denoting file types or size
after links. eg.- (pdf),
doc, 32kb |
|
| |
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 11px;
color: #000000; |
| |
| bodytext |
|
Default style for <p>, tables and
body.
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
line-height: 140%;
color: #000000; |
| |
| bodytextitalic |
|
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: italic;
font-size: 12px;
line-height: 140%;
color: #000000; |
| |
| bold |
|
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
line-height: 140%;
color: #000000; |
| |
| bolditalic |
|
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-style: italic;
font-size: 12px;
line-height: 140%;
color: #000000; |
| |
| bodytextsmall |
|
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 10px;
line-height: 140%;
color: #000000; |
| |
| bodytxtsmbold |
|
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
line-height: 140%;
color: #000000; |
| |
| textteal |
|
Intended to
call attention to specific text...use
with caution as hard to tell difference with active links. DISCONITNUE - CHANGE OVER TO text993300. |
| |
| textdarkteal |
|
Intended to call subtle attention
to specific text in a case where bold might
be too strong.DISCONITNUE - CHANGE OVER TO text660000. |
| |
| textrose |
|
Intended to call subtle attention
to specific text in a case where bold might
be too strong. CHANGE OVER TO text993300. |
| |
| textroselite |
|
Intended to call subtle attention
to specific text in a case where bold might
be too strong. CHANGE OVER TO text993300. |
| |
| text660000 |
|
Intended to call subtle attention
to specific text in a case where bold might
be too strong. |
| |
| text993300 |
|
Intended to call subtle attention
to specific text in a case where bold might
be too strong. |
| |
| textlite993300 |
|
Intended to call subtle attention
to specific text in a case where text993300 might
be too strong. |
| |
- ul li
other text that follows
just a sample of spacing
- ul li
other text that follows
just a sample of spacing
|
|
Unordered list style
<ul>
<li>text</li>
<li>text</li>
</ul>
|
| |
- ul ul li
- other text that follows
just a sample of spacing
- ul ul li
- other text that follows
just a sample of spacing
|
|
Unordered list style with sub
bullets
<ul>
<li>ul ul li
<ul>
<li>other text that follows<br>
just a sample of spacing</li>
</ul></li></ul>
Changing the class on the "li" to
bodytext on the teal bullet will change the text to black as
in the lower sample.
|
| |
- ol li
Text that follows
|
|
Ordered list style where class is not specified.
The default is numeric list |
| |
- listalpha
Text that follows
- listalpha
- listalpha
- listalpha
|
|
Alpha Caps
<ol>
<li class="listalpha">listalpha</li>
</ol>
|
| |
- listalpha-low
Text that follows
- listalpha-low
- listalpha-low
- listalpha-low
|
|
alpha lowercase
<ol>
<li class="listalpha-low">listalpha-low</li>
</ol>
|
| |
- listnumeric
Text that follows
- listnumeric
- listnumeric
- listnumeric
|
|
numeric list
<ol>
<li class="listnumeric">listnumeric</li>
</ol>
|
| |
- listroman
Text that follows
- listroman
- listroman
- listroman
|
|
roman numeral list uppercase
<ol>
<li class="listroman">listroman</li>
</ol>
|
| |
- listroman-low
Text that follows
- listroman-low
- listroman-low
- listroman-low
|
|
roman numeral list lowercase
<ol>
<li class="listroman-low">listroman</li>
</ol>
|
| |
| warning |
|
This has been reset to 12px, in
Arial. Use in extreme cases and sparingly. |
| |
| border |
|
|
| |
| box |
|
This can be used to call attention
to specific messages....but not too much attention. |
| |
| bgroundteal |
|
This is a new version of this, redone
to include text formatting. |
Sample above class is applied to td cell of a table.
BGROUNDTEAL
Same style applied to <p> tag. |
|
background-color: #669999;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px; font-weight: bold;
text-transform: uppercase;
color: #FFFFFF; letter-spacing: 0.25em;
text-align: left; vertical-align: bottom; |
| |
| hdrbar1 |
|
Another color variation of above.
When the page contains a lot of "teal" it can help to break up
the page by using this for headings instead of BGROUNDTEAL. |
| |
|
background-color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #ffcc33;
letter-spacing: 0.10em;
text-align: left;
vertical-align: bottom;
padding-left: 2px; |
| |
| bgroundpaleyellow |
|
This has been used as background
for the Contact Box, and can be used as a subtle form of highlighting |
| |
| schedbutton |
|
Used in Class Schedules in CE, mimicks
a button but is not an image. |
| |
| yellblkbutton |
|
Used in Admissions - Request Info form. Particularily
to call attention to FAQ which points to MCC Answer. Mimicks a
button but is not an image. |
| |
|
|
|
Table style apply style to "table"
tag. |
| |
| cell-left |
cell-center |
cell-right |
|
|
Table cell style used to apply a grey line to
the bottom of the cell. Apply style to cell's "td"
tag. |
| |
