Introduction to Cascading Style-Sheets (CSS)

Introduction to Cascading Style-sheets (CSS)Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan1OutlineUnderstand the basic concept of CSSUnderstand the differences among inline, internal and external style sheetsUnderstand how to declare a styleBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan21. Cascading Style SheetAll web pages can be broken down into bucketed content areasThese areas can be updated by changing the code on every page - or -By using cascading style sheets!Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan31.1 Cascading style sheetsCreated by Hakon Lie of MIT in 1994Has become the W3C standard for controlling visual presentation of web pagesCascading style-sheets are powerful mechanism to add style to web documentEnforce standards and uniformityCreate dynamic effectsWorks by allowing you to specify rulesBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan41.2 Advantages of Style SheetsSaves timeEasy to changeKeep consistencyGive you more control over layoutUse styles with JavaScript Make it easy to create a common format for all the Web pagesBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan52. Writing Style SheetsIn-line stylesEmbedded/internal stylesExternal style sheetBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan62.1 In-line StylesInline stylesAdd styles to each tag within the HTML fileUse it when you need to format just a single section in a web pageStyle attribute is used to add styleExample IU Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan72.1 In-line StylesBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan8Heading with no styleStyle attributeColor settingFont size setting2.1 In-line StylesBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan9Heading with no styleCSS styled heading2.2 Internal StylesA style is applied to the entire HTML fileUse it when you need to modify all instances of particular element (e.g., h1) in a web pageExampleh1 {color:red; font-family:sans-serif}Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan102.2 Internal StylesBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan11Start of style blockTagColor settingFont familyFont sizeEnd of styleSimple heading2.2 Internal StylesBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan122.3 External StylesAn external style sheet is a text file containing the style definition (declaration)Use it when you need to control the style for an entire web siteBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan132.3 External StylesOpen a new blank document in NotepadType style declarationsh1 {color:red; font-family:calibri;}Do not include tagsSave the document as filename.cssBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan142.3 External StylesOpen an HTML fileBetween and add URL is the file.cssRelation_type=“stylesheet”Link_type=“text/css”Save this file and the .css file in the same web server directoryBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan152.3 External StylesBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan16Style declaration File is saved with mystyle.css name2.3 External StylesBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan17Style-sheet is includedHeading 2.3 External StylesBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan182.4 Style Sheet StrategiesWherever possible, place your styles in external style sheetsAt the top level of your web site: define a default global.css style sheetRefine styles at sublevels with a section.css style sheetTry to avoid using styles in tagsBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan193. CSS SyntaxBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan203.1 Defining a CSS RuleCSS works by allowing you to associate rules with the elements that appear in a web pageThese rules govern how the content of those elements should be renderedBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan213.1 Defining a CSS RuleA rule consists of A selector: element or elements the declaration applies toDeclaration: how the elements referred to in the selector should be styledproperty: which is the property of the selected elementvalue: which is a specification for this propertyBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan223.2 Using Id,sUse an id to distinguish something, like a paragraph, from the others in a documentThe id selector is used to specify a style for a single, unique elementBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan233.2 Using Id,sCreate a style Id:#id_name {style attributes and values}Use a style Id:Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan243.2 Using Id,sBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan253.2 Using Id,sBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan262.3 Using ClassesHTML and XHTML require each id be unique– therefore an id value can only be used once in a documentYou can mark a group of elements with a common identifier using the class attributeBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan272.3 Using ClassesTo create a classtag.class_name {style attributes} or.class_name {style attributes}To apply a style IUBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan282.3 Using ClassesBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan292.3 Using ClassesBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan303.4 Difference between classes and Id,syou can’t have more than one tag with the same ID valueYou can apply the same Class value to multiple document tagsClasses or Id?use ID's for any elements that are simply used once on a page ORonly use classes to style websites, but, when you have to use an element in JavaScript, use an identifierBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan31SummaryCSS basicsCSS writing optionCSS rulesId,s and ClassesBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan32Chapter 7, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009, ISBN: 978-0-470-54070-1. 33Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.References