HCI Web Applications 3 - Cascading Style Sheets

Web Applications Name: __________________________ ( ) Class:_________ Date: _________ Lesson 3: Cascading Style Sheets Instructional Objectives: By the end of this task, you should be able to: ● ExplainhowCSSonlydescribesthepresentationofawebpageandnotits structure or contents ● Use the<link>tag to associate a web page to a CSSstyle sheet ● Identifytherules,selectors,declarationsandpropertiesthatarepresentina given CSS style sheet ● Useanelementselectortolimiteffectofa CSSruletoaparticularelement type ● UseanidattributeinHTMLandanidselectorinCSStolimiteffectofaCSS rule to a single element ● StatethatitisanerrorforawebpagetohavemorethanoneHTMLelement with the sameidattribute ● UseaclassattributeinHTMLandaclassselectorinCSStolimiteffectofa CSS rule to elements with the specified class ● UseadescendentselectorinCSStolimittheeffectofaCSSruletoelements that are nested in a particular order ● Distinguishbetweenelementsthathavea blockappearancebydefaultand elements that have an inline appearance by default ● Identifyanddistinguishbetweenthemargin,borderandpaddingofelements that have a block appearance ● Usethe<div>tagtorepresentstructuralelementsthatshouldhaveablock appearance by default and are not represented by other HTML tags CPDD Computer Education Unit Version: Nov 20181

Web Applications ● Usethe<span>tagto representstructuralelementsthatshouldhavean inline appearance by default and are not represented by other HTML tags ● Use the display, background, color, height, width, border, border-bottom, border-left, border-right, border-top, margin, margin-bottom, margin-left, margin-right, margin-top, padding, padding-bottom, padding-left, padding-right, padding-top, font-family, font-size, font-style, font-weight, text-alignand text-decorationpropertiesto controlthe presentationof a webpage without producing any syntax errors Part 1: Why Another Language? So far, the web pages we have created look rather plain: However, with the help of CSS, we can improve the appearance of such web pagesgreatly with almost no change to the HTML: CPDD Computer Education Unit Version: Nov 20182

Web Applications You may wonder why we need CSS to control a web page's appearance. Theanswer lies in a computer science principle calledseparation of concerns, where aprogram is divided into distinct sections such that each section only deals with oneaspect of the final product and has minimal knowledge of the other parts. In general, a web page's structure (how the content is organized) and presentation(how the content is displayed) are largely independent of each other and thereforeshould be handled separately. In particular, we define the web page's structure usingHTML in one file and its presentation using CSS in a separate file. Separating thesetwo components lets us lets us modify the web page's structure without affecting itspresentation and vice versa. Thus, as an example, a person can be in charge of thecontent of the website, while another person can design how the website ispresented without worrying over the content of the website. It also lets us specialisethe HTML and CSS languages so that each language is more suited for its purpose. To demonstrate, open Google Chrome and visitwww.csszengarden.com.Click onany of the available designs to see how changing CSS style sheets can dramaticallyaffect the appearance of a web page without modifying its HTML. This is possiblebecause the web page's structure and presentation are controlled separately. (Youmay view the source code by pressing Ctrl-U to check that the HTML is exactly thesame for each design.) Part 2: Anatomy of a CSS Style Sheet Open Google Chrome, visitwww.example.comand pressCtrl-U. Notice that the firstpart of the HTML document includes some CSS inside a<style>tag: CPDD Computer Education Unit Version: Nov 20183

Web Applications For simplicity, this web page has chosen to include its style sheet inside the HTMLfile using a<style>tag. However, in general we writeour style sheet in a separate.cssfile and link it to a HTML file using a<link>tag. We will learn how to do this inthe next part of this practical task. Focusing on the CSS between the<style>and</style>tags, we see that thestyle sheet is made of multiplerules. Each rule startswith one or moreselectorsseparated by commas, followed by curly braces surrounding a number ofdeclarations. These terms are illustrated for a singlerule as follows: Each declaration is made of two parts: apropertyname and one or more valuesseparated by spaces. Multiple declarations in a rule are separated by semicolons. 1 Circle all selectors and underline all properties in the following style sheet: body{margin: 0; CPDD Computer Education Unit Version: Nov 20184

Web Applications padding: 0;} h1, h2, #danger{border: 1px solid red;} 2 For each code snippet below, place a tick in the corresponding box if thesnippet is valid CSS. Note thatbackgroundandcolorare both valid CSSproperty names. Code Snippet Valid? body (background: white;) body {background: whitecolor: black} body {background: white;color: black;} √ { color: black; } body { color: black; } √ Part 3: Your Own Style Sheet Now that we know about the basics of CSS, it is time to create our own style sheet.Like HTML documents, CSS style sheets are just text files with a.cssextension.You may wish to use Notepad++ to edit CSS files as it offers syntax highlighting.Open a text editor, create a new file and save it in your user directory asexample.css. Then enter the following style sheet: CPDD Computer Education Unit Version: Nov 20185

Web Applications h1{color:red;font-family:sans-serif; }p{color:blue;font-style:italic; } To use a stylesheet, we need an accompanying document. Create a new file andsave it asexample.htmlin the same directory asexample.css. Then enter thefollowing HTML document: <!doctype html><html><head><title>CSS Example</title><linkrel="stylesheet" href="example.css"></head><body><h1>CSS Example</h1><p>This is an example of using CSS to style aweb page.</p></body></html> Notice that we have added a<link>tag under the headelement. Therelattribute(short for "relationship") has a value of "stylesheet",which indicates that thehrefattribute (short for "hyperlink") contains the URL of a CSS style sheet. This is howwe normally associate HTML documents with style sheets. Now, double-clickexample.htmlin Windows Explorerto open it in a web browser.You should see something similar to the following: Congratulations! You have just used CSS to control the presentation of a web page. 3 Use a text editor to create a HTML document and CSS style sheet using thefollowing directory structure and contents. Openindex.htmland add a<link>tag so that the web page is styled usingcolours.css.Use relativepaths so the style sheet is always linked correctly even if thecolourfuldirectory and its contents are moved to another location. CPDD Computer Education Unit Version: Nov 20186

Web Applications colours.css body{background:cyan; } h1{color:blue; } p{background:yellow;color:red;} index.html <!doctype html><html><head><title>Colourful</title><link rel="stylesheet" href="styles/colours.css"></head><body><h1>Welcome</h1><p>This is a colourful document!</p></body></html> Part 4: Types of Selectors The elements which are affected by each CSS rule are determined by the selectorsat the start of that rule. Each selector picks out (i.e., selects) a set of elements fromthe HTML document to be affected by the rule's declarations. We shall organize selectors into four groups: element selectors, id selectors, classselectors and descendent selectors. Element Selectors CPDD Computer Education Unit Version: Nov 20187

Web Applications An element selector picks outallelements of a particular type from the HTMLdocument. To use an element selector, we simply enter the name of a tag or elementtype (e.g.,body,h1,table, etc.). For instance,the second rule inexample.cssuses an element selector forpelements: p{color:blue;font-style:italic; } Based on