Part 4 - Text & Font | CSS

The CSS text properties define the appearance of text:

text example

This example includes some text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented and aligned, and the underline is removed from the "Try it yourself" link.

---

Text Color

The color property is used to set the color of the text. The color can be set by:

• name - specify a color name, like "red"
• RGB - specify an RGB value, like "rgb(255,0,0)"
• Hex - specify a hex value, like "#ff0000"

The default color for a page is defined in the body selector.

Example body {color:blue} h1 {color:#00ff00} h2 {color:rgb(255,0,0)} javascript:tinyMCE.execInstanceCommand('mce_editor_0',%20'forecolor',%20false,%20'#0000FF');

For W3C compliant CSS: If you define the color property, you must also define the background-color property.

---

Text Alignment

The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).

Example h1 {text-align:center} p.date {text-align:right} p.main {text-align:justify}

---

Text Decoration

The text-decoration property is used to set or remove decorations from text.
The text-decoration property is mostly used to remove underlines from links for design purposes:

Example a {text-decoration:none}

It can also be used to decorate text:

Example h1 {text-decoration:overline} h2 {text-decoration:line-through} h3 {text-decoration:underline} h4 {text-decoration:blink}

It is not recommended to underline text that is not a link, as this often confuse users.

---

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.

Example p.uppercase {text-transform:uppercase} p.lowercase {text-transform:lowercase} p.capitalize {text-transform:capitalize}

---

Text Indentation

The text-indentation property is used to specify the indentation of the first line of a text.

Example

  p {text-indent:50px} 

CSS Font

CSS gives you great control over the way your text is displayed. You can change the text size, color, style, and more. You probably already knew how to make text bold or underlined, but did you know you could resize your font using percentages? Let us begin the lesson with an easy and important font attribute, color!

CSS Font Color

Although the color of the text seems like it would be part of CSS Font, it actually is a standalone attribute in CSS. This could be for many reasons, including the fact that it will be used a great deal, so why make the coder type out "font-color", when they could just type out "color" instead? Here's an example of changing the color of your font.

CSS Code:

h4 { color: red; }

h5 { color: #9000A1; } 

h6 { color: rgb(0, 220, 98); } 

Display:

This is a red h4 header.

This is a hexadecimal #9000A1 h5 header.

This is an rgb(0, 220, 98) h6 header.

In the above example we used three different formats for defining a color: a color name, hexadecimal values, and RGB. Check out the list of supported color names. Hexadecimal form is a pound sign (#) followed by at most 6 hex values (0-F). RGB defines the individual values for Red, Green, and Blue.
Example form: rgb(Red, Green, Blue); with the range of 0-255 for each value.

CSS Font Family

Font families can be divided into two groups: serif and sans-serif. A sans-serif font does not include the small lines at the end of characters, while a serif font does include these small lines. When choosing which kind you prefer, remember that studies have shown that sans-serif fonts are much easier to read on a computer monitor than serif fonts.

CSS Code:

h4 { font-family: sans-serif; }

h5 { font-family: serif; } 

h6 { font-family: arial; } 

Display:

This is a header with sans-serif font

This is a header with a serif font

This is a header with an arial font

As you probably noticed throughout Tizag.com, we do not use serif fonts, except in special cases, like for the titles of the Code and Display boxes.

CSS Font Size

You can manipulate the size of your fonts by using values, percentages, or key terms. Using values are useful if you do not want the user to be able to increase the size of the font because your site will look incorrect if they did so. Percentages are great when you want to change the default font, but do not want to set a static value.

CSS Code:

p { font-size: 120%; } 

ol{ font-size: 10px; } 

ul{ font-size: x-large; }

Display:

This is a font size of 120%

1. This is a font size of 10px

• This is a font size of "x-large"

Though key terms are not very useful, the common terms are: xx-large, x-large, large, medium, small, x-small, and xx-small.

CSS Font Style

CSS Font-Style is where you define if your font will be italic or not. Possible key terms are the following: italic, oblique, and normal.

CSS Code:

p { font-style: italic; }

h4{ font-style: oblique; }

Display:

This is an italic font

This is an oblique font

CSS Font Weight

If you want to control the weight of your font (its thickness), using font weight is the best way to go about it. We suggest that you only use font-weight in multiples of 100 (e.g. 200, 300, etc) because any less and you probably will not see any difference. The values range from 100 (thin)-900 (thick).

CSS Code:

p { font-weight: 100; } 

ul{ font-weight: bolder; }

Display:

This is a font with a weight of 100

• This is a font with
• a "bolder" weight

Available key terms for font-weight: bold, bolder, and normal.

CSS Font Variant

CSS Font Variant allows you to convert your font to all small caps. Note: not every font supports CSS Font Variant, so be sure to test before you publish.

CSS Code:

p { font-variant: small-caps; }

google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);