WIXLIB

Lecture #11: Exploring HTML and CSSCS106E Spring 2018, YoungIn this lecture we take a look at Cascading Style Sheets (CSS). We learn some of thebenefits to using CSS and study the actual mechanics of writing CSS rules. We look atdifferent selectors, which allow us to determine which HTML elements a rule will affect.We also take a quick tour of the different CSS properties that can be used to format awebpage.As CSS allows us to change colors, we examine different techniques available to us forspecifying colors in CSS. We take a closer look at how to link from one webpage toanother, learning when to create an absolute link vs. a relative link. We also learn how tostyle links using pseudo-classes. We end with a look at how to place images on a webpageand how to use CSS box properties on them.Cascading Style SheetsAs we saw in the last lecture, modern webpages use HTML to provide semantic information about themeaning of text, such as what is a major heading vs. what is a paragraph, whereas they use CSS toprovide presentation information. This will provide us with several very important advantages: We can write a single CSS rule that effects all HTML elements of a particular type. This meansthat if we want to switch all h3 headers from Red to Blue, we don’t have to go through theHTML looking for all the h3 headers. We change it once in a single location and they all areinstantly updated.In fact, as we’ll discover, we can place our CSS information in a separate file from our HTML.This means we can write a single set of CSS rules and use it for every HTML file on our website.If we want to change the look of our website, we change that single file and instantlyeverything is updated.In addition separating our presentation from our semantic information will make it easier tocreate different presentation types, such as one set of rules for laptop-sized screens and adifferent set for mobile phones.We’ll break our discussion into three parts. First, we’ll discuss how to include CSS information in yourwebsite. Next, we’ll discuss how to select which elements on a webpage will be affected by specificCSS rules. Finally, we’ll take a look at what sorts of appearance changes we can actually specify withCSS.The link / and style Tags- There are two different ways to specify CSS for a particular HTML file. The first method is to referto a separate, external CSS file using the link / tag. The second is to include a style tag in yourHTML file’s head section and then to enter the CSS directly into the HTML file.- If you’re providing presentation information that you want to use across all the pages of yourwebsite (or even across a small subsection of your website) you should use the link / tag. Withthis tag, the CSS is placed in a separate file, which can be shared by many other HTML files.

-You can use the style tag if your CSS formatting only makes sense for a specific HTML file andyou’re sure you won’t use the same styling rules elsewhere on your website.Linking External Files with link / oooThe link / tag is a standalone tag with no end tag (which is why I’ve been writing it as link / instead of link ).This tag creates a relationship between two different files. By far its most common use is specifying a relationship between an HTML fileand a CSS file that will provide presentation information. Other relationships have appeared in the official HTML specification including: 1 Specifying a help file for a webpage. Specifying a glossary file to associate with a webpage. Specifying which webpage should come before and which should comeafter the webpage, if the user is following the “standard” progressionfor reading the website.To use the link / tag, provide the URL of the associated file and specify how it is relatedto the original file. For example, here we specify that the file “example.css” (which is inthe same location as our HTML file) should be used as a style sheet for our HTML file. link rel "stylesheet" href "example.css" / oYou may link more than one stylesheet to a webpage using link / tags. For example, ifyou have one stylesheet that applies to all webpages on your website and another morespecific stylesheet that applies to webpages on your website that are about sports, youcan load both these stylesheets by using two separate link / tags.Specifying Styles Internally with the style tagooUsing the style tag is very easy. Simply place a style start and /style end tag in your head section of your HTML file.Write your CSS rules between the style start tag and the /style end tag.CSS RulesWhether we’re using an external style sheet or an internal style tag, our styling information consistsof a series of rules. Each rule has 1) a selector that specifies which HTML elements the rule applies toand 2) a declaration block which sets one or more CSS style properties such as the color or font-familyfor HTML elements that match the selector.SelectorsLet’s take a look at some of the most common selectors we can use — we’ll take a look at the CSSproperties available after we’re done with the selectors. The simplest selector is a type selector. This selector affects all HTML elements of aparticular type. Here we turn all h3 headings to the color red:h3 { color: red; }1These example link / uses have changed from one version of HTML to the next and do not seem tohave taken off. I list them here to give you a sense of why we have a general purpose link / tagrather than something that is specifically designed to load stylesheets only.2

