Color
Syntax: color: name|hex|rgb|rgba|hsl|hsla;
Predefined colour name
Syntax: color: red;
Red
RGBA values
Syntax: color: rgb(255,0,0.5);
Red
Hexadecimal values
Syntax: color: #ff0000;
Red
HSL values
Syntax: color: hsl(0,100%,50%);
Red
RGB values
Syntax: color: rgb(255,0,0);
Red
HSLA values
Syntax: color: hsl(0,100%,50%,.5);
Red
Text Align
Syntax: text-align: left|right|center|justify;
Text Align Left
Syntax: text-align: left;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Text Align Center
Syntax: text-align: center;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Text Align Right
Syntax: text-align: right;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Text Align Justify
Syntax: text-align: justify;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Text Transform
Syntax: text-transform: uppercase|lowercase|capitalize|none;
Text Transform Uppercase
Syntax: text-transform: uppercase;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Text Transform Capitalize
Syntax: text-transform: capitalize;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Text Transform Lowercase
Syntax: text-transform: lowercase;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Text Transform None
Syntax: text-transform: none;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Text Decoration
Syntax: text-decoration: none|underline|overline|line-through|inherit;
Text Decoration None
Syntax: text-decoration: none;
Before text-decoration
Link to Google
After text-decoration
Link to Google
Text Decoration Overline
Syntax: text-decoration: overline;
Overline
Text Decoration Underline
Syntax: text-decoration: underline;
Underline
Text Decoration Line-Through
Syntax: text-decoration: line-through;
Line-Through
Letter Spacing
Syntax: letter-spacing: normal|value|inherit;
Letter Spacing Normal
Syntax: letter-spacing: normal;
Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
Letter Spacing PX
Syntax: letter-spacing: 2px;
Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
Letter Spacing Negative
Syntax: letter-spacing: -2px;
Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
Direction
Syntax: direction: ltr|rtl|inherit;
Direction LTR
Syntax: direction: ltr;
Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
Direction RTL
Syntax: direction: rtl;
Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
This doesn’t work because of the WordPress settings, however if you were building an HTML site not using a CMS this would be the syntax.
Text Indent
Syntax: text-indent: length|initial|inherit;
Text Indent PX
Syntax: text-indent: 20px;
Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
Text Indent EM
Syntax: text-indent: 3em;
Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
Text Indent %
Syntax: text-indent: 50%;
Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
Text Shadow
Syntax: text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
Text Shadow
Syntax: text-shadow: 4px 4px;
SHADOW
Text Shadow Colour and Blur
Syntax: text-shadow: 4px 4px 4px #0000ff;
SHADOW
Text Shadow Blur
Syntax: text-shadow: 4px 4px 4px;
SHADOW
Text Shadow Multi Colour
Syntax: text-shadow: 4px 4px #0000ff, 8px 8px #008000;
SHADOW
Text Shadow Colour
Syntax: text-shadow: 4px 4px #0000ff;
SHADOW
Text Shadow Multi Colour and Blur
Syntax: text-shadow: 4px 4px 4px #0000ff, 8px 8px 4px #008000;
SHADOW
Vertical Align
Syntax: vertical-align: baseline|length|%|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;
Baseline
Syntax: vertical-align: baseline;
Here is some standard paragraph text, here is some text using vertical align see how it works?
Percent
Syntax: vertical-align: 15%;
Here is some standard paragraph text, here is some text using vertical align see how it works?
Superscript
Syntax: vertical-align: super;
Here is some standard paragraph text, here is some text using vertical align see how it works?
Text Top
Syntax: vertical-align: text-top;
Here is some standard paragraph text, here is some text using vertical align see how it works?
Bottom
Syntax: vertical-align: bottom;
Here is some standard paragraph text, here is some text using vertical align see how it works?
Length
Syntax: vertical-align: 5px;
Here is some standard paragraph text, here is some text using vertical align see how it works?
Subscript
Syntax: vertical-align: sub;
Here is some standard paragraph text, here is some text using vertical align see how it works?
Top
Syntax: vertical-align: top;
Here is some standard paragraph text, here is some text using vertical align see how it works?
Middle
Syntax: vertical-align: middle;
Here is some standard paragraph text, here is some text using vertical align see how it works?
Text Bottom
Syntax: vertical-align: text-bottom;
Here is some standard paragraph text, here is some text using vertical align see how it works?
White Space
Syntax: white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;
No Wrap
Syntax: white-space: nowrap;
Auto line break = No, Manual line break = Yes, Line return = No, Extra spaces = No
Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
Pre
Syntax: white-space: pre;
Auto line break = No, Manual line break = Yes, Line return = Yes, Extra spaces = Yes
Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
Pre Line
Syntax: white-space: pre-line;
Auto line break = Yes, Manual line break = Yes, Line return = Yes, Extra spaces = No
Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
Pre Wrap
Syntax: white-space: pre-wrap;
Auto line break = Yes, Manual line break = Yes, Line return = Yes, Extra spaces = Yes
Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
Word Spacing
Syntax: word-spacing: normal|length|initial|inherit;
Normal
Syntax: word-spacing: normal;
Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
PX
Syntax: word-spacing: 5px;
Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
EM
Syntax: word-spacing: 1em;
Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.