• PHP Training
    •  
  • Login/Register

    • Home >>HTML Tutorial >HTML Styles

    HTML Styles

    « Previous Next »

    HTML Styles

    HTML style is used to add the style on Existing Element. It helps to provide a better look to the web page. You can use style in any HTML tag.

    Syntax:<tagname style= "property: value" >

    Text Color

    By using CSS color property, you can change the color of the text as you want that is displayed to the web page.

    Let's take an example of text color:

    <!DOCTYPE html>
<html>
<body>
<h1 style="color:green;">This is a heading</h1>
<p style="color:orange;">This is a paragraph.</p>
</body>
</html>
    Output:

    This is a heading

    This is a paragraph.

    Background Color

    By using CSS background-color property, you can change the background-color for a HTML element that is displayed to the web browser.

    Let's take an example of Background color:

    <!DOCTYPE html>
<html>
<body>
<h1 style="background-color:green; color:#fff;">PHPTPOINT</h1>
</body>
</html>
    Output:

    PHPTPOINT

    Text Size

    You can change the size of the text, by using the property font-size to the specified element.

    Let's take an example of text size:

    <!DOCTYPE html>
<html>
<body>
<p>Normal Text</p>
<p style="font-size:22px;">Text with font-size property. </p>
</body>
</html>
    Output:

    Normal Text

    Text with font-size property.

    Fonts

    By using the property font-family you can change the font of the specified HTML element that can be displayed to the web page.

    Let's take an Example of Fonts:

    <!DOCTYPE html>
<html>
<body>
<p>Normal Text</p>
<p style="font-family:CASTELLAR;">Text with font-family property. </p>
</body>
</html>
    Output:

    Normal Text

    Text with font-family property.

    Text Alignment

    Text-align property helps you to align the text left, right or center. You can Horizontally move the HTML elements. By default text is displayed to the left.

    Let's take an Example of Text Alignment:

     <!DOCTYPE html>
<html>
<body>
<p>Normal Text</p>
<p style="text-align:center;">Text with text-align:center property. </p>
<p style="text-align:right;">Text with text-align:right property. </p>
</body>
</html>
    Output:

    Normal Text

    Text with text-align:center property.

    Text with text-align:right property.

    « Previous Next »

    HTML Tutorial HTML Introduction HTML Tags HTML Headings HTML Paragraph HTML Hyperlink HTML Marquee HTML Font HTML List HTML Table HTML Form HTML Registration Form HTML Login Form HTML Attributes HTML Tutorial PDF HTML Formatting HTML Styles HTML Quotations HTML Iframes HTML Images
    HTML 5 Tutorial
    HTML Interview Questions
    No Sidebar ads