Lec17 (Introduction to CSS).pptx
-
Upload
nadeemajeedch -
Category
Documents
-
view
231 -
download
2
Transcript of Lec17 (Introduction to CSS).pptx
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