Microsoft Office FrontPage 2003      
Developer's Toolkit
Resources | Links
  extend design code  
             
  New Features
 
Microsoft® Windows® SharePoint Services
 
Microsoft® Office SharePoint Portal Server
 
Microsoft Office System
 
.NET Framework
 
 
Real world scenarios that fully expose great new functionality in FrontPage 2003 and Windows SharePoint Services.
 
 
  financial planning finance  
  sales & marketing sales & marketing  
  human resources human resources  
   
  FrontPage Customization Kit > Resources > Tips and Tricks > Design

Cascading Style Sheet Guide for Windows SharePoint Services

The list of styles below are used in OWS.CSS, the Cascading Style Sheet applied by default to all Web sites based on Windows SharePoint 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.

Many of these styles are also used in Microsoft FrontPage themes. Applying a theme will override many of the styles in OWS.CSS and allow you to use themes to make the look and feel of your team Web site pages more consistent with your other Web site content.
 

Selector Controls the appearance of... Example
body, form Sets the margin of the body or form to 0
 
 
body Sets the margin of the body to 0
 
 
.ms-main Color of border at the right margin of each page
 


 

.ms-toolbar The text and gradient in list toolbars
 
table.ms-toolbar
.ms-rtetoolbarmenu Defines the look of the rich text editor
.ms-rtetoolbarunsel
.ms-rtetoolbarsel
.ms-rtetoolbardis
a.ms-rtetoolbardis
.ms-rtetoolbarhov
.ms-gridT1 Type of rating scale for Survey lists, such as “Low, Medium, High” of a rating scale question
 
.ms-viewselect a:link, .ms-GRFontSize Text for available views in the left navigation for a list

Text size in the datasheet control
 

 
select Fonts for any of the drop-down or check box items in List customization pages
 
hr Defines HR properties
 
 
.ms-formlabel Formats names of form fields when creating or editing a list item or adjusting site settings
 
.ms-formlabel style
.ms-formdescription A Formats hyperlinks that appear in form descriptions such as "Click here to test"
 
.ms-formdescription hyperlink style
.ms-formtable .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-radiotext Text in a survey when you use radio buttons for the choice
 
One
Two
.ms-gridtext Text of the question on a rating scale style question in a Survey
 
.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 FONT Defines font characteristics for the formbody class
 
 
.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-searchbox Search form field on the home page
 
.ms-searchform
.ms-searchcorner
table.ms-form th The table header for forms
 
sample
table.ms-form td Internal usage, please don’t alter
 
sample
.ms-formrecurrence The text that describes recurrence patters
 
.ms-long Text in non-date form fields when creating or editing a list item.
 

.ms-long style

.ms-longer Used by the rich text editor
 
 
.ms-italic Italic font
 
 
.ms-bold Bold font
 
 
.ms-bannerframe, .ms-GRHeaderBackground, .ms-storMeFree The NavBar banner background at the top of each page
 
.ms-banner a:link White hyperlink text in the NavBar banner at the top of each page
 
Hyperlink text
.ms-banner a:visited
.ms-banner, .ms-GRHeaderText White text in the top banner
 
text text text
.ms-nav td, .ms-nav .ms-SPZoneLabel, .ms-input The "Select a View" text in a list page

Input boxes for non-text (currency, date/time, etc.)
 

.ms-nav cell style
.ms-nav th Text in the quick launch area on the home page
 
.ms-nav header cell style
.ms-navheader a, .ms-navheader a:link, .ms-navheader a:visited The section headings on the quick launch bar
 
.ms-navframe,  .ms-GRStatusBar The color behind the quick launch bar and around the datasheet.
 
 
.ms-storMeUsed, .ms-storMeFilterBar Used on the storage management page.
 
 
.ms-navline Line dividing sections of the left bar on list views
 
.ms-navwatermark "Quick Launch" text on the quick launch bar
.ms-selectednav,.ms-GRSortFilter  Box around the selected view on the list view page.  Used for a selected column in the datasheet.
 
.ms-unselectednav Unselected text on the Quick Launch bar
 
.ms-verticaldots The graphical separator that appears between the main body and the left margin of the page (no longer used)
 
 
.ms-nav a Text in the left navigation of the Quick Launch bar

