Help:CSS: Difference between revisions
Greenpickle (talk | contribs) m (gah.) |
mNo edit summary |
||
Line 1: | Line 1: | ||
{{rewrite}} | |||
#''Be familiar with [[Help:Color codes|hex colors]] before reading this.'' | #''Be familiar with [[Help:Color codes|hex colors]] before reading this.'' | ||
#''Many of the codes shown on this page can be used as {{link|Help|table}} styles.'' | #''Many of the codes shown on this page can be used as {{link|Help|table}} styles.'' | ||
Line 11: | Line 12: | ||
Consider the following line: | Consider the following line: | ||
<pre>body { | <pre>body { | ||
color: #00FF00; | |||
} | } | ||
</pre> | </pre> | ||
The selector/element that was edited was ''body'' | The selector/element that was edited was ''body'' - all the general text on a page. The property/attribute was ''color'' - text color. The value was ''#00FF00'' - making all text a green color. | ||
Note the syntax for CSS. The selector is defined first, then an opening brace (<tt>{</tt>) "opens" the element for editing. Then the property appears, with a colon (<tt>:</tt>) after it, then the value (hex colors must have the # sign). Each time a value is set, a semicolon (<tt>;</tt>) is required at the end (except for the last line). Multiple lines of properties and redefined variables can occur within the curly braces (<tt>{ }</tt>), and all affect the same selected element. | Note the syntax for CSS. The selector is defined first, then an opening brace (<tt>{</tt>) "opens" the element for editing. Then the property appears, with a colon (<tt>:</tt>) after it, then the value (hex colors must have the # sign). Each time a value is set, a semicolon (<tt>;</tt>) is required at the end (except for the last line). Multiple lines of properties and redefined variables can occur within the curly braces (<tt>{ }</tt>), and all affect the same selected element. | ||
<pre>selector { | <pre>selector { | ||
property1: value; | |||
property2: value; | |||
property3: value; | |||
} | } | ||
</pre> | </pre> | ||
Line 27: | Line 28: | ||
<pre>selector1, | <pre>selector1, | ||
selector2 { | selector2 { | ||
property: value; | |||
} | } | ||
</pre> | </pre> | ||
Line 57: | Line 58: | ||
==Selectors== | ==Selectors== | ||
===Simple selectors=== | ===Simple selectors=== | ||
There are three main types of selectors: HTML elements, classes, and IDs. | There are three main types of selectors: HTML elements, classes, and IDs. These are as follows: | ||
*Elements select plain HTML tags, such as ''<a>'' and ''<img>''. | *Elements select plain HTML tags, such as ''<a>'' and ''<img>''. The selector is simple the text inside the angled parentheses, such as ''a'' and ''img''. | ||
*Classes are properties that almost any HTML element can be given, and define it with a given name. | *Classes are properties that almost any HTML element can be given, and define it with a given name. To select an element of a certain class, append the class name with a dot, like ''.classname''. | ||
*IDs are similar to classes, but can only occur once on the page. | *IDs are similar to classes, but can only occur once on the page. Select them with a hash symbol (<tt>#</tt>), like ''#idname''. | ||
Since element selectors refer to HTML tags, they are common on all websites; classes and IDs, however, are different on every site, and those used in wikis will only work in wikis. | Since element selectors refer to HTML tags, they are common on all websites; classes and IDs, however, are different on every site, and those used in wikis will only work in wikis. Keep in mind that some selectors will only take certain values (experiment!). The following is a table of some important simple selectors for wiki skins: | ||
{|border=1 cellpadding=3 cellspacing=0 style="border-collapse:collapse; border-color: #f77; background: #fee;" | {|border=1 cellpadding=3 cellspacing=0 style="border-collapse:collapse; border-color: #f77; background: #fee;" | ||
Line 125: | Line 126: | ||
===Compound selectors=== | ===Compound selectors=== | ||
Selectors can be put together to choose, say, every link that is inside a paragraph element; this is done using spaces, so those links could be selected using ''p a''. | Selectors can be put together to choose, say, every link that is inside a paragraph element; this is done using spaces, so those links could be selected using ''p a''. The second selector does not have to be directly inside the first, only somewhere within it, and it is also possible to use three selectors together, or more. | ||
===Advanced selectors=== | ===Advanced selectors=== | ||
Firstly, there are ''pseudo-classes''. | Firstly, there are ''pseudo-classes''. These are not really there, and are "created" by the CSS. A normal element must be used for the pseudo-element to be based on, and these are separated by a colon (<tt>:</tt>). For example: | ||
<pre>a:hover {color: #aaa;}</pre> | <pre>a:hover {color: #aaa;}</pre> | ||
makes links grey when the cursor hovers over them. | makes links grey when the cursor hovers over them. The following is a list of some useful pseudo-classes: | ||
{|border=1 cellpadding=3 cellspacing=0 style="border-collapse:collapse; border-color: #f77; background: #fee;" | {|border=1 cellpadding=3 cellspacing=0 style="border-collapse:collapse; border-color: #f77; background: #fee;" | ||
!Selector!!Effect | !Selector!!Effect | ||
|- | |- | ||
|:hover||as seen above, applies style when element is hovered on. | |:hover||as seen above, applies style when element is hovered on. In Internet Explorer, this only works for links. | ||
|- | |- | ||
|:active||selects elements that currently have focus, such as buttons, text fields and links that have just been clicked | |:active||selects elements that currently have focus, such as buttons, text fields and links that have just been clicked | ||
Line 150: | Line 151: | ||
|} | |} | ||
Next, + and > can be used to select elements more precisely. | Next, + and > can be used to select elements more precisely. For example: | ||
<pre>ul + p {border-top: 1px solid #aaa;}</pre> | <pre>ul + p {border-top: 1px solid #aaa;}</pre> | ||
puts a solid grey border at the top of every paragraph directly after an unordered list, and: | puts a solid grey border at the top of every paragraph directly after an unordered list, and: | ||
Line 156: | Line 157: | ||
gives a light blue background to every list item directly inside an unordered list - as opposed to being in an element that itself is inside the ''<nowiki><ul></nowiki>'' tag. | gives a light blue background to every list item directly inside an unordered list - as opposed to being in an element that itself is inside the ''<nowiki><ul></nowiki>'' tag. | ||
Finally, the wildcard (*) can be used to select any element. | Finally, the wildcard (*) can be used to select any element. For example, ''p *'' selects every element in a paragraph. | ||
==List of properties and values== | ==List of properties and values== | ||
This is a list of some useful properties and some of the most important values that they take. | This is a list of some useful properties and some of the most important values that they take. Some values are measurements, and take units; those described here are possible options: | ||
*% - measured as a percentage of the container size (for ''width'', ''height'', ''padding'', ''margin'') or font size (for ''font-size''). | *% - measured as a percentage of the container size (for ''width'', ''height'', ''padding'', ''margin'') or font size (for ''font-size''). | ||
*em - measured in terms of the browser's set font size, where 1 is default and anything lower or higher varies the size proportionally. | *em - measured in terms of the browser's set font size, where 1 is default and anything lower or higher varies the size proportionally. Allows the values for ''width'', ''height'', ''padding'' and ''margin'' to be defined relative to the font size. | ||
*px - measured in pixels, the smallest measurement on a display. | *px - measured in pixels, the smallest measurement on a display. | ||
*pt - only vaguely useful for fonts, where it resizes it as it would appear in a word processing program. | *pt - only vaguely useful for fonts, where it resizes it as it would appear in a word processing program. | ||
Some properties, such as ''border'' ones, ''padding'' and ''margin'', take up to four values, one for each side of the element. | Some properties, such as ''border'' ones, ''padding'' and ''margin'', take up to four values, one for each side of the element. by adding ''-top'', ''-right'', ''-left'' or ''-bottom'' to the property, the value for one of these can be defined. Leaving the property as it is means values are defined as follows: | ||
*1 value: value is for all sides. | *1 value: value is for all sides. | ||
*2 values: first value is for top and bottom, second value is for right and left. | *2 values: first value is for top and bottom, second value is for right and left. | ||
Line 171: | Line 172: | ||
*4 values: assigned in the order top, right, bottom, left. | *4 values: assigned in the order top, right, bottom, left. | ||
Some properties take a colour value. | Some properties take a colour value. This can be either: | ||
*A pre-defined color name (check out [http://www.w3schools.com/css/css_colornames.asp this expansive list]); | *A pre-defined color name (check out [http://www.w3schools.com/css/css_colornames.asp this expansive list]); | ||
*a hex color in the form ''#000000'' or ''#000'', where each digit is a hexadecimal digit representing red, green or blue; or | *a hex color in the form ''#000000'' or ''#000'', where each digit is a hexadecimal digit representing red, green or blue; or | ||
Line 179: | Line 180: | ||
!Property!!Description!!Possible values | !Property!!Description!!Possible values | ||
|- | |- | ||
|font-family||the font or ''font face'' used||Common examples are ''times'', ''verdana'', ''helvetica'', ''arial'', ''serif'' and ''sans-serif''. | |font-family||the font or ''font face'' used||Common examples are ''times'', ''verdana'', ''helvetica'', ''arial'', ''serif'' and ''sans-serif''. A comma-separated list lets the browser choose the first one it has access to. | ||
|- | |- | ||
|font-size||self-explanatory||takes a measurement | |font-size||self-explanatory||takes a measurement | ||
Line 209: | Line 210: | ||
|background-color|| ||takes a color value | |background-color|| ||takes a color value | ||
|- | |- | ||
|background-image|| ||takes a ''complete'' url or a color value preceeding a URL - ''background: url(<nowiki>http://www.imagesite.com/youralbum/bgpic.jpg</nowiki>);'' or ''background: #055 url(<nowiki>http://www.example.com/image.png</nowiki>);''. | |background-image|| ||takes a ''complete'' url or a color value preceeding a URL - ''background: url(<nowiki>http://www.imagesite.com/youralbum/bgpic.jpg</nowiki>);'' or ''background: #055 url(<nowiki>http://www.example.com/image.png</nowiki>);''. In the latter case, the colour is shown if the image cannot be found, and it shows through transparent or translucent images. | ||
|- | |- | ||
|background-repeat||repeating pattern of a background image||''repeat'', ''repeat-x'', ''repeat-y'', ''no-repeat''; with x being repeating horizontally only and y being repeating vertically only. | |background-repeat||repeating pattern of a background image||''repeat'', ''repeat-x'', ''repeat-y'', ''no-repeat''; with x being repeating horizontally only and y being repeating vertically only. | ||
Line 217: | Line 218: | ||
|background||sets multiple background properties at once||e.g. ''background: #0ef url(http://example.com/img.jpg) no-repeat fixed;'' | |background||sets multiple background properties at once||e.g. ''background: #0ef url(http://example.com/img.jpg) no-repeat fixed;'' | ||
|- | |- | ||
|margin||sets the spacing of the element, the distance it pushes neighboring elements away. | |margin||sets the spacing of the element, the distance it pushes neighboring elements away. ''-top'', ''-left'', ''-right'' and ''-bottom'' are used to set side margins individually.||takes a measurement, can be negative | ||
|- | |- | ||
|padding||sets space inside an elements border, between that and its contents. ''-top'', ''-left'', ''-right'' and ''-bottom'' are used to set side padding individually.||takes a measurement | |padding||sets space inside an elements border, between that and its contents. ''-top'', ''-left'', ''-right'' and ''-bottom'' are used to set side padding individually.||takes a measurement | ||
Line 225: | Line 226: | ||
|list-style-type||sets the numbering type of list items in an ''ol'' element||''decimal'' (default), ''lower-roman'' (i, ii, v), ''upper-roman'' (I, II, V), ''lower-alpha'' (a, b, c), ''upper-alpha'' (A, B, C), ''none'' to remove the number | |list-style-type||sets the numbering type of list items in an ''ol'' element||''decimal'' (default), ''lower-roman'' (i, ii, v), ''upper-roman'' (I, II, V), ''lower-alpha'' (a, b, c), ''upper-alpha'' (A, B, C), ''none'' to remove the number | ||
|- | |- | ||
| | |border-radius||rounds an element's corners; the {{tem|radius}} should be used instead.||takes a measurement | ||
|- | |- | ||
|content||used with :before and :after pseudo-elements||''open-quote | |content||used with :before and :after pseudo-elements||''open-quote | ||
Line 266: | Line 267: | ||
.usermessage { | .usermessage { | ||
background: #00E400; | |||
border: 1.1px dashed #060; | |||
} | } | ||
Line 275: | Line 276: | ||
pre { border: 1px dashed #060; } | pre { border: 1px dashed #060; } | ||
ul { list-style- | ul { list-style-File: url(http://img.photobucket.com/albums/v506/Kimi12715/MarioWiki/uldot.png); } | ||
h1 { font-family:Jokerman; font-size:28px;color:#117611;} | h1 { font-family:Jokerman; font-size:28px;color:#117611;} | ||
h2,h3,h4,h5,h6 { color:#020; } | h2,h3,h4,h5,h6 { color:#020; } | ||
#catlinks { | #catlinks { | ||
border: 1px dotted #272; | |||
background-color: #fdfffd; | |||
padding: 4px; | |||
} | } | ||
#siteNotice { | #siteNotice { | ||
background: #fcfffc; | |||
} | } | ||
select { | select { | ||
border: 1px solid #2f6f2f; | |||
} | } | ||
input { | input { | ||
background-color: #fdfffd; | |||
} | } | ||
textarea { | textarea { | ||
font-family: Boukman Old Style; | |||
font-size: 14px; | |||
} | } | ||
</pre> | </pre> | ||
Result: Text background is a very light green. The usermessage table is redesigned to be green and have a dashed border. The logo has changed (notice after the url some specifications | Result: Text background is a very light green. The usermessage table is redesigned to be green and have a dashed border. The logo has changed (notice after the url some specifications - these are important to have for the logo). The pre border is green. The bullet image has changed (to a green circle). The title of each page is shown in a different font and color. The rest of the headers are a dark green. The categories table has a green background, border, and some space between the text and the border. The sitenotice has the same background as the content. The select box has a green border. The input box has a light green bg. Textarea has a different font. | ||
With the above selectors, properties, and values above, you should be able to stylize your wiki to your needs very well. | With the above selectors, properties, and values above, you should be able to stylize your wiki to your needs very well. |
Revision as of 12:46, April 18, 2011
It has been requested that this article be rewritten.
- Be familiar with hex colors before reading this.
- Many of the codes shown on this page can be used as table styles.
CSS (officially known as Cascading Style Sheets) sets how a page looks. On a special sub-page on your user page, you can override the Monobook skin to create your own personal look for the wiki.
Background
CSS has three parts: A selector is the variable (officially the HTML element you're editing). A property is the attribute of the element you want to change. Each property has a value, which is what you set to change the style of the selected element.
Consider the following line:
body { color: #00FF00; }
The selector/element that was edited was body - all the general text on a page. The property/attribute was color - text color. The value was #00FF00 - making all text a green color.
Note the syntax for CSS. The selector is defined first, then an opening brace ({) "opens" the element for editing. Then the property appears, with a colon (:) after it, then the value (hex colors must have the # sign). Each time a value is set, a semicolon (;) is required at the end (except for the last line). Multiple lines of properties and redefined variables can occur within the curly braces ({ }), and all affect the same selected element.
selector { property1: value; property2: value; property3: value; }
It is also possible to apply values to the properties of multiple selectors at once, separating them with a comma (,):
selector1, selector2 { property: value; }
Example
Wayoshi (talk) has been kind enough to allow us to use an old version of his CSS page for an example first, using all three parts of CSS.
Let's take a look at the "body" and "a" selectors:
body { font-family:Arial; font-size:10px;} a { color: #080; text-decoration: none; } a:visited { color: #050; } a:active { color: #111; } #p-personal a.new { color: #b00; } #p-personal a.new:visited { color:#800; } #bodyContent a.external { color: #0a0; } #bodyContent a.extiw:active { color: #020; }
- The body selector covers the basic text on any page (such as what you'd see as content on a wiki page).
- The a selector is the basic link that hasn't been clicked on recently.
- a:active is when you are in the midst of clicking the link.
- a:visited is the link that has been clicked recently. Often, it is simply the same color, but darker than a.
- #p-personal a.new is the wiki-unique link-that-hasn't-been-created (red) link.
- #p-personal a.new:visited is when you try to create a page, but don't right away, so it has a different color elsewhere until it's created, when it becomes a.
- #bodyContent a.external is the external link.
- #bodyContent a.extiw:active is when an external link is being clicked on.
- Result: Normal text is changed from 12px Verdana to 10px Arial. The normal and external links are now green. When clicking on a link, the color is a dark shade of green or gray. The uncreated page links are a darker shade of red.
- In the first example, different parts were on different lines. In fact, all of it can be on one line if you so choose. Incidentally, there is no need for a space inbetween the colon and the value as well.
Selectors
Simple selectors
There are three main types of selectors: HTML elements, classes, and IDs. These are as follows:
- Elements select plain HTML tags, such as <a> and <img>. The selector is simple the text inside the angled parentheses, such as a and img.
- Classes are properties that almost any HTML element can be given, and define it with a given name. To select an element of a certain class, append the class name with a dot, like .classname.
- IDs are similar to classes, but can only occur once on the page. Select them with a hash symbol (#), like #idname.
Since element selectors refer to HTML tags, they are common on all websites; classes and IDs, however, are different on every site, and those used in wikis will only work in wikis. Keep in mind that some selectors will only take certain values (experiment!). The following is a table of some important simple selectors for wiki skins:
Selector | Element(s) selected |
---|---|
body | contains the entire page |
a | anchor elements (links) |
p | paragraphs; on a wiki, <p> tags are inserted automatically. |
pre | the content in pre tags |
textarea | large input areas for text, including the edit box. Code that utilizes the Mario bg we use now can be found at MediaWiki:Monobook.css. |
ul | unordered (bullet) list |
ol | ordered (numbered) list |
li | list item |
h1, h2, h3, h4, h5, h6 | headers matching the number of = symbols used in wikisyntax; page titles are h1 and sidebar headers are h5 |
select | dropdown menus |
input | most kinds of input, including small text fields, buttons, checkboxes and radio buttons |
img | images |
.usermessage | the message table that appears when your talk page has been revised |
#content | the article content area |
#p-personal | the user links at the top-right of the page |
#p-cactions | page tabs; use #p-cactions li for individual tabs or #p-cactions li a for the links in each tab |
#p-logo | contains the logo; change the background-image property of #p-logo a to change the logo image |
#siteNotice | as says |
#catlinks | table at the bottom of categorised articles containing categories it's in |
#toc | table of contents |
#wpTextbox1 | the edit box |
.searchButton | the "Go" and "Search" buttons in the sidebar |
#searchInput | the search box text field |
.portal | includes user links, page tabs and sidebar boxes |
.pBody | sidebar boxes, not including the header |
#p-search | the sidebar's search box |
#p-tb | the sidebar's toolbar box |
#footer | the banner-like footer at the bottom of every page |
Compound selectors
Selectors can be put together to choose, say, every link that is inside a paragraph element; this is done using spaces, so those links could be selected using p a. The second selector does not have to be directly inside the first, only somewhere within it, and it is also possible to use three selectors together, or more.
Advanced selectors
Firstly, there are pseudo-classes. These are not really there, and are "created" by the CSS. A normal element must be used for the pseudo-element to be based on, and these are separated by a colon (:). For example:
a:hover {color: #aaa;}
makes links grey when the cursor hovers over them. The following is a list of some useful pseudo-classes:
Selector | Effect |
---|---|
:hover | as seen above, applies style when element is hovered on. In Internet Explorer, this only works for links. |
:active | selects elements that currently have focus, such as buttons, text fields and links that have just been clicked |
:visited | selects previously visited links |
:first-child | applies the style if the element is the first element in what contains it |
:last-child | applies the style if the element is the last element in what contains it |
:before | puts text before the element using the content property |
:after | puts text after the element using the content property |
Next, + and > can be used to select elements more precisely. For example:
ul + p {border-top: 1px solid #aaa;}
puts a solid grey border at the top of every paragraph directly after an unordered list, and:
ul > li {background-color: #ddf;}
gives a light blue background to every list item directly inside an unordered list - as opposed to being in an element that itself is inside the <ul> tag.
Finally, the wildcard (*) can be used to select any element. For example, p * selects every element in a paragraph.
List of properties and values
This is a list of some useful properties and some of the most important values that they take. Some values are measurements, and take units; those described here are possible options:
- % - measured as a percentage of the container size (for width, height, padding, margin) or font size (for font-size).
- em - measured in terms of the browser's set font size, where 1 is default and anything lower or higher varies the size proportionally. Allows the values for width, height, padding and margin to be defined relative to the font size.
- px - measured in pixels, the smallest measurement on a display.
- pt - only vaguely useful for fonts, where it resizes it as it would appear in a word processing program.
Some properties, such as border ones, padding and margin, take up to four values, one for each side of the element. by adding -top, -right, -left or -bottom to the property, the value for one of these can be defined. Leaving the property as it is means values are defined as follows:
- 1 value: value is for all sides.
- 2 values: first value is for top and bottom, second value is for right and left.
- 3 values: first value is for top, second for right and left, third for bottom.
- 4 values: assigned in the order top, right, bottom, left.
Some properties take a colour value. This can be either:
- A pre-defined color name (check out this expansive list);
- a hex color in the form #000000 or #000, where each digit is a hexadecimal digit representing red, green or blue; or
- rgb(red, green, blue), where red, green and blue are numbers up to 255 or 100%.
Property | Description | Possible values |
---|---|---|
font-family | the font or font face used | Common examples are times, verdana, helvetica, arial, serif and sans-serif. A comma-separated list lets the browser choose the first one it has access to. |
font-size | self-explanatory | takes a measurement |
font-style | sets italics | normal, italic, oblique |
font-variant | sets small-caps | normal, small-caps |
font-weight | sets bold | normal, bold (other values are possible, but barely distinguishable - bolder, lighter a number up to about 1000) |
font | sets multiple font attributes together | ...in the order font-style, font-variant, font-weight, font-size, font-family: font: italic small-caps lighter 13px Arial; |
text-align | self-explanatory | left, center, right, justify |
text-decoration | sets underline | none, underline, overline, line-through |
text-transform | sets caps | none, capitalize, uppercase, lowercase |
color | sets text color | takes a color value |
border-color | takes a color value | |
border-style | none, dotted, dashed, solid, double, groove, ridge, inset and outset | |
border-width | thin, medium, thick; or takes a measurement, suggested that they are only positive and integers if pixels - decimals such as 1.5px causes two sides to be 1px and two sides to be 2px | |
border1 | -top, -left, -right and -bottom are used to set side borders individually | used to define width, style and color in one declaration: border: 1px dashed black;, border: 2px solid #289; |
background-color | takes a color value | |
background-image | takes a complete url or a color value preceeding a URL - background: url(http://www.imagesite.com/youralbum/bgpic.jpg); or background: #055 url(http://www.example.com/image.png);. In the latter case, the colour is shown if the image cannot be found, and it shows through transparent or translucent images. | |
background-repeat | repeating pattern of a background image | repeat, repeat-x, repeat-y, no-repeat; with x being repeating horizontally only and y being repeating vertically only. |
background-attachment | sets whether a background image scrolls with the page or not | scroll, fixed |
background | sets multiple background properties at once | e.g. background: #0ef url(![]() |
margin | sets the spacing of the element, the distance it pushes neighboring elements away. -top, -left, -right and -bottom are used to set side margins individually. | takes a measurement, can be negative |
padding | sets space inside an elements border, between that and its contents. -top, -left, -right and -bottom are used to set side padding individually. | takes a measurement |
list-style-image | sets the bullet image of list items in a ul element | url(url);, none to remove the bullet |
list-style-type | sets the numbering type of list items in an ol element | decimal (default), lower-roman (i, ii, v), upper-roman (I, II, V), lower-alpha (a, b, c), upper-alpha (A, B, C), none to remove the number |
border-radius | rounds an element's corners; the {{radius}} should be used instead. | takes a measurement |
content | used with :before and :after pseudo-elements | open-quote
, close-quote , "text" , url(URL of an image) |
display | defines how element is displayed on the page | inline (in line with other elements), block (with line-breaks before and after), none (completely hides the element) |
visibility | hidden (element is replaced with whitespace, so it takes up space but isn't displayed) | |
overflow | defines what happens to content that doesn't fit in an element; the width and height of the element must be set | hidden (overflow isn't shown at all), auto (scrollbars are shown so that the overflow can be scrolled down or across to), visible (overflowing content is displayed outside the element) |
width, height | defines the width or height of an element if the display property has the block value | takes a measurement |
letter-spacing | normal or a measurement | |
word-spacing | normal or a measurement | |
line-height | the height of each line of text in a paragraph | normal or a measurement |
text-indent | defines the indentation of the first line of a paragraph of text | takes a measurement |
float | pushes an element to one side so that following content can flow around it | left, right, none |
clear | moves content following a floated element past it, to the first free line | left, right, both (defines types of floated elements that should be cleared) |
position | allows positioning of an object in different ways, using top, bottom, left and right properties | static (default), relative (offsets element's position from where it is by default), absolute (positions anywhere on the page, relative to its edges), fixed, (positions anywhere on the screen and remains there when scrolling, relative to the screen's edges) |
top, right, bottom, left | used with the position property to move elements | takes a measurement and moves element from the defined edge of the element, screen or page depending on the value of position |
1There are properties such as border-left-width, border-bottom-style, border-right-color as well.
Putting it All Together
Here's another excerpt from Wayoshi's CSS:
#content, #content table #p-cactions ul li a { background: #fcfffc; } .usermessage { background: #00E400; border: 1.1px dashed #060; } #p-logo a { background: url(http://img.photobucket.com/albums/v506/Kimi12715/MarioWiki/Wayoshilogo3.png) 35% 50% no-repeat !important; } pre { border: 1px dashed #060; } ul { list-style-File: url(http://img.photobucket.com/albums/v506/Kimi12715/MarioWiki/uldot.png); } h1 { font-family:Jokerman; font-size:28px;color:#117611;} h2,h3,h4,h5,h6 { color:#020; } #catlinks { border: 1px dotted #272; background-color: #fdfffd; padding: 4px; } #siteNotice { background: #fcfffc; } select { border: 1px solid #2f6f2f; } input { background-color: #fdfffd; } textarea { font-family: Boukman Old Style; font-size: 14px; }
Result: Text background is a very light green. The usermessage table is redesigned to be green and have a dashed border. The logo has changed (notice after the url some specifications - these are important to have for the logo). The pre border is green. The bullet image has changed (to a green circle). The title of each page is shown in a different font and color. The rest of the headers are a dark green. The categories table has a green background, border, and some space between the text and the border. The sitenotice has the same background as the content. The select box has a green border. The input box has a light green bg. Textarea has a different font.
With the above selectors, properties, and values above, you should be able to stylize your wiki to your needs very well.
Creating Your Monobook.css
Everyone has their own skin page at User:Username/monobook.css, with stress on the lower case m. When editing it, you should see some new text:
Tip: Use the 'Show preview' button to test your new CSS/JS before saving.
Whatever is entered into here is put into a style sheet (inbetween <style> and </style> tags). So, it is only necessary to put the list of selectors you want to change, with their properties and values, no "header" or "footer". If you want to add comments (text that the CSS won't read), put it inbetween /* and */. While you can preview the new CSS, some changes (like to the categories table) require you to save it first.
To see the changes after saving, hard refresh (press the F5 key, sometimes Ctrl + F5). Congratulations, you now have your own unique skin.