This article has links to websites or programs outside of Scratch and Wikipedia. Remember to stay safe while using the internet, as we cannot guarantee the safety of other websites. |
For more information, see CSS on Wikipedia. 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.[1]
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) or W3Schools.
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-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 |
|
display
|
block, inline, none
|
inline
|
Format of the parented element | example display: inline 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 |
|
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 | |
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)