Text Styling and Formatting CSS

Text Styling and Formatting CSS!In this Article we will step through all kinds of styling method, which applied to style fonts.Basically there are a lot of font styling parameter  that than you could barely imagine,  can be applied during styling our website fonts. You would’t necessary  remember all these methods in your mind. The most important thing is , to know where to apply. , where to search out for all these resources.

The Below show the list of CSS Parameters that we will discuss in this article.

• font-family
• font-style
• line-height
• text-align
• color
• font-size
• text-decoration
• letter-spacing
• word-spacing
• text-transform

Something that we should take note when assigning fonts .We should always assign  more than one “font-family” , as some browser might not be able to pick up the type of font family that we assigned.Thus if you assigned more than one ” font-family ” .There will always be a back up font , when the first font failed.

Font Family in Text Styling and Formatting CSS

There are virtually thousands of font family out there in the Internet. Some may be free , some you might need to pay .Not all Browser, machines, computers recognised the  types of font that we declare in our Website. CSS have a Fall back function which enable CSS  programmer to list out a few “font-family” so when the first one fail , it will fall back and display the other font family option.

Check out the type of font family over here

Check out the Code Below

 
First I have created an Index HTML under a div tag under the class name”fontstyling”
HTML File

        
<div class="fontstyling">
            
            <p>I am Styling a Font</p>
        
            <p>What is your Favoutite Style</p>
</div>
                

 
CSS Styling

.fontstyling{
    
    font-family: Arial Narrow, sans-serif;
             
}

Output

 

Font-Style

Basically , there are only a few type of font style available in CSS. Refer the Below for the types of font-style available.

No	Value	Description
1	Normal	Default Font Style displayed
2	italic	Italic Font Style displayed
3	Oblique	Oblique Font Style displayed
4	Initial	Property Set to Default Value
5	Inherit	Property from Parent inherited

Check out the Code Below

CSS

.fontstyling{
    
    font-family: Arial Narrow, sans-serif;
    font-style: italic;
          }

 
Output

 

Font Color

All Font needs colour. The Colour for your font should match the Design and Background of your theme.To choose your Font Colour you can use the CSS Colour Picker here

 

Check out the Code Below

CSS

.fontstyling{
    
    font-family: Arial Narrow, sans-serif;
    font-style: italic;
    color:#6666ff;
        }

Output

 

Line Height

The Line Height is the ” line height” between the line above and the below text Line

Check out the Code Below

.fontstyling{
    
    font-family: Arial Narrow, sans-serif;
    font-style: italic;
    color:#6666ff;
    line-height: 5;
        
    
}

Output

 

Text Align

This Function Allows you to place your text either, Left, right, center etc. Refer the table below for available text Align Function.

No	Value	Description
1	Left	Align the Text Left
2	right	Align the text right
3	Center	Align the text center
4	justify	stretches both line with equal width
5	initial	Set to its Default values
6	inherit	Inherit its parent values

Check out the Code Below

 
CSS

.fontstyling{
    
    font-family: Arial Narrow, sans-serif;
    font-style: italic;
    color:#6666ff;
    line-height: 5;
    text-align: center;
            
}

Output

 

Text Decoration

Text decoration normally referring to how line are being assign to a text object. Refer the table below for available text-decoration function in CSS.

No	Value	Description
1	None	No Line Assign
2	underline	Line Below the Text
3	Overline	Line above the Text
4	line-through	Line through the text
5	initial	Set to its Default values
6	inherit	Inherit its parent values

Check out the Code Below

 
CSS

.fontstyling{
    
    font-family: Arial Narrow, sans-serif;
    font-style: italic;
    color:#6666ff;
    line-height: 5;
    text-align: center;
    text-decoration: underline;
        
    
}

Output

 

Letter Spacing and word spacing

Letter Spacing and word spacing. These function is used to space out between letter and words.

Check out the Code Below

CSS

.fontstyling{
    
    font-family: Arial Narrow, sans-serif;
    font-style: italic;
    color:#6666ff;
    line-height: 5;
    text-align: center;
    text-decoration: underline;
    letter-spacing: 10px;
        
    
}

Output

 

Text Transform

This Function allows you to capitalize, uppercase, lowercase etc. Refer the table below for the available function option.

No	Value	Description
1	None	No capitalisation
2	capitalize	First Word of each word will be transform to upper case
3	uppercase	Transform all character to uppercase
4	lowercase	Transform all character to lowercase
5	initial	Set to its Default values
6	inherit	Inherit its parent values

Check out the Code Below

CSS

.fontstyling{
    
    font-family: Arial Narrow, sans-serif;
    font-style: italic;
    color:#6666ff;
    line-height: 5;
    text-align: center;
    text-decoration: underline;
    letter-spacing: 10px;
    text-transform: uppercase;
        
    
}

Output

I think this wrap out the article for Text Styling and Formatting CSS, hopefully that helps out.

Check out CSS Specificity here