Useful CSS Classes in SharePoint 2013

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.

ClassDescription
.ms-h1, .ms-h2, .ms-h3, .ms-h4, .ms-h5, .ms-h6These 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-skipWhen 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-linkWhen 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-hiddenVisually hides that element from the page, but keeps it available to accessibility devices such as screen readers.
.ms-accentTextApplies the first accent color from the current SharePoint theme to an element, including visited links.
.ms-textXLargeApplies a larger font size using the “large-body” font slot for the current theme (19px Segoe UI Light by default).
.ms-textLargeApplies a slightly larger font size using the “large-body” font slot for the current theme (15px Segoe UI Light by default).
.ms-textSmallApplies a slightly smaller font size using the “body” font slot for the current theme (12px Segoe UI by default).
.ms-metadata, .ms-descriptiontextApplies the “body” font slot while using the same font size as .ms-textSmall with a lighter font color.
.ms-uppercaseApplies text-transform: uppercase CSS.
.ms-softenApplies a lighter font color, including hyperlinks.
.ms-errorApplies the same red color used for validation errors on list forms.
.ms-largeNumberApplies 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-displayBlockApplies display: block CSS.
.ms-displayInlineApplies display: inline CSS.
.ms-displayInlineBlockApplies display: inline-block CSS.
.ms-tableApplies display: table CSS.
.ms-tableRowApplies display: table-row CSS.
.ms-tableCellApplies display: table-cell CSS.
.ms-verticalAlignTopApplies vertical-align: top CSS.
.ms-verticalAlignMiddleApplies vertical-align: middle CSS.
.ms-verticalAlignBaselineApplies vertical-align: baseline CSS.
.ms-positionRelativeApplies position: relative CSS.
.ms-positionAbsoluteApplies position: absolute CSS.
.ms-hideApplies display: none CSS.
.ms-visibilityHiddenApplies visibility: hidden CSS.
.ms-accessible, .ms-hiddenVisibly hides text, but makes it accessible to screen readers.
.ms-clearApplies clear: both CSS.
.ms-alignRightApplies text-align: right CSS.
.ms-alignLeftApplies text-align: left CSS.
.ms-alignCenterApplies text-align: center CSS.
.ms-floatRightApplies float: right CSS.
.ms-floatLeftApplies float: left CSS.
.ms-noPrintApplies display: none CSS when printed.
.ms-noWrapPrevents text from wrapping and applies ellipses if the text overflows its container.
.ms-forceWrapForces text to wrap even in the middle of a work.
.ms-normalWrapRestores normal text wrapping.
.ms-fullWidthApplies box-sizing: border-box and width: 100% CSS.
.ms-fullHeightApplies box-sizing: border-box and height: 100% CSS.
.ms-fillBoxFullApplies box-sizing: border-box, width: 100% and height: 100% CSS.
.ms-fillBoxApplies width: 100% and height: 100% CSS with no changes to box-sizing.
.ms-padding0Applies padding: 0px CSS.
.ms-margin0Applies margin: 0px CSS.
.ms-noListRemoves list styling from ordered and unordered lists, and their child lists.
.ms-boldApplies font-weight: bold CSS.
.ms-italicApplies font-style: italic CSS.
.ms-smallIndentApplies margin-left: 20px CSS.
.ms-indentApplies margin-left: 25px CSS.
.ms-cursorDefaultApplies cursor: default CSS.
.ms-cursorPointerApplies cursor: pointer CSS.
.ms-shadowApplies the same box-shadow used on other UI elements with shadows in SharePoint.
.ms-ContentAccent1-fontColorApplies 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]-bgColorApplies the first – sixth accent color from the current SharePoint theme as the background color.
.ms-ContentAccent[1-6]-borderColorApplies 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!

4 thoughts on “Useful CSS Classes in SharePoint 2013

Comments are closed.