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' : Indicate an error state has occurred
• class='info' : Indicate an state with a note has occurred
• class='eleven' : Indicate smaller text is in order
• class='thirteen' : Indicate smaller text is in order
• class='aligncenter' : Center the text
• class='burgundy' : deprecated Indicate the text is important.