![\"HTML](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Styling-with-CSS3.jpg\")
<\/a><\/p>\nLinking CSS to HTML<\/h2>\n
CSS is a language used for styling the HTML document and displaying its elements as per your preference.<\/p>\n
Uses of HTML CSS<\/h2>\n\n- HTML elements can be made more attractive and appealing by using cascading style sheets.<\/li>\n
- HTML documents can be incompatible with different devices; they can be made compatible with the help of CSS.<\/li>\n
- Transition and animation effects can be added, without writing any complex JavaScript codes.<\/li>\n
- The same style rules can be easily applied to various HTML elements without any hassle.<\/li>\n
- An element can have dynamic states such as hover and focus that can also be styled using CSS, which would otherwise be a tedious task.<\/li>\n
- Multiple pages can be styled and manipulated using a single CSS file.<\/li>\n
- Elements such as skew, scale, rotate, etc, can be easily transformed in 2D or 3D state.<\/li>\n<\/ul>\n
Using CSS, you can create visually appealing layouts that improve user experience. The separation of content (HTML) and presentation (CSS) allows more maintainable and flexible code. CSS enables web developers to control the look and feel of a website with precision. This modular approach also supports faster page loading times and easier troubleshooting.<\/p>\n
Advantages of HTML & CSS<\/h2>\n\n- CSS can be written once and re-used with any HTML document, thus saving time.<\/li>\n
- These files can be easily maintained, i.e., for a single change, just add it to the global CSS file, and all the HTML documents linked to it will be changed automatically.<\/li>\n
- Search engines can easily read the CSS files and do not have to struggle.<\/li>\n
- CSS outshines HTML because of its wider array of properties that can be used to style the HTML document more attractively.<\/li>\n
- It has a local cache that can be used to view websites offline.<\/li>\n
- CSS allows compatibility over multiple devices, thus enabling HTML documents to be rendered effectively in a desktop as well as a cell-phone.<\/li>\n<\/ul>\n
The latest version of CSS is CSS3 currently prevailing.<\/p>\n
Advantages of CSS3 over CSS<\/h2>\n\n- CSS3 allows users to create responsive pages and handles media queries efficiently. Personalized CSS properties can be applied to devices of different screen widths.<\/li>\n
- With new color formats such as rgb() and hsl(), it is possible to add new color effects and styles to the HTML document.<\/li>\n
- The \u2018box-sizing\u2019 property of CSS3 has made the alignment easier, and CSS grids have reduced the use of table rows and columns.<\/li>\n
- With CSS, in order to add animations, one had to write a code in the scripting language. With CSS3, it is finally possible to add animations using the inbuilt animation features such as text-shadow, thus reducing the workload of developers.<\/li>\n
- Every browser supports CSS3, unlike the older vanilla CSS.<\/li>\n
- CSS3 can be easily tested because of its modularity, thus making bug-detection easier.<\/li>\n
- With the \u2018border-radius\u2019 property, the images and divisions can have rounded-borders, and their borders can be further styled.<\/li>\n<\/ul>\n
As we\u2019ve discussed in the previous article of HTML Styles, CSS can be added to an HTML document using 3 methods – inline CSS, internal CSS, and external CSS. In this article, we\u2019ll be using these methods. Here is an example of basic CSS,<\/p>\n
Code-<\/strong><\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>DataFlair<\/title>\r\n<style>\r\nh2{\r\n font-family: verdana;\r\n text-align: center;\r\n color: blue;\r\n}\r\np{\r\n font-size: 20px;\r\n color: red;\r\n font-family: cursive;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h2>DataFlair<\/h2>\r\n<br>\r\n<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.\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.<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nOutput-<\/strong><\/p>\n![\"CSS](\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Screenshot-336.png\")
<\/a><\/p>\nMajor HTML and CSS Stylings<\/h2>\n1. Font<\/h3>\n
Using CSS, you can create visually appealing layouts that improve user experience. The separation of content (HTML) and presentation (CSS) allows more maintainable and flexible code. CSS enables web developers to control the look and feel of a website with precision. This modular approach also supports faster page loading times and easier troubleshooting.<\/p>\n
Advantages of HTML & CSS<\/h2>\n\n- CSS can be written once and re-used with any HTML document, thus saving time.<\/li>\n
- These files can be easily maintained, i.e., for a single change, just add it to the global CSS file, and all the HTML documents linked to it will be changed automatically.<\/li>\n
- Search engines can easily read the CSS files and do not have to struggle.<\/li>\n
- CSS outshines HTML because of its wider array of properties that can be used to style the HTML document more attractively.<\/li>\n
- It has a local cache that can be used to view websites offline.<\/li>\n
- CSS allows compatibility over multiple devices, thus enabling HTML documents to be rendered effectively in a desktop as well as a cell-phone.<\/li>\n<\/ul>\n
The latest version of CSS is CSS3 currently prevailing.<\/p>\n
Advantages of CSS3 over CSS<\/h2>\n\n- CSS3 allows users to create responsive pages and handles media queries efficiently. Personalized CSS properties can be applied to devices of different screen widths.<\/li>\n
- With new color formats such as rgb() and hsl(), it is possible to add new color effects and styles to the HTML document.<\/li>\n
- The \u2018box-sizing\u2019 property of CSS3 has made the alignment easier, and CSS grids have reduced the use of table rows and columns.<\/li>\n
- With CSS, in order to add animations, one had to write a code in the scripting language. With CSS3, it is finally possible to add animations using the inbuilt animation features such as text-shadow, thus reducing the workload of developers.<\/li>\n
- Every browser supports CSS3, unlike the older vanilla CSS.<\/li>\n
- CSS3 can be easily tested because of its modularity, thus making bug-detection easier.<\/li>\n
- With the \u2018border-radius\u2019 property, the images and divisions can have rounded-borders, and their borders can be further styled.<\/li>\n<\/ul>\n
As we\u2019ve discussed in the previous article of HTML Styles, CSS can be added to an HTML document using 3 methods – inline CSS, internal CSS, and external CSS. In this article, we\u2019ll be using these methods. Here is an example of basic CSS,<\/p>\n
Code-<\/strong><\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>DataFlair<\/title>\r\n<style>\r\nh2{\r\n font-family: verdana;\r\n text-align: center;\r\n color: blue;\r\n}\r\np{\r\n font-size: 20px;\r\n color: red;\r\n font-family: cursive;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h2>DataFlair<\/h2>\r\n<br>\r\n<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.\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.<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nOutput-<\/strong><\/p>\n<\/a><\/p>\nMajor HTML and CSS Stylings<\/h2>\n1. Font<\/h3>\n
The latest version of CSS is CSS3 currently prevailing.<\/p>\n
Advantages of CSS3 over CSS<\/h2>\n\n- CSS3 allows users to create responsive pages and handles media queries efficiently. Personalized CSS properties can be applied to devices of different screen widths.<\/li>\n
- With new color formats such as rgb() and hsl(), it is possible to add new color effects and styles to the HTML document.<\/li>\n
- The \u2018box-sizing\u2019 property of CSS3 has made the alignment easier, and CSS grids have reduced the use of table rows and columns.<\/li>\n
- With CSS, in order to add animations, one had to write a code in the scripting language. With CSS3, it is finally possible to add animations using the inbuilt animation features such as text-shadow, thus reducing the workload of developers.<\/li>\n
- Every browser supports CSS3, unlike the older vanilla CSS.<\/li>\n
- CSS3 can be easily tested because of its modularity, thus making bug-detection easier.<\/li>\n
- With the \u2018border-radius\u2019 property, the images and divisions can have rounded-borders, and their borders can be further styled.<\/li>\n<\/ul>\n
As we\u2019ve discussed in the previous article of HTML Styles, CSS can be added to an HTML document using 3 methods – inline CSS, internal CSS, and external CSS. In this article, we\u2019ll be using these methods. Here is an example of basic CSS,<\/p>\n
Code-<\/strong><\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>DataFlair<\/title>\r\n<style>\r\nh2{\r\n font-family: verdana;\r\n text-align: center;\r\n color: blue;\r\n}\r\np{\r\n font-size: 20px;\r\n color: red;\r\n font-family: cursive;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h2>DataFlair<\/h2>\r\n<br>\r\n<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.\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.<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nOutput-<\/strong><\/p>\n<\/a><\/p>\nMajor HTML and CSS Stylings<\/h2>\n1. Font<\/h3>\n
As we\u2019ve discussed in the previous article of HTML Styles, CSS can be added to an HTML document using 3 methods – inline CSS, internal CSS, and external CSS. In this article, we\u2019ll be using these methods. Here is an example of basic CSS,<\/p>\n
Code-<\/strong><\/p>\n Output-<\/strong><\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>DataFlair<\/title>\r\n<style>\r\nh2{\r\n font-family: verdana;\r\n text-align: center;\r\n color: blue;\r\n}\r\np{\r\n font-size: 20px;\r\n color: red;\r\n font-family: cursive;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h2>DataFlair<\/h2>\r\n<br>\r\n<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.\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.<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n<\/a><\/p>\nMajor HTML and CSS Stylings<\/h2>\n
1. Font<\/h3>\n