How to Use Operating System Styles in CSS

Share this article

CSS system styles
One of the lesser-known features of CSS2.1 is the ability to define fonts and colors that are in use by the underlying Operating System theme. This can be useful in situations when you require tighter OS integration, e.g. HTML help files, Adobe AIR or perhaps offline web applications. Before we begin, there are a few caveats:
  • Do not rely on these properties working in all OS/browser combinations. If your application must work in Opera on BeOS, then I’d recommend you test it first!
  • The properties have been deprecated in CSS3 in favor of the appearance value type (although browser support is extremely limited at this time).
  • There is nothing to prevent the user defining unusual, clashing, or ugly color schemes in their OS. Pages will reflect their choices — not your designer’s.

System Fonts

System fonts are assigned using the ‘font’ property. Note that the family, size, and style are all assigned as appropriate, e.g.

body
{
	font: caption;
}
The following font values are available. The ‘Example’ column shows the current font set by your OS.
PropertyDescriptionExample
captionControls font (buttons, drop-downs, etc.)ABC abc 123
iconIcon label fontABC abc 123
menuMenu fontABC abc 123
message-boxDialog box fontABC abc 123
small-captionSmall control labelsABC abc 123
status-barStatus bar fontABC abc 123

System Colors

System colors can be assigned to to any property that expects a color value, e.g.

body
{
	color: WindowText;
	background-color: Window;
	border: 2px solid ActiveBorder;
}
The following color values are available. They are shown in CamelCase for legibility, but any casing is valid. The ‘Example’ column shows the color set by your OS.
PropertyDescriptionExample
ActiveBorderActive window border 
ActiveCaptionActive window caption 
AppWorkspaceBackground color of multiple document interface 
BackgroundDesktop background 
ButtonFaceFace color for 3D display elements 
ButtonHighlightDark shadow for 3D display elements (facing away from light) 
ButtonShadowShadow color for 3D display elements 
ButtonTextText on push buttons 
CaptionTextText in caption, size box, and scrollbar arrow box 
GrayTextGrayed (disabled) text (#000 if not supported by OS) 
HighlightItem(s) selected in a control 
HighlightTextText of item(s) selected in a control 
InactiveBorderInactive window border 
InactiveCaptionInactive window caption 
InactiveCaptionTextColor of text in an inactive caption 
InfoBackgroundBackground color for tooltip controls 
InfoTextText color for tooltip controls 
MenuMenu background 
MenuTextText in menus 
ScrollbarScroll bar gray area 
ThreeDDarkShadowDark shadow for 3D display elements 
ThreeDFaceFace color for 3D display elements 
ThreeDHighlightHighlight color for 3D display elements 
ThreeDLightShadowLight color for 3D display elements (facing the light) 
ThreeDShadowDark shadow for 3D display elements 
WindowWindow background 
WindowFrameWindow frame 
WindowTextText in windows 
Would these properties be useful in your next project?

Frequently Asked Questions about CSS System Styles

What are CSS System Styles and why are they important?

CSS System Styles are a set of predefined styles that are native to the operating system or browser. They are important because they allow developers to create web pages that can adapt to the user’s system preferences, providing a more personalized and accessible user experience. For instance, if a user has set their system to dark mode, a web page styled with CSS System Styles can automatically adjust to match this setting.

How do CSS System Styles differ from regular CSS styles?

Regular CSS styles are defined by the developer and remain the same regardless of the user’s system settings. On the other hand, CSS System Styles are dynamic and can change based on the user’s system preferences. This makes them a powerful tool for creating adaptable and user-friendly web designs.

How can I use CSS System Styles in my web design?

CSS System Styles can be used in your CSS code just like any other style. The main difference is that instead of specifying a fixed value, you use a system color keyword. For example, to set the background color to match the user’s system window background, you would use the code background-color: Window;.

What are some examples of CSS System Styles?

There are many different CSS System Styles that correspond to various aspects of the user’s system. Some examples include ButtonFace for the face color of a button, Highlight for the color of selected text, and WindowText for the color of text in windows.

Are CSS System Styles supported by all browsers?

CSS System Styles are widely supported by most modern browsers, including Chrome, Firefox, Safari, and Edge. However, it’s always a good idea to test your web design in multiple browsers to ensure compatibility.

Can I use CSS System Styles with other CSS styles?

Yes, CSS System Styles can be used in combination with other CSS styles. This allows you to create a design that is both adaptable and consistent with your brand.

How do CSS System Styles improve accessibility?

CSS System Styles improve accessibility by allowing web pages to adapt to the user’s system preferences. This can make it easier for users with visual impairments to navigate your site, as they can adjust their system settings to meet their needs.

Can I override CSS System Styles?

Yes, you can override CSS System Styles by specifying a different style in your CSS code. However, keep in mind that this will negate the adaptability benefits of using system styles.

Are there any drawbacks to using CSS System Styles?

One potential drawback to using CSS System Styles is that they can lead to inconsistent designs across different systems. However, this can be mitigated by using a combination of system styles and regular CSS styles.

Where can I learn more about CSS System Styles?

There are many resources available online for learning about CSS System Styles. Some recommended sites include the Mozilla Developer Network, W3C, and SitePoint.

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week