Help:CSS
From Zelda Wiki, the Zelda encyclopedia
| |
| Zelda Wiki's Help Guide | |
|
Basic Editing: Getting Started Canon Policy Archiving Talk Pages | |
CSS stands for Cascading Style Sheets. It is a style sheet language most often used to style web pages written in HTML, with the purpose of separating presentation from content. It is used to stylize pages without changing the elements directly. One of the advantages of CSS is that the commands provided by the author can be overridden by a user's commands, allowing the page to look the way they prefer. This guide will teach you about using your own CSS pages so you can customize your view of the wiki.
Contents |
Selection
Before you can modify an element on a page, you first need to select it. This is done with selectors. You may use your browser's "Inspect Element", "View Source" or "Developer Mode" feature to aid in selection.
General
You can select an element anywhere on the page by using its id, class, or tag name. For example, say you have the following HTML code:
<span id="example" class="text">This is some text</span>
With CSS, the above can be identified as:
span <- tag #example <- id .text <- class span#example <- tag + id span.text <- tag + class
Note: Elements with an id should have a unique id. This means that each id should only appear once on the page.
Hierarchy
If you only want to choose elements that are descendants of another element, certain selectors must be used. For example, say you have the following HTML code:
<div id="container">
<span>Span1</span>
<span>Span2</span>
<div id="inner">
<span>Span3</span>
</div>
</div>
You can select the elements as follows:
div span <- span1, span2, span3 (all descendants of div#container) #container span <- span1, span2, span3 (all descendants of div#container) #inner span <- span3 (decedent of div#inner) div > span <- span1, span2 (children of div#container), span3 (child of div#inner) #container > span <- span1, span2 (children of div#container) #inner > span <- span3 (child of div#inner)
Advanced
For more information about selectors, visit this page.
Modification
Once you have selected the target, you can modify it. This can be done in the following format:
table#basictable {
style: style;
}
The stylings used are the same as HTML stylings for text, so you can find a reference at Help:HTML.
In addition, you can combine multiple elements together in the same styling by separating them with commas before beginning the curly bracket. It looks like this:
div.textblock, table#basictable {
style: style;
}
Previewing
To preview the code on a certain page, you can use your browser's "Inspect Element" or "Developer Mode" feature. You may also preview the page using <css> tags. For example, the following code remove the sidebar when previewed:
<css>
#mw-panel {
display:none;
}
</css>
Saving the Result
You can save the resulting CSS on a user page. Only you will be able to see the resulting changes. Depending on the skin you are using, you may want to save your code as common (ie. all skins), vector or monobook. Do not include <css> tags.
Alternatively, you may save the <css> tags on the page or article you are currently viewing. This is a global change that everyone can see when accessing that page.
See also: Cascading Style Sheets on 