We can create a rule that affects any one of a number of different types by separatingour HTML element names with commas. Here we turn all six headings to red. Make sureto use a comma to separate the HTML tag names, if you separate them using just spaces,it does something entirely different.h1, h2, h3, h4, h5, h6 { color: red; } Sometimes we’ll want to write a rule for some elements of a particular type, but notothers. We can do this by giving these HTML elements a class attribute-value pair. HereI’ve marked the first of these two h3 tags as “important” but not the other one. h3 class "important" Computer Science /h3 h3 Electrical Engineering /h3 We can change all elements marked as important by using a class selector. Form a classselector by using the period, followed by the name of the class. With this rule, everyelement that has class "important" will be underlined.important { text-decoration: underline; }You can limit the class selector to just elements of a particular type by combining it witha type selector. This modified rule only affects h3’s which are important. If you have, forexample, a p paragraph marked as important, this rule won’t affect it.h3.important { text-decoration: underline; }Finally, if you have an element that you want to give more than one class to, you can.Simply list multiple classes separated by spaces all in the same class attribute-value pair.Here I’ve specified an h3 that is both important and fun – this means that I canuse .important or .fun class specifiers to select this element: h3 class "important fun" Computer Science /h3 We can also write rules that affect only a single element by using an id selector. 2 To usethis we add an id attribute-value pair to the element in our HTML. h3 id "graduation" June /h3 We then use the id selector, formed by using the number sign followed by the id.#graduation { text-size: xx-large; }There are quite a few additional selector types available including selectors that only chooseelements if they have a specific HTML attribute set, or that choose elements if they are containedwithin another specific type of element. You can find a summary of different selector types here:https://www.w3schools.com/cssref/css selectors.asp2You may wonder why we bother with the special id selector when we could do the same thing bycreating a class and only using it on one element. id acts as a form of documentation letting anyonemaintaining the webpage know that there should only ever be one element that fits in that particularcategory.3

The CascadeYou might have noticed that more than one rule can affect an element. What happens if one of therules says to turn an element red, and a different rule, which also applies to the element, says to turnthe element green?Conflicts between rules are resolved by a process called the cascade. The cascade compares thedifferent selectors and gives a different weighting to each rule. The rule with the most weight takesprecedence over all other rules. In general, the rule that is most specific will win the cascade. So aclass selector takes precedence over a type selector, but a selector that combines both class and typewill beat a regular class selector.If two rules conflict and they both have equal precedence, whichever rule comes last will win thecascade.Span and DivWhat happens if we want to style part of our HTML file, but that part of HTML file isn’t actually anelement. Suppose for example, I want to turn all instances of the word “Stanford” to the color red. Ifevery time the word “Stanford” appears, it’s also in italics, then I could do this by 1) adding aclass "Stanford" to all i tags surrounding the word Stanford and 2) writing a style rule with a classselector for .stanford. This does have the side effect thought that in order for this to work, Stanfordmust appear in italics everywhere.In HTML: i class "stanford" Stanford /i In CSS:.stanford {color: red;}The span and div tags allow us to do the same thing, except minus the italics. You can place the span tag around any words or phrases in your document. By itself, the span tag doesn’t actuallydo anything. However, you can put a class on the span tag, and then you’ll be able to use a classselector to select your word or phrase.In HTML: span class "stanford" Stanford /span In CSS:.stanford {color: red;} span is an inline tag, and as we saw in the last lecture, you can’t surround a block-level tag with aninline-tag. Therefore, HTML also provides the div tag, which is a block-level tag. You can surroundblock-level tags with div to write style rules affecting everything in the div .Declarations and CSS PropertiesNow that we’ve got some sense of how to select elements, let’s take a look at the second half of a CSSrule, the declaration block. A CSS rule consists of a selector and a declaration block. As we’ve seen thedeclaration block is surrounded by curly braces ‘{‘ and ‘}’. Inside the curly braces we can list as manyCSS properties and values as we want, separating the pairs with semicolons. This rule, for example,sets h1 headings to 48pt font, makes them red, and underlines them:4