shortcut to content
Minnesota State University, Mankato
Minnesota State University, Mankato

CSS Classes

Page address: https://www.mnsu.edu/its/web/editing/template/documentation/cssclasses.html

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

Float Classes

You can change the float behavior of an element by adding .left or .right to an HTML element. To clear floats, add the class .clearfix to the parent element.

HTML

<div class="clearfix">
<a class="right">Float Right</a>
<a class="left">Float Left</a>
</div>

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 Align Classes

You can change the text alignment of an element by adding .text-left, .text-right, .text-center or .text-justify to an element.

Adding a size to the front of a text alignment class will cause it to only be applied on that size screen or larger (ex. .medium-text-center will center text for everything except small screens). Adding a size and only will apply the text alignment just for that media query (ex. .medium-only-text-center will center text just for medium screens).

HTML

<p class="text-left"><!-- Text goes here --></p>
<p class="text-right"><!-- Text goes here --></p>
<p class="text-center"><!-- Text goes here --></p>
<p class="text-justify"><!-- Text goes here --></p>

Available Text Alignment Classes

Align Left

.text-left
.small-text-left
.small-only-text-left
.medium-text-left
.medium-only-text-left
.large-text-left
.large-only-text-left
.xlarge-text-left
.xlarge-only-text-left
.xxlarge-text-left

Align Right

.text-right
.small-text-right
.small-only-text-right
.medium-text-right
.medium-only-text-right
.large-text-right
.large-only-text-right
.xlarge-text-right
.xlarge-only-text-right
.xxlarge-text-right

Align Center

.text-center
.small-text-center
.small-only-text-center
.medium-text-center
.medium-only-text-center
.large-text-center
.large-only-text-center
.xlarge-text-center
.xlarge-only-text-center
.xxlarge-text-center

Justify

.text-justify
.small-text-justify
.small-only-text-justify
.medium-text-justify
.medium-only-text-justify
.large-text-justify
.large-only-text-justify
.xlarge-text-justify
.xlarge-only-text-justify
.xxlarge-text-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.

Text
Text
Text
Text
Text
Text
Text
 
Text
Text
Text

  • 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