{"id":754,"date":"2008-06-30T19:25:24","date_gmt":"2008-07-01T01:25:24","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/techblog\/?p=754"},"modified":"2023-08-01T15:14:54","modified_gmt":"2023-08-01T21:14:54","slug":"css-tutorial-style-sheet-types","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/techblog\/?ht_kb=css-tutorial-style-sheet-types","title":{"rendered":"CSS Tutorial #1: Style Sheet Types"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>This post is the first in a series aimed at CSS beginners.&nbsp; If you\u2019ve only ever used HTML and want to start using CSS, then this is for you.&nbsp; This post lays the foundation for using style sheets.&nbsp; &nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why CSS?<\/h2>\n\n\n\n<p>CSS is not HTML, but rather a way to separate structure from design.&nbsp; For example, if you have a header (\u201ch1\u201d) in HTML, you can use a style sheet to define how it should look.&nbsp; This comes in handy when you have multiple HTML elements with the same design.&nbsp; Let\u2019s say that you are in charge of a large company website.&nbsp; You\u2019ve been instructed to go through the entire site and change all of the headers from blue to red.&nbsp; Using HTML, that\u2019s a big job.&nbsp; Using CSS, you would only have to make one small change. &nbsp;I very much recommend visiting the <a href=\"https:\/\/www.csszengarden.com\/\" target=\"_blank\" rel=\"noopener\">css zengarden website<\/a> if you would like to see more practical applications to using CSS.&nbsp; <\/p>\n\n\n\n<p>&nbsp;<br>Before you can learn about CSS structure or code, you need to know how to integrate style sheets with HTML.&nbsp; The following will explain 4 different ways to do that.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Style Sheet Types<\/h2>\n\n\n\n<p>There are 4 style sheet types, or in other words, 4 ways to utilize style sheets in your HTML.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Inline<\/li>\n\n\n\n<li>Embedded<\/li>\n\n\n\n<li>Linked<\/li>\n\n\n\n<li>Imported<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Inline<\/h3>\n\n\n\n<p>When adding inline styles, you can apply them directly to the HTML tag using the <i>style<\/i> attribute.&nbsp; When used repeatedly, inline styles defeat the purpose of CSS, as they don\u2019t separate structure from design.&nbsp; Inline styles are useful only when you need to add a single instance of a particular style.&nbsp; Inline styles are used like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p style=\"color: blue;\"&gt;\n  your content here\n&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Embedded<\/h3>\n\n\n\n<p>This is one of the more common style types you will run into.&nbsp; Embedded style sheets are placed within the head section of the document and affect only that document.&nbsp; They must be placed in between &#8220;style&#8221; tags and be clearly defined as CSS.&nbsp; Here is an example of an embedded style sheet:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n  &lt;head&gt;\n       &lt;style type=\"text\/css\"&gt;\n\t    p.main  {\n            font-weight: bold;\n\t    color: red;\n            background-color: blue;\n\t}\t\n\t    h1 {color: yellow;}\n       &lt;\/style&gt;\n &lt;\/head&gt;\n &lt;body&gt;\n  ....\n &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Linked<\/h3>\n\n\n\n<p>Linked style sheets provide the real power of CSS.&nbsp; You can link many webpages to a single CSS file.&nbsp; When you need to make design changes throughout the website, you only need to alter one CSS file!&nbsp; For example, if your company colors changed, and they need to be reflected on the website, you would only have to change one file, rather than the entire site.&nbsp; Pretty simple isn\u2019t it?&nbsp; Linked style sheets are placed in the head section of the document like this:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"mainstyle.css\"&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Imported<\/h3>\n\n\n\n<p>You can import one style sheet into another style sheet using the &#8220;@import command.&nbsp; When importing a style sheet into another, it must be the very first rule in the style sheet.&nbsp; Imported style sheets are useful if you want to use different style sheets for different parts of your website.&nbsp; They are displayed like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@import url(otherstyle.css)<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a Separate Style Sheet<\/h2>\n\n\n\n<p>You may be wondering how to set up a separate CSS file for linking or importing.&nbsp; It\u2019s very easy.&nbsp; Simply place all of your CSS code in a notepad document and save it with a \u201c.css\u201d extension.&nbsp; There\u2019s no need to define head or body sections like you would in HTML.&nbsp; All you need to do is place the code in the file.<\/p>\n\n\n\n<p>Now that you understand how to integrate style sheets into your HTML code, you are ready to learn about CSS syntax.&nbsp; In the next tutorial, I will explain how to write basic CSS code and demonstrate how to use it with HTML. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Overview This post is the first in a series aimed at CSS beginners.&nbsp; If you\u2019ve only ever used HTML and want to start using CSS, then this is for you.&nbsp; This post lays the foundation for using style sheets.&nbsp; &nbsp; Why CSS? CSS is not HTML, but rather a way&#8230;<\/p>\n","protected":false},"author":2,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[160],"ht-kb-tag":[],"class_list":["post-754","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-css"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/754","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=754"}],"version-history":[{"count":10,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/754\/revisions"}],"predecessor-version":[{"id":11985,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/754\/revisions\/11985"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=754"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-category&post=754"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-tag&post=754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}