Hello, world!

Styles HTML

This part of the HTML tutorial will teach you how to modify the style attribute, which will enable you to change backround color, font etc.
The default style of every HTML element is white for the background color and black for the text color. Through style attribute  the default style of an HTML element can be modify. The syntax for HTML style attribute is: style="property:value"  


Style attribute is not applicable to these elements:  base, basefont, head, html, meta, param, script, style and title.
 
Background Color
Three (3) various Methods to set colors:
 
Method Description Example
Color Names Represents for the names of the color. There are 140 color names supported by all browsers. green, blue, red
Hex Codes Represents a six-digit code of a color. Using it must apply # at the beginning. 0000FF, 00FF00, FF0000
Color decimal or percentage values Represents a value using the rgb( ) property. RGB values are usually provided from 0 to 255. rgb(255, 0, 0), rgb(255, 255, 0), rgb(255, 255, 255)

Syntax background color:
background-color: color|transparent|initial|inherit;
 
How to change the default background color from white to blue.
 
HTML code example background color:
!DOCTYPE html>
<html>
<body style="background-color:blue">
<h1>Heading</h1>
<p>Paragraph.</p>
</body>
</html>
 
Text Color
When you need to modify the text color of an HTML element, simply apply the color property.
 
Syntax text color:
color: color|initial|inherit;
 
HTML code example text color:
<h1 style="color:blue">This is color blue</h1>
<p style="color:red">This is color red</p>
 
HTML output text color:

This is color blue


This is color red


 
Font face
You can also modify the font style of an HTML element through the use of the font-family property.
 
Syntax font face:
font-family: font|initial|inherit;
 
HTML code example font face:
<h1 style="font-family:Arial">This is Arial</h1>
<p style="font-family:Times New Roman">This Times New Roman.</p>
 
HTML output font face:

This is Arial


This Times New Roman.


 
Text Size
When you need to modify the font size of an HTML element simply apply the font-size property.
 
Syntax text size:
<font size="number">
 
HTML code example text size:
<h1 style="font-size:400%">Font size is 400%</h1>
<p style="font-size:200%">Font size is 200%.</p>
 
HTML output text size:

Font size is 400%


Font size is 200%.


 
Text Alignment
You can as well modify the font size of an HTML element by applying the text-align property.
 
Property Values:  
left: Default. This property aligns the text to the left.
right: This property aligns the text to the right
center: This property will center the text      
justify: This property aligns the text to both left and right margin.
string: The content of cells in a column will align on the given string.
Initial: This property will set to its default value.
Inherit: This property acquires similar stated value from its parent element.
 
Syntax text alignment:
text-align: left|right|center|justify|initial|inherit;
 
HTML code example text alignment:
<p style="text-align:left">How to left aligned</p>
<p style="text-align:center">How to center aligned</p>
<p style="text-align:right">How to right aligned</p>
 
HTML output text alignment:

How to left aligned


How to center aligned


How to right aligned