HTML Styles are used to add visual effects to the HTML elements. It is used to make the web page more attractive and user-friendly. HTML Styles can be applied to any HTML element such as text, images, tables, and forms. It is used to change the font size, color, background color, border, and many more.
There are three ways to add styles to the HTML elements:
Inline Style is used to apply styles to a single HTML element. It is defined using the style attribute in the HTML tag. The syntax for inline style is:
<element style="property:value;">Content</element>
For example, to change the color of the text to red, the code will be:
<p style="color:red;">This is a red text</p>
Internal Style Sheet is used to apply styles to multiple HTML elements. It is defined in the head section of the HTML document using the style tag. The syntax for internal style sheet is:
<head>
<style>
element {
property: value;
}
</style>
</head>
For example, to change the color of the text to red for all the paragraphs, the code will be:
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>This is a red text</p>
<p>This is also a red text</p>
</body>
External Style Sheet is used to apply styles to multiple HTML documents. It is defined in a separate CSS file and linked to the HTML document using the link tag. The syntax for external style sheet is:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
For example, to change the color of the text to red for all the paragraphs using an external style sheet, the code will be:
style.css
p {
color: red;
}
index.html
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>This is a red text</p>
<p>This is also a red text</p>
</body>
HTML Styles can be used to add various effects to the HTML elements such as:
HTML Styles are very important in web development as it helps to make the web page more attractive and user-friendly. It is used to create a good user experience and to make the web page more engaging.