Free Web development courses with real-time projects Start Now!!
Presenting a HTML document on to the browser can be a tedious task if the given HTML document is not attractive. The styles in HTML are rules for making the web-pages more attractive, engaging and presentable.
HTML Styles Importance
Let us see why HTML Styles are important:
- Provides better formatting and an aesthetic look to the web-pages.
- Web-pages can be well-structured as per the developer’s preference.
- There is a greater consistency in the design of the web-page.
- Provides an engaging and aesthetic user experience.
Ways to implement HTML Styles
We can implement Styles in HTML 5 in three major ways:
1. HTML Inline Style
In inline styling, the properties of CSS are mentioned within the style attribute of the element that needs to be formatted. The style attribute supports multiple properties that are mentioned as “property’s name:value”;
For example:
<!DOCTYPE html> <html> <head> <title>DataFlair</title> </head> <body> <h1 style="text-align: center;"><u><i> Welcome to DataFlair</i></u></h1> <h2 style="text-align: center;"><u>About Us</u></h2> <p style="text-align: center; color: blue; font-size: 20px; font-family: cursive;"> We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training. DataFlair team comprises of trainers who are experts in their relevant technologies and are selected after many rounds of interviews, content team that continuously works hard to provide quality content to the readers, Marketing team that work hand in hand with other teams to make the content reaches the right audience and HR team that work to extend the team and to provide a healthy work environment. </p> </body> </html>
Output
Advantages of Inline Styles:
- Inline styles have the highest precedence i.e they execute before the external or internal stylesheets.
- Inline styles can be added quickly and easily to the element that needs to be formatted, a new document does not have to be created.
Disadvantages of Inline Styling:
- They tend to override element properties that the developer may not intend to.
- If only inline styles are used, HTML documents would become hard-coded and very difficult to maintain.
- If a single style needs to be added to a group of elements, they will have to be added to each and every element belonging to that group. For example, if all the paragraph tags should be center-aligned, each and every paragraph element needs to be found first and then its text-align property should be set to center. This becomes quite cumbersome.
2. Internal Style Sheet in HTML
HTML Internal style sheets are embedded within the document that needs to be styled. It is coded in the <style> element within the <head> section.
Technology is evolving rapidly!
Stay updated with DataFlair on WhatsApp!!
For example:
<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
<style type="text/css">
h1,h2{
text-align: center;
}
p{
text-align: center;
color: blue;
font-size: 20px;
font-family: cursive;
}
</style>
</head>
<body>
<h1><u><i> Welcome to DataFlair</i></u></h1>
<h2><u>About Us</u></h2>
<p>
We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.
DataFlair team comprises of trainers who are experts in their relevant technologies and are selected after many rounds of interviews, content team that continuously works hard to provide quality content to the readers, Marketing team that work hand in hand with other teams to make the content reaches the right audience and HR team that work to extend the team and to provide a healthy work environment.
</p>
</body>
</html>
Output
Advantages of Internal Style Sheet
- We can style Multiple elements using the internal or embedded style sheets.
- Id and class selectors can be used very efficiently.
- There is no need to insert multiple files in order to style the HTML document.
Disadvantages of HTML Internal Style Sheet
- It increases the size of code and is the second preference, after inline style.
- It can increase the page’s loading time.
3. HTML External Style Sheet
An external style sheet in HTML contains all the styling attributes in a separate document(extension .css). This document is linked to the HTML documents that need those rules of style. There are two ways of linking the style sheet.
a. The <link> tag within <head> section
We will be linking style.css
h1,h2{
text-align: center;
}
p{
text-align: center;
color: blue;
font-size: 20px;
font-family: cursive;
}
<!DOCTYPE html> <html> <head> <title>DataFlair</title> <link rel="stylesheet" type="text/css" href="style.css"> </style> </head> <body> <h1><u><i> Welcome to DataFlair</i></u></h1> <h2><u>About Us</u></h2> <p> We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training. DataFlair team comprises of trainers who are experts in their relevant technologies and are selected after many rounds of interviews, content team that continuously works hard to provide quality content to the readers, Marketing team that work hand in hand with other teams to make the content reaches the right audience and HR team that work to extend the team and to provide a healthy work environment. </p> </body> </html>
Output
b. Importing the HTML style sheet
Styles can also be applied using the ‘@import’ keyword, followed by the URL of the CSS file. The browser is instructed to load the CSS file using this keyword.
For example:
Styles can also be applied using the ‘@import’ keyword, followed by the URL of the CSS file. The browser is instructed to load the CSS file using this keyword.
For example,
Code-
<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
<style type="text/css">
@import url("style.css");
</style>
</head>
<body>
<h1><u><i> Welcome to DataFlair</i></u></h1>
<h2><u>About Us</u></h2>
<p>
We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.
DataFlair team comprises of trainers who are experts in their relevant technologies and are selected after many rounds of interviews, content team that continuously works hard to provide quality content to the readers, Marketing team that work hand in hand with other teams to make the content reaches the right audience and HR team that work to extend the team and to provide a healthy work environment.
</p>
</body>
</html>
Output
Advantages
- We can manipulate styles of many documents using a single file.
- Classes and Ids are useful to access and manipulate the styles of various HTML elements.
- Selector and grouping methods can be used for applying the styles.
Disadvantages
- Extra downloading required.
- Document cannot be rendered until the style sheet has been loaded.
- Not viable for less style definitions.
Most Commonly used HTML Style Properties
The style attribute is useful to add styles to the HTML document. As discussed before, it comes with “property:value” properties.
Some common properties of the style attribute are:
1. background-color
Used to set the background color of an element. For example,
<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
<style type="text/css">
@import url("style.css");
</style>
</head>
<body>
<h1><u><i> Welcome to DataFlair</i></u></h1>
<h2><u>About Us</u></h2>
<p style="background-color: yellow;">
We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.
DataFlair team comprises of trainers who are experts in their relevant technologies and are selected after many rounds of interviews, content team that continuously works hard to provide quality content to the readers, Marketing team that work hand in hand with other teams to make the content reaches the right audience and HR team that work to extend the team and to provide a healthy work environment.
</p>
</body>
</html>
Output
2. text-color
Used to set the colour of the text. For example,
<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
<style type="text/css">
@import url("style.css");
</style>
</head>
<body>
<h1><u><i> Welcome to DataFlair</i></u></h1>
<h2><u>About Us</u></h2>
<p style="color: red;">
We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.
DataFlair team comprises of trainers who are experts in their relevant technologies and are selected after many rounds of interviews, content team that continuously works hard to provide quality content to the readers, Marketing team that work hand in hand with other teams to make the content reaches the right audience and HR team that work to extend the team and to provide a healthy work environment.
</p>
</body>
</html>
Output
3. font-family
It is to set the type of font. For example:
<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
<style type="text/css">
@import url("style.css");
</style>
</head>
<body>
<h1><u><i> Welcome to DataFlair</i></u></h1>
<h2><u>About Us</u></h2>
<p style="font-family: verdana">
We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.
DataFlair team comprises of trainers who are experts in their relevant technologies and are selected after many rounds of interviews, content team that continuously works hard to provide quality content to the readers, Marketing team that work hand in hand with other teams to make the content reaches the right audience and HR team that work to extend the team and to provide a healthy work environment.
</p>
</body>
</html>
Output
4. text-size
We can adjust the text-size using the font-size property. For example:
<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
<style type="text/css">
@import url("style.css");
</style>
</head>
<body>
<h1><u><i> Welcome to DataFlair</i></u></h1>
<h2><u>About Us</u></h2>
<p style="font-size: 200%">
We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.
DataFlair team comprises of trainers who are experts in their relevant technologies and are selected after many rounds of interviews, content team that continuously works hard to provide quality content to the readers, Marketing team that work hand in hand with other teams to make the content reaches the right audience and HR team that work to extend the team and to provide a healthy work environment.
</p>
</body>
</html>
The font-size can be specified in percentages or pixels(e.g., 20px).
Output
5. text-align
HTML text-align property is useful to align the content of an element.
For example:
<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
<style type="text/css">
@import url("style.css");
</style>
</head>
<body>
<h1 style="text-align: center;"><u><i> Welcome to DataFlair</i></u></h1>
<h2 style="text-align: center;"><u>About Us</u></h2>
<p style="text-align: center;">
We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.
DataFlair team comprises of trainers who are experts in their relevant technologies and are selected after many rounds of interviews, content team that continuously works hard to provide quality content to the readers, Marketing team that work hand in hand with other teams to make the content reaches the right audience and HR team that work to extend the team and to provide a healthy work environment.
</p>
</body>
</html>
Output
Summary
In this article, we have learned about the HTML style attributes along with different ways to style an HTML document. We looked at three ways of adding styles to our documents – inline style, internal style and external style sheets. We’ve also looked at some of the most basic style attribute’s properties, background-color,color,font-family,font-size and text-align.