Help: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/scratchwikiskin.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.

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
  1. list-style-position: outside
  2. example2example2
  3. example3example3


  1. list-style-position: inside
  2. example2example2
  3. 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
  1. list-style-type: lower-Greek
  2. example2
  3. example3


  1. list-style-type: square
  2. example2
  3. 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


  1. example
  2. example
  3. 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

  • This page was last modified on 9 October 2017, at 02:17.