{"id":2951,"date":"2018-03-23T23:43:06","date_gmt":"2018-03-23T18:13:06","guid":{"rendered":"https:\/\/cns72.com\/vytcdc.com.sg\/?p=2951"},"modified":"2019-11-20T12:12:30","modified_gmt":"2019-11-20T06:42:30","slug":"many-ways-can-insert-css-html","status":"publish","type":"post","link":"https:\/\/cns72.com\/vytcdc.com.sg\/many-ways-can-insert-css-html\/","title":{"rendered":"How many ways can you insert CSS in HTML?"},"content":{"rendered":"<h2 class=\"western\">Three Ways to Insert CSS<\/h2>\n<p>There are three ways of inserting a style sheet:<\/p>\n<ul>\n<li>External style sheet<\/li>\n<li>Internal style sheet<\/li>\n<li>Inline style<\/li>\n<\/ul>\n<h2 class=\"western\">Inline Styles<\/h2>\n<p>An inline style may be used to apply a unique style for a single element.<\/p>\n<p>To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.<\/p>\n<p>The example below shows how to change the color and the left margin of a &lt;h1&gt; element:<\/p>\n<div id=\"htmlOutputWrapper\">\n<pre id=\"htmlOutput\" class=\"html\"><code class=\"hljs xml\"><span class=\"hljs-meta\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span>\r\n   <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"color:blue;margin-left:30px;\"<\/span>&gt;<\/span>This is a heading<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>This is a paragraph.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\r\n   <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<\/div>\n<p><strong>Tip:<\/strong> An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly.<\/p>\n<h2 class=\"western\">Internal Style Sheet<\/h2>\n<p>An internal style sheet may be used if one single page has a unique style.<\/p>\n<p>Internal styles are defined within the &lt;style&gt; element, inside the &lt;head&gt; section of an HTML page:<\/p>\n<div id=\"htmlOutputWrapper\">\n<pre id=\"htmlOutput\" class=\"html\"><code class=\"hljs xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span>\r\n   <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\r\n         <span class=\"hljs-selector-tag\">body<\/span> {\r\n         <span class=\"hljs-attribute\">background-color<\/span>: linen;\r\n         }\r\n         <span class=\"hljs-selector-tag\">h1<\/span> {\r\n         <span class=\"hljs-attribute\">color<\/span>: maroon;\r\n         <span class=\"hljs-attribute\">margin-left<\/span>: <span class=\"hljs-number\">40px<\/span>;\r\n         }\r\n      <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\r\n   <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\r\n   <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>This is a heading<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>This is a paragraph.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\r\n   <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;\r\n&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<\/div>\n<h3 class=\"buttons\">\u00a0External Style Sheet<\/h3>\n<p>With an external style sheet, you can change the look of an entire website by changing just one file!<\/p>\n<p>Each page must include a reference to the external style sheet file inside the &lt;link&gt; element. The &lt;link&gt; element goes inside the &lt;head&gt; section:<\/p>\n<div id=\"htmlOutputWrapper\">\n<pre id=\"htmlOutput\" class=\"html\"><code class=\"hljs xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span>\r\n   <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/css\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"mystyle.css\"<\/span>&gt;<\/span>\r\n   <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\r\n   <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>This is a heading<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>This is a paragraph.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\r\n   <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<\/div>\n<p>An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension.<\/p>\n<p>Here is how the &#8220;mystyle.css&#8221; looks:<\/p>\n<p><span style=\"color: #a52a2a;\">body <span style=\"color: #000000;\">{<\/span><span style=\"color: #ff0000;\"><br \/>\nbackground-color<\/span><span style=\"color: #000000;\">:<\/span><span style=\"color: #0000cd;\"> lightblue<\/span><span style=\"color: #000000;\">;<\/span><span style=\"color: #ff0000;\"><br \/>\n<\/span><span style=\"color: #000000;\">}<\/span><\/span><\/p>\n<p>h1 <span style=\"color: #000000;\">{<\/span><span style=\"color: #ff0000;\"><br \/>\ncolor<\/span><span style=\"color: #000000;\">:<\/span><span style=\"color: #0000cd;\"> navy<\/span><span style=\"color: #000000;\">;<\/span><span style=\"color: #ff0000;\"><br \/>\nmargin-left<\/span><span style=\"color: #000000;\">:<\/span><span style=\"color: #0000cd;\"> 20px<\/span><span style=\"color: #000000;\">;<\/span><span style=\"color: #ff0000;\"><br \/>\n<\/span><span style=\"color: #000000;\">}<\/span><\/p>\n<p><span style=\"color: #a52a2a;\"><strong><span style=\"color: #000000;\">Note:<\/span><\/strong><span style=\"color: #000000;\"> Do not add a space between the property value and the unit (such as <\/span><code class=\"western\"><span style=\"color: #000000;\">margin-left: 20<br \/>\npx;<\/span><\/code><span style=\"color: #000000;\">). The correct way is: <\/span><code class=\"western\"><span style=\"color: #000000;\">margin-left: 20px;<\/span><\/code><\/span><\/p>\n<h3 class=\"western\"><img loading=\"lazy\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAUCAMAAACpgK3LAAAANlBMVEUICAgrKytaWlp0dHT\/BQX3LS33S0vvb2+Wlpavr6\/rkZHnqKjnu7vnxsb\/\/\/\/8A\/sAAAD\/\/\/+k\/8qrAAAAEHRSTlP\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/8A4CNdGQAAALZJREFUeJx1kQsShCAMQ4MUUT7l\/rfdtqLCDkZH0AdpimivYohtEgZGRPkDFmEUPuBOJHdaQtkYORDVBaxiycyyYgHFMXPjfcrUYZItp8NWpkwdStC6AahxzIS7xcQecFqVZpilC+YD2JjTkMmgdsB8AocElpcyQDMVAU2eavPCYqYi7214M8FMi35szhnkpx1oi2aqNU+bPJlQrnMz26NP7kzQnxH\/tPdMCLSUVUW+aJivYMf\/A6UKF\/jfKWSeAAAAAElFTkSuQmCC\" alt=\"Icon: Warning\" width=\"28\" height=\"20\" name=\"Image1\" align=\"bottom\" border=\"0\" \/> <strong>Finding Source of Errors in CSS:<\/strong><\/h3>\n<p>When your styles are not applied as you expect or parts of the page vanish, start looking for errors in the source code.<\/p>\n<h4 class=\"western\">Common Errors:<\/h4>\n<ol>\n<li><strong>Spelling: <\/strong>Critical\u00a0 everywhere! The browser will NOT guess what you meant.\n<ul>\n<li><strong>Tag<\/strong> names (H! is not H1.)<\/li>\n<li>\u00a0<strong>Property<\/strong> names (textalign is not text-align)<\/li>\n<li><strong>Values<\/strong> available (text-align cannot have value &#8216;top&#8217;. But vertical-align can.)<\/li>\n<li><strong>Class<\/strong> name or <strong>ID<\/strong> when applied must match (mayclass is not myclass).<\/li>\n<\/ul>\n<\/li>\n<li>There must be a <strong>colon<\/strong> : between the property and its value and a <strong>semicolon<\/strong> ; at the end after the value,\u00a0like<br \/>\nfloat:left; margin-right:5px;<\/li>\n<li>No <strong>space<\/strong> between the number and the unit of measure. Write 10px and <strong>not<\/strong> 10 px.<br \/>\nSome browsers will just ignore the style if there is a space in between the number and the unit.<\/li>\n<li><strong>Close<\/strong> all of the parts: quotes &#8221; around values, the final brackets like &gt; or } for tags and styles, final tags like &lt;\/h1&gt; or\u00a0 &lt;\/style&gt;<\/li>\n<li><strong>Duplicate selectors:<\/strong> If you style the same <em>property<\/em> for an element or class twice, the browser will have to decide what to do. Making browsers think is risky! The results may be very different from browser to browser and not at all what you meant. The order becomes important again.<\/li>\n<li><strong>LINK<\/strong> an external style sheet to the web page or you will not be able to use its styles on that page.<\/li>\n<li><strong>URL<\/strong> in the LINK for an external style sheet must be correct!<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style sheet Inline style Inline Styles An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2952,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[45],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.0.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How many ways can you insert CSS in HTML? - TCDC<\/title>\n<link rel=\"canonical\" href=\"https:\/\/cns72.com\/vytcdc.com.sg\/many-ways-can-insert-css-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How many ways can you insert CSS in HTML? - TCDC\" \/>\n<meta property=\"og:description\" content=\"Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style sheet Inline style Inline Styles An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cns72.com\/vytcdc.com.sg\/many-ways-can-insert-css-html\/\" \/>\n<meta property=\"og:site_name\" content=\"TCDC\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vytcdc\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-23T18:13:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-20T06:42:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cns72.com\/vytcdc.com.sg\/wp-content\/uploads\/2018\/03\/cssblog.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"566\" \/>\n\t<meta property=\"og:image:height\" content=\"339\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vytcdc\" \/>\n<meta name=\"twitter:site\" content=\"@vytcdc\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"3 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/#website\",\"url\":\"https:\/\/cns72.com\/vytcdc.com.sg\/\",\"name\":\"TCDC\",\"description\":\"Career Development Courses\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/cns72.com\/vytcdc.com.sg\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/many-ways-can-insert-css-html\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/cns72.com\/vytcdc.com.sg\/wp-content\/uploads\/2018\/03\/cssblog.gif\",\"width\":566,\"height\":339},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/many-ways-can-insert-css-html\/#webpage\",\"url\":\"https:\/\/cns72.com\/vytcdc.com.sg\/many-ways-can-insert-css-html\/\",\"name\":\"How many ways can you insert CSS in HTML? - TCDC\",\"isPartOf\":{\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/many-ways-can-insert-css-html\/#primaryimage\"},\"datePublished\":\"2018-03-23T18:13:06+00:00\",\"dateModified\":\"2019-11-20T06:42:30+00:00\",\"author\":{\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/#\/schema\/person\/c57e5f7b91685a93f23a57aaafd38e82\"},\"breadcrumb\":{\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/many-ways-can-insert-css-html\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cns72.com\/vytcdc.com.sg\/many-ways-can-insert-css-html\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/many-ways-can-insert-css-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/\",\"url\":\"https:\/\/cns72.com\/vytcdc.com.sg\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/many-ways-can-insert-css-html\/\",\"url\":\"https:\/\/cns72.com\/vytcdc.com.sg\/many-ways-can-insert-css-html\/\",\"name\":\"How many ways can you insert CSS in HTML?\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/#\/schema\/person\/c57e5f7b91685a93f23a57aaafd38e82\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/cns72.com\/vytcdc.com.sg\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f8f959f70994a4401c8704d6b2143474?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/posts\/2951"}],"collection":[{"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/comments?post=2951"}],"version-history":[{"count":0,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/posts\/2951\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/media\/2952"}],"wp:attachment":[{"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/media?parent=2951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/categories?post=2951"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cns72.com\/vytcdc.com.sg\/wp-json\/wp\/v2\/tags?post=2951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}