Cascading Style Sheet Guide

  • Article

Cascading Style Sheet Guide

The list of styles below are used in OWS.CSS, the Cascading Style Sheet applied by default to all Web sites based on Sharepoint Team Services™ from Microsoft®. The left column contains the name of the style, the middle column contains a brief description of what that style does, and the third column shows an example of how that style will be displayed on a team Web site.

Notes

  • There is no style for visited appointments you may have on your calendar. You may want to add these to OWS.CSS by using the following style selectors:
    • .ms-apptsingle:visited{} or
    • .ms-appt:visited{}
  • There is no way to adjust the size of the check boxes and radio buttons.
  • Many of these styles are also used in Microsoft FrontPage® themes. Applying a theme could, in some instances, override the styles in OWS.CSS and allow you to use themes to make the look of your team Web site pages consistent with your other Web site content.
Selector Controls the appearance of... Example
body Page margins for the site
 		 not available
select Fonts for any of the drop-down or check box items in list customization pages
 
hr Any horizontal line or horizontal rule inserted in the web
 

 
.ms-addnew "Add new..." text on list views
 

.ms-addnew style
.ms-announcementtitle Announcement titles in the Announcements list view on the home page
 

.ms-announcementtitle style
.ms-appt Background, border, and text of an event that spans multiple days in the Calendar view of the Events list
 

.ms-appt style
.ms-appt a Hyperlink text of an event that spans multiple days in the Calendar view of the Events list
 

 ms.appt hyperlink style

.ms-appt a:hover
.ms-apptsingle Text of an appointment that lasts one day only
 

.ms-apptsingle
.ms-authoringcontrols Text labels and background of forms used to create new lists or document libraries
 

.ms-authoringcontrols style
.ms-banner Text (the lines dividing each link, for example) in the top link bar at the top of each page
 
.ms-banner style
.ms-banner style
.ms-banner a:link Hyperlink text in the top link bar at the top of each page
 
.ms-banner hyperlink style
.ms-banner a:visited
.ms-bannerframe The top link bar background at the top of each page, including the narrow border below the banner
 

 
.ms-cal Border type and fonts formatting used in the day cells in the Calendar view of the Events list
 
8  
8  
.ms-calbot Bottom border of each day cell in the Calendar view of the Events list
 

 
.ms-caldow The row of cells containing weekday names in the Calendar view of the Events list
 

.ms-caldow style
.ms-calhead The header containing the month name and navigation arrows in the Calendar view of the Events list
 

.ms-calhead style
.ms-calmid The left and right borders on each day cell in the Calendar view of the Events list 
  • The spacer is used between multiple appointments on the same day

 .ms-calmid style
.ms-calspacer

 .ms-calspacer style
.ms-caltop The top border of each day cell in the Calendar view of the Events list
 

 .ms-caltop style
.ms-datepicker The date chooser pop-up calendar when creating or editing a new list item
 

.ms-datepicker style
.ms-datepickeriframe The position of the date chooser pop-up calendar when creating or editing a new list item
 		 Not Available
.ms-descriptiontext The helpful description text that appears under a page title or section header

Examples:

  • "Use the Announcements list to ..." on the Announcements list
  • "Share a document with the team..." from Shared Documents
  • The version number and other information on the Site Settings pages

.ms-descriptiontext style
.ms-descriptiontext a Hyperlinks that appear within description text
 

.ms-description hyperlink style

.ms-discussiontitle The subject of an open discussion item
 

.ms-discussiontitle style
.ms-discussionseperator The space between discussion threads
 		 not available
.ms-dpday Text of date numerals in the current month in the date chooser pop-up calendar when creating or editing a new list item
 
.ms-dpday style
.ms-dpday style
.ms-dpdow The line under the weekday names in the date chooser pop-up calendar when creating or editing a new list item
 
 .ms-dpdow style
 .ms-dpdow style
.ms-dpfoot The "Today's date" text and the line above it in the date chooser pop-up calendar when creating or editing a new list item
 
 .ms-dpfoot style
 .ms-dpfoot style
.ms-dphead The header containing the month name and navigation arrows in the date chooser pop-up calendar when creating or editing a new list item
 

 .ms-dphead style
.ms-dpnextprev The arrows in the date picker for moving from one month to the next or previous one
 
<< >>
<<   >>
.ms-dpnonmonth Text of date numerals which are not part of the current month in the date chooser pop-up calendar when creating or editing a new list item
 
