Tur:Yardım:CSS

Users familiar with Cascading Style Sheets (CSS) can customize the look of the Scratch Wiki by creating a subpage of their userpage and naming it after the skin plus a .css postfix, "User:Yourname/scratchwikiskin2.css" for example. CSS placed in this sheet overrides the skin's CSS. This requires your site admin to have enabled this feature — if it is enabled, you will see advice text at the top of your custom CSS page about clearing your browser's cache. This feature was disabled on the Scratch Wiki, but was later enabled.

CSS is also widely used on the wiki in divisions, or dividers (often boxes) placed around text. For example, one can create a division by the following code:

<div style=" ">

in which the styling elements are placed between the quotations and separated by semicolons.

Styling Properties

The following table lists many CSS styling properties and their uses. A complete list and tutorials can be found on the Mozilla Developer Network (MDN).

CSS styles

Property	Values	Default Value	Description	Example
background-color	Any color, by name, or hex code	transparent	Background color of a parented element	background-color: teal background-color: #58FAAC
color	Any color, by name, or hex code	None	Color of foreground text	color: blue color: #F5A9D0
font-family	Any named font. Common fonts: Arial, Helvetica, Times New Roman, Verdana Generic fonts: Serif, Sans serif, Cursive, Fantasy, Monospace	None	Font for rendering related element content, first font in the property value has priority	font-family: Verdana, sans-serif font-family: 'Times New Roman', serif
font-size	Number plus unit, or xx-small, x-small, small, smaller, medium, large, larger, x-large, xx-large, %, Length	medium	Size of the font for rendering related element content	font-size:2em font-size: 75% font-size: larger
font-weight	normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900	normal	Weight the font should appear	font-weight: bolder font-weight: 900
font-style	normal, italic, oblique, inherit	normal	Sets a specific font style for a text	font-style: oblique
font-variant	small-caps, normal, inherit	normal	Specifies whether small-caps should be used	font-variant: small-caps
line-height	Number plus unit, number, %, normal, inherit	normal	Sets line height	line-height: 2 line-height: 1em
text-align	left, right, center, justify	None	Determines how text gets aligned to the page	text-align: right text-align: justify example
text-decoration	none, underline, overline, line-through	none	Special text effects	text-decoration: overline text-decoration: underline
list-style-position	inside, outside	outside	Wrap list text inside or outside bullet points	list-style-position: outside example2example2 example3example3 list-style-position: inside example2example2 example3example3
list-style-type	disk, circle, square, decimal, decimal-leading-zero, lower-alpha, upper-alpha, none, armenian, georgian, lower-greek, lower-latin, lower-roman, upper-latin, upper-roman, upper-greek	disc	Bullet type on lists	list-style-type: lower-Greek example2 example3 list-style-type: square example2 example3
display	block, inline, none	inline	Format of the parented element	example display: inline example example display: block example
top	Number plus unit, auto	auto	Absolute or relative positioning, sets top edge of parented element. Must be used with position attribute	Example located here
right	Number/Percentage number plus unit, auto	auto	Absolute or relative positioning, sets right edge of parented element. Must be used with position attribute	Example located here
bottom	Number/Percentage number plus unit, auto	auto	Absolute or relative positioning, sets bottom edge of parented element. Must be used with position attribute	Example located here
left	Number/Percentage number plus unit, auto	auto	Absolute or relative positioning, sets left edge of parented element. Must be used with position attribute	Example located here
position	static, absolute, relative, fixed	static	Method by which element is laid out	Example located here
visibility	collapse, visible, hidden, inherit	inherit	Indicates whether the parented element will show	example example example example
z-index	Number, auto	auto	Stacking order for objects	Example located here
border-style	none, dotted, dashed, solid, double, groove, ridge, inset, outset	Not defined	Shorthand property for style displayed for object borders	border-style: dotted dashed border-style: groove solid inset
border-width	Number, thin, medium, thick	Not defined	Shorthand property for width of border around an object	border-width: 0.2em border-width: thick 2px
border-color	Any color, by name, or hex code, transparent	Not defined	Shorthand property for color of border around an object	border-color: #0066FF border-color: transparent red
border	border-width+border-style+border-color	Not defined	Shorthand property for making a border around an object	border: 2px black dotted border: 0.5em #00FF80 ridge
float	left, right, none	none	Specifies whether an object should float to one side or the other	Example located here
height	Number plus unit, auto	auto	Display height for an object	height: 25px
width	Number plus unit, auto	auto	Display width for an object	width: 50px
margin	Number plus unit, auto	auto	Shorthand property for displaying margins on an object	margin: 20px
padding	Number plus unit, auto	auto	Shorthand property for displaying blank space around an object	padding: 20px
cursor	alias, all-scroll, auto, cell, context-menu, col-resize, copy, crosshair, default, e-resize, ew-resize, help, move. n-resize, ne-resize, nesw-resize, ns-resize, nw-resize, nwse-resize, no-drop, none, not-allowed, pointer, progress, row-resize, s-resize, se-resize, sw-resize, text, vertical-text, w-resize, wait, zoom-in, zoom-out, inherit	auto	Cursor appearance	cursor: cell cursor: no-drop
clear	left, right, both, none	none	Blocks element edges to other floating elements	Example located here
clip	rect, auto, inherit	auto	Clips absolutely positioned elements	Example located here
overflow	visible, hidden, scroll, auto, inherit	visible	Controls how content overflows an element box	overflow: scroll example example example overflow: visible; example example example
direction	ltr, rtl, inherit	ltr	Specifies text/writing direction	direction: rtl example example example
letter-spacing	Number plus unit, normal, inherit	normal	Manages space between characters in text	letter-spacing: 4px letter-spacing: -1px
text-indent	Number plus unit, %, inherit	0	Sets the indentation of the first line in a text block	text-indent: 1em text-indent: -3px
text-shadow	h-shadow, v-shadow, blur(optional), color(optional)	None	Sets text shadow effects	text-shadow: 5px 5px; text-shadow: 5px 10px 2px blue;
text-transform	none, capitalize, uppercase, lowercase, inherit	none	Controls text capitalization	TEXT-TRANSFORM: LOWERCASE
vertical-align	baseline, sub, super, top, text-top, middle, bottom, text-bottom, inherit	baseline	Sets vertical element alignment	e vertical-align: 30% e
white-space	normal, nowrap, pre, pre-line, pre-wrap, inherit	normal	Specifies how white-space inside an element is handled	white-space: pre example example
word-spacing	Number plus unit, normal, inherit	normal	Manages space between words in text	word-spacing: -3px example example
border-radius	Number plus unit, %	0	Shorthand property for rounding border edges	border-radius: 15px 5px 10px 20px
-moz-border-radius	Number plus unit, %	0	Shorthand property for rounding border edges, Gecko's equivalent to border-radius	-moz-border-radius: 5px 16px 8px 9px
-webkit-border-radius	Number plus unit, %	0	Shorthand property for rounding border edges, Apple's equivalent to border-radius	-webkit-border-radius: 12px 7px 19px 8px
box-shadow	h-shadow, v-shadow, blur(optional) spread(optional) "inset"(optional)	None	Attaches one or more drop-shadows to an element box	box-shadow: 8px 4px 10px 9px #5D5462 inset

See Also

• Help:Preferences
• Help:HTML
• mediawikiwiki:Manual:Gallery of user styles (no official skins)