Introduction to JavaScript

Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan1Understand 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, Pakistan2All 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, Pakistan3Created 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 rules

Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan4Saves timeEasy to changeKeep consistencyGive you more control over layoutUse styles with JavaScript Make it easy to create a common format for all the Web pages

Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan5In-line stylesEmbedded/internal stylesExternal style sheet

Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan6Inline 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, Pakistan7Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan8

Heading with no styleStyle attributeColor settingFont size settingBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan9

Heading with no styleCSS styled headingA 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 pageExample

h1 {color:red; font-family:sans-serif}

Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan10Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan11

Start of style blockTagColor settingFont familyFont sizeEnd of styleSimple headingBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan12

An 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, Pakistan13Open 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, Pakistan14Open an HTML fileBetween and add

URL is the file.cssRelation_type=stylesheetLink_type=text/cssSave this file and the .css file in the same web server directoryBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan15Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan16

Style declaration File is saved with mystyle.css nameBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan17

Style-sheet is includedHeading Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan18

Wherever 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 tags

Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan19Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan20CSS 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, Pakistan21A 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 property

Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan22Use 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 element

Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan23Create a style Id:#id_name {style attributes and values}Use a style Id:

Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan24Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan25

Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan26

HTML 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 attribute

Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan27To create a classtag.class_name {style attributes} or.class_name {style attributes}To apply a style

IU

Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan28Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan29

Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan30

you cant 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 pageORonly 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, Pakistan31CSS 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