xp 1 working with cascading style sheets creating a style for online scrapbooks tutorial 7
Post on 20-Dec-2015
214 views
TRANSCRIPT
![Page 1: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/1.jpg)
1
XP
Working with Working with Cascading Style Cascading Style
SheetsSheetsCreating a Style for Online Creating a Style for Online
ScrapbooksScrapbooks
Tutorial 7
![Page 2: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/2.jpg)
2
XPIntroducing Cascading Style Introducing Cascading Style
SheetsSheets Style sheetsStyle sheets are files or forms that are files or forms that
describe the layout and appearance of describe the layout and appearance of a documenta document Separate content from display informationSeparate content from display information
Cascading Style SheetsCascading Style Sheets, or , or CSSCSS, is a , is a style sheet style sheet languagelanguage used on the Web used on the Web CSS specifications are maintained by the CSS specifications are maintained by the
World Wide Web Consortium (W3C)World Wide Web Consortium (W3C) Three versions of CSS exist: CSS1, CSS2, Three versions of CSS exist: CSS1, CSS2,
and CSS3and CSS3
![Page 3: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/3.jpg)
3
XP4 Factors4 Factors
How web document is rendered to How web document is rendered to useruser Media - computer screen, printers, etc.Media - computer screen, printers, etc. Browser/OSBrowser/OS User - most browsers allow user to User - most browsers allow user to
override default settingsoverride default settings Code - separate content from Code - separate content from
instructions how to renderinstructions how to render
![Page 4: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/4.jpg)
4
XPApplying a Style SheetApplying a Style Sheet
Three ways to apply a style to an Three ways to apply a style to an HTML or XHTML document:HTML or XHTML document: Inline Styles - applied to specific Inline Styles - applied to specific
elementelement Embedded Styles - in document Embedded Styles - in document
head - for document elementshead - for document elements External Styles - separate External Styles - separate
document - applied to a group of document - applied to a group of web pagesweb pages
![Page 5: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/5.jpg)
5
XPUsing Inline StylesUsing Inline Styles
Inline styles are easy to use and Inline styles are easy to use and interpret because they are applied interpret because they are applied directly to the elements they affect.directly to the elements they affect.
<<elementelement style style=“style1: value1; style2:=“style1: value1; style2:
value2; style3: value3;value2; style3: value3;…”>…”>
![Page 6: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/6.jpg)
6
XPUsing Embedded StylesUsing Embedded Styles
You can embed style definitions in You can embed style definitions in a document head using the a document head using the following form:following form:
<style><style>
style declarationsstyle declarations
</style></style> Style attributesStyle attributes Applying embedded styleApplying embedded style
![Page 7: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/7.jpg)
7
XPUsing an External Style SheetUsing an External Style Sheet
Because an embedded style sheet only Because an embedded style sheet only applies to the content of the start.htm applies to the content of the start.htm file, you need to place a style declaration file, you need to place a style declaration in an in an external style sheetexternal style sheet to apply to to apply to the headings in the rest of the Web site - the headings in the rest of the Web site - could do it with one filecould do it with one file
An An external style sheetexternal style sheet is a text file is a text file that contains style declarationsthat contains style declarations It can be linked to any page in the site, It can be linked to any page in the site,
allowing the same style declaration to be allowing the same style declaration to be applied to the entire siteapplied to the entire site
![Page 8: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/8.jpg)
8
XPUsing an External Style SheetUsing an External Style Sheet
You can add style comments as you You can add style comments as you develop an external style sheet - develop an external style sheet - should doshould do
Use the link element to link a Web Use the link element to link a Web page to an external style sheetpage to an external style sheet
You can import the content of one You can import the content of one style sheet into another - must come style sheet into another - must come before any other style declarations - before any other style declarations - recommended over link - supported recommended over link - supported by more browsersby more browsers
![Page 9: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/9.jpg)
9
XPUnderstanding Cascading Understanding Cascading
OrderOrder You can link a single style sheet to You can link a single style sheet to
multiple documents in your Web site multiple documents in your Web site by using the link element or the by using the link element or the @import element@import element
You can also link a single document You can also link a single document to several style sheetsto several style sheets
![Page 10: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/10.jpg)
10
XPApplying a single style sheet Applying a single style sheet
to multiple documentsto multiple documents
![Page 11: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/11.jpg)
11
XPApplying multiple sheets to a Applying multiple sheets to a
single documentsingle document
![Page 12: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/12.jpg)
12
XPStyle PrecedenceStyle Precedence
1.1. External style sheetExternal style sheet
2.2. Embedded stylesEmbedded styles
3.3. Inline stylesInline styles• If same weight - last declaration - If same weight - last declaration -
takes precedencetakes precedence• Override precedence - important Override precedence - important
propertyproperty
![Page 13: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/13.jpg)
13
XPStyle InheritanceStyle Inheritance
If a style is not specified for an If a style is not specified for an element, it inherits the style of its element, it inherits the style of its parent element; This is called parent element; This is called style style inheritance.inheritance.
Get the bigger declarationGet the bigger declaration Override - specify alternate for Override - specify alternate for
one of the descendant elementsone of the descendant elements
![Page 14: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/14.jpg)
14
XPWorking with SelectorsWorking with Selectors
CSS allows you to work with a wide CSS allows you to work with a wide variety of selectors to match variety of selectors to match different combinations of elementsdifferent combinations of elements
Use Use contextual selectors contextual selectors to apply a to apply a style based on the context in which style based on the context in which an element is usedan element is used
![Page 15: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/15.jpg)
15
XPSimple and contextual Simple and contextual
selectorsselectors
![Page 16: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/16.jpg)
16
XPAttribute SelectorsAttribute Selectors
Create an Create an attribute selectorattribute selector to to select an element based on the select an element based on the element’s attributeselement’s attributes
![Page 17: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/17.jpg)
17
XPUsing IDs and ClassesUsing IDs and Classes
Use an id to distinguish something, Use an id to distinguish something, like a paragraph, from the others in like a paragraph, from the others in a documenta document For example, to identify a paragraph For example, to identify a paragraph
as “head”, use the codeas “head”, use the code::
<p id=“head”>… </p><p id=“head”>… </p>
![Page 18: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/18.jpg)
18
XPClassesClasses
HTML and XHTML require each HTML and XHTML require each id be unique– therefore an id id be unique– therefore an id value can only be used once in a value can only be used once in a documentdocument
You can mark a group of elements You can mark a group of elements with a common identifier using with a common identifier using the class attributethe class attribute
<element class=“class”> … </element><element class=“class”> … </element>
![Page 19: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/19.jpg)
19
XPApplying a style to a classApplying a style to a class
![Page 20: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/20.jpg)
20
XPApplying a style to a class Applying a style to a class
and elementand element
![Page 21: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/21.jpg)
21
XPSizing Elements and Floating Sizing Elements and Floating
an Elementan Element Style sheets instead of tables - more Style sheets instead of tables - more
flexible, applied to multiple documents, flexible, applied to multiple documents, easier to maintain, smaller file sizes, more easier to maintain, smaller file sizes, more manageable codemanageable code
Not supported by all browsersNot supported by all browsers You can define the width of columns in a You can define the width of columns in a
columnar layout using: columnar layout using: width: width: valuevalue You can use CSS to set an element’s height You can use CSS to set an element’s height
using: using: height: height: valuevalue You can float a paragraph using: You can float a paragraph using: float: float:
positionposition
![Page 22: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/22.jpg)
22
XPWorking with the div Working with the div
ElementElement The The div elementdiv element is a generic block- is a generic block-
level element - treat several elements as level element - treat several elements as a single unita single unit
<div><div>
contentcontent
</div></div>
![Page 23: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/23.jpg)
23
XPSetting the Display StyleSetting the Display Style
Values of the display style
![Page 24: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/24.jpg)
24
XPSetting the Display StyleSetting the Display Style
Values of the display style
![Page 25: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/25.jpg)
25
XPWorking with the Box ModelWorking with the Box Model
The The box modelbox model is an element composed is an element composed of four sections:of four sections:
Margin - between element and other Margin - between element and other contentcontent
BorderBorder Padding - between element’s content and Padding - between element’s content and
borderborder contentcontent
![Page 26: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/26.jpg)
26
XPThe Box ModelThe Box Model
![Page 27: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/27.jpg)
27
XPWorking with the Box ModelWorking with the Box Model
Styles to set padding are similar to Styles to set padding are similar to styles to set margins:styles to set margins:
padding-top: padding-top: valuevalue padding-right: padding-right: valuevalue padding-bottom: padding-bottom: valuevalue padding-left: padding-left: valuevalue
![Page 28: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/28.jpg)
28
XPBorder StylesBorder Styles
![Page 29: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/29.jpg)
29
XPBorder Style TypesBorder Style Types
![Page 30: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/30.jpg)
30
XPUsing Pseudo-Classes and Using Pseudo-Classes and
Pseudo-ElementsPseudo-Elements
A A pseudo-classpseudo-class is a classification of an is a classification of an element based on its status, position, or element based on its status, position, or current use in the documentcurrent use in the document
![Page 31: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/31.jpg)
31
XPUsing Pseudo-Classes and Using Pseudo-Classes and
Pseudo-ElementsPseudo-Elements
Rollover effectsRollover effects can be created using pseudo- can be created using pseudo-classesclasses
Pseudo-elementsPseudo-elements are elements based on are elements based on information about an element’s content, use or information about an element’s content, use or positionposition
![Page 32: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/32.jpg)
32
XPPositioning Objects with CSSPositioning Objects with CSS
The different positioning styles in the original CSS1 specifications were known as CSS-Positioning or CSS-P
To place an element at a specific position on a page use:
position: type; top: value; right: value; bottom: value; left: value;
• Type - positioning type applied to element• Absolute - place at specific coordinates• Relative - in relation to its default, normal position• Fixed - does not scroll with rest of page• Inherited - inherit position style of parent element
![Page 33: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/33.jpg)
33
XPWorking with Overflow and Working with Overflow and
ClippingClipping
The overflow property syntax:overflow: type
![Page 34: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/34.jpg)
34
XPStacking ElementsStacking Elements
Specify stacking order with:z-index: value
z-index: 3
z-index: 1
z-index: 2
![Page 35: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/35.jpg)
35
XPWorking with Different Working with Different
MediaMedia
Specify output styles for particular devices in the media attribute of the link and style elements
![Page 36: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/36.jpg)
36
XPThe @media RuleThe @media Rule
You can also specify the output media within a style sheet using:
@media type {style declarations}
Where media is one of the supported media types and style declarations are the styles associated with that media type
![Page 37: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/37.jpg)
37
XPMedia GroupsMedia Groups
CSS2 uses media groups to describe basic facets of different media– and to differentiate between different types of media based on the ways they render content
Continuous or pagedVisual, aural, or tactileGrid (for character grid devices) or bitmapInteractive or static
![Page 38: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/38.jpg)
38
XPMedia GroupsMedia Groups
![Page 39: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/39.jpg)
39
XPHiding ElementsHiding Elements
• Two different styles that allow you to hide elements:• Display style - “none” - element is not rendered by output
device• Visibility style -
![Page 40: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/40.jpg)
40
XPComparing the visibility and Comparing the visibility and
display stylesdisplay styles
Visibility hidden
Object is hidden but still is part of the page flow
Display: none
Object is hidden and is removed from the page flow
![Page 41: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/41.jpg)
41
XPUsing Print StylesUsing Print Styles
• You can specify the size of a page, margins, internal padding, etc. of the page box
• Page pseudo-classes and named pages• First• Left• Right• Name
• Setting the page size• Displaying crop marks• Page breaks - relation to the elements
• Before• After
• Always, avoid, left, right, auto, inherit
![Page 42: XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7](https://reader030.vdocument.in/reader030/viewer/2022032801/56649d535503460f94a2fa20/html5/thumbnails/42.jpg)
42
XP
•Assign #18 Case 1, pg. 424-426 - print code and finished product, black and white is acceptable. •Assign #19 Case 2, pg. 427-429 - print code and finished product, black and white is acceptable.