How to Style HTML Elements with Examples
In this tutorial, we will learn how to style HTML elements through various examples. Each HTML element come with default style, such as a white background and black text color.
To customize these elements beyond their default appearance, we can use the “style” attribute provided by CSS with any existing HTML element or tag.
This style attribute allows for inline styling, meaning that we can apply inline styles directly within an HTML tag using the style attribute to change its appearance.
However, this method is straightforward but is best used sparingly, as it can make your HTML harder to read and maintain. Here are some common CSS properties we might use with the style attribute:
- color: This property changes the text color of an element.
- background-color: This property sets the background color of an element.
- text-align: This property aligns the text within an element. For example, left, right, center, justify.
- font-family: It specifies the font family for the text within an element.
- font-size: It sets the size of the font.
Syntax of the HTML Style Attribute
The syntax for using the style attribute to add styles to an element, such as color, font, size, background, etc. in HTML is straightforward. The basic syntax to enclose the style attribute within the HTML tag is as follows:
<tagname style = "property1: value1; property2: value2;">
In the HTML tag, the style attribute contains CSS property-value pairs that define how an element should be displayed. Each property is separated from its corresponding value by a colon (:), and each property-value pair is terminated by a semicolon (;).
Let’s take some examples in which we will use some common CSS properties along with the style attribute to style HTML element.
How to Color Text in HTML?
We use color property provided by CSS to specify the color of the text inside an HTML element. It’s one of the most frequently used CSS properties. The general syntax is as:
<tagname style="color: value;">Your text here</tagname>
[adinserter block=”5″]
Example 1:
<!DOCTYPE html>
<head>
<title>Coloring Text in HTML</title>
</head>
<body>
<h1 style= "color:red;">This is a Heading</h1>
<p style = "color:green;">This is a paragraph</p>
</body>
</html>
Output:
In this example, we have used the value of color property by name like red and green. You can also specify Hexadecimal values, RGB, RGBA as a value of the color property. For example, you can use #FF0000 for red.
How to Set Background Color of an Element in HTML?
To set the background color of an element in HTML, we use the CSS background-color property with an inline style attribute within the HTML tag. This property can be applied to almost any HTML element to change its background color.
The background-color property takes various formats for specifying colors, such as named colors, hexadecimal values, RGB, and RGBA. Here’s an example to set the background color:
[adinserter block=”2″]
Example 2:
<!DOCTYPE html>
<head>
<title>Setting Background Color for Elements in HTML</title>
</head>
<body style="background:red;">
<h1 style= "color:white;">This is a Heading</h1>
<p style = "color:white;">This is a paragraph</p>
</body>
</html>
Output:
How to Change Font of an Element in HTML?
To change the font of an element in HTML, we use font-family property of CSS with style attribute in a HTML tag.
Example 3:
<!DOCTYPE html> <body style="background:red;"> <h1 style="font-family: Arial; color:white;">This is a Heading.</h1> <p style="font-family: courier; color:white;">This is a paragraph</p> </body> </html>
How to Change Text Size of an Element in HTML?
To change text size of an element in HTML, we use font-size property of CSS that defines the text size for an HTML element. This property takes a variety of values, such as absolute sizes, relative sizes, and units like pixels (px), ems (em), points (pt), and percent (%).
Example 4:
<!DOCTYPE html> <body style="background:red;"> <h1 style="font-family: Arial; color:white; font-size:300%;">This is a Heading.</h1> <p style="font-family: courier; color:white; font-size:160%;">This is a paragraph</p> </body> </html>
HTML Style Text Alignment
CSS provides a text-align property that defines the horizontal alignment of text for an element, such as paragraph, div, or heading. This property can align the text to the left, right, center, or justify.
Example 5:
<!DOCTYPE html> <body style="background:red;"> <h1 style="font-family: Arial; color:white; font-size:300%; text-align:center;">This is a Heading.</h1> <p style="font-family: courier; color:white; font-size:160%; text-align:center;">This is a paragraph</p> </body> </html>
How to Style Links in HTML?
We can style links differently than their default appearance using properties like color, text-decoration, and font-weight. Look at the example below.
Example 6:
<!DOCTYPE html> <body> <a href="https://www.google.com" style="color: red; text-decoration: none; font-weight: bold;">Google</a> </body> </html>
In this tutorial, we’ve explained how to style HTML elements using various examples. We hope that you will have understood the basic concepts of styling elements with different CSS properties and practiced them. The best way to solidify your understanding is by practice. So, keep practice and enjoy coding!!!