Examples : The words "Shared Documents" "Tasks"
 

 
.ms-nav a:link
.ms-nav a:hover
.ms-nav a:visited
.ms-titlearea The site name that appears on each page above the page title (by default the words "Team Web Site")
 

.ms-titlearea style

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

 

Div.ms-titleareaframe Yellow line above the title area of a page
 
.ms-titlearealine, .ms-storMeEstimated Yellow line below title and above list toolbar. Also used on the storage management page.
 
.ms-bodyareaframe Area below the title
 
.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-pagecaption The caption above the title for a Web Part Page
 
.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-selectedtitle Background on hover for a list item
 
.ms-unselectedtitle Background for a list item when not selected
 
 
.ms-menuimagecell Background color of arrow next to item title for context menu
 
.ms-filedialog td The list of selected shared documents in the Save or Save As dialog box when saving to a document library
 
.ms-descriptiontext Description text for a list,  description text on admin forms and new list forms
 
 
.ms-dspadapterlist
 
Internal usage, please don’t alter
 
 
.ms-alerttext Error messages on form submissions
 
alert text
.ms-separator The lines between the menu items on list toolbars
 
 
.ms-authoringcontrols The right side background color on admin pages
 
 
.ms-sectionheader Text in section headings on a page.

Example: 'Administration' on the Site Settings page
 

.ms-sectionheader style

.ms-sectionheader a The section titles in the view creation form that expand and collapse
 
.ms-sectionheader a:hover
.ms-sectionheader a:visited
.ms-sectionline The horizontal lines between page sections
 

.ms-partline The line between list items and the "Add new list item" in a summary view style (used on the home page)
 
 
.ms-propertysheet Text in list settings pages and in the site settings pages

Examples:

  • "Go Back to Shared Documents"
  • Text under settings like "Use a filter to display..."
 
.ms-propertysheet th
.ms-propertysheet a
.ms-propertysheet a:hover
.ms-itemheader a List and document library names on the Documents & Lists page
 
 
.ms-discussiontitle The subject of an open discussion item
 
.ms-discussiontitle style
.ms-vh, .ms-vh2 Text of column headings of lists
 

ms-vh hyperlink style

.ms-vh2 Used for padding
 
.ms-vh-icon Used for icons next to the view headers, such as the attachment icon, and spacing when no icon is present.  
.ms-vh-icon-empty
.ms-vh-left
.ms-vh-left-icon
.ms-vh-left-icon-empty
.ms-vh-right
.ms-vh-right-icon
.ms-vh-right-icon-empty
.ms-vh a,.ms-vh a:visited,.ms-vh2 a,.ms-vh-left a,.ms-vh-right a Text of hyperlinks for column headings of lists
 

.ms-vh hyperlink style

.ms-vh a:hover, .ms-vh2 a:hover, .ms-vh-left a:hover, .ms-vh-right a:hover
.ms-vhImage Used in header images
 
 
.ms-gb Defines the 'group-by' view headers
 
 
.ms-gb2 Defines the 'group-by' view headers
 
 
.ms-vb, .ms-vb2, .ms-GRFont, .ms-vb-user Text in the body of a view and most other common text.

Icons classes are used for things such as indicating attachments
 

 
 
.ms-vb a, .ms-vb2 a, .ms-GRStatusText a,.ms-vb-user a
.ms-vb a:hover, .ms-vb2 a:hover, .ms-vb-user a:hover
.ms-vb a:visited, .ms-vb2 a:visited, .ms-GRStatusText a:visited, .ms-vb-user a:visited
.ms-vb a:visited:hover, .ms-vb2 a:visited:hover, .ms-vb-user a:visited:hover
.ms-vb2, .ms-vb-title, .ms-vb-icon,.ms-vb-user
.ms-vb-icon
.ms-vb-user
.ms-vb2
.ms-homepagetitle Title on the homepage of a meetings workspace
 
 
a.ms-addnew "Add new..." text on summary view of lists
 
 
td.ms-addnew
.ms-error Error messages on form submissions
.ms-cal Border type and font formatting used in day cells of the Calendar view
8

 

