Useful CSS Classes in 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.cssfile 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
Comments are closed