Wikipedia:WikiProject Usability/HTML: Difference between revisions

Revision as of 21:56, 29 June 2005

Revision as of 22:02, 29 June 2005

Line 41:

==== Basic attributes ====

''Please note: this page does not encourage the use of bright, or non-standard colors. They are used for clearer examples. Please see [[Wikipedia:WikiProject_Usability/Color]]''

<!-- you'll note how messy this section looks in the editor, due to all the code -->

* '''"color: [color];"''' - the foreground color.

** <tt><nowiki><span style="color:red;">test</span></nowiki></tt> --> <span style="color:red;">test</span>

* '''"background: [color];"''' - 'shorthand' for several background properties, including image. Used for background color

** <tt><nowiki><span style="background:black; color:#ff0000;">test</span></nowiki></tt> --> <span style="background:black; color:#ff0000;">test</span>

* '''"border:''' [thickness] [type] [color];" - the border: color, thickness, type. Type may be solid, outset, dashed, and others

Line 53 ⟶ 56:

** <tt><nowiki>foo<span style="border: 1px solid red; background:transparent;">test</span>bar</nowiki></tt> --> foo<span style="border: 1px solid red; background:transparent;">test</span>bar

*** You'll note that "transparent" is used for the background here. The standard background of wikipedia is #f8fcff, so if you put "white" and neglect the border, you <span style="background:white;">may notice a very slight (but innapropriate) difference in color.</span> Transparent should usually be used.

* '''"padding: [size];"''' - usually, the "spacing" on the ''inside'' of the border. 1, 2, or 4 sizes may be specified.

Line 60 ⟶ 64:

** <tt><nowiki>foo<span style="border: 1px solid red; padding: .1em .5em 1em 2em;">test</span>bar</nowiki></tt> --> foo<span style="border: 1px solid red; padding: .1em .5em 1em 2em;">test</span>bar

***Four values: [top] [right] [bottom] [left] (clockwise).

* '''"margin: [size];"''' - usually, the "spacing" on the ''outside'' of the border. It's also the distance at which other elements should be "kept away" at. 1, 2, or 4 sizes may be specified, exactly as in "padding". Many browsers will ignore "top/bottom" for margins on ''inline'' elements.