.ms-dpnonmonth style
.ms-dpnonmonth style
.ms-dpselectedday Text and background of the selected date in the date chooser pop-up calendar when creating or editing a new list item
 

.ms-dpselectedday style
.ms-filedialog td The list of selected shared documents in the Save or Save As dialog box when saving to a document library
 
.ms-filedialog td style
.ms-filedialog td style
.ms-formbody Text of each field in a list item. For example, the form for a  "New Item" for any of the default lists
 

.ms-formbody style
.ms-formdescription Instruction text on form fields

Example:

  • "Enter date in M/D/YYYY format" text when creating or editing a new list item

.ms-formdescription style
.ms-formdescription a Formats hyperlinks that appear in form descriptions such as "Click here to test"
 

.ms-formdescription hyperlink style

.ms-formlabel Formats names of form fields when creating or editing a list item or adjusting site settings
 

.ms-formlabel style
.ms-homepagetitle The list name in a list view

Example:

  • The words "Announcements", "Events", and "Links" on the default.htm page

.ms-homepagetitle style
.ms-homepagetitle:hover
.ms-input Text entered into date form fields when creating or editing a list item
 

.ms-input style
.ms-itemheader a List name text in the Lists page and document library names on the Documents page
 

.ms-itemheader hyperlink style

.ms-itemheader a:hover
.ms-itemheader a:visited
.ms-itemheader a:visited:hover
.ms-long Text in non-date form fields when creating or editing a list item
 

.ms-long style
.ms-main Color of border at the right margin of each page
 

 
.ms-nav a Text in the left navigation or Quick Launch bar

Examples:

  • The words "Shared Documents", "Tasks", and so forth
.ms-nav hyperlink style
.ms-nav a:hover
.ms-nav a:visited
 
.ms-nav td The "Search Documents" text on the home page and "Select a View" text in a list page
 
.ms-nav cell style
.ms-nav cell style
.ms-nav th The "Quick Launch" text on the home page
 
.ms-nav header cell style
.ms-nav header cell style
.ms-navframe The border at the left margin of the page
 

 
.ms-pagetitle The title text on each page
 

.ms-pagetitle style
.ms-pagetitle a Hyperlinks that appear with title text
 

.ms-pagetitle hyperlink style

.ms-pagetitle a:hover
.ms-propertysheet Text for customizable items in list customization pages and the links in the site settings pages

Examples:

  • "Go Back to Shared Documents"
  • helpful text under customizable settings like "Use a filter to display..."

.ms-propertysheet style
.ms-propertysheet a Hyperlink text for customizable items in list customization pages
 

.ms-propertysheet hyperlink style

.ms-propertysheet a:hover
.ms-propertysheet a:visited
.ms-propertysheet a:visited:hover
 
.ms-radiotext Text in a survey when you use radio buttons for the choice
 

One
Two

 
.ms-searchbox Search form field on the home page
 
.ms-sectionheader Text in section headings in a page.

Example:

  • 'Web Site Settings' in the Site Settings page

.ms-sectionheader style
.ms-sectionline The horizontal lines between page sections
 		  
.ms-selected The background of selected items in the Save or Save As dialog box when saving to a document library
 

.ms-selected style
.ms-selected span
.ms-separator The separator that appears between hyperlinks on the toolbar of a list

Examples:

  • Between "New Item" and "Filter" in the Tasks list

.ms-separator style: |
.ms-titlearea The site name that appears on each page above the page title (by default the words "Team Web Site")

.ms-titlearea style
.ms-titleareaframe The upper portion of the border at the left margin of the page
 

 
.ms-toolbar The text in list toolbars

Examples:

  • "New Item" from the Tasks list
  • "Upload Document" from a Document Library
  • "Modify Settings and Columns"

.ms-toolbar style
.ms-vb List item text and list description text as well as the list of lists on the site settings page
 

.ms-vb style
.ms-vb a Hyperlinks for list text and list description text

.ms-vb hyperlink style

.ms-vb a:hover
.ms-vb a:visited
.ms-vb a:visited:hover
.ms-verticaldots The graphical separator that appears between the main body and the left margin of the page

Note   Not all themes use this image
 
 



 
 



 
.ms-vh Text of column headings of lists
 

.ms-vh hyperlink style
.ms-vh a Text of hyperlinks in column headings of lists
 

.ms-vh hyperlink style

.ms-vh a:hover
.ms-viewselect a:link Text for available views in the left navigation for a list

Includes the words "Go" and "Go to Search Page" under the search text box and any possible views created for any lists

.ms-viewselect hyperlink style