.ms-calWeek Used in the calendar view

 

 
.ms-vcal
.ms-Dcal
.ms-caltop The top border of each day cell in the Calendar view
 

 .ms-caltop style

.ms-calhead The header containing the month name and navigation arrows in the Calendar view
 

.ms-calhead style

.ms-calhead a
.ms-calhead a:hover
.ms-caldow The row of cells containing weekday names in the Calendar view
 

.ms-caldow style

.ms-calmid The left and right borders on each day cell in the Calendar view
 

 .ms-calmid style

.ms-CalSpacer The spacer is used between multiple appointments on the same day
 

 .ms-calspacer style

.ms-CalVSpacer Used in the calendar view
 
 

.ms-CalAllDay

Calendar view all day events
 

.ms-firstCalHour

Calendar view first row's TD containing time
 

.ms-calHour

Calendar view TD containing time
 

.ms-calHalfHour

Calendar view TD containing half hour marks
 

.ms-calQuarterHour

Calendar view TD between hour & hour hour TDs
 

.ms-calbot

Calendar view horz day & week, bottom row
 

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

 ms.appt hyperlink style

.ms-appt a:hover
.ms-appt, .ms-GRCellSelect Background, border and text of an event that spans multiple days in the Calendar view
 

.ms-appt style

.ms-Dappt Appointments displayed in the 'day view'
 
 
.ms-Vappt Appointments displayed in the vertical day view  
.ms-Vappt a
.ms-Vappt a:link
.ms-Vappt a:hover
.ms-apptsingle Text of an appointment that lasts a single day
 

.ms-apptsingle

.ms-Dapptsingle Appointments displayed in the 'day view' with no duration is set
 
 
.ms-Vapptsingle Appointments displayed in the 'day view' with no duration is set  
.ms-Vapptsingle a
.ms-Vapptsingle a:link
.ms-Vapptsingle a:hover
.ms-caldowdown Down-level browser support calendar table cell
 
 
.ms-caldown Down-level browser support calendar day of week
 
.ms-datepickeriframe The position of the date chooser popup calendar when creating or editing a new list item
 
 
.ms-datepicker The date chooser popup calendar when creating or editing a new list item
 

.ms-datepicker style

.ms-dpdow The line under the weekday names in the date chooser popup calendar when creating or editing a new list item
 

 .ms-dpdow style

.ms-dpday Text of date numerals in the current month in the date chooser popup calendar when creating or editing a new list item
 

.ms-dpday style

.ms-dpselectedday Text and background of the selected date in the date chooser popup calendar when creating or editing a new list item
 

.ms-dpselectedday style

.ms-dpnonmonth Text of date numerals which are not part of the current month in the date chooser popup calendar when creating or editing a new list item
 

.ms-dpnonmonth style

.ms-dphead The header containing the month name and navigation arrows in the date chooser popup 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
 
<<   >>
.ms-dpfoot The "Today's date" text and the line above it in the date chooser popup calendar when creating or editing a new list item
 

 .ms-dpfoot style

IMG.ms-button Sets the cursor to hand for buttons
 
.ms-announcementtitle Titles in the Announcements list view on the home page
 

.ms-announcementtitle style

.ms-homepagetitle:Hover The list name in a list view

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

.ms-homepagetitle style
.ms-discussionseparator The space between discussion threads
 
 
.ms-summarytitlebarframe




 
Unused  
.ms-summarytitlebar a:link
.ms-summarytitlebar a:visited
.ms-summarytitlebar
.ms-summarytitlebartitle
.ms-
summarytitlebartitle:hover
img.thumbnail Image Libraries: Color behind thumbnail in the Image Preview area on the left navigation bar

tr.ms-imglibselectedrow , tr.ms-highlight Color of a row in an image library when it is selected.  Used in the selected pictures view.
 
 
.ms-imglibthumbnail The background for the thumbnails in thumbnails view. Border color should be the same with img.thumbnail above.
 
span.thumbnail Internal usage, please don’t alter.
 
 
span.userdata Internal usage, please don’t alter.
 
.ms-imglibmenuarea The background of the previous and next command in filmstrip view
 
a.ms-imglibPreviewTitle Internal usage, please don’t alter.
 
table.ms-imglibPreviewTable Internal usage, please don’t alter.
 
