{"id":524,"date":"2022-12-19T14:52:17","date_gmt":"2022-12-19T09:22:17","guid":{"rendered":"https:\/\/qwebtechnologies.com\/blog\/?p=524"},"modified":"2024-09-08T00:20:11","modified_gmt":"2024-09-07T18:50:11","slug":"how-to-apply-css-in-html","status":"publish","type":"post","link":"https:\/\/qwebtechnologies.com\/blog\/how-to-apply-css-in-html\/","title":{"rendered":"How To Apply CSS in HTML."},"content":{"rendered":"\n<p>How to apply CSS in HTML. There are four common ways to <strong>apply CSS <\/strong>styles to an HTML document:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/qwebtechnologies.com\/blog\/wp-content\/uploads\/2023\/01\/How-To-Apply-CSS-in-HTML.jpg\" alt=\"How To Apply CSS in HTML\" class=\"wp-image-829\"\/><figcaption class=\"wp-element-caption\">How To Apply CSS in HTML<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/qwebtechnologies.com\/blog\/css-tutorials\/\" target=\"_blank\" rel=\"noreferrer noopener\">Read more Related  Post<\/a><\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#how-to-apply-css-in-html-process\">How to apply CSS in HTML Process.<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-apply-css-in-html-process\">How to apply CSS in HTML Process.<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>External stylesheet:<\/strong> You can create a separate CSS file and link to it from the HTML document using an <code>&lt;link&gt;<\/code> element in the <code>&lt;head&gt;<\/code> of the HTML document. This is the recommended way to apply styles, as it allows you to reuse the same styles on multiple pages and makes it easier to maintain your site.<\/li>\n<\/ol>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n  &lt;link rel=\"stylesheet\" href=\"\/path\/to\/styles.css\"&gt;\n&lt;\/head&gt;\n<\/code><\/pre>\n\n\n\n<p>   <strong>2. Internal stylesheet: <\/strong>You can also define your <a href=\"https:\/\/www.w3schools.com\/html\/html_css.asp\" target=\"_blank\" rel=\"noreferrer noopener\">CSS styles<\/a> within the HTML document itself using an <code>&lt;style&gt;<\/code> element in the <code>&lt;head&gt;<\/code> of the HTML document. This method is not recommended because it makes it difficult to reuse styles and can make your HTML document harder to read and maintain.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n  &lt;style&gt;\n    body {\n      background-color: yellow;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n<\/code><\/pre>\n\n\n\n<p>   <strong>3. Inline styles:<\/strong> You can apply CSS styles directly to an HTML element using the <code>style<\/code> attribute. This method is not recommended because it makes it difficult to reuse styles and can make your HTML document harder to read and maintain.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p style=\"color: red;\"&gt;This paragraph is red.&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<p>   <strong>4. Importing: <\/strong>You can use the <code>@import<\/code> rule within a CSS file to import another CSS file. This is not recommended because it adds additional HTTP requests and can increase the load time of your page.<\/p>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@import '\/path\/to\/import.css';\n<\/code><\/pre>\n\n\n\n<p>It is generally best to use an external stylesheet to apply styles to your HTML document, as it allows you to easily reuse styles and makes it easier to maintain your site. However, the other methods can be useful in specific cases<\/p>\n\n\n\n<p><strong>Read More.<\/strong><\/p>\n\n\n<ul class=\"wp-block-latest-posts__list is-grid columns-3 wp-block-latest-posts\"><li><div class=\"wp-block-latest-posts__featured-image\"><img loading=\"lazy\" decoding=\"async\" width=\"128\" height=\"72\" src=\"https:\/\/qwebtechnologies.com\/blog\/wp-content\/uploads\/2024\/10\/Java-Frameworks.jpg\" class=\"attachment-thumbnail size-thumbnail wp-post-image\" alt=\"Java Frameworks\" style=\"\" srcset=\"https:\/\/qwebtechnologies.com\/blog\/wp-content\/uploads\/2024\/10\/Java-Frameworks.jpg 1280w, https:\/\/qwebtechnologies.com\/blog\/wp-content\/uploads\/2024\/10\/Java-Frameworks-768x432.jpg 768w, https:\/\/qwebtechnologies.com\/blog\/wp-content\/uploads\/2024\/10\/Java-Frameworks-150x84.jpg 150w\" sizes=\"auto, (max-width: 128px) 100vw, 128px\" \/><\/div><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/qwebtechnologies.com\/blog\/java-frameworks\/\">The Ultimate Guide to the Top 10 Java Frameworks for 2024.<\/a><\/li>\n<li><div class=\"wp-block-latest-posts__featured-image\"><img loading=\"lazy\" decoding=\"async\" width=\"128\" height=\"72\" src=\"https:\/\/qwebtechnologies.com\/blog\/wp-content\/uploads\/2024\/10\/javascript-location-reload-true.jpg\" class=\"attachment-thumbnail size-thumbnail wp-post-image\" alt=\"javascript:location.reload(true)\" style=\"\" srcset=\"https:\/\/qwebtechnologies.com\/blog\/wp-content\/uploads\/2024\/10\/javascript-location-reload-true.jpg 1280w, https:\/\/qwebtechnologies.com\/blog\/wp-content\/uploads\/2024\/10\/javascript-location-reload-true-768x432.jpg 768w, https:\/\/qwebtechnologies.com\/blog\/wp-content\/uploads\/2024\/10\/javascript-location-reload-true-150x84.jpg 150w\" sizes=\"auto, (max-width: 128px) 100vw, 128px\" \/><\/div><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/qwebtechnologies.com\/blog\/javascript-location-reload-true\/\">A Comprehensive Guide to Using javascript:location.reload(true) in Web Development<\/a><\/li>\n<li><div class=\"wp-block-latest-posts__featured-image\"><img loading=\"lazy\" decoding=\"async\" width=\"128\" height=\"72\" src=\"https:\/\/qwebtechnologies.com\/blog\/wp-content\/uploads\/2024\/10\/php-explode-multiple-separators.jpg\" class=\"attachment-thumbnail size-thumbnail wp-post-image\" alt=\"php explode multiple separators\" style=\"\" srcset=\"https:\/\/qwebtechnologies.com\/blog\/wp-content\/uploads\/2024\/10\/php-explode-multiple-separators.jpg 1280w, https:\/\/qwebtechnologies.com\/blog\/wp-content\/uploads\/2024\/10\/php-explode-multiple-separators-768x432.jpg 768w, https:\/\/qwebtechnologies.com\/blog\/wp-content\/uploads\/2024\/10\/php-explode-multiple-separators-150x84.jpg 150w\" sizes=\"auto, (max-width: 128px) 100vw, 128px\" \/><\/div><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/qwebtechnologies.com\/blog\/php-explode-multiple-separators\/\">PHP explode Multiple Separators: A Comprehensive Guide.<\/a><\/li>\n<li><div class=\"wp-block-latest-posts__featured-image\"><img loading=\"lazy\" decoding=\"async\" width=\"96\" height=\"96\" src=\"https:\/\/qwebtechnologies.com\/blog\/wp-content\/uploads\/2024\/09\/Copy-Constructor-in-Java-e1727713503548.webp\" class=\"attachment-thumbnail size-thumbnail wp-post-image\" alt=\"Copy Constructor in Java\" style=\"\" \/><\/div><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/qwebtechnologies.com\/blog\/copy-constructor-in-java\/\">Copy Constructor in Java: A Complete Guide<\/a><\/li>\n<li><div class=\"wp-block-latest-posts__featured-image\"><img loading=\"lazy\" decoding=\"async\" width=\"96\" height=\"96\" src=\"https:\/\/qwebtechnologies.com\/blog\/wp-content\/uploads\/2024\/09\/php-project-topics-e1727713601441.webp\" class=\"attachment-thumbnail size-thumbnail wp-post-image\" alt=\"PHP Project Topics\" style=\"\" \/><\/div><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/qwebtechnologies.com\/blog\/php-project-topics\/\">50 Ultimate PHP Project Topics to Elevate Your Development Skills.<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>How to apply CSS in HTML. There are four common ways to apply CSS styles to an HTML document: Read more Related Post How to apply CSS in HTML Process. Example: 2. Internal stylesheet: You can also define your CSS styles within the HTML document itself using an &lt;style&gt; element in the &lt;head&gt; of the &#8230; <a title=\"How To Apply CSS in HTML.\" class=\"read-more\" href=\"https:\/\/qwebtechnologies.com\/blog\/how-to-apply-css-in-html\/\" aria-label=\"Read more about How To Apply CSS in HTML.\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":829,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[],"class_list":["post-524","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tutorials"],"_links":{"self":[{"href":"https:\/\/qwebtechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qwebtechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qwebtechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qwebtechnologies.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/qwebtechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=524"}],"version-history":[{"count":10,"href":"https:\/\/qwebtechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/524\/revisions"}],"predecessor-version":[{"id":1119,"href":"https:\/\/qwebtechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/524\/revisions\/1119"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qwebtechnologies.com\/blog\/wp-json\/wp\/v2\/media\/829"}],"wp:attachment":[{"href":"https:\/\/qwebtechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qwebtechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qwebtechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}