CSS Text Properties

CSS Text PropertiesIn this video tutorial I’ll show you how to use every single CSS Text Property available. I’ll specifically cover the following text properties:

  • Font
  • Font-Family
  • Font-Size
  • Font-Weight
  • Font-Style
  • Font-Variant
  • Line-Height
  • Letter-Spacing
  • Word-Spacing
  • Text-Align
  • Test-Decoration
  • Text-Indent
  • Text-Transform
  • Vertical-Align
  • Color
  • Background-Color

You can find all of the code used after the video below. You can use this as a CSS cheat sheet? If you haven’t seen the first part of this tutorial it is here CSS Video Tutorial. Leave questions or comments below.

Code From the Video


This is the shorthand way to define a font in one line.

font: font-style, font-variant, font-weight, font-size, line-heightand font-family;

<pre style=”font: italic bold 1.5em/2 arial, Helvetica, sans-serif;”>Tag Styled with the font Property</pre>


With this style you can define the default font family.


<li style=”font-family: Andale Mono;”>Andale Mono</li>

<li style=”font-family: arial;”>Arial</li>

<li style=”font-family: arial black;”>Arial Black</li>

<li style=”font-family: comic sans MS;”>Comic Sans</li>

<li style=”font-family: Courier;”>Courier</li>

<li style=”font-family: Courier New;”>Courier New</li>

<li style=”font-family: Georgia;”>Georgia</li>

<li style=”font-family: Impact;”>Impact</li>

<li style=”font-family: sans-serif;”>Sans Serif</li>

<li style=”font-family: Serif;”>Serif</li>

<li style=”font-family: Trebuchet MS;”>Trebuchet MS</li>

<li style=”font-family: Verdana;”>Verdana</li>



With this style you can define the size of the text.


<li style=”font-size: 150%;”>Styled at 150%</li>

<li style=”font-size: smaller;”>smaller</li>

<li style=”font-size: x-small;”>x-small</li>

<li style=”font-size: medium;”>medium default</li>

<li style=”font-size: x-large;”>x-large</li>

<li style=”font-size: xx-large;”>xx-large</li>



With this style you can define the Weight of a Font.


<li style=”font-weight: normal;”>Normal</li>

<li style=”font-weight: bold;”>Bold</li>

<li style=”font-weight: bolder;”>Bolder</li>

<li style=”font-weight: lighter;”>Lighter</li>

<li style=”font-weight: 100;”>100</li>

<li style=”font-weight: 200;”>200</li>

<li style=”font-weight: 300;”>300</li>

<li style=”font-weight: 400;”>400</li>

<li style=”font-weight: 500;”>500</li>

<li style=”font-weight: 600;”>600</li>

<li style=”font-weight: 700;”>700</li>

<li style=”font-weight: 800;”>800</li>

<li style=”font-weight: 900;”>900</li>



With this style you can define if a font is italic or not.


<li style=”font-weight: normal;”>Normal</li>

<li style=”font-weight: italic;”>Italic<</li>



With this style you can define if uppercase letters are displayed in Small Uppercase.



<li style=”font-variant: small-caps;”>Small-Caps</li>



With this style you can define the height of a line of text. It is defined as a number percentage or length.


<li style=”line-height: 20%;”>20 Percent</li>

<li style=”line-height: 50%;”>50 Percent</li>

<li style=”line-height: 100%;”>100 Percent</li>

<li style=”line-height: 140%;”>140 Percent</li>

<li style=”line-height: 180%;”>180 Percent</li>

<li style=”line-height: 220%;”>220 Percent</li>



With this style you can define the spacing of a line of text.


<li style=”letter-spacing: 1em;”>1 em</li>

<li style=”letter-spacing: 1.1em;”>1.1 em</li>

<li style=”letter-spacing: 1.2em;”>1.2 em</li>

<li style=”letter-spacing: 1.3em;”>1.3 em</li>

<li style=”letter-spacing: 1.4em;”>1.4 em</li>

<li style=”letter-spacing: 1.5em;”>1.5 em</li>



With this style you can define the distance between words.


<li style=”word-spacing: 1em;”>1 em</li>

<li style=”word-spacing: 1.1em;”>1.1 em</li>

