{"id":112034,"date":"2023-03-11T09:00:14","date_gmt":"2023-03-11T03:30:14","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=112034"},"modified":"2024-07-29T16:04:28","modified_gmt":"2024-07-29T10:34:28","slug":"3-best-ways-to-add-css-to-html","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/3-best-ways-to-add-css-to-html\/","title":{"rendered":"3 Best Ways to Add CSS to HTML"},"content":{"rendered":"

CSS, or Cascading Style Sheets, is a styling language used to enhance the visual appeal of web pages. It is used to control the layout, colors, fonts, and other visual elements of a website. In this article, we will go over the basics of how to add CSS to a webpage.<\/p>\n

Ways to add CSS to HTML<\/h3>\n

1. Inline CSS<\/h4>\n

The simplest way to add CSS to a webpage is by using inline styles. This method involves adding the CSS code directly to the HTML element using the “style” attribute. Here’s an example:<\/p>\n

<html>\r\n<head>\r\n    <p style=\"color: cyan; font-size: 14px;\">DataFlair<\/p>\r\n<\/head>\r\n<\/html>\r\n<\/pre>\n
Output:<\/strong><\/p>\n
\"external<\/a><\/p>\n
 <\/p>\n
In this example, we are changing the text color to cyan and the font size to 14px for the “p” element.<\/p>\n
2. Internal CSS<\/h4>\n
Another way to add CSS to a webpage is by using an internal stylesheet. This method involves creating a separate “style” element within the head of the HTML document and linking it to the elements on the page using CSS selectors. Here’s an example:<\/p>\n
<html>\r\n<head>\r\n  <style>\r\n    p {\r\n      color: cyan;\r\n      font-size: 25px;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <p>DataFlair<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output:<\/strong><\/p>\n
 <\/p>\n
\"inline<\/a><\/p>\n
 <\/p>\n
In this example, we are linking the CSS code to the “p” element, which will change the text color to cyan and the font size to 25px for all “p” elements on the page.<\/p>\n
3. External CSS<\/h4>\n
Finally, you can add CSS to a webpage by linking to an external stylesheet. This method involves creating a separate .css file and linking it to the HTML document using the “link” element within the head of the HTML document. Here’s an example:<\/p>\n
HTML<\/strong><\/p>\n
<html>\r\n<head>\r\n  <link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\">\r\n<\/head>\r\n<body>\r\n  <p>DataFlair<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
CSS<\/strong><\/p>\n
p {\r\n  color: cyan;\r\n  font-size: 25px;\r\n}\r\n<\/pre>\n
Output<\/strong>:<\/p>\n
\"internal<\/a><\/p>\n
In this example, we are linking the external stylesheet “style.css” to the HTML document, which will change the text color to cyan and the font size to 25px for all “p” elements on the page.<\/p>\n
In this context, there is dire need to ensure that the right method has been adopted depending on the size and needs of the project at hand. For small, single-page projects or most simple changes, inline CSS is the best option.<\/p>\n
However, large scale projects or when better maintainability is required then internal or external stylesheets can be used. Third, external stylesheets have the feature that they will be cached by the browser and therefore facilitate an enhanced, faster and more efficient utilization across the several pages of the site.<\/p>\n
It’s important to note that the order of CSS does matter, as the later style will overwrite the earlier one.<\/p>\n
We can use any of the above methods to add CSS to your webpage, but using an external stylesheet is the best practice. It keeps your HTML and CSS separate, making it easier to maintain and update your website.<\/p>\n
Conclusion<\/h3>\n
In conclusion, there are three main ways to add CSS to a webpage: inline styles, internal stylesheets, and external stylesheets.<\/p>\n
Inline styles are the simplest method and involve adding the CSS code directly to the HTML element. Internal stylesheets involve creating a separate “style” element within the head of the HTML document and linking it to the elements on the page using CSS selectors. External stylesheets involve creating a separate .css file and linking it to the HTML document. It uses the “link” element within the head of the HTML document.<\/p>\n","protected":false},"excerpt":{"rendered":"
CSS, or Cascading Style Sheets, is a styling language used to enhance the visual appeal of web pages. It is used to control the layout, colors, fonts, and other visual elements of a website....<\/p>\n","protected":false},"author":5,"featured_media":112575,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27226],"tags":[27299],"class_list":["post-112034","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tutorials","tag-add-css-to-html"],"yoast_head":"\n3 Best Ways to Add CSS to HTML - DataFlair<\/title>\n<meta name=\"description\" content=\"There are three main ways to add CSS to HTML webpage: inline styles, internal stylesheets, and external stylesheets. Learn more about them.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/3-best-ways-to-add-css-to-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3 Best Ways to Add CSS to HTML - DataFlair\" \/>\n<meta property=\"og:description\" content=\"There are three main ways to add CSS to HTML webpage: inline styles, internal stylesheets, and external stylesheets. Learn more about them.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/3-best-ways-to-add-css-to-html\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-11T03:30:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-29T10:34:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/how-to-add-css.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"3 Best Ways to Add CSS to HTML - DataFlair","description":"There are three main ways to add CSS to HTML webpage: inline styles, internal stylesheets, and external stylesheets. Learn more about them.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/3-best-ways-to-add-css-to-html\/","og_locale":"en_US","og_type":"article","og_title":"3 Best Ways to Add CSS to HTML - DataFlair","og_description":"There are three main ways to add CSS to HTML webpage: inline styles, internal stylesheets, and external stylesheets. Learn more about them.","og_url":"https:\/\/data-flair.training\/blogs\/3-best-ways-to-add-css-to-html\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2023-03-11T03:30:14+00:00","article_modified_time":"2024-07-29T10:34:28+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/how-to-add-css.webp","type":"image\/webp"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/3-best-ways-to-add-css-to-html\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/3-best-ways-to-add-css-to-html\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823"},"headline":"3 Best Ways to Add CSS to HTML","datePublished":"2023-03-11T03:30:14+00:00","dateModified":"2024-07-29T10:34:28+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/3-best-ways-to-add-css-to-html\/"},"wordCount":534,"commentCount":2,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/3-best-ways-to-add-css-to-html\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/how-to-add-css.webp","keywords":["Add CSS to HTML"],"articleSection":["CSS Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/3-best-ways-to-add-css-to-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/3-best-ways-to-add-css-to-html\/","url":"https:\/\/data-flair.training\/blogs\/3-best-ways-to-add-css-to-html\/","name":"3 Best Ways to Add CSS to HTML - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/3-best-ways-to-add-css-to-html\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/3-best-ways-to-add-css-to-html\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/how-to-add-css.webp","datePublished":"2023-03-11T03:30:14+00:00","dateModified":"2024-07-29T10:34:28+00:00","description":"There are three main ways to add CSS to HTML webpage: inline styles, internal stylesheets, and external stylesheets. Learn more about them.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/3-best-ways-to-add-css-to-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/3-best-ways-to-add-css-to-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/3-best-ways-to-add-css-to-html\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/how-to-add-css.webp","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/02\/how-to-add-css.webp","width":1200,"height":628,"caption":"how to add css to html"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/3-best-ways-to-add-css-to-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"CSS Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/css-tutorials\/"},{"@type":"ListItem","position":3,"name":"3 Best Ways to Add CSS to HTML"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team creates expert-level guides on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Our goal is to empower learners with easy-to-understand content. Explore our resources for career growth and practical learning.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112034","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=112034"}],"version-history":[{"count":5,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112034\/revisions"}],"predecessor-version":[{"id":143029,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/112034\/revisions\/143029"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/112575"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=112034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=112034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=112034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}