{"id":105,"date":"2026-01-11T17:29:06","date_gmt":"2026-01-11T22:29:06","guid":{"rendered":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/?post_type=chapter&#038;p=105"},"modified":"2026-01-12T21:18:34","modified_gmt":"2026-01-13T02:18:34","slug":"chapter-3-css-styles","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/chapter\/chapter-3-css-styles\/","title":{"raw":"Chapter 3 \u2022 CSS Styles","rendered":"Chapter 3 \u2022 CSS Styles"},"content":{"raw":"<h2>What are CSS?<\/h2>\r\nCascading style sheets, or CSS, enable you to select tags and style their dimensions, color, position, type, and other characteristics.\r\n\r\nCSS take three forms:\r\n<ul>\r\n \t<li><em>local<\/em>, or <em>inline<\/em>, styles inside a tag, e.g., &lt;p style=\"font-family: Helvetica, sans-serif;\"<\/li>\r\n \t<li><em>global<\/em>, or <em>embedded<\/em>, styles inside a &lt;style&gt; tag in the document &lt;head&gt;<\/li>\r\n \t<li>separate file of type .css linked to one or more .html documents<\/li>\r\n<\/ul>\r\n<em>Cascading<\/em> refers to both a file of type .css and to the styles' hierarchy of influence, i.e., local\/inline styles take precedence over global\/embedded, which in turn take precedence over external .css files.\r\n<h2>Selectors<\/h2>\r\nTo apply global\/embedded or .css styles to a tag, one must first select the tag by typing its name and enclosing the styles in braces {}, separated by semicolons. Tags can be selected by one of three methods:\r\n<ul>\r\n \t<li>Type the name of the tag, e.g., p {font-family: Helvetica, sans-serif;}. This selects all tags of the specified kind, which may not be desirable.<\/li>\r\n \t<li>Assign an identification, or ID, to the tag, e.g., &lt;p id=\"para1\"&gt;, then selecting the id with a hash tag, e.g.., \"#para1 {font-family: Helvetica, sans-serif;}\". An ID can only be used once within a page because the ID can also serve as a destination for an anchor link like \"back to top of page\".<\/li>\r\n \t<li>Assign a class to the tag, e.g., &lt;p class=\"para1\"&gt; and selecting the class with a period followed by its name, e.g., \".para1 {font-family: Georgia, serif;}\" Sometimes you will see the tag itself placed in front of the selector, e.g., p.para1. Unlike an ID, a class can be used more than once in the same document.<\/li>\r\n<\/ul>\r\nA good way to learn how to use selectors is to play the game, \"<a href=\"https:\/\/flukeout.github.io\">CSS Diner<\/a>.\" This contains 32 levels showing various selectors and combinations.\r\n<h2>Styles<\/h2>\r\nA multitude of styles can be applied to selected tags, as shown in the table below.\r\n<table style=\"border-collapse: collapse;width: 100%;height: 194px\" border=\"0\">\r\n<tbody>\r\n<tr style=\"height: 15px\">\r\n<td style=\"width: 50%;height: 15px;text-align: center\" colspan=\"2\"><strong>Examples of Common Styles<\/strong><\/td>\r\n<\/tr>\r\n<tr style=\"height: 15px\">\r\n<td style=\"width: 50%;height: 15px\"><em>Styles<\/em><\/td>\r\n<td style=\"width: 50%;height: 15px\"><em>Examples<\/em><\/td>\r\n<\/tr>\r\n<tr style=\"height: 89px\">\r\n<td style=\"width: 50%;height: 89px\">font<\/td>\r\n<td style=\"width: 50%;height: 89px\">font-family:\r\nfont-size:\r\nline-height:\r\nfont-style:\r\nfont-weight:\r\nfont: (shorthand)\u2014includes bold, italic, point size, leading, font family\r\ntext-align: left, right, center, justified<\/td>\r\n<\/tr>\r\n<tr style=\"height: 30px\">\r\n<td style=\"width: 50%;height: 30px\">size<\/td>\r\n<td style=\"width: 50%;height: 30px\">width:\r\nheight:<\/td>\r\n<\/tr>\r\n<tr style=\"height: 15px\">\r\n<td style=\"width: 50%;height: 15px\">color<\/td>\r\n<td style=\"width: 50%;height: 15px\">refers to the color of fonts; analogous to Stroke in illustration programs<\/td>\r\n<\/tr>\r\n<tr style=\"height: 15px\">\r\n<td style=\"width: 50%;height: 15px\">background<\/td>\r\n<td style=\"width: 50%;height: 15px\">fill color of objects, analogous to Fill in illustration programs<\/td>\r\n<\/tr>\r\n<tr style=\"height: 15px\">\r\n<td style=\"width: 50%;height: 15px\">position<\/td>\r\n<td style=\"width: 50%;height: 15px\">position: relative (default), absolute, fixed, sticky\r\nleft: right: bottom: top:\r\nfloat: left, float: right; \/* creates text wrap *\/<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 50%\">space around<\/td>\r\n<td style=\"width: 50%\">margin: top right bottom left<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 50%\">border<\/td>\r\n<td style=\"width: 50%\">border: width, kind (solid, dashed, dotted, \u2026), color<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 50%\">box-shadow<\/td>\r\n<td style=\"width: 50%\">drop shadow for tags, including horizontal offset, vertical offset, blur radius, and color<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 50%\">text-shadow<\/td>\r\n<td style=\"width: 50%\">drop shadow for text (with settings as above)<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<h2>Example<\/h2>\r\nFollowing is an example of a global\/embedded style sheet that would be placed in the document &lt;head&gt;:\r\n<pre>&lt;style&gt;\r\np {\r\n    font: 14pt\/1.4em Helvetica, Arial, Roboto, sans-serif;\r\n} img {\r\n    width: 512px;\r\n    height: auto;\r\n    float: left;\r\n    margin: 0 24px 12px 0;\r\n}\r\n&lt;\/style&gt;<\/pre>\r\n<h2>Colors<\/h2>\r\nColors on the web can be specified using several formats, including named colors, RGB and RGBA, and hexadecimal.\r\n<table style=\"width: 100%;height: 55px\" border=\"0\">\r\n<tbody>\r\n<tr style=\"height: 10px\">\r\n<td style=\"width: 25%;height: 10px\">Color specification<\/td>\r\n<td style=\"width: 25%\">Example<\/td>\r\n<td style=\"width: 50%;height: 10px\">Description<\/td>\r\n<\/tr>\r\n<tr style=\"height: 15px\">\r\n<td style=\"width: 25%;height: 15px\">named colors<\/td>\r\n<td style=\"width: 25%\">color: red;\r\nbackground: lavender;<\/td>\r\n<td style=\"width: 50%;height: 15px\">147 named colors, such as \"red,\" \"aliceblue,\" \"chartreuse,\" etc.<\/td>\r\n<\/tr>\r\n<tr style=\"height: 15px\">\r\n<td style=\"width: 25%;height: 15px\">RGB colors<\/td>\r\n<td style=\"width: 25%\">rgb(255,0,0); \u00a0\/* red \u00a0*\/<\/td>\r\n<td style=\"width: 50%;height: 15px\">red, green, and blue, scale 0\u2013255,<\/td>\r\n<\/tr>\r\n<tr style=\"height: 15px\">\r\n<td style=\"width: 25%;height: 15px\">RGBA colors<\/td>\r\n<td style=\"width: 25%\">rgba(255,0,0,0.50);<\/td>\r\n<td style=\"width: 50%;height: 15px\">red, green, blue, and opacity (scale, 0\u20131.00)<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 25%\">Hex-6*<\/td>\r\n<td style=\"width: 25%\">color: #ff0000; \u00a0\/* \u00a0red \u00a0*\/<\/td>\r\n<td style=\"width: 50%\">red, green, and blue on a scale of 0\u201316<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 25%\">Hex-3*<\/td>\r\n<td style=\"width: 25%\">color: #0f0; \u00a0\/* green \u00a0*\/<\/td>\r\n<td style=\"width: 50%\">red, green, and blue on a scale of 0\u201316<\/td>\r\n<\/tr>\r\n<tr>\r\n<td style=\"width: 25%\" colspan=\"3\">* Note: Hexadecimal colors are frequently used by web developers but, in the educational setting, make it difficult to determine which colors are which.<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<h2>Reference Site<\/h2>\r\nCSS Diner game: <a href=\"http:\/\/flukeout.github.io\" target=\"_blank\" rel=\"noopener\">flukeout.github.io<\/a>\r\n\r\nWeb Color Bars: rich-adams.net &gt; GRC 365 &gt; <a href=\"https:\/\/r3adams.github.io\/grc365\/colorbars.html\" target=\"_blank\" rel=\"noopener\">Web Color Bars<\/a>. Three charts include the named colors in alphabetical order and arranged by RGB neutral density and CIE LAB perceptual color.","rendered":"<h2>What are CSS?<\/h2>\n<p>Cascading style sheets, or CSS, enable you to select tags and style their dimensions, color, position, type, and other characteristics.<\/p>\n<p>CSS take three forms:<\/p>\n<ul>\n<li><em>local<\/em>, or <em>inline<\/em>, styles inside a tag, e.g., &lt;p style=&#8221;font-family: Helvetica, sans-serif;&#8221;<\/li>\n<li><em>global<\/em>, or <em>embedded<\/em>, styles inside a &lt;style&gt; tag in the document &lt;head&gt;<\/li>\n<li>separate file of type .css linked to one or more .html documents<\/li>\n<\/ul>\n<p><em>Cascading<\/em> refers to both a file of type .css and to the styles&#8217; hierarchy of influence, i.e., local\/inline styles take precedence over global\/embedded, which in turn take precedence over external .css files.<\/p>\n<h2>Selectors<\/h2>\n<p>To apply global\/embedded or .css styles to a tag, one must first select the tag by typing its name and enclosing the styles in braces {}, separated by semicolons. Tags can be selected by one of three methods:<\/p>\n<ul>\n<li>Type the name of the tag, e.g., p {font-family: Helvetica, sans-serif;}. This selects all tags of the specified kind, which may not be desirable.<\/li>\n<li>Assign an identification, or ID, to the tag, e.g., &lt;p id=&#8221;para1&#8243;&gt;, then selecting the id with a hash tag, e.g.., &#8220;#para1 {font-family: Helvetica, sans-serif;}&#8221;. An ID can only be used once within a page because the ID can also serve as a destination for an anchor link like &#8220;back to top of page&#8221;.<\/li>\n<li>Assign a class to the tag, e.g., &lt;p class=&#8221;para1&#8243;&gt; and selecting the class with a period followed by its name, e.g., &#8220;.para1 {font-family: Georgia, serif;}&#8221; Sometimes you will see the tag itself placed in front of the selector, e.g., p.para1. Unlike an ID, a class can be used more than once in the same document.<\/li>\n<\/ul>\n<p>A good way to learn how to use selectors is to play the game, &#8220;<a href=\"https:\/\/flukeout.github.io\">CSS Diner<\/a>.&#8221; This contains 32 levels showing various selectors and combinations.<\/p>\n<h2>Styles<\/h2>\n<p>A multitude of styles can be applied to selected tags, as shown in the table below.<\/p>\n<table style=\"border-collapse: collapse;width: 100%;height: 194px\">\n<tbody>\n<tr style=\"height: 15px\">\n<td style=\"width: 50%;height: 15px;text-align: center\" colspan=\"2\"><strong>Examples of Common Styles<\/strong><\/td>\n<\/tr>\n<tr style=\"height: 15px\">\n<td style=\"width: 50%;height: 15px\"><em>Styles<\/em><\/td>\n<td style=\"width: 50%;height: 15px\"><em>Examples<\/em><\/td>\n<\/tr>\n<tr style=\"height: 89px\">\n<td style=\"width: 50%;height: 89px\">font<\/td>\n<td style=\"width: 50%;height: 89px\">font-family:<br \/>\nfont-size:<br \/>\nline-height:<br \/>\nfont-style:<br \/>\nfont-weight:<br \/>\nfont: (shorthand)\u2014includes bold, italic, point size, leading, font family<br \/>\ntext-align: left, right, center, justified<\/td>\n<\/tr>\n<tr style=\"height: 30px\">\n<td style=\"width: 50%;height: 30px\">size<\/td>\n<td style=\"width: 50%;height: 30px\">width:<br \/>\nheight:<\/td>\n<\/tr>\n<tr style=\"height: 15px\">\n<td style=\"width: 50%;height: 15px\">color<\/td>\n<td style=\"width: 50%;height: 15px\">refers to the color of fonts; analogous to Stroke in illustration programs<\/td>\n<\/tr>\n<tr style=\"height: 15px\">\n<td style=\"width: 50%;height: 15px\">background<\/td>\n<td style=\"width: 50%;height: 15px\">fill color of objects, analogous to Fill in illustration programs<\/td>\n<\/tr>\n<tr style=\"height: 15px\">\n<td style=\"width: 50%;height: 15px\">position<\/td>\n<td style=\"width: 50%;height: 15px\">position: relative (default), absolute, fixed, sticky<br \/>\nleft: right: bottom: top:<br \/>\nfloat: left, float: right; \/* creates text wrap *\/<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 50%\">space around<\/td>\n<td style=\"width: 50%\">margin: top right bottom left<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 50%\">border<\/td>\n<td style=\"width: 50%\">border: width, kind (solid, dashed, dotted, \u2026), color<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 50%\">box-shadow<\/td>\n<td style=\"width: 50%\">drop shadow for tags, including horizontal offset, vertical offset, blur radius, and color<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 50%\">text-shadow<\/td>\n<td style=\"width: 50%\">drop shadow for text (with settings as above)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Example<\/h2>\n<p>Following is an example of a global\/embedded style sheet that would be placed in the document &lt;head&gt;:<\/p>\n<pre>&lt;style&gt;\r\np {\r\n    font: 14pt\/1.4em Helvetica, Arial, Roboto, sans-serif;\r\n} img {\r\n    width: 512px;\r\n    height: auto;\r\n    float: left;\r\n    margin: 0 24px 12px 0;\r\n}\r\n&lt;\/style&gt;<\/pre>\n<h2>Colors<\/h2>\n<p>Colors on the web can be specified using several formats, including named colors, RGB and RGBA, and hexadecimal.<\/p>\n<table style=\"width: 100%;height: 55px\">\n<tbody>\n<tr style=\"height: 10px\">\n<td style=\"width: 25%;height: 10px\">Color specification<\/td>\n<td style=\"width: 25%\">Example<\/td>\n<td style=\"width: 50%;height: 10px\">Description<\/td>\n<\/tr>\n<tr style=\"height: 15px\">\n<td style=\"width: 25%;height: 15px\">named colors<\/td>\n<td style=\"width: 25%\">color: red;<br \/>\nbackground: lavender;<\/td>\n<td style=\"width: 50%;height: 15px\">147 named colors, such as &#8220;red,&#8221; &#8220;aliceblue,&#8221; &#8220;chartreuse,&#8221; etc.<\/td>\n<\/tr>\n<tr style=\"height: 15px\">\n<td style=\"width: 25%;height: 15px\">RGB colors<\/td>\n<td style=\"width: 25%\">rgb(255,0,0); \u00a0\/* red \u00a0*\/<\/td>\n<td style=\"width: 50%;height: 15px\">red, green, and blue, scale 0\u2013255,<\/td>\n<\/tr>\n<tr style=\"height: 15px\">\n<td style=\"width: 25%;height: 15px\">RGBA colors<\/td>\n<td style=\"width: 25%\">rgba(255,0,0,0.50);<\/td>\n<td style=\"width: 50%;height: 15px\">red, green, blue, and opacity (scale, 0\u20131.00)<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 25%\">Hex-6*<\/td>\n<td style=\"width: 25%\">color: #ff0000; \u00a0\/* \u00a0red \u00a0*\/<\/td>\n<td style=\"width: 50%\">red, green, and blue on a scale of 0\u201316<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 25%\">Hex-3*<\/td>\n<td style=\"width: 25%\">color: #0f0; \u00a0\/* green \u00a0*\/<\/td>\n<td style=\"width: 50%\">red, green, and blue on a scale of 0\u201316<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 25%\" colspan=\"3\">* Note: Hexadecimal colors are frequently used by web developers but, in the educational setting, make it difficult to determine which colors are which.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Reference Site<\/h2>\n<p>CSS Diner game: <a href=\"http:\/\/flukeout.github.io\" target=\"_blank\" rel=\"noopener\">flukeout.github.io<\/a><\/p>\n<p>Web Color Bars: rich-adams.net &gt; GRC 365 &gt; <a href=\"https:\/\/r3adams.github.io\/grc365\/colorbars.html\" target=\"_blank\" rel=\"noopener\">Web Color Bars<\/a>. Three charts include the named colors in alphabetical order and arranged by RGB neutral density and CIE LAB perceptual color.<\/p>\n","protected":false},"author":6,"menu_order":3,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-105","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":9,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/105\/revisions"}],"predecessor-version":[{"id":196,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/105\/revisions\/196"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapters\/105\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/media?parent=105"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/pressbooks\/v2\/chapter-type?post=105"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/contributor?post=105"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/webdesign2\/wp-json\/wp\/v2\/license?post=105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}