Help:Formatting

Most essential formatting of plain text can be achieved through distinct wikitext markup. The large number of raw HTML elements permitted by the editor create further opportunity for achieving complex styling, through inline tags and CSS.

Like section headings, lists and containers are important tools for organizing page content so that it is easy to locate and make sense of.

Using Microsoft Word 16.0 as a basis for coverage, the following is a collection of tips, tools and tricks which may be useful. This along with the font section also largely serve as an introduction to CSS properties and values.

Paragraph/Text

Feature	Markup	Result	HTML	Misc. notes	Library
Bullets	* Item 1 * Item 2 * Item 3	Item 1 Item 2 Item 3	<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>	Start the first on the next line of a table cell | pipe. Inside a template or parser function, use <nowiki /> followed by a newline (example) Bullet styling via the list-style-type: (or list-style-image:) attribute (target ul element by default)	disc circle square
Numbering	# Item 1 # Item 2 # Item 3	Item 1 Item 2 Item 3	<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>		None                         none upper-roman upper-alpha lower-alpha lower-roman
Multilevel list	* Item 1 ** Item 1a *** Item 1aI	Item 1 Item 1a Item 1aI	<ul> <li> Item 1 <ul> <li> Item 1a <ul> <li>Item 1aI</li> </ul> </li> </ul> </li> </ul>	(Applies to either of above list types)
Horizontal indent	: Block 1 :: Block 2 ::: Block 3	Block 1 Block 2 Block 3	<dl> <dd> Block 1 <dl> <dd> Block 2 <dl> <dd>Block 3</dd> </dl> </dd> </dl> </dd> </dl>	By default, new paragraphs do not warrant a horizontal indent as they might in more formal contexts. However, for some styling or especially on talk pages, use stacked as many times as necessary. See also "Tab override" gadget in user preferences to set tab key behavior.
Horizontal Line	----		<hr>	Must start on newline

Styling

Goal	CSS Property	Value	Example (Wikitext = HTML)		Notes / Comments
Align Left	text-align:	left;	Text	<p style="text-align: left">Text</p>
Center		center;	Text	<p style="text-align: center">Text</p>	Or just <center>Text</center> (tag ref.)
Align Right		right;	Text	<p style="text-align: right">Text</p>
Justify		justify;	This text is justified, meaning it will stretch to fill the entire width of its container, creating straight edges on both the left and right sides.	<p style="text-align: justify">This text is justified, meaning it will stretch to fill the entire width of its container, creating straight edges on both the left and right sides.</p>	Doesn't work with </span>
Line Spacing	line-height:	Any number (integer or decimal)	Double	<p style="line-height: 2.0;">Double</p>	Clearer comparison: 1.0 1.15 1.5 2.0 2.5 3.0
Shading	background-color: or* background:	#FFA500; orange; none;	#FFA500 Orange None	<p style="background-color: #FFA500">#FFA500</p> <p style="background-color: orange">Orange</p> <p style="background: none">None</p>	*If no other background- attributes are set. background-color: transparent; could override if necessary.
Borders
Bottom Border	border-bottom:	Units (px/em)	Text	<div style="padding: 4px; border-bottom: 0.7px solid #000;">Text</div>	See border: below for value info
Top Border	border-top:		Text	<div style="padding: 4px; border-top: 0.7px solid #000;">Text</div>
Left Border	border-left:		Text	<div style="padding: 4px; border-left: 0.7px solid #000;">Text</div>
Right Border	border-right:		Text	<div style="padding: 4px; border-right: 0.7px solid #000;">Text</div>
No Border	border:	none; 0;*	Text	<div style="padding: 4px; border: 0;">Text</div>	* Relating to border-style: and border-width: respectively; 0 preferred
All Borders		0.7px solid #000;;	Text	<div style="padding: 4px; border: 0.7px solid #000;">Text</div>	border-width:, border-style:, border-color: or together in border: ex. 2px solid blue;
Outside Borders	outline:
Inside Borders	box-shadow:	inset;
Diagonal Down Border	background-image:	linear-gradient();	Text	<div style="border: 2px solid black; width: 50px; height: 50px; --line-width: .7px; background-image: linear-gradient(to bottom left,transparent calc(50% - var(--line-width)), #000 calc(50% - var(--line-width)), #000 calc(50% + var(--line-width)), transparent calc(50% + var(--line-width)))">Text</div>	May look rough/pixelated on steeper angles
Diagonal Up Border			Text	<div style="border: 2px solid black; width: 50px; height: 50px; --line-width: .7px; background-image: linear-gradient(to top left,transparent calc(50% - var(--line-width)), #000 calc(50% - var(--line-width)), #000 calc(50% + var(--line-width)), transparent calc(50% + var(--line-width)))">Text</div>