style sheets
DESCRIPTION
Style Sheets. DBI – Representation and Management of Data on the Internet. What are Style Sheets?. Style sheets are a mechanism for allowing authors to specify how they wish documents written in a markup language, such as XML or HTML, to be formatted. Why HTML is not Enough?. - PowerPoint PPT PresentationTRANSCRIPT
1
Style SheetsStyle Sheets
DBI – Representation and Management of Data on
the Internet
2
What are Style Sheets? What are Style Sheets?
• Style sheets are a mechanism for allowing authors to specify how they wish documents written in a markup language, such as XML or HTML, to be formatted
3
Why HTML is not Enough? Why HTML is not Enough?
• HTML gives only a limited control over the style of documentsFor Example, <H1>This Title</H1>
does not say how “This Title” should look like
We cannot specify a style for all the <H1> headers, such that this style can be defined once and applied to all <H1> headers at once
4
In AdditionIn Addition
• HTML doesn't offer sufficient control over document formatting, i.e., it doesn’t supportleading (the space between
lines)text shadowsand many other facets
5
The SolutionThe Solution
Style SheetDocuments
Documents with Style
6
HTML Style vs. XML StyleHTML Style vs. XML Style
XML
HTML
With CSS Style
CSSHTML
XSLXML
With XSL Style
Not all browsers
support all formats
7
Reasons to Use Style SheetsReasons to Use Style Sheets
• They separate content from formatting• They reduce download time by
removing formatting information from documents
• They give far more control over formatting than HTML
• They ensure a consistent appearance across a site
• One style sheet can be attached to many files (changes are easier)
8
What Reasons are there not to What Reasons are there not to use Style Sheets?use Style Sheets?
• Not all browsers fully support all style sheets
• Not all browsers support style sheets properly
• Be aware that since CSS (CSS2) is a large specification, most browsers do not support it in its entirety
9
What can be done in CSS?What can be done in CSS?
• Style sheets allow you to say, for example, that you want headings in 30px Arial
with a pink backgroundthat you want the whole document to
have a left margin of 1inand more, as will be shown next
10
ExampleExample
A definition in CSS:
BODY {color: red; background-color: white; font-size: 32px; font-family: Arial; line-height: 36px; margin-left: 5%}
11
Without StyleWithout Style
<HTML> <HEAD> CSS Test </HEAD> <BODY>
This is a test of using a CSS style sheet. <P>
</BODY></HTML>
12
On A BrowserOn A Browser
13
With StyleWith Style<HTML><HEAD><TITLE>Formatting style with CSS</TITLE><STYLE TYPE="text/css"><!-BODY {
color: red; background-color: white; font-size: 32px; font-family: Arial; line-height: 36px; margin-left: 5%}-></STYLE></HEAD><BODY>This is an example of using CSS.<P> </BODY></HTML>
14
On a BrowserOn a Browser
15
Using CSSUsing CSS
A Cascading Style Sheet
16
CSS - Cascading Style SheetCSS - Cascading Style Sheet
• CSS is a W3C recommendationfor formatting HTML and XML
documentsto simplify Web authoring and site
maintenance
• Level 1 (CSS1) from Dec. 1997• Level 2 (CSS2) from May 1998
17
CSS Level 1CSS Level 1
• Allows authors and readers to attach style (e.g., fonts, colors, spacing) to HTML/XML documents
• Implemented in “version 4.+” of major Web browsers (but not completely)
18
CSS Level 2CSS Level 2
• An extension of CSS1:has media-specific style sheets, e.g., for
aural/Braille/handheld devices, printers…Also supports
content positioning, downloadable fonts, table layout, internationalization, automatic counter and numbering
some properties related to user interface
19
CSS Style SheetCSS Style Sheet
• The style sheet is a set of style rules• A style rule syntax:
selector {declaration}
• selectorlocates elements affected by the rule
• declarationlooks like a list: P1:V1 ; … ; Pn:Vnsets values for formatting properties
20
Rules and PropertiesRules and Properties
• Example rulesH1 {color: blue}H1, H2, H3 {font-style:bold }P {font-family: verdana; color: red }
• Examples of formatting propertiesfont-size, font-style, font-family, font-
weight, font-align, margin-left, border-width, float, color, background-color, ...
21
Declaring Style DataDeclaring Style Data
• There are three ways to declare the style datain the <HEAD> of pagesat tag levelin a separate external style sheet
• In each case, style sheets do not contain any HTML, just style commands
22
External Style SheetsExternal Style Sheets
• Style sheets are linked using the tag <LINK rel="stylesheet” type="text/css” href="name.css"> which must go in the header of a page• Example<HTML> <HEAD> <LINK rel="stylesheet" type="text/css” href="fluorescent.css"> </HEAD> <BODY> ... </BODY></HTML>
23
Importing Style SheetsImporting Style Sheets• The @import rule allows you to keep some
things the same while having others different
• Usage: @import url(nameOfFile.css)• Reasons for using @import
If the documents include right-to-left text, and a bi-directional style is needed, one can use a standard bidi style sheet
If a standard style sheet specifies the appearance of most of the elements, but there are more specific elements that also need to be defined
24
Embedded Style sheetsEmbedded Style sheets• Embedded style sheets are enclosed in a <STYLE
type="text/css"> and </STYLE> tag• They go in the header of a page: <HTML> <HEAD> <STYLE type="text/css">
<!-- Note the HTML comment tags. BODY {color: red} They are for browsers that --> do not support style sheets. </STYLE> </HEAD> <BODY> ... </BODY> </HTML>
25
Inline StyleInline Style
• Any tag except the <HTML> tag itself can take the style attribute:
<P style="color: green"> and this is green</P>
will define the color of the paragraph to be green
26
DeclarationsDeclarations
• Declarations are used to apply style to elements, for example, to set an element to have a border
• The basic syntax of a declaration is a property (such as color) followed by a colon (:) and a value
• Declarations are directly used only in inline style
27
Declaration GroupingDeclaration Grouping
• In order to specify several styles for an element, declarations can be separated by semicolons
• It is optional to have a semicolon after the final declaration
• Example<P style="color: red; font-size: 16px">
28
SelectorsSelectors
• Selectors are used to associate style declarations with an element or elements
• Declarations are placed within a block (enclosed in {}) and preceded by a selector
• ExampleDIV {color: red; font-size: 16px}
29
Type vs. Class SelectorsType vs. Class Selectors
• There are type selectors and class selectors
• Type selectors are what we saw They give properties to elements
• Class selectors allow a user to give elements a particular name
• In HTML it looks as follows:<TAG class="classname">
30
Class SelectorsClass Selectors
• The definition of the class<P class="introductoryparagraph"> .... </P>
• The definition of the styleP.introductoryparagraph {color: blue}
applies to P elements with the class name introductorypargraph
.introductoryparagraph {color: blue} applies to any element with the class
name introductoryparagraph
31
Class Selectors (cont’d)Class Selectors (cont’d)
• An element may have more than one class, e.g., <P class="green quote new” matches, e.g.,
P.quote.green, P.new or P.quote.new.green, but not P.new.old.
• However, few browsers support this usage
32
Pseudo-Class SelectorsPseudo-Class Selectors
• Used for choosing values for properties based on the state of the browser
• :link and :visiteddifferent style for a visited link compared
to an unvisited one• :hover (the mouse is over the element) and
:focus (the focus is on the element)• :active (applied when an element is being
activated)
33
Pseudo-Class ExamplesPseudo-Class Examples
• A:link {color: red}
• A:visited {color: purple}
• P:hover {text-decoration: underline}
• A:focus {text-decoration: underline}
• INPUT:active {color: red}
34
Pseudo-Classes on LinksPseudo-Classes on Links• Suppose we are given the definition:
A:active {background-color: red}A:hover {background-color: yellow}A:link {background-color: green}
• What is the problem? • The states are not mutually
exclusive• A possible solution by multiple pseudo-
classes, i.e., A:link:hover• What will A:link:hover:focus {color: red} do?
35
Contextual SelectorsContextual Selectors
• If ELEMENT2 is a descendant of ELEMENT1, then the given properties apply to those ELEMENT2s
• Example STRONG EM {text-transform: uppercase}
/* EM inside STRONG will be uppercase */
<STRONG><EM>some text</EM></STRONG>
SOME TEXT
36
Selector GroupingSelector Grouping• Associate a block with several different
selectors • Save typing• Save download time • Done by separating the selectors by
commas• E.g., BODY P, H1 {color: red}
is the same as BODY P {color: red}
H1 {color: red}
37
The Universal Selector (*)The Universal Selector (*)
• The universal selector matches anything
• ExamplesBODY * P -- P is the grandchild or
greater of BODY*:active is equivalent to :active* {height: 100px} -- all elements should
be 100 pixels high
38
:First-Child Selector:First-Child Selector
• A pseudo-class
• Matches an element that is the first child of its parent
<OL><LI>This is the first child of OL -- it is matched by LI:first-child.<LI>This is the second child of OL.</OL>
39
Pseudo-Element SelectorsPseudo-Element Selectors
• Select part of an element (whereas pseudo-classes select all of the element)
• First-line and first-letter -- apply to the first line and the first letter of an element, respectively; Example:P:first-line {text-transform: capitalize}
P:first-letter {font-size: 48px; color: red}
40
ID SelectorsID Selectors
• IDs are identical to classes, except that there can only be one element with a given ID in a document.
• In the HTML document:<BODY id="introduction">
• In the style-sheet:BODY#introduction {font-size: 1.2em} or #introduction {font-size: 1.2em}
41
Attribute SelectorAttribute Selector• P[attribute]
matches P when attribute is set to any value
• P[title=intro] or P[title="intro"] (the quotes are optional) matches P when its title attribute set to
"intro"
• P[class~=green] matches P when the class attribute is set to
"green small", "small green", "green", etc.
42
CombinatorsCombinators
• Child combinators (>) - only apply to children (differently from contextual selectors)
• For example: BODY > P matches:
<BODY><P>
but not<BODY><DIV><P></DIV>
43
Adjacent Sibling Combinator (+)Adjacent Sibling Combinator (+)
• Used to specify that the two specified elements are adjacent siblings
<DIV><P> does not match P+P </P></DIV><P> does not match P+P </P><P> matches P+P </P>
44
ExampleExample<HTML><HEAD><TITLE>Formating style with CSS</TITLE></HEAD><BODY><IMG SRC="tomato.gif"><H1>A joke</H1><P> A mama tomato, a papa tomato and a baby tomato are walking down the street.The baby tomato keeps falling behind so the papa tomato goes back, steps on the baby tomato and says, ketchup ("Catch-up!").
</P> </BODY></HTML>
45
46
Adding a styleAdding a style<STYLE type="text/css">
BODY { background-image: url("tomato1.gif"); background-attachment: fixed
}H1 { background-color: rgb(100,150,100);
color: rgb(250, 200, 250);}P { background-color: yellow;
color: purple; font-size: 200%
}</STYLE>
47
48
<HEAD><TITLE>Some more style examples</TITLE></HEAD><style>
BODY {font-size: 30}P:first-line {color: #ff0000;font-variant: small-caps}
</style><BODY><SPAN style="float: left; font-size: 100px; line-height: 90px; width: 60px">T</SPAN>wo cows were walking together in a field. One turns to the other and says, "hey larry are you worried about getting that mad cow disease?"
<P>Larry, in a very odd and wacky voice says, <SPAN style="text-decoration: underline">"why would I, I'm a chicken?"</SPAN><SPAN style="text-decoration: line-through">"why would I, I'm a cow?"</SPAN></BODY></HTML>
49
50
Inheritance and CascadingInheritance and Cascading
Resolving Conflicts of Definitions
51
ConflictsConflicts
• Because CSS provides so many ways of applying style to pages, it is inevitable that declarations will conflict
• To resolve this, there is something known as a cascade
52
Inheritance and CascadingInheritance and Cascading• Properties are inherited by sub-elements
can be overriddencan be modified (e.g., increase indent, set
font size to 75% of current)
• “Cascading”style rules (from various sources) combinedconflicts resolved by a priority mechanism
rules with the most specific selector win
53
• Thus, if you specify BODY {color: red} then everything inside BODY will inherit that color unless a contrary declaration is made
<HEAD> <STYLE type="text/css"> <!-- BODY {color: red} --> </STYLE></HEAD> <BODY> <P>
InheritanceInheritance
54
Conflict ResolutionConflict Resolution
• In case of conflicting style definitions: the more specific one is chosen, e.g.,
P.warning {font-weight: bold} and .warning {font-weight: normal},
both would match <P class=“warning”>Watch out !</P>
but the first one winsthe one specified via a class overrides
normal ones, e.g., .warning {color: red} overrides P {color: blue}
Ids override classes
55
The Order SortThe Order Sort
• Rules at the end of the style sheet take precedence over those at the start
• Inline style is assumed to be read after embedded style, which is read after linked style
56
The Origin SortThe Origin Sort
• There are three possible sources of style: the author, the user (via a user style sheet), and the browser (via the browser's
style rules)
• Author > user > browser (> means override)
57
The Weight SortThe Weight Sort• Declarations - sorted according to weight • Declarations - can have normal weight or
important weight • Declarations are made important by the
addition of !important• The effect of the weight sort is:
to give that declaration greater weight than all others in its style sheet
to alter the origin sort (user style declarations that are !important override author ones, even if the author ones are also !important)
58
The Specificity SortThe Specificity Sort
• At last, the specificity sort prevails: (a) count the number of ids in the selector, (b) count the number of classes, attribute
selectors and pseudo-classes, (c) count the number of elements and pseudo-
elements Universal selectors have a specificity of 0
Make this into a number ABC - e.g.
BODY P[align]#hello:active:first-letter, has a=1, b=2, c=3 and thus we get 123.
• The highest number wins
59
The Order SortThe Order Sort
• Rules at the end of the style sheet > those at the start
• Inline style > embedded style > linked style
• Imported style sheets form the start of the importer's style sheet
60
CSS ConceptsCSS Concepts
61
CSS ConceptsCSS Concepts
• All CSS is case insensitive• Comments are enclosed in /* */• URLs can be used to import things
from the Web:url(http://www.background.com/back.jpg)
• Length can be specified relatively (px, em, ex, %), or absolutely (in, pt, mm, cm)
62
ColorsColors• There are 16 basic colors:Aqua Black Blue
Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow
• Colors can also be specified as a hexadecimal number, e.g., #1CDBFA in this form: rgb (x%, y%, z%) (e.g. rgb (30%,
40%, 20%), or as a decimal number: rgb (x, y, z) (e.g. rgb
(168, 57, 32)), where the maximum and minimum on most computers is 255 and 0 respectively.
63
Colors (cont.)Colors (cont.)
• In order to make pages that conform to the operating environment that your users are used to, it is possible to declare all color values as one of the following:
• ActiveBorder, ActiveCaption, AppWorkspace, Background, ButtonFace, ButtonHighlight, ButtonShadow, ButtonText, CaptionText, GrayText, Highlight, HighlightText, InactiveBorder, InactiveCaption, InactiveCaptionText, InfoBackground, Menu, MenuText, Scrollbar, ThreeDDarkShadow, ThreeDFace, ThreeDHighlight, ThreeDLightShadow, Window, WindowFrame, WindowText
64
Colors ExampleColors Example
P {color: windowtext}BODY {color: #C67}LI {color: rgb(10%, 45%, 56.7%)}
65
FontsFonts
• Includes the properties: font-weight font-stretch font-variant font-style font-size-adjust font-size font-family
• Try it at home ...
66
TextText
• Has the propertiesVertical-alignText-alignText-decorationText-indentText-transformWord-spacing and letter-spacingWhite-spaceText-shadow
67
ListsLists
• Lists have the propertiesList-style-typeList-style-positionList-style-imageList-style
68
TablesTables
• Tables present unique difficulties for formatting purposes - are empty cells drawn?are borders separate or together?etc.
69
Creating A TableCreating A Table
table (= <TABLE>) inline-table table-row-group (= <TBODY>) table-column-group (= <COLGROUP>) table-header-group (= <THEAD>) table-footer-group (= <TFOOT>) table-column (= <COL>) table-row (= <TR>) table-cell (= <TD>) table-caption (= <CAPTION>)
70
LanguageLanguage
• :lang(x) selector - a pseudo-class that matches an element in a human language x - e.g., P:lang(en) matches <P lang="en"> (English)
• @charset - states the encoding method of the document
71
Non-left-to-right TextNon-left-to-right Text
• The direction property is used to specify the direction of text
• Direction: ltr (initial value) specifies that text goes left-to-right, and direction: rtl, right-to-left
• Unicode-bidi : specifies behavior with respect to the Unicode bidirectionality algorithm
72
Generated ContentGenerated Content
73
Generated contentGenerated content• There are three principal types of
content:non-replaced content
<P> Some non-replaced content - directly used </P>
replaced content <IMG src="green.gif"> <!-- Some replaced content - the
IMG reference is replaced by an image. -->
generated content <LI> Some non-replaced content that will be preceded by
some generated content - the list marker. </LI>
74
:Before and :after :Before and :after Pseudo-elementsPseudo-elements
• Generated content consists of putting a piece of content before or after an element
• :before and :after are used to specify where to add a generated content, e.g., P:before {content: "J”; color: red} specifies that P elements should be preceded by a (red) J
75
Counter FunctionsCounter Functions• The name of the counter function - used to
identify the counter so that references can be made to it.
• The increment of the counter - is it 1, 2, 3 or 1, 7, 13?
• The initial value of the counter - is it 1, 2, 3 or 126, 127, 128?
• The trigger to reset the counter to its initial value
• The way in which the counter is formatted - is it 1, 2, 3 or i, ii, iii?
76
CountersCounters
• Naming - P{content:counter(myCounter)}• Incrementing - H1{counter-increment:
HeadingCounter 1}• Initial values and reset - OL {counter-
reset: counter1 counter2 -26} Counter-reset only affects sibling and descendant elements
• Style - P:before {content: counter(counter, lower-alpha); counter-increment: counter}
77
CSS Formatting ModelCSS Formatting Model
The Box Model
78
CSS Formatting ModelCSS Formatting Model• CSS has a simple box-oriented formatting
model:Each HTML element is assumed to be
in a boxAll HTML elements can have box model
properties applied to them (box model properties do not inherit) margin border padding
79
The Containing BlockThe Containing Block
• All elements have a containing block• Formatted elements result in
rectangular (nested) boxes, which havecore content areaoptional surrounding padding, border and
margin areas • For example - P {margin: 10px 5px} is
applied as a 10 pixel vertical and 5 pixel horizontal margin
80
Margin and PaddingMargin and Padding
• Each element can have four margins: left, right, bottom and top
• These are defined by the margin-left, margin-right, margin-top, margin-bottom properties
• Initially margins are 0
81
Padding and BorderPadding and Border
• It is usually impossible to distinguish between padding and margin on the screen
• Padding differs from margins insofar as padding does not collapse
• Padding main importance is when an element has a rendered border
• Border is mainly important due to the width, color and style of the border
82
Dimensional Properties of BoxesDimensional Properties of Boxes
Margin (transparent)
border
Padding
Content
Element WidthBox Width
83
Positioning SchemesPositioning Schemes• Normal flow, which includes
blocks, elements, inline elements, list-items, etc.
and the positioning of these elements relative to their positions in the source file
• Floats• Absolute positioning (i.e., positioning of
content relative to a fixed point)
84
FloatsFloats
• The float property alters the normal behavior of an element
• For example, it can be used to create a drop-cap effect
• The effect of setting a float is similar to making the element part of the specified margin
• The clear property prevents an element from flowing round a floating element
85
Floats (cont’d)Floats (cont’d)
• Inline content flows around floats:<P><SPAN style="float: left; font-size: 72px; line-height: 72px; width: 50px">T</SPAN>he cat sat on the mat<BR> again <BR>once more.</P>
<P>New paragraph flows round it and continues after it.</P>---------------he cat sat on the mat | again | once more | | | New paragraph flows round itand continues after it.
86
The HTMLThe HTML
<HTML><HEAD><TITLE>Using floats</TITLE></HEAD><BODY>This is an example of using float elements:<P><STRONG>Without float:</STRONG><P><SPAN style="font-size: 100px; line-height: 90px; width:
60px">T</SPAN>he cat sat on the mat<BR> again <BR>once more. </P><P>New paragraph flows round it and continues after it.</P>
<STRONG>With float:</STRONG><P><SPAN style="float: left; font-size: 100px; line-height: 90px; width:
60px">T</SPAN>he cat sat on the mat<BR> again <BR>once more. </P><P>New paragraph flows round it and continues after it.</P></BODY></HTML>
87
88
PositioningPositioning
• An element's position is specified relative to a reference point
• In order to specify the position of elements, four properties are used: top, left, right and bottom
• The position can be static, absolute, fixed or relative
89
Positioning (cont’d)Positioning (cont’d)• Relative - the element will be relatively
positioned
• Absolute - the position of an element is specified relative to the edges of the containing block box
• Static - the element will flow normally (only static can be used for floats)
• Fixed - the element will be fixed with respect to the document window or viewport
90
EffectsEffects
91
CursorCursor• Specifies the cursor that should be
associated with the element.• Custom cursor – image is specified in
a file or a url, e.g., cursor: url(arrow.csr)• Generic cursor - auto (initial value - indicating the
value that the browser thinks is appropriate for that element) , crosshair, default (usually an arrow), pointer (cursor indicates that the item is a link), move (cursor for moving an object), text (indicates that text can be selected), wait (usually an hourglass), help (usually a ?), e-resize (cursor for resizing from the box's east corner), ne-resize, n-resize, s-resize, se-resize, w-resize, sw-resize.
92
VisibilityVisibility
• Set to visible (render the element normally)
or hidden (transparent)
• Its use is to hide content that is later shown by scripts
• E.g., P {visibility: hidden}
93
Block effectsBlock effects
• Z-index - Since elements may overlap, z-index provides for the stacking order
• A higher z-index means that an element goes further to the front
• There are two concepts:The stacking context that a box is in The stacking level for that element
94
Z-index (cont’d)Z-index (cont’d)
• Stacking contexts are stacked as a unit according to the z-index of the context
• Within a stacking context, elements are stacked in markup order
• A new stacking context is established by z-index != auto
95
Z-index ExampleZ-index Example• For example, given: <DIV style="z-index: 5; position: absolute; top: 0; left: 0">
<P style="z-index: auto; position: absolute; top: 0; left: 0"></DIV><DIV style="z-index: 4; position: absolute; top: 0; left: 0"><P style="z-index: auto; position: absolute; top: 0; left: 0"></DIV>
• The z-index: 5 places both itself and the P above the z-index 4
• For non-positioned elements, z-index is treated as auto
96
OverflowOverflow• Specifies whether content that overflows the
clipping region of a containing block should be rendered or not
• Possible treatments:scroll - using scroll barsvisible - rendering outside the clipping regionhidden - rendering only the part in the
clipping regionauto - the browser default
97
Media-dependent Style SheetsMedia-dependent Style Sheets• You specify media-dependent style sheets by adding
the media attribute to the LINK or STYLE element, e.g., <STYLE media="screen” type="text/css">
• Valid media: screen (standard computer screen), tty (fixed-pitch character grid, as with teletypes), tv projection handheld (handheld device - probably small low-resolution
screen) braille aural all (applies to all media).
98
Paged MediaPaged Media
• CSS2 provides support for paged media (e.g., printers)
• Paged media are the CSS media types of projection, handheld and embossed
• It allows setting margins, marks, naming of pages, page breaks, etc.
99
Aural Style SheetsAural Style Sheets
• Aural style sheets are vital for accessibility purposes (i.e., for blind or for people that can barely read)
• Done by specifying:Aural units, volume, speak, speech-rate,
pause-before, pause-after, pause, cue-before, cue-after, cue, play-during, azimuth, elevation, voice-family, pitch, pitch-range, stress, richness, speak-punctuation, speak-numeral
100
ConclusionConclusion
101
Advantages of CSSAdvantages of CSS
• Easy to learn• Easy to use• The core of CSS is supported by
many browsers• Can be applied to both HTML and
XML• Very flexible
102
Limitations of CSSLimitations of CSS• No transposition of elements (except for
floating)• No sibling relationship (e.g., the third
child of …), limited use of attributes (classes)
• Non-programmable:no decision structuresno extensibilityunable to store calculated quantities
103
Limitations of CSS (cont’d)Limitations of CSS (cont’d)
• No text generation• limited formatting model• Weakly supported by browsers
104
Links and ReferencesLinks and References
105
LinksLinks
• For more information on style sheets see the W3C site style sheets page
• For more information on CSS see the W3C CSS page (look at CSS1 Test Suite)
• For examples of using CSS for changing styles see the W3C CSS core styles
• W3Schools