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 ho