ITE 115 Working with Cascading Style SheetsObjectivesSlide 3Slide 4Introducing Cascading Style SheetsCascading Style SheetsSlide 7Slide 8Applying a Style SheetUsing Inline StylesUsing Embedded StylesUsing an External Style SheetSlide 13Understanding Cascading OrderApplying a single style sheet to multiple documentsApplying multiple sheets to a single documentStyle PrecedenceStyle InheritanceWorking with SelectorsSimple and contextual selectorsAttribute SelectorsUsing IDs and ClassesClassesApplying a style to a classApplying a style to a class and elementSizing Elements and Floating an ElementWorking with the div ElementSetting the Display StyleSlide 29Working with the Box ModelThe Box ModelSlide 32Border StylesBorder Style TypesUsing Pseudo-Classes and Pseudo-ElementsSlide 36Positioning Objects with CSSWorking with Overflow and ClippingStacking ElementsWorking with Different MediaThe @media RuleMedia GroupsSlide 43Hiding ElementsComparing the visibility and display stylesUsing Print StylesTutorial 7 New Perspectives on HTML and XHTML, Comprehensive1XPITE 115 Working with Cascading Style SheetsCreating a Style for Online ScrapbooksTutorial 7Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive2XPObjectives•Introducing Cascading Style Sheets•Using Inline Styles•Using Embedded Styles•Using an External Style Sheet•Understanding Cascading Order•Working with SelectorsTutorial 7 New Perspectives on HTML and XHTML, Comprehensive3XPObjectives•Using IDs and Classes•Sizing Elements•Floating an Element•Working with the div Element•Setting the Display Style•Working with the Box Model•Using Pseudo-Classes and Pseudo-Elements•Applying a Style to a Web SiteTutorial 7 New Perspectives on HTML and XHTML, Comprehensive4XPObjectives•Positioning Objects with CSS•Working with Overflow and Clipping•Stacking Elements•Working with Different Media•Hiding Elements•Using Print StylesTutorial 7 New Perspectives on HTML and XHTML, Comprehensive5XPIntroducing Cascading Style Sheets• Style sheets are files or forms that describe the layout and appearance of a document.•Cascading Style Sheets, or CSS, is a style sheet language used on the Web.–CSS specifications are maintained by the World Wide Web Consortium (W3C)–Three versions of CSS exist: CSS1, CSS2, and CSS3Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive6XPCascading Style Sheets•CSS1 introduced styles for the following document features:–Fonts–Text–Color–Backgrounds–Block-level ElementsTutorial 7 New Perspectives on HTML and XHTML, Comprehensive7XPCascading Style Sheets•CSS2 introduced styles for the following document features:–Positioning–Visual Formatting–Media Types–InterfacesTutorial 7 New Perspectives on HTML and XHTML, Comprehensive8XPCascading Style Sheets•CSS3 (which is still in development) will introduce styles for the following document features:–User Interfaces–Accessibility–Columnar layout–International Features–Mobile Devices–Scalable Vector GraphicsTutorial 7 New Perspectives on HTML and XHTML, Comprehensive9XPApplying a Style Sheet•Three ways to apply a style to an HTML or XHTML document:–Inline Styles–Embedded Styles–External StylesTutorial 7 New Perspectives on HTML and XHTML, Comprehensive10XPUsing Inline Styles•Inline styles are easy to use and interpret because they are applied directly to the elements they affect.<element style=“style1: value1; style2:value2; style3: value3;…”>Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive11XPUsing Embedded Styles•You can embed style definitions in a document head using the following form:<style>style declarations</style>Where style declarations are the declarations of the different styles to be applied to the document.Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive12XPUsing an External Style Sheet•Because an embedded style sheet only applies to the content of the start.htm file, you need to place a style declaration in an external style sheet to apply to the headings in the rest of the Web site.•An external style sheet is a text file that contains style declarations.–It can be linked to any page in the site, allowing the same style declaration to be applied to the entire siteTutorial 7 New Perspectives on HTML and XHTML, Comprehensive13XPUsing an External Style Sheet•You can add style comments as you develop an external style sheet.•Use the link element to link a Web page to an external style sheet.•You can import the content of one style sheet into another.Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive14XPUnderstanding Cascading Order•You can link a single style sheet to multiple documents in your Web site by using the link element or the @import element.•You can also link a single document to several style sheets.Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive15XPApplying a single style sheet to multiple documentsTutorial 7 New Perspectives on HTML and XHTML, Comprehensive16XPApplying multiple sheets to a single documentTutorial 7 New Perspectives on HTML and XHTML, Comprehensive17XPStyle Precedence1. External style sheet2. Embedded styles3. Inline stylesTutorial 7 New Perspectives on HTML and XHTML, Comprehensive18XPStyle Inheritance•If a style is not specified for an element, it inherits the style of its parent element. This is called style inheritance.Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive19XPWorking with Selectors•CSS allows you to work with a wide variety of selectors to match different combinations of elements.•Use contextual selectors to apply a style based on the context in which an element is used.Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive20XPSimple and contextual selectorsTutorial 7 New Perspectives on HTML and XHTML, Comprehensive21XPAttribute Selectors•Create an attribute selector to select an element based on the element’s attributes.–See figure 7-13 in your text for a list of attribute selectorsTutorial 7 New Perspectives on HTML and XHTML, Comprehensive22XPUsing IDs and Classes•Use an id to distinguish something, like a paragraph, from the others in a document.–For example, to identify a paragraph as “head”, use the code:<p id=“head”>… </p>Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive23XPClasses•HTML and XHTML require each id be unique– therefore an id value can only be used once in a
View Full Document