CSS gives you control over the appearance of text on your Web pages, you can use font styles, different different texts and color names to give a sober look to your webpage.

1. Introduction to CSS Fonts, Texts
and Colors - Lesson 7
Publisher : Attitude Academy

2. What is
Fonts CSSIn this Topic you will learn about fonts and how they are applied using
CSS. We will also look at how to work around the issue that specific fon
chosen for a website can only be seen if the font is installed on the PC
used to access the website. The following CSS properties will be
described:
• font-family
• font-size
• font-style
• font-variant
• font-weight
• font

3. FONTS
The Fonts-Family
You can set what font will be displayed in an element with the font-
family property.
There are 2 choices for values:
• family-name
• generic family
If you set a family name it is best to also add the generic family at the
end. As this is a prioritized list. So if the user does not have the specifi
font name it will use the same generic family. (see below)

4. <div style="Font-family: Arial, veranda;">This font show arial
property</div>
<div style="Font-family: Arial, veranda;">This font show arial
property</div>
Example Here:
Font-family: Arial,verdana;Font-family: Arial,verdana;

5. The Fonts-Size
You can set the size of the text used in an element by using the font-
size property.
There are a lot of choices for values:
• xx-large
• x-large
• larger
• large
• medium
• % (percent)
If you set a family name it is best to also add the generic family at
the end. As this is a prioritized list. So if the user does not have the
specified font name it will use the same generic family. (see below)
• small
• smaller
• x-small
• xx-small
• length
Font-size: 20px;Font-size: 20px;
Example Here:

6. FONTS
The Fonts-style
You can set the style of text in a element with the font-style
property
There are three of choices for values:
• normal
• Italic
• oblique
Font-style: Italic;Font-style: Italic;

7. FONTS
The Fonts-Variant
You can set the variant of text within an element with the font-
variant property
There are two of choices for values:
• normal
• small-caps
Font-Variant: value;Font-Variant: value;

8. FONTS
The Fonts-Weight
You can control the weight of text in an element with the font-
weight property:
There are a lot of choices for values:
• lighter
• normal
• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900
• bold
• bolder
Font-Weight: value;Font-Weight: value;

9. FONTS
The Text Css
In this Topic you will learn about Text properties and how they are
applied using CSS. We will also look at how to work around the issue
that specific text properties work for a website .The following CSS
properties will be described:
• Text-align
• Text-decoration
• Text-indent
• Text-transform
• Letter-spacing
• White-space
• Word-space

10. FONTS
The Text-align Css
The following example demonstrates how to align a text.
There are four choices for values:
• Left
• Right
• Center
• Justify
Text-align:left;Text-align:left;
This is text alignment left This is text alignment
right
This is text alignment Center
This is text alignment left This is text alignment
right
This is text alignment Center

11. FONTS
The Text-decoration Css
You can decorate <a> Tag property or other property using with this c
There are five choices for values:
• None
• underline
• over line
• Line-through
• blink
<a href="#" style="text-decoration:none;">This Css properties
remove underline from text</a>
<a href="#" style="text-decoration:none;">This Css properties
remove underline from text</a>

12. FONTS
The Text-Indent Css
You can indent the first line of text in an HTML element with the
following:
There are two choices for values:
• Length
• Percentage
Text-indent:value;Text-indent:value;

13. FONTS
The Text-Transform Css
The following example demonstrates how to set the cases for a text
There are four choices for values:
• None
• capitalize
• Uppercase
• Lowercase
Text-transform:uppercase;Text-transform:uppercase;

14. FONTS
The Letter-spacing Css
You can adjust the space between letters in the following manner.
Setting the value to 0, prevents the text from justifying. You can use
negative values.
There are two choices for values:
• normal
• length (how many length give by you)
Letter-spacing:5px ;(or other value you can add)Letter-spacing:5px ;(or other value you can add)
These letters are spaced at 5px.These letters are spaced at 5px.
Example Here:

15. FONTS
The White Space Css
You can control the whitespace in an HTML element with the followin
There are two choices for values:
• Normal
• Pre
• Nowrap
white-space:5px ;(or other value you can add)white-space:5px ;(or other value you can add)

16. FONTS
The Word-spacing Css
You can adjust the space between words in the following manner. You
can use negative values.
There are two choices for values:
• normal
• length (how many length give by you)
Word-spacing:5px ;(or other value you can add)Word-spacing:5px ;(or other value you can add)

17. FONTS
The font or text Color Css
The color property describes the foreground color of an element. For
example, imagine that we want all headlines in a document to be dark
red. The headlines are all marked with the HTML element
There are three choices for add text or font color:
• Color name – example :( red, black…)
• hexadecimal number – example:(#ff0000) (Note: # properties use
add font or text color)
• RGB color code – example:(rgb(255, 0, 0), rgb(0, 0, 0))