{"id":93,"date":"2019-04-10T14:25:48","date_gmt":"2019-04-10T14:25:48","guid":{"rendered":"https:\/\/projects.history.qmul.ac.uk\/handson\/?page_id=93"},"modified":"2023-07-05T07:57:50","modified_gmt":"2023-07-05T07:57:50","slug":"m1l2-css","status":"publish","type":"page","link":"https:\/\/projects.history.qmul.ac.uk\/handson\/module-1\/m1l2-css\/","title":{"rendered":"[M1L2]: CSS \u2013 Adding Aesthetics"},"content":{"rendered":"<p>If you have completed the previous lesson, you should have a basic looking HTML page with some information about you and some links, something like this:<\/p>\n<p>&nbsp;<\/p>\n<div class=\"glitch-embed-wrap\" style=\"height: 420px; width: 100%;\"><iframe style=\"height: 100%; width: 100%; border: 0;\" src=\"https:\/\/glitch.com\/embed\/#!\/embed\/basic-intro-html-2?path=index.html&amp;previewSize=100\"><span style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" data-mce-type=\"bookmark\" class=\"mce_SELRES_start\">\ufeff<\/span><br \/>\n<\/iframe><\/div>\n<p>&nbsp;<\/p>\n<p>It won\u2019t look very appealing at the moment, because we haven\u2019t provided any styling information.<\/p>\n<p>In the early days of the Web, aesthetic information was often coded directly into HTML.\u00a0 For backwards-compatibility reasons (that is to say, so that old websites still work), we can still do this, but it is no longer the preferred method to add style information.\u00a0 Embedding stylistic information into the page creates a few problems.\u00a0 Fortunately there is a much better way ot do things.<\/p>\n<h2>Cascading Style Sheets (CSS)<\/h2>\n<p>On the Web, presentational information is now stored separately from the structural \u2018markup\u2019 that HTML provides. \u00a0We store styling information as a set of rules in a document called a <b>stylesheet<\/b>. \u00a0We write these rules once, then apply them to each page. \u00a0The format that this information is stored in is CSS, which stands for Cascading Style Sheets (we will explain the \u2018Cascading\u2019 part shortly).<\/p>\n<p>There are many benefits of using CSS rather than embedding style information in the HTML:<\/p>\n<ul>\n<li>It makes the HTML easier to read by keeping clutter to a minimum<\/li>\n<li>It\u2019s easier to maintain a consistent looka and feel across all pages of your website, especially if it is a big site you can be sure you\u2019ve added the same rules on each page.<\/li>\n<li>It\u2019s more efficient; rather than adding a style to every single element individually each time we want to apply a particular style (to make headings red, say), we write a CSS style once and it is automatically applied for every relevant heading.<\/li>\n<\/ul>\n<h2>How CSS Rules Work<\/h2>\n<p>CSS rule processing is quite simple.\u00a0 The stylesheet author uses <strong>selectors<\/strong> to target elements within existing HTML. The most basic selectors take their names from the HTML elements they target. For example, the selector <code>p<\/code> targets <code>&lt;p&gt;<\/code> elements in HTML.<\/p>\n<p>Each selector within the stylesheet is attached to a set of rules, which consist of properties (e.g. text colour) and values (e.g. red).\u00a0 Put together, a rule might say something like \u2018make all paragraph elements red\u2019. Here is what this rule looks like as CSS:<\/p>\n<pre>p {\r\n  color: red;\r\n}\r\n<\/pre>\n<p><span style=\"color: #ff0000;\">And this line is an example of its effect.<\/span><\/p>\n<p>Let&#8217;s look at the above CSS in a bit more detail:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/mdn.mozillademos.org\/files\/9461\/css-declaration-small.png\" alt=\"CSS p declaration color red\" \/><\/p>\n<p>The whole structure is called a <strong>rule set\u00a0<\/strong>(but often &#8220;rule&#8221; for short). Note also the names of the individual parts:<\/p>\n<dl>\n<dt>Selector<\/dt>\n<dd>The HTML element name at the start of the rule set. It selects the element(s) to be styled (in this case, <code>p<\/code> elements). To style a different element, just change the selector.<\/dd>\n<dt>Declaration<\/dt>\n<dd>A single rule like <code>color: red;<\/code> specifying which of the element&#8217;s <strong>properties<\/strong> you want to style.<\/dd>\n<dt>Properties<\/dt>\n<dd>Ways in which you can style a given HTML element. (In this case, <code>color<\/code> is a property of the <code>p<\/code> elements.) In CSS, you choose which properties you want to affect in your rule.<\/dd>\n<dt>Property value<\/dt>\n<dd>To the right of the property after the colon, we have the <strong>property value<\/strong>, which\u00a0chooses one out of many possible appearances for a given property (there are many <code>color<\/code> values besides <code>red<\/code>).<\/dd>\n<\/dl>\n<p>Note the other important parts of the syntax:<\/p>\n<ul>\n<li>Each rule set (apart from the selector) must be wrapped in curly braces (<code>{}<\/code>).<\/li>\n<li>Within each declaration, you must use a colon (<code>:<\/code>) to separate the property from its values.<\/li>\n<li>Within each rule set, you must use a semicolon (<code>;<\/code>) to separate each declaration from the next one.<\/li>\n<\/ul>\n<p>So to modify multiple property values at once, you just need to write them separated by semicolons, like this:<\/p>\n<pre class=\"brush: css\">p {\r\n  color: red;\r\n  width: 500px;\r\n  border: 1px solid black;\r\n}<\/pre>\n<h3 id=\"Selecting_multiple_elements\">Selecting multiple elements<\/h3>\n<p>You can also select multiple types of elements and apply a single rule set to all of them. Include multiple selectors separated by commas. For example:<\/p>\n<pre class=\"brush: css\">p, li, h1 {\r\n  color: red;\r\n}<\/pre>\n<h3 id=\"Different_types_of_selectors\">Different types of selectors<\/h3>\n<p>There are many different types of selectors. Above, we only looked at <strong>element selectors<\/strong>, which select all elements of a given type in the given HTML documents. But we can make more specific selections than that. Here are some of the more common types of selectors:<\/p>\n<table>\n<thead>\n<tr>\n<th>CSS selector name<\/th>\n<th>Example selector<\/th>\n<th>What it selects<\/th>\n<th>Example HTML selected<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<th><strong>Element<\/strong> selector (sometimes called a tag or type selector)<\/th>\n<td><code>p<\/code><\/td>\n<td>All HTML element(s) of the specified type.<\/td>\n<td><code>&lt;p&gt;<\/code><\/td>\n<\/tr>\n<tr>\n<th><strong>ID<\/strong> selector<\/th>\n<td><code>#my-id<\/code><\/td>\n<td>The element with the specified ID. On a given HTML page, you&#8217;re only allowed one element per ID.<\/td>\n<td><code>&lt;p id=\"my-id\"&gt;<\/code><\/td>\n<\/tr>\n<tr>\n<th><strong>Class<\/strong> selector<\/th>\n<td><code>.my-class<\/code><\/td>\n<td>The element(s) with the specified class (multiple class instances can appear on a page).<\/td>\n<td><code>&lt;p class=\"my-class\"&gt; and &lt;a class=\"my-class\"&gt;<\/code><\/td>\n<\/tr>\n<tr>\n<th><strong>Attribute<\/strong> selector<\/th>\n<td><code>img[width]<\/code><\/td>\n<td>The element(s) on the page with the specified attribute.<\/td>\n<td><code>&lt;img src=\"myimage.png\" width=\"250\"&gt; but not &lt;img src=\"myimage.png\"&gt;<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>There are many more selectors to explore, and you can find a more detailed list in Mozilla\u2019s <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Guide\/CSS\/Getting_started\/Selectors\">Selectors guide<\/a>.<\/p>\n<h3>Comments<\/h3>\n<p>You can add comments to CSS files using the comment syntax <code>\/* *\/<\/code>.\u00a0 Anything between the opening <code>\/*<\/code> and the closing <code>*\/<\/code> is ignored during processing; this includes line breaks. Comments can be inserted anwyhere in your file that you are allowed to use a space.<\/p>\n<p>Authors often use comments to add credits and licensing information at the top of a file, or to insert <em>aides-memoires<\/em> to remind themselves what a certain rule does.\u00a0 Here is an example of some comments within a CSS file:<\/p>\n<pre>\/* \r\nAuthor: Chris Sparks\r\nLicense: Public Domain\r\n*\/\r\n\r\np{\r\n  color: red;\r\n}\r\n\r\np.legal{\r\n  font-size: x-small; \/* for the small print *\/\r\n}\r\n\r\n<\/pre>\n<h2>Exercises<\/h2>\n<p>Let\u2019s try creating some rules in our own stylesheet.\u00a0 We will use this Glitch example:<\/p>\n<div class=\"glitch-embed-wrap\" style=\"height: 420px; width: 100%;\"><iframe style=\"height: 100%; width: 100%; border: 0;\" src=\"https:\/\/glitch.com\/embed\/#!\/embed\/basic-intro-html-2?path=index.html\"><span style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" data-mce-type=\"bookmark\" class=\"mce_SELRES_start\">\ufeff<\/span><br \/>\n<\/iframe><\/div>\n<p>Follow these steps:<\/p>\n<ul>\n<li>Hover over the Glitch embed above and click \u2018remix to edit\u2019<\/li>\n<li>Switch to the style.css document<\/li>\n<li>Add some rules following the example above. First let\u2019s add a rule to make Level 1 headings appear orange in colour.\u00a0 Type the following snippet of code:<br \/>\n<code>h1{<\/code><br \/>\n<code>color: orange;<\/code><br \/>\n<code>}<\/code><code><\/code><\/li>\n<li>Next, let&#8217;s make level two headings italic.\u00a0 To do this we will set the <code>font-style<\/code> property to a value of <code>italic<\/code>:<\/li>\n<li>\n<pre><code>h2{\r\nfont-style: italic;\r\n}<\/code><\/pre>\n<\/li>\n<li>Finally, let\u2019s do something a bit fancy \u2013 give our profile photo a rounded frame. To do this we will use CSS\u2019s <code>border-radius<\/code> feature, which creates rounded corners on an element. The <code>border-radius<\/code> property takes a numeric value in a variety of different units, but we will use percentage points to set it to 50% of the element\u2019s width. This will make the image appear as if it is in a circular frame:<\/li>\n<li>\n<pre><code>img#profile-picture{\r\nborder-radius: 50%\r\n}<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>Glitch doesn\u2019t auto-complete CSS rules, but you will notice that as you type Glitch puts a red circle marker in the left-hand margin of your text, next to the numbered lines.\u00a0 This feature tells you that your code has errors.\u00a0 While typing, you can ignore these error messages \u2013 Glitch isn\u2019t clever enough to tell the difference between an error that is present because your finished code is incorrect and one that is there because you are in the middle of typing.\u00a0 If they remain after you\u2019ve finished, check to see what is wrong. Glitch will tell you where it encountered the error, and what it was expecting to see instead. Whenever you encounter this type of error, it is worth carefully reading through your code and comparing it to the rules that it should follow.<\/p>\n<h2>Adding a stylesheet to a page<\/h2>\n<p>Although we have added some rules for our document, you can see in Glitch\u2019s preview pane that they have not yet taken effect, and our page remains unchanged. This is because we haven\u2019t linked our stylesheet to our page, so they are currently just two unrelated files sitting on the server. We create the link using a <code>&lt;link&gt;<\/code> element in the HTML document\u2019s <code>head<\/code> section. The <code>link<\/code> element is used to create a relationship between the HTML document and another kind of file. It looks like this<\/p>\n<p><code>&lt;link rel=\"stylesheet\" href=\"\"&gt;<\/code><\/p>\n<p>The <code>rel<\/code> attribute tells the browser that this link element points to a stylesheet (links can point to other things too), and the <code>src<\/code> attribute tells it where that stylesheet can be found. Let\u2019s add the link to our HTML:<\/p>\n<ul>\n<li>Select the <code>index.html<\/code> file in Glitch<\/li>\n<li>Find the <code>&lt;title&gt;<\/code> element, around line 5.\u00a0 Immediately after the closing &lt;\/title&gt; tag, press enter to make a new blank line.<\/li>\n<li>Type the following: <code>&lt;link rel=\"stylesheet\" href=\"style.css\"&gt;<\/code><\/li>\n<\/ul>\n<p>Immediately after you finish typing, the preview pane should update to show the new styles.<\/p>\n<p>A HTML document can have more than one stylesheet attached to it.\u00a0 This can be useful if we want to use a shared set of styles, or to build our own styles on top of a pre-existing set of rules.\u00a0 In our Glitch project, we can see a default-styles.css file.\u00a0 Let\u2019s apply this to our HTML document<\/p>\n<ul>\n<li>Select the <code>index.html<\/code> file in Glitch<\/li>\n<li>Find the <code>&lt;title&gt;<\/code> element, around line 5.\u00a0 Immediately after the closing &lt;\/title&gt; tag, press enter to make a new blank line.<\/li>\n<li>Type the following: <code>&lt;link rel=\"stylesheet\" href=\"default-style.css\"&gt;<\/code><\/li>\n<\/ul>\n<h2>The \u2018Cascade\u2019<\/h2>\n<p>This is a good point to address the \u2018cascading\u2019 nature of stylesheets.\u00a0 We have just seen that multiple stylesheets can be applied to a document \u2013 but what if both the stylesheets have a rule for the same element, for example:<\/p>\n<p>&#8212; Stylesheet 1 &#8212;<\/p>\n<pre>p{\r\n\r\ncolor: red;\r\n\r\ntext-style: italic;\r\n\r\n}\r\n<\/pre>\n<p>&#8212; Stylesheet 2 &#8212;<\/p>\n<pre>p.legal{\r\n\r\nfont-size: x-small;\r\n\r\ncolor: grey;\r\n\r\n}\r\n\r\np{\r\n\r\ncolor: pink;\r\n\r\nfont-weight: bold;\r\n\r\n}\r\n\r\n<\/pre>\n<p>These two rules both apply to the same set of elements, but they are in conflict \u2013 the first tells the browser to make the text red and italic, the second to make it pink and bold.\u00a0 It also tells the browser to make paragraphs with the class=&#8221;legal&#8221; attribute smaller.\u00a0\u00a0 The text can&#8217;t be both red <strong>and<\/strong> pink, and not all paragraphs have a class so how does the browser decide which to obey?<\/p>\n<p>It works like this:<\/p>\n<ul>\n<li>Rules are applied from first to last.\u00a0 So the first <code>p<\/code> rule is applied to all paragraphs, making all paragraphs red and italic.\u00a0 Then the second <code>p<\/code> rule is also applied, which adds the rule to make them bold.<\/li>\n<li>For any conflicting rules, the latest rule takes precedence.\u00a0 So the color rule from our second file will override the rule from the first; paragraph elements will be pink, not red.<\/li>\n<li>More specific rules take precedence over less specific ones.\u00a0 So any paragraphs with the <code>class=\"legal\"<\/code> attribute will appear grey, because this rule is more specific, even though there is another less specific rule that appears later.<\/li>\n<\/ul>\n<h2>Styling Your Own Profile<\/h2>\n<p>Now let\u2019s add styling information to your own profile page that we created in the previous lesson.<\/p>\n<p>You should have created an account on Glitch.com as part of the introductory exercise.<\/p>\n<ul>\n<li>In a new window, log into Glitch and find your project. The easiest way to do this is to click on \u2018Your Projects\u2019.<\/li>\n<li>Open up the project, and find the HTML you created in the previous lesson, in the <code>index.html<\/code> file.<\/li>\n<li>After the <code>&lt;title&gt;&lt;\/title&gt;<\/code> element, add the css <code>&lt;link&gt;<\/code> code from the \u2018Adding a Stylesheet to a Page\u2019 section above.\u00a0 Note that these links will refer to the code in the current project.\u00a0 You will need to copy across any rules from the style.css that you created above.<\/li>\n<\/ul>\n<p><!--Once you have finished editing, you are ready to share your profile:\n\n\n<ul>\n \t\n\n<li>Near the top of the left-hand pane of Glitch, you will find a [Share] button.\u00a0 Click it.<\/li>\n\n\n \t\n\n<li>In the second row of buttons, click \u2018App\u2019.\u00a0 The link text underneath will change.\u00a0 It should look something like this: <a href=\"https:\/\/healthy-ground.glitch.me\">healthy-ground.glitch.me<\/a><\/li>\n\n\n \t\n\n<li>Click [Copy] alongisde the link.<\/li>\n\n\n \t\n\n<li>Open up Slack and find the #introductions channel, and paste the link there.<\/li>\n\n\n<\/ul>\n\n--><br \/>\nThat\u2019s the end of our first set of lessons.\u00a0 I hope you enjoyed making your profile page!<\/p>\n<p>If you want to take things further, I recommend Mozilla\u2019s Excellent \u2018<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Getting_started_with_the_web\/HTML_basics\">Getting Started with the Web<\/a>\u2019 tutorial, which I used as the starting point for this lesson.<\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Getting_started_with_the_web\/CSS_basics\">CSS basics<\/a> by <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Getting_started_with_the_web\/CSS_basics$history\">Mozilla Contributors<\/a> is licensed under the <a href=\"https:\/\/creativecommons.org\/licenses\/by-sa\/2.5\/\">Creative Commons Attribution-ShareAlike 2.5 Generic<\/a> license.\u00a0 This page is similarly licensed under CC-BY-SA 2.5.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you have completed the previous lesson, you should have a basic looking HTML page with some information about you and some links, something like this: &nbsp; \ufeff &nbsp; It won\u2019t look very appealing at the moment, because we haven\u2019t provided any styling information. In the early days of the Web, aesthetic information was often [&#8230;] <a class=\"read-more\" href=\"https:\/\/projects.history.qmul.ac.uk\/handson\/module-1\/m1l2-css\/\">Read More<\/a><\/p>\n","protected":false},"author":69,"featured_media":0,"parent":77,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-93","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/pages\/93","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/users\/69"}],"replies":[{"embeddable":true,"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/comments?post=93"}],"version-history":[{"count":14,"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/pages\/93\/revisions"}],"predecessor-version":[{"id":457,"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/pages\/93\/revisions\/457"}],"up":[{"embeddable":true,"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/pages\/77"}],"wp:attachment":[{"href":"https:\/\/projects.history.qmul.ac.uk\/handson\/wp-json\/wp\/v2\/media?parent=93"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}