Help:CSS

From QED

Jump to: navigation, search

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 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: 

{|
|-
| {{bgc|{{period color|archean}}}} | Archean period color
|-
| {{bgc|{{period color|neoarchean}}}} | Neoarchean period color
|}
Archean period color
Neoarchean period color

Here {{bgc|{{period color|archean}}}} is just shorthand for style="background-color:rgb(226,0,122);". Both templates can be used in other contexts, e.g. 

<span {{bgc|red|color:white}}>White on red</span>

produces White on red.

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

Contents

Online Resources

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:

QED Stylesheets

<style>...</style> specifications

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

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

<span class=foo>Hello</span>

produces

Hello

In general, it is best to move all such style specifications to a 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

The outermost box is the area taken by a block-level element, the contents of which are placed in the innermost box.

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:

solid
dashed
dotted
double
groove
ridge
inset
outset

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

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