![\"HTML](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/HTML-Style.jpg\")
<\/a><\/p>\nHTML Styles Importance<\/h2>\n
Let us see why HTML Styles are important:<\/p>\n
- \n
- Provides better formatting and an aesthetic look to the web-pages.<\/li>\n
- Web-pages can be well-structured as per the developer\u2019s preference.<\/li>\n
- There is a greater consistency in the design of the web-page.<\/li>\n
- Provides an engaging and aesthetic user experience.<\/li>\n<\/ul>\n
HTML styles are useful in development of good websites as it helps in presentation of good looking and easily navigable websites. When applying styles, one is able to format the webpage in a manner that makes it easy to read and catches the viewer\u2019s attention. In addition, well-designed styles contribute to the professionalism and credibility of a website.<\/p>\n
Ways to implement HTML Styles<\/h2>\n
We can implement Styles in HTML 5 in three major ways:<\/p>\n
1. HTML Inline Style<\/h3>\n
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 \u201cproperty\u2019s name:value\u201d;<\/p>\n
For example:<\/p>\n
<!DOCTYPE html> \r\n<html> \r\n<head> \r\n<title>DataFlair<\/title> \r\n<\/head> \r\n<body>\r\n<h1 style=\"text-align: center;\"><u><i> Welcome to DataFlair<\/i><\/u><\/h1> \r\n<h2 style=\"text-align: center;\"><u>About Us<\/u><\/h2> \r\n<p style=\"text-align: center; color: blue; font-size: 20px; font-family: cursive;\">\r\nWe 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.\r\nDataFlair 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.\r\n<\/p>\r\n<\/body> \r\n<\/html> \r\n<\/pre>\n
Output<\/strong><\/p>\n
![\"HTML](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-279.png\")
<\/a><\/p>\nAdvantages of Inline Styles:<\/h4>\n
- \n
- Inline styles have the highest precedence i.e they execute before the external or internal stylesheets.<\/li>\n
- 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.<\/li>\n<\/ul>\n
Disadvantages of Inline Styling:<\/h4>\n
- \n
- They tend to override element properties that the developer may not intend to.<\/li>\n
- If only inline styles are used, HTML documents would become hard-coded and very difficult to maintain.<\/li>\n
- 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.<\/li>\n<\/ul>\n
2. Internal Style Sheet in HTML<\/h3>\n
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.<\/p>\n
For example:<\/p>\n
<!DOCTYPE html> \r\n<html> \r\n<head> \r\n<title>DataFlair<\/title>\r\n<style type=\"text\/css\">\r\nh1,h2{\r\ntext-align: center;\r\n}\r\np{\r\ntext-align: center; \r\ncolor: blue; \r\nfont-size: 20px; \r\nfont-family: cursive;\r\n}\r\n<\/style> \r\n<\/head> \r\n<body>\r\n<h1><u><i> Welcome to DataFlair<\/i><\/u><\/h1> \r\n<h2><u>About Us<\/u><\/h2> \r\n<p>\r\nWe 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.\r\nDataFlair 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.\r\n<\/p>\r\n<\/body> \r\n<\/html> \r\n<\/pre>\nOutput<\/strong><\/p>\n
![\"Styles](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-279-1.png\")
<\/a><\/p>\nAdvantages of Internal Style Sheet<\/h4>\n
- \n
- We can style Multiple elements using the internal or embedded style sheets.<\/li>\n
- Id and class selectors can be used very efficiently.<\/li>\n
- There is no need to insert multiple files in order to style the HTML document.<\/li>\n<\/ul>\n
Disadvantages of HTML Internal Style Sheet<\/h4>\n
- \n
- It increases the size of code and is the second preference, after inline style.<\/li>\n
- It can increase the page\u2019s loading time.<\/li>\n<\/ul>\n
3. HTML External Style Sheet<\/h3>\n
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.<\/p>\n
a. The <link> tag within <head> section<\/h4>\n
We will be linking style.css<\/p>\n
h1,h2{\r\ntext-align: center;\r\n}\r\np{\r\ntext-align: center; \r\ncolor: blue; \r\nfont-size: 20px; \r\nfont-family: cursive;\r\n}\r\n<\/pre>\n<!DOCTYPE html> \r\n<html> \r\n<head> \r\n<title>DataFlair<\/title>\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\">\r\n<\/style> \r\n<\/head> \r\n<body>\r\n<h1><u><i> Welcome to DataFlair<\/i><\/u><\/h1> \r\n<h2><u>About Us<\/u><\/h2> \r\n<p>\r\nWe 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.\r\nDataFlair 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.\r\n<\/p>\r\n<\/body> \r\n<\/html>\r\n<\/pre>\n
Output<\/strong><\/p>\n
![\"HTML](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-279-2.png\")
<\/a><\/p>\nb. Importing the HTML style sheet<\/h4>\n
Styles can also be applied using the \u2018@import\u2019 keyword, followed by the URL of the CSS file. The browser is instructed to load the CSS file using this keyword.<\/p>\n
For example:<\/p>\n
Styles can also be applied using the \u2018@import\u2019 keyword, followed by the URL of the CSS file. The browser is instructed to load the CSS file using this keyword.\r\nFor example,\r\nCode-\r\n<!DOCTYPE html> \r\n<html> \r\n<head> \r\n<title>DataFlair<\/title>\r\n<style type=\"text\/css\">\r\n@import url(\"style.css\");\r\n<\/style>\r\n<\/head> \r\n<body>\r\n<h1><u><i> Welcome to DataFlair<\/i><\/u><\/h1> \r\n<h2><u>About Us<\/u><\/h2> \r\n<p>\r\nWe 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.\r\nDataFlair 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.\r\n<\/p>\r\n<\/body> \r\n<\/html> \r\n<\/pre>\n
Output<\/strong><\/p>\n
![\"styling](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-279-3.png\")
<\/a><\/p>\nAdvantages<\/strong><\/h4>\n
- \n
- We can manipulate styles of many documents using a single file.<\/li>\n
- Classes and Ids are useful to access and manipulate the styles of various HTML elements.<\/li>\n
- Selector and grouping methods can be used for applying the styles.<\/li>\n<\/ul>\n
Disadvantages<\/h4>\n
- \n
- Extra downloading required.<\/li>\n
- Document cannot be rendered until the style sheet has been loaded.<\/li>\n
- Not viable for less style definitions.<\/li>\n<\/ul>\n
Most Commonly used HTML Style Properties<\/h2>\n
The style attribute is useful to add styles to the HTML document. As discussed before, it comes with \u201cproperty:value\u201d properties.<\/p>\n
Some common properties of the style attribute are:<\/p>\n
1. background-color<\/h3>\n
Used to set the background color of an element. For example,<\/p>\n
<!DOCTYPE html> \r\n<html> \r\n<head> \r\n<title>DataFlair<\/title>\r\n<style type=\"text\/css\">\r\n@import url(\"style.css\");\r\n<\/style>\r\n<\/head> \r\n<body>\r\n<h1><u><i> Welcome to DataFlair<\/i><\/u><\/h1> \r\n<h2><u>About Us<\/u><\/h2> \r\n<p style=\"background-color: yellow;\">\r\nWe 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.\r\nDataFlair 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.\r\n<\/p>\r\n<\/body> \r\n<\/html> \r\n<\/pre>\n
Output<\/strong><\/p>\n
![\"HTML](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-281.png\")
<\/a><\/p>\n2. text-color<\/h3>\n
Used to set the colour of the text. For example,<\/p>\n
<!DOCTYPE html> \r\n<html> \r\n<head> \r\n<title>DataFlair<\/title>\r\n<style type=\"text\/css\">\r\n@import url(\"style.css\");\r\n<\/style>\r\n<\/head> \r\n<body>\r\n<h1><u><i> Welcome to DataFlair<\/i><\/u><\/h1> \r\n<h2><u>About Us<\/u><\/h2> \r\n<p style=\"color: red;\">\r\nWe 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.\r\nDataFlair 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.\r\n<\/p>\r\n<\/body> \r\n<\/html> \r\n<\/pre>\n
Output<\/strong><\/p>\n
![\"HTML](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-283.png\")
<\/a><\/p>\n3. font-family<\/h3>\n
It is to set the type of font. For example:<\/p>\n
<!DOCTYPE html> \r\n<html> \r\n<head> \r\n<title>DataFlair<\/title>\r\n<style type=\"text\/css\">\r\n@import url(\"style.css\");\r\n<\/style>\r\n<\/head> \r\n<body>\r\n<h1><u><i> Welcome to DataFlair<\/i><\/u><\/h1> \r\n<h2><u>About Us<\/u><\/h2> \r\n<p style=\"font-family: verdana\">\r\nWe 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.\r\nDataFlair 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.\r\n<\/p>\r\n<\/body> \r\n<\/html> \r\n<\/pre>\n
Output<\/strong><\/p>\n
![\"HTML](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-285.png\")
<\/a><\/p>\n4. text-size<\/h3>\n
We can adjust the text-size using the font-size property. For example:<\/p>\n
<!DOCTYPE html> \r\n<html> \r\n<head> \r\n<title>DataFlair<\/title>\r\n<style type=\"text\/css\">\r\n@import url(\"style.css\");\r\n<\/style>\r\n<\/head> \r\n<body>\r\n<h1><u><i> Welcome to DataFlair<\/i><\/u><\/h1> \r\n<h2><u>About Us<\/u><\/h2> \r\n<p style=\"font-size: 200%\">\r\nWe 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.\r\nDataFlair 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.\r\n<\/p>\r\n<\/body> \r\n<\/html> \r\n<\/pre>\n