Useful CSS Classes in SharePoint 2013

Web Design & Development
Screenshot of the corev15.css file from SharePoint 2013

SharePoint 2013’s corev15.css file comes with a bunch of useful CSS classes. It doesn’t compare to something like Zurb Foundation or Bootstrap, but there’s enough in there to allow you to write less CSS for your custom apps. It’s also a great way to ensure that your app blends in with the SharePoint UI for a more consistent user experience.

Keep in mind:

  • This is not a comprehensive list, and there are many more useful CSS classes. I recommend looking at the core.css file to see what’s available.
  • The descriptions are based on the default theme. Some of these use theme-specific color and font slots, so if you change themes these classes may apply different fonts and colors.
  • You can combine several classes to achieve your desired style, but I would use good judgement to determine whether you should use these classes or you need to roll your own stylesheet.
  • You may be tempted to use other classes that are specific to UI elements in SharePoint just because they apply certain styles that you want to use. Be careful because you might create extra work by writing more HTML than you need, or run into a problem if the UI is changed in a future SharePoint update.

Also keep in mind that CSS specificity may create unexpected results. For example, the ms-margin0 class applies margin: 0, but many styles in SharePoint use descendent selectors to apply margins, so ms-margin0 may be overridden by those more specific rules.

Class Description
.ms-h1, .ms-h2, .ms-h3, .ms-h4, .ms-h5, .ms-h6 These apply the same styles to an element as their respective HTML heading elements. Example: <p class="ms-h2">Heading</p> will make a paragraph look like a heading 2.
a.ms-skip When used on an anchor link, visibly hides the link until focused (e.g. via keyboard navigation). Once focused, the link text appears at the top left corner of the page. Example: <a href="#some-hidden-link" class="ms-skip">This link is hidden until focused via the keyboard</a>.
a.ms-link When used on an anchor link, keeps :visited links the same color as links that have not been visited yet. Example: <a href="#some-persistent-link" class="ms-link">View More →</a>.
.ms-accessible, .ms-hidden Visually hides that element from the page, but keeps it available to accessibility devices such as screen readers.
.ms-accentText Applies the first accent color from the current SharePoint theme to an element, including visited links.
.ms-textXLarge Applies a larger font size using the “large-body” font slot for the current theme (19px Segoe UI Light by default).
.ms-textLarge Applies a slightly larger font size using the “large-body” font slot for the current theme (15px Segoe UI Light by default).
.ms-textSmall Applies a slightly smaller font size using the “body” font slot for the current theme (12px Segoe UI by default).
.ms-metadata, .ms-descriptiontext Applies the “body” font slot while using the same font size as .ms-textSmall with a lighter font color.
.ms-uppercase Applies text-transform: uppercase CSS.
.ms-soften Applies a lighter font color, including hyperlinks.
.ms-error Applies the same red color used for validation errors on list forms.
.ms-largeNumber Applies a very large font size using the “large-body” font slot for the current theme along with a darker font color (30px Segoe UI Light by default).
.ms-displayBlock Applies display: block CSS.
.ms-displayInline Applies display: inline CSS.
.ms-displayInlineBlock Applies display: inline-block CSS.
.ms-table Applies display: table CSS.
.ms-tableRow Applies display: table-row CSS.
.ms-tableCell Applies display: table-cell CSS.
.ms-verticalAlignTop Applies vertical-align: top CSS.
.ms-verticalAlignMiddle Applies vertical-align: middle CSS.
.ms-verticalAlignBaseline Applies vertical-align: baseline CSS.
.ms-positionRelative Applies position: relative CSS.
.ms-positionAbsolute Applies position: absolute CSS.
.ms-hide Applies display: none CSS.
.ms-visibilityHidden Applies visibility: hidden CSS.
.ms-accessible, .ms-hidden Visibly hides text, but makes it accessible to screen readers.
.ms-clear Applies clear: both CSS.
.ms-alignRight Applies text-align: right CSS.
.ms-alignLeft Applies text-align: left CSS.
.ms-alignCenter Applies text-align: center CSS.
.ms-floatRight Applies float: right CSS.
.ms-floatLeft Applies float: left CSS.
.ms-noPrint Applies display: none CSS when printed.
.ms-noWrap Prevents text from wrapping and applies ellipses if the text overflows its container.
.ms-forceWrap Forces text to wrap even in the middle of a work.
.ms-normalWrap Restores normal text wrapping.
.ms-fullWidth Applies box-sizing: border-box and width: 100% CSS.
.ms-fullHeight Applies box-sizing: border-box and height: 100% CSS.
.ms-fillBoxFull Applies box-sizing: border-box, width: 100% and height: 100% CSS.
.ms-fillBox Applies width: 100% and height: 100% CSS with no changes to box-sizing.
.ms-padding0 Applies padding: 0px CSS.
.ms-margin0 Applies margin: 0px CSS.
.ms-noList Removes list styling from ordered and unordered lists, and their child lists.
.ms-bold Applies font-weight: bold CSS.
.ms-italic Applies font-style: italic CSS.
.ms-smallIndent Applies margin-left: 20px CSS.
.ms-indent Applies margin-left: 25px CSS.
.ms-cursorDefault Applies cursor: default CSS.
.ms-cursorPointer Applies cursor: pointer CSS.
.ms-shadow Applies the same box-shadow used on other UI elements with shadows in SharePoint.
.ms-ContentAccent1-fontColor Applies the first – sixth accent color from the current SharePoint theme as the text color (e.g. <span class="ms-ContentAccent3-fontColor">this text is colored using the third theme color slot</span>).
.ms-ContentAccent[1-6]-bgColor Applies the first – sixth accent color from the current SharePoint theme as the background color.
.ms-ContentAccent[1-6]-borderColor Applies the first – sixth accent color from the current SharePoint theme as the border color.

As I mentioned before, this is not a comprehensive list. There are many more CSS classes that you can use, including several that use styles from the ribbon rich text editor (look for classes that start with ms-rte…). If you find yourself using any not mentioned above on a regular basis, let me know in the comments and I’ll update the list!


Comments

  1. Nice list Josh. Just bookmarked this for reference... I know I'm going to need it sooner or later. Thanks for posting.

Comments are closed