# CSS Style Objects

Many MathJax components allow you to specify CSS styles that control
the look of the elements they create. These are described using CSS
style objects
, which are JavaScript objects that represent standard
CSS declarations. The main CSS style object is a collection of
name:value pairs where the name is the CSS selector that is being
defined, and the value is an object that gives the style for that
selector. Most often, the selector will need to be enclosed in
quotation marks, as it will contain special characters, so you would
need to use "#myID" rather than just #myID and "ul li"
rather than just ul li.

The value used to define the CSS style can either be a string
containing the CSS definition, or a javascript object that is itself a
collection of name:value pairs, where the name is the attribute
being defined and value is the value that attribute should be given.
Note that, since this is a JavaScript object, the pairs are separated
by commas (not semi-colons) and the values are enclosed in quotation
marks. If the name contains dashes, it should be enclosed in
quotation marks as well.

For example, jax/output/HTML-CSS/config.js includes the following
declaration:

styles: {

".MathJax_Display": {
"text-align": "center",
margin:       "1em 0em"
},

".MathJax .merror": {
"background-color": "#FFFF88",
color:   "#CC0000",
border:  "1px solid #CC0000",
"font-style": "normal",
"font-size":  "90%"
}

}

This defines two CSS styles, one for the selector
.MathJax_Display, which specifies its text alignment and margin
settings, and a second for .MathJax .merror, which specifies a
background color, foreground color, border, and so on.

You can add as many such definitions to a styles object as you
wish. Note, however, that since this is a JavaScript object, the
selectors must be unique (e.g., you can’t use two definitions for
"img", for example, as only the last one would be saved). If you
need to use more than one entry for a single selector, you can add
comments like /* 1 */ and /* 2 */ to the selector to make them
unique.

It is possible to include selectors like "@media print", in which
case the value is a CSS style object. For example:

styles: {
"@media print": {
".MathJax .merror": {
"background-color": "white",
border: 0
}
}
}

The various extensions and output processors include more examples of
CSS style objects, so see the code for those files for additional
samples. In particular, the extensions/MathMenu.js,
extensions/MathZoom.js, extensions/FontWarnsing.js, and
jax/output/HTML-CSS/jax.js files include such definitions.