HTML is quite limited when it comes to the appearance of its elements.
This is not so good if you're trying to give a website a unique look and feel, or you're trying to adhere to a corporate identity.
The <style> element is used to add CSS style rules to an HTML document.
The element is expected to appear in the document <head>, but will also render acceptably when used in the <body> of the document.
<!DOCTYPE html> <html> <body> <p>This Is Paragraph</p> <p style="color:red;">This Paragraph red</p> <p style="color:blue;">This Paragraph blue</p> <p style="font-size:50px;">This Paragraph big</p> </body> </html>
This Is Paragraph
This Paragraph red
This Paragraph blue
This Paragraph big
Above is a small example of adding styles to a web page using CSS. We change some colors and increase a font size.
In this example, we use all three methods of adding styles to an HTML document. More on that in a minute, First, let's make sure we understand what CSS is and why we need it.
HTML style attribute has the following syntax −
<tagname style="property:value;">
The background-color property is used to define background color for the HTML tag, let's see an example of styling html tag by of css background-color property
<!DOCTYPE html> <html> <body> <h3 style="background-color:lime;">This is lime background</h3> <h3 style="background-color:red;color:teal">This is Teal background</h3> </body> </html>
You can use HTML font-family property to specify the font of an HTML element. Here is an example shows how to change text font in HTML −
<!DOCTYPE html> <html> <head> <title>HTML Style Example</title> </head> <body> <p style="font-family:verdana">This is HTML Style Example (verdana)</p> <p style="font-family:courier">This is HTML Style Example (courier)</p> </body> </html>
This is HTML Style Example (verdana)
This is HTML Style Example (courier)