Unformatted text preview:

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

NOVA ITE 115 - Web Lecture

Download Web Lecture
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view Web Lecture and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view Web Lecture 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?