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

Font

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>

Font-Family

With this style you can define the default font family.

<ul>

<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>

</ul>

Font-Size

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

<ul>

<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>

</ul>

Font-Weight

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

<ul>

<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>

</ul>

Font-Style

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

<ul>

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

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

</ul>

Font-Variant

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

<ul>

<li>Normal</li>

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

</ul>

Line-Height

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

<ul>

<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>

</ul>

Letter-Spacing

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

<ul>

<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>

</ul>

Word-Spacing

With this style you can define the distance between words.

<ul>

<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>

</ul>

Text-Align

With this style you can define the alignment of words.

<ul>

<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>

</ul>

Text-Decoration

With this style you can define text in many ways.

<ul>

<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>

</ul>

Text-Indent

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

<ul>

<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>

</ul>

Text-Transform

With this style you can define the case of text.

<ul>

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

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

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

</ul>

Vertical-Align

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>

Color

With this style you can define the color of text.

<ul>

<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>

</ul>

Background-Color

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

<ul>

<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>

</ul>

Leave a Reply

Your email address will not be published.

Google+