<li style=”word-spacing: 1.2em;”>1.2 em</li>

<li style=”word-spacing: 1.3em;”>1.3 em</li>

<li style=”word-spacing: 1.4em;”>1.4 em</li>

<li style=”word-spacing: 1.5em;”>1.5 em</li>



With this style you can define the alignment of words.


<li style=”text-align: left;”>left</li>

<li style=”text-align: center;”>center</li>

<li style=”text-align: right;”>right</li>

<li style=”text-align: justify;”>justify</li>



With this style you can define text in many ways.


<li style=”text-decoration: underline;”>underline</li>

<li style=”text-decoration: overline;”>overline</li>

<li style=”text-decoration: line-through;”>line-through</li>

<li style=”text-decoration: blink;”>blink</li>



With this style you can define how far to indent text.


<li style=”text-indent: 1em;”>Indent 1em</li>

<li style=”text-indent: 1.2em;”>Indent 1.2em</li>

<li style=”text-indent: 1.5em;”>Indent 1.5em</li>

<li style=”text-indent: 2em;”>Indent 2em</li>



With this style you can define the case of text.


<li style=”text-transform: capitalize;”>capitalize</li>

<li style=”text-transform: uppercase;”>uppercase</li>

<li style=”text-transform: lowercase;”>lowercase</li>



With this style you can define the vertical alignment of text.

<i style=”vertical-align: baseline;”>Text aligned to baseline</i>

<i style=”vertical-align: sub;”>Text aligned to sub</i>

<i style=”vertical-align: super;”>Text aligned to super</i>

<i style=”vertical-align: top;”>Text aligned to top</i>

<i style=”vertical-align: text-top;”>Text aligned to text-top</i>

<i style=”vertical-align: bottom;”>Text aligned to bottom</i>

<i style=”vertical-align: text-bottom;”>Text aligned to text-bottom</i>

<i style=”vertical-align: middle;”>Text aligned to middle</i>


With this style you can define the color of text.


<li style=”color: aqua;”>Text Colored Aqua</li>

<li style=”color: black;”>Text Colored Black</li>

<li style=”color: blue;”>Text Colored Blue</li>

<li style=”color: fuchia;”>Text Colored Fuchia</li>

<li style=”color: gray;”>Text Colored Gray</li>

<li style=”color: green;”>Text Colored Green</li>

<li style=”color: lime;”>Text Colored Lime</li>

<li style=”color: maroon;”>Text Colored Maroon</li>

<li style=”color: navy;”>Text Colored Navy</li>

<li style=”color: olive;”>Text Colored Olive</li>

<li style=”color: purple;”>Text Colored Purple</li>

<li style=”color: red;”>Text Colored Red</li>

<li style=”color: silver;”>Text Colored Silver</li>

<li style=”color: teal;”>Text Colored Teal</li>

<li style=”color: white;”>Text Colored White</li>

<li style=”color: yellow;”>Text Colored Yellow</li>



With this style you can define the background color of words.


<li style=”background-color: aqua;”>Background Text Colored Aqua</li>

<li style=”background-color: black;”>Background Text Colored Black</li>

<li style=”background-color: blue;”>Background Text Colored Blue</li>

<li style=”background-color: fuchia;”>Background Text Colored Fuchia</li>

<li style=”background-color: gray;”>Background Text Colored Gray</li>

<li style=”background-color: green;”>Background Text Colored Green</li>

<li style=”background-color: lime;”>Background Text Colored Lime</li>

<li style=”background-color: maroon;”>Background Text Colored Maroon</li>

<li style=”background-color: navy;”>Background Text Colored Navy</li>

<li style=”background-color: olive;”>Background Text Colored Olive</li>

<li style=”background-color: purple;”>Background Text Colored Purple</li>

<li style=”background-color: red;”>Background Text Colored Red</li>

<li style=”background-color: silver;”>Background Text Colored Silver</li>

<li style=”background-color: teal;”>Background Text Colored Teal</li>

<li style=”background-color: white;”>Background Text Colored White</li>

<li style=”background-color: yellow;”>Background Text Colored Yellow</li>


Leave a Reply

Your email address will not be published.