CSS Classes
Page address: https://web.mnsu.edu/its/web/editing/template/documentation/cssclasses.htmlPurpose 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: rightclass='floatnone'
: CSS rule: float: noneclass='floatleft'
: CSS rule: float: leftclass='clearright'
: CSS rule: clear: rightclass='clearleft'
: CSS rule: clear: leftclass='clearboth'
: CSS rule: clear: bothclass='clearnone'
: CSS rule: clear: noneclass='displayblock'
: CSS rule: display: blockclass='displayinline'
: CSS rule: display: inlineclass='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: 16pxclass='margin-top'
: CSS rule: margin-top: 14pxclass='margin-right'
: CSS rule: margin-right: 16pxclass='margin-bottom'
: CSS rule: margin-bottom: 14pxclass='margin-left'
: CSS rule: margin-left: 16pxclass='nomargin'
: CSS rule: margin: 0class='nomargin-top'
: CSS rule: margin-top: 0class='nomargin-right'
: CSS rule: margin-right: 0class='nomargin-bottom'
: CSS rule: margin-bottom: 0class='nomargin-left'
: CSS rule: margin-left: 0class='padding'
: CSS rule: padding: 16pxclass='padding-top'
: CSS rule: padding-top: 16pxclass='padding-right'
: CSS rule: padding-right: 16pxclass='padding-bottom'
: CSS rule: padding-bottom: 16pxclass='padding-left'
: CSS rule: padding-left: 16pxclass='nopadding'
: CSS rule: padding: 0class='nopadding-top'
: CSS rule: padding-top: 0class='nopadding-right'
: CSS rule: padding-right: 0class='nopadding-bottom'
: CSS rule: padding-bottom: 0class='nopadding-left'
: CSS rule: padding-left: 0
Border
This class applies a 1 pixel black border or removes borders.
class='noborder'
: CSS rule: border: noneclass='noborder-top'
: CSS rule: border-top: noneclass='noborder-right'
: CSS rule: border-right: noneclass='noborder-bottom'
: CSS rule: border-bottom: noneclass='noborder-left'
: CSS rule: border-left: noneclass='border'
: CSS rule: border: 1px solid #000class='border-top'
: CSS rule: border-top: 1px solid #000class='border-right'
: CSS rule: border-right: 1px solid #000class='border-bottom'
: CSS rule: border-bottom: 1px solid #000class='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: leftclass='aligncenter'
: CSS rule: text-align: centerclass='alignright'
: CSS rule: text-align: rightclass='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 occurredclass='warning'
: Indicates a warning state has occurredclass='info'
: Indicates a state with a note has occurredclass='note'
: Indicates a state with a note has occurredclass='help'
: Indicates a state where help may be neededclass='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 textclass='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