.UserShadedRegion Shaded areas inside webparts
 
sample text
.UserCaption Text areas inside webparts
 
sample text
.UserConfiguration Text areas inside webparts
 
sample text
.UserDottedLine Dotted line in WebParts
 
.UserButton, .UserInput, .UserSelect Input boxes in WebParts
 
Sample Text
.UserNotification Text areas inside Webparts
 
Sample Text
.UserToolBarTextArea

 

Spacing for elements on a toolbar inside webparts
 
sample text
.UserToolBarTextArea a: link  
.UserToolBarTextArea a: visited sample text
.UserToolBarTextArea a: hover sample text
.UserToolbarDisabledLink Elements in a toolbar in a Webpart
 
sample text
.UserToolbarImage sample text
.UserToolBarImageArea sample text
.UserToolbarSelectedImage sample text
.UserGenericHeader Header text inside Webparts
 
sample text
.UserGeneric Default text inside Webparts
 
sample text
.UserGenericBody Indented body text inside Webparts
 
sample text
.UserGenericText Generic text to be used in all web parts
 
 
.UserBackground Background area inside Webparts
 
 
.UserSectionTitle Form title inside Webparts
 
sample text
.UserSectionHead Control labels inside Webparts
 
sample text
.UserSectionBody Instructional text on a control inside a Webpart
 
sample text
.UserControlGroup Area of a form control i nside Webparts
 
.UserSectionFooter Area at bottom of user form containing dotted line and command buttons
 
 
.UserFooter Area at bottom of a form
 
 
.UserCommandArea Command button area at bottom of user form
 
.UserToolbar Toolbar inside Webparts
 
sample text
.UserCellSelected A selected cell in a Webpart
 
sample text
.UserCell A cell in a Webpart
 
sample text
.UserGenericBulletItem A bulleted item in a Webpart
 
sample text
.ms-ToolPaneFrame Background of the Webpart toolpane interior
 
sample text
.ms-ToolPaneBody Body of the Webpart toolpane
 
sample text
.ms-ToolPaneBorder Border around the Webpart toolpane
 
sample text
.ms-ToolPaneHeader Header of the Webpart toolpane
 
sample text
.ms-ToolPaneClose Area around the "x" button to close the toolpane
 
sample text
.ms-ToolPaneTitle Title of the toolpane
 
sample text
.ms-ToolPaneFooter Footer area of the toolpane
 
sample text
.ms-ToolPaneError Error messages that show up in the toolpane
 
sample text
.ms-ToolPaneInfo Information messages that show up in the toolpane
 
sample text
.ms-ToolPartSpacing Spacing between parts
 
sample text
.ms-ToolStripSelected Hover treatment for Toolstrip at the top of the Webpart toolpane
 
.ms-ToolStrip The Toolstrip at the top of the Webpart toolpane
 
 
.ms-TPHeader Header of the Webpart toolpane
 
sample text
.ms-TPBorder Border of the Webpart toolpane
 
sample text
.ms-TPTitle Title of the Webpart toolpane
 
sample text
.ms-TPBody Body of the Webpart toolpane
 
sample text
.ms-TPBody A:link, .ms-TPBody A:visited, .ms-TPBody A:hover sample text
.ms-TPCommands Commands on the Webpart toolpane
 
 
.ms-TPInput Commands on the Webpart toolpane
 
sample text
.ms-PropGridBuilderButton This class is used for the "..." buttons in the Webpart toolpane
 
...
.ms-BuilderBackground
 
The background of a dialog spawned from the Webpart property sheet
 
 
.ms-SPZone The borders of a zone control
 
sample text
.ms-SPZoneSelected The borders of a zone control when the insertion bar is active inside it
 
sample text
.ms-SPZoneIBar The insertion bar which shows which zone the user is dragging a part into
 
 
.ms-SPZoneLabel The label on a zone
 
sample text
.ms-SPZoneCaption The caption of the text inside a zone
 
sample text
.ms-WPDesign Background in a Webpart design mode
 
sample text
.ms-WPMenu Area around the menu
 
sample text
.ms-WPTitle The title of a Webpart
 
