252
edits
FireBrick Custom CSS: Difference between revisions
m
→Example - changing font size
m (→Example - changing font size: I'm going mad - it's @import - ten years since I looked at this stuff) |
|||
|
}
</syntaxhighlight>
This simple example has a couple of limitations: The vertical layout of the text within the footer is slightly off. Text layout is not good when the navigation list is a horizontal bar at the top, as opposed to being a vertical list on the left- or right-hand side.
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.
=== Using CSS @media ===
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.
=== Using CSS @import ===
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>@import</code> directive at the top of the file with a media-type qualifier within the directive eg <code>@import 'my_fb_print.css' print;</code>. This qualified import 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>@import</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.
=== Pulling in multiple .css files ===
== Testing - warning ==
| |||