User:Inductiveload/Sandbox/Page styles

A CSS "stylesheet" can be applied to a Index page, which will allow every Page: namespace page within it to share the same styling. This CSS is automatically included when pages are transcluded using the  tag.

You do not need to use CSS for a work if you don't want to. It is provided to make life easier, not harder.

How to apply CSS
The CSS is read from the  subpage of the Index page. If this page does not exist, no styles will be applied by default by the ProofreadPage extension.

Note: this is different to the CSS field in the Index page, which only applies to the Page namespace and does not transclude.

You can redirect a  to another CSS page (for example if a set of volumes share the same styles) but the redirect page may need to have the "content model" changed to "wikitext" (from "sanitized-css"), which currently requires an admin.

How to write CSS
The CSS is a subset of full CSS called "sanitized CSS" provided by the TemplateStyles extension. It is the same as normal CSS, but it has restrictions on certain properties:
 * Some "rarer" CSS properties are not supported yet
 * Data URLs are not allowed
 * Image URLs not from Commons (or Wikisource) are not allowed

The CSS will only apply to the page content.

You can target CSS with "classes" and "IDs". Classes can apply to any number of elements (and any element can have any number of classes). Any element can have an ID, but it can have only one, and it should be the only element on the page with that ID.

Classes are targetted by CSS rules with a dot prefix, and IDs with a hash

The following spans have classes and IDs:

Paired with this CSS:

The result is something like this:

 

What to use CSS for
CSS is ideal for applying things that would otherwise require very tedious, repetitive or verbose inline styles:


 * Sizes and spacings of chapter headings
 * Sizes of block-quotes and surrounding spacings
 * Formatting of lists (for example adjusting bullet points)

Due to the ability to use selectors like, they are also excellent for reducing bloated inline styles in tables.

Be semantically useful
CSS is one half of the structure-style separation-of-concerns provided by HTML (structure) and CSS (style). To use it to its maximum effect, it should be used "semantically". That is to say, provide meaning to content and then use that meaning to apply styling.

For example, this is semantically empty:

whereas this gives meaning to the first words:

And can be targeted, along with all other characters' names, with this CSS:

You should also not abuse Wikicode syntax just because it gives you a shorthand for a different HTML tag which you want to use to target with CSS. and  provide   and   elements, representing "description list" terms and descriptions, respectively. Only use them where this makes semantic sense (for example, a glossary or dictionary).

If you have a list,  (unordered) or   (ordered) are usually the correct choices.

What not to use CSS for
You should not use Index-based CSS to provide:


 * Indentation of paragraphs, even if the original work had them (see Style guide). Indentation of list items is usually acceptable, within reason.
 * Removal of spaces between normal paragraphs, even if the original work did not have them (see Style guide)
 * Global changing of fonts (e.g. serif), justification, font size or line heights (even if the original work had small or dense print)

All these should be provided through Dynamic Layouts or user CSS.

Remember that not all users have full-capable CSS devices. For example, many e-readers can handle only a very tiny subset of CSS. You should not use CSS for any content that must be shown even if the reader doesn't support any CSS. For example, using CSS counters to number lists or  selectors to add dots after list numbers will result in the wrong thing being shown to users without CSS. As a rough guide, if it can't be copy-and-pasted, users will not see it when CSS is not available.

CSS vs templates
Some things are suitable to be handled by work-specific CSS, and other things are more suitable for a template. Consider using a template if:
 * The desired output requires "structural" elements like HTML tags.
 * The desired output is useful in other works (i.e. it is not work-specific). You can redirect the CSS subpage, but this means you forfeit any dedicated styles for this work.

You can still target the output of templates with work-specific CSS (the template in question should set a class to allow this).

What if I want CSS for a single page
If you have CSS that applies only to a single page (for example, a table), you can still use TemplateStyles as normal:



This must be applied in the body of the Page page for it to transclude. Remember that the CSS will apply to the whole context where this one Page is transcluded—it will not be limited to this page only. So, use an ID or class or limit the effects of your page rule. For example:

will affect all tables on the final destination page, but

applies only to the element with the ID.