sample text
.ms-WPTitle A:link, .ms-WPTitle A:visited sample text
.ms-WPTitle A:hover sample text
.ms-WPSelected Border around a Webpart when it is selected
 
.ms-WPBody The contents of a Webpart sample text
.ms-WPBody TABLE, .ms-TPBody TABLE sample text
.ms-WPBody A:link, .ms-WPBody A:visited sample text
.ms-WPBody A:hover sample text
.ms-WPBody th, .ms-TPBody th sample text
.ms-WPBody TD sample text
.ms-WPBody h1, .ms-TPBody h1 sample text
.ms-WPBody h2, .ms-TPBody h2 sample text
.ms-WPBody h3, .ms-TPBody h3 sample text
.ms-WPBody h4, .ms-TPBody h4 sample text
.ms-WPBody h5, .ms-TPBody h5 sample text
.ms-WPBody h6, .ms-TPBody h6 sample text
.ms-WPBorder The border around a Webpart
 
sample text
.ms-HoverCellActive Cell treatment on Hover throughout the UI
 
sample text
.ms-HoverCellInActive
sample text
.ms-HoverCellActiveDark
sample text
sample text
sample text
.ms-SPLink "Modify Page" link
 
sample text
.ms-SPLink A:link, .ms-SPLink A:visited sample text
.ms-SPButton Font for buttons
 
sample text
.ms-PartSpacingVertical Vertical Spacing between Webparts
 
 
.ms-PartSpacingHorizontal Horizontal Spacing between Webparts

 

 
.ms-WPHeader The background area of a Webpart titlebar
 
sample text
.ms-rtApplyBackground Rich text editor classes  
.ms-tbButtonMouseOverDown
.ms-rtRemoveBackground
.ms-subsmanageheader Subscriptions: This is used for the “Frequency: Immediate” etc. section headers on MySubs.aspx / SiteSubs.aspx
 
.ms-subsmanagecell This is used for each subscription row
 
.ms-ConnError Error messages when authoring connections
 
 
.ms-underline This adds an underline for the description, items, and last modified text on the list of lists page
 
.ms-underlineback Same as ms-underline but adds a slight gray to the background, used for the titles of the list of lists page
 
.ms-back Background of gray and spacing
 
.ms-smallheader Used for the group names  (e.g. ‘Document Libraries’) on the list of lists page
 
.ms-smallsectionline Used as the underline for the group names on the list of lists page
 
.ms-tabselected Used for the tabs in a meetings workspace
 
.ms-tabinactive
.ms-tabinactive a:link
.ms-tabinactive a:hover
.ms-tabinactive a:visited
.ms-tabinactive a:hover
.ms-surveyHBar Survey Graphical Summary View

Vertical bars in a chart for rating questions
.ms-surveyHBarB
.ms-surveyVBar
.ms-surveyVBarB
.ms-surveyVBarBI
.ms-surveyVBarS
.ms-surveyVBarT
.ms-surveyVBarTC
.ms-surveyHR
.ms-surveyTotal Survey Graphical Summary View

Spacers in between verticals bars in chart for ratings questions
 
.ms-uploadborder Border around the multi-file upload control
 
.ms-uploadcontrol Background for selected text in the file list in the multi-file upload control
 
.ms-spaceBetContentAndButton Internal usage, please don’t alter.
 
 
.ms-ButtonHeightWidth
.ms-ButtonHeightWidth2
.ms-SpaceBetButtons
.ms-summarycustombody
.ms-summarystandardbody
.ms-stylebox Classes used by boxed view styles such as Document Details, Issues Boxed, etc.
.ms-stylelabel
.ms-styleheader
.ms-styleheader a:link, .ms-stylebody a:link
.ms-styleheader a:visited, .ms-stylebody a:visited
.ms-stylebody
.ms-styleheader a:hover, .ms-stylebody a:hover
.ms-alternating Background color for the shaded view style
.ms-MWSSelectedInstance Classes for the meetings workspace recurrence navigation bar
.ms-MWSInstantiated a:link, .ms-MWSInstantiated a:visited
.ms-MWSInstantiated a:hover
.ms-MWSUninstantiated a:link, .ms-MWSUninstantiated a:visited
.ms-MWSUninstantiated a:hover