252
edits
FireBrick Custom CSS: Difference between revisions
m
→Example - changing font size: explanation of @media use
m (→Example - changing font size: explanation of @media use) |
|||
|
== Example - changing font size ==
The following example CSS greatly reduces the font sizes in use in the Firebrick's web pages
<syntaxhighlight lang=css>
}
</syntaxhighlight>
Note that there is no space after the dot in <code>div.main</code> etc. This is essential; adding white space at this point would alter the meaning - see CSS selectors.
The <code>@media screen</code> qualifier over the given block is used in this case to restrict any preference change to only apply to the display of the Firebrick’s web pages on a screen and here the customisations do not apply when a page is printed. On the other hand, the <code>@media print</code> qualifier is often used to customise presentation when pages are printed, such as: getting rid of all colour, using serif fonts, changing the appearance of external links to show the actual URI, or simplifying content and hiding all unwanted or irrelevant material such as navigation lists, footers, branding. Completely separate 'print'- and 'screen' stylesheets can be maintained in separate .css files and these files can be conditionally included by reference in a master .css file using the CSS <code>@include</code> directive at the top of the file with a media-type qualifier within the directive. This qualified-include form is concise compared with using the block qualifier and in theory might minimise the size of an initial CSS download, depending on the browser. A general disadvantage of <code>@include</code> is the latency introduced by having additional http requests, some of which can not be parallelised, so this delays rendering time, unless of course the CSS is already cached.
In fact, using the CSS <code>@include</code> directive allows multiple .css files to be pulled in, which gets around the restriction of only being allowed to fetch a single .css file if only more than one URI value is not permitted in the single <code>css-url</code> attribute.
== Testing - warning ==
| |||