Warning: jsMath requires JavaScript to process the mathematics on this page.
If your browser supports JavaScript, be sure it is enabled.

View source

From QED

for Help:CSS

Jump to: navigation, search

You can view and copy the source of this page:

CSS, an acronym for '''Cascading Style Sheets''', is used to specify stylistic aspects of web pages.

If you want to modify attributes such as color and font size on {{qed}} pages, you are encouraged to use existing CSS classes or [[Help:templates|templates]] or to create new ones, but you can also use CSS directly. Typically, this is done using the "style=" parameter. 

Consider for example the following specification, which produces the table shown immediately below it:

<pre><nowiki>{|
|-
| {{bgc|{{period color|archean}}}} | Archean period color
|-
| {{bgc|{{period color|neoarchean}}}} | Neoarchean period color
|}</nowiki></pre>
{|
|-
| {{bgc|{{period color|archean}}}} | Archean period color
|-
| {{bgc|{{period color|neoarchean}}}} | Neoarchean period color
|}

Here <nowiki>{{bgc|{{period color|archean}}}}</nowiki> is just shorthand for
{{bgc|{{period color|archean}}}}. Both templates can be used in other contexts, e.g.

<pre><nowiki><span {{bgc|red|color:white}}>White on red</span></nowiki></pre>
produces <span {{bgc|red|color:white}}>White on red</span>.

The help page on [[Help:Specifying Colors in Tables|Specifying Colors in Tables]] contains information about CSS that can be used both in tables and elsewhere.

==Online Resources==
* CSS2.1 specification: http://www.w3.org/TR/CSS21
* CSS2 reference: http://www.w3schools.com/CSS/CSS_reference.asp
* CSS tutorial: http://www.w3schools.com/css
* CSS at MDC: https://developer.mozilla.org/en/CSS_Reference

Browser-compatibility is a major consideration in choosing which CSS features to use, and so browser-compatibility tables such as the following are very useful:
* http://www.quirksmode.org/css/contents.html
* http://kimblim.dk/css-tests/selectors

== {{qed}} Stylesheets==
* Site-wide: [[MediaWiki:Common.css]]
* Folder-specific: MediaWiki:FOLDER/monobook.css (where FOLDER is the name of the folder)
* Subject to "my preferences" selection: [[MediaWiki:Monobook.css]]

==<nowiki><style>...</style></nowiki> specifications==

You can add CSS specifications on a page-by-page basis by using the HTML <nowiki><style></nowiki> tag within an <nowiki><html></nowiki> section.  For example:

<pre><nowiki><html><style type=text/css>
.foo {color:green;}
</style></html>

<span class=foo>Hello</span>
</nowiki></pre>
produces

<html><style type=text/css>
span.foo {color:green;}
</style></html>

<span class=foo>Hello</span>

In general, it is best to move all such style specifications to a [[Help:template|template]] to facilitate reuse and maintenance, and to keep style specifications separate from content.

=={{qed}} CSS Classes==
For predefined CSS classes intended for tables, see [[Help:Tables#Predefined Table Classes]].

=={{qed}} Templates==
For color-related templates, see [[Help:Colors]].

For templates intended to style table cells, see [[Help:Table cell templates]].

==CSS Box Model==
<image src=CSS_Box_Model.gif auto=center href=# >The outermost box is the area taken by a block-level element, the contents of which are placed in the innermost box.</image>

All HTML block-level elements have five CSS-defined spacing properties as illustrated in the above box:
*height
*width
** specify in pixels or as ''thin'', ''medium'', or ''thick''
*margin
*padding
*border
** border-top, border-left, border-bottom, border-right

A border style can be specified as:
{|
|<div style="border:solid; margin:1em; width:5em;">solid</div>
|<div style="border:dashed; margin:1em; width:5em;">dashed</div>
|<div style="border:dotted; margin:1em; width:5em;">dotted</div>
|<div style="border:double; margin:1em; width:5em;">double</div>
|<div style="border:groove; margin:1em; width:5em;">groove</div>
|<div style="border:ridge; margin:1em; width:5em;">ridge</div>
|<div style="border:inset; margin:1em; width:5em;">inset</div>
|<div style="border:outset; margin:1em; width:5em;">outset</div>
|}

The width, color, and style of the border or any of its four segments can be specified together, e.g. style="border:2px orange solid;"

==See also==
* [[MediaWiki:Color Names|Color Names]]
* [[Template:fs]] &mdash; font-size
* [[:Category:CSS Template]]

Templates used on this page:

Return to Help:CSS.

Retrieved from "http://qed.princeton.edu/main/Help:CSS"

View source

From QED

Views

Personal tools

Navigation

princeton

Search

Toolbox

View source

From QED

Views

Personal tools

Navigation

princeton

Search

Toolbox

Tag This!