Learn HTML Styles



Example:


FreeCodeWiki


Learn HTML easily online

And web development

Completely free


Try yourself >>






Part 1


HTML Style Attribute


In HTML we use the style attribute to determine the styling of an element, such as font, color, size etc:


This is the syntax of style attribute: < tagname style="property : value;">


In this example the < tagname will be paragraph , the property will be color, the value will be green


Code Example:

                 
                 <p style="color:green;"></p>
    
            
Try yourself >>


Learn more about styling in our CSS tutorial >>







Part 2


Learn about Text Size


CSS font-size property determine the text size of an HTML element:


Code Example:

                     <p style="font-size:30px;">Jack Sparrow</p>
<p style="font-size:60px;">Is a pirate</p>
    
            
Try yourself >>


You can also use % instead of pixels:

Code Example:

                     <p style="font-size:300%;">Jack Sparrow</p> 
    
            





Part 3


Learn about Background Colors


The CSS background-color property determine the color of an HTML element background:


Code Example:

                     <body style="background-color:purple;">
<h1>Jack</h1>
<p>Sparrow</p>
</body>
    
            
Try yourself >>








Part 4

Learn about Fonts


We can select specific text font using the font-family property:


Code Example:

                    <h1 style="font-family:Serif;">Jack</h1>
<h1 style="font-family:Monospace;">Sparrow</h1>
    
            
Try yourself >>









Part 5

Learn about Text Color


You can control the text color of an HTML elemenet using the color property:


Code Example:

                    <h1 style="color:red;">Jack</h1>
<h1 style="color:purple;">Sparrow</h1>
    
            
Try yourself >>


Learn more about styling in our CSS tutorial >>









Part 6

Learn about Text Alignment


You can place text in different locations such as center, right, left, justify using the text-align property


Code Example:

                     <p style="text-align:left;">Jack Sparrow</p>
<p style="text-align:center;">Jack Sparrow</p>
<p style="text-align:right;">Jack Sparrow</p>
<p style="text-align:justify;">Jack Sparrow</p>
    
            
Try yourself >>

center Centers the content.


right Aligns the content to the right side.


left Aligns the content to the left side.


justify - If possible, both the left and right sides are aligned by adjusting the width of the content. For example, the width of a line of text can be adjusted by varying the word spacing.















FreeCodeWiki best site for learning html and css, enjoy this complete html course, learn responsive web development with html5 & css3 for beginners and experts



Navigation