CSS Classes

MSU Web Template CSS Classes:

• Purpose and Usage
• Display and Positioning
• Margins and Paddings
• Border
• Text Alignment
• Text Features

---

Purpose and Usage

These CSS classes can be used as easy shortcuts to solve common layout needs within the framework of the MSU website template. Apply these instead of XHTML attributes, deprecated HTML and inline styles.

Single class: class='floatright'

Multiple classes: class='floatright margin-top clearboth border'

Display and Positioning

• class='floatright' : CSS rule: float: right
• class='floatnone' : CSS rule: float: none
• class='floatleft' : CSS rule: float: left
• class='clearright' : CSS rule: clear: right
• class='clearleft' : CSS rule: clear: left
• class='clearboth' : CSS rule: clear: both
• class='clearnone' : CSS rule: clear: none
• class='displayblock' : CSS rule: display: block
• class='displayinline' : CSS rule: display: inline
• class='displaynone' : CSS rule: display: none

Margins and Paddings

• class='margin' : CSS rule: margin: 16px
• class='margin-top' : CSS rule: margin-top: 14px
• class='margin-right' : CSS rule: margin-right: 16px
• class='margin-bottom' : CSS rule: margin-bottom: 14px
• class='margin-left' : CSS rule: margin-left: 16px
• class='nomargin' : CSS rule: margin: 0
• class='nomargin-top' : CSS rule: margin-top: 0
• class='nomargin-right' : CSS rule: margin-right: 0
• class='nomargin-bottom' : CSS rule: margin-bottom: 0
• class='nomargin-left' : CSS rule: margin-left: 0
• class='padding' : CSS rule: padding: 16px
• class='padding-top' : CSS rule: padding-top: 16px
• class='padding-right' : CSS rule: padding-right: 16px
• class='padding-bottom' : CSS rule: padding-bottom: 16px
• class='padding-left' : CSS rule: padding-left: 16px
• class='nopadding' : CSS rule: padding: 0
• class='nopadding-top' : CSS rule: padding-top: 0
• class='nopadding-right' : CSS rule: padding-right: 0
• class='nopadding-bottom' : CSS rule: padding-bottom: 0
• class='nopadding-left' : CSS rule: padding-left: 0

Border

This class applies a 1 pixel black border or removes borders.

• class='noborder' : CSS rule: border: none
• class='noborder-top' : CSS rule: border-top: none
• class='noborder-right' : CSS rule: border-right: none
• class='noborder-bottom' : CSS rule: border-bottom: none
• class='noborder-left' : CSS rule: border-left: none
• class='border' : CSS rule: border: 1px solid #000
• class='border-top' : CSS rule: border-top: 1px solid #000
• class='border-right' : CSS rule: border-right: 1px solid #000
• class='border-bottom' : CSS rule: border-bottom: 1px solid #000
• class='border-left' : CSS rule: border-left: 1px solid #000

Text Alignment

These classes should only be used to align text in table cells.

• class='alignleft' : CSS rule: text-align: left
• class='aligncenter' : CSS rule: text-align: center
• class='alignright' : CSS rule: text-align: right
• class='alignjustify' : CSS rule: text-align: justify

Text Features

These classes should be used to identify special text. These classes should be used to classify by type not by look. In other words; classify something as dangerous not red. Red doesn't mean anything. Dangerous does, even to the color blind.

• class='error' : Indicates an error state has occurred
• class='warning' : Indicates a warning state has occurred
• class='info' : Indicates a state with a note has occurred
• class='note' : Indicates a state with a note has occurred
• class='help' : Indicates a state where help may be needed
• class='eleven' : Indicates smaller text is in order (eight through eleven are available)
• class='thirteen' : Indicates larger text is in order (thirteen through eighteen are available)
• class='aligncenter' : Centers the text
• class='gray1' : Indicates gray text is in order (gray1 through gray3 are available)
• class='bold' : Indicates bold text is in order:
• class='italic' : Indicates italicized text is in order