Cascading Style Sheets _CSS_

Document Sample
Cascading Style Sheets _CSS_ Powered By Docstoc
					Cascading Style Sheets (CSS)
DBI 2003


Overview of CSS


Same Page – Different Styles
• Look at W3C Core Style Sampler • How is it done?
 Style declarations are in a separate file  The HTML (or XML) document has a link to the style sheet

• You can download and look at the Modernist style sheet • The style for the H1 tag, as defined in modernist.css, is shown on the next slide


{ font-family: Impact, Arial Black, Helvetica Black, sans-serif; font-size-adjust: .46; font-size: 2.33em; font-weight: 400; font-style: normal; text-decoration: none; word-spacing: normal; letter-spacing: normal; text-transform: none; }


What is a Style?
• Font properties
family, size, weight, style, variant

• Text properties
color, transform, decoration

• Background

Property names appear in red

background-color, background-image, background-repeat, backgroundattachment, background-position, background

A Style is Also a Layout
• Text Layout
 direction, word-spacing, white-space, letterspacing, line-height, text-align, text-indent

• Elements as Boxes

 margin-top (-bottom, -left, -right)  padding-top (-bottom, -left, -right)  border-width, border-color, border-style

Property names appear in red

• Positioning Boxes
 float, clear, display, vertical-align  position, left, top, width, height, overflow, visibility, clip, z-index


How and Where the Style is Described?
• The style is specified by style rules • The style rules appear either in the document or in external files, called
• Inside a document, there are inline styles and embedded style sheets • External style sheets are either linked or imported

style sheets

Cascading of Styles
• CSS merges style rules from different places (inline, document-level, imported and linked) • Different places may have conflicting style rules • The process of merging (“cascading”) styles from different places determines which style rules have priority

Overview of the Layout Process in CSS
• Think of each word as a rectangular box • The natural layout of the boxes is
left to right top to bottom

• Think of each HTML (or XML) element as a big box that contains smaller boxes (e.g., words)

The Layout of Big Boxes
• Big boxes are also laid out left-to-right, top-to-bottom • Inside each big box, the smaller boxes are laid out similarly • This is a simplified description of the layout process • Actually, there are more options than just the natural document flow

Layout in HTML vs. CSS
• In pure HTML, the only way to control the positions of elements is by using tables
It is cumbersome to control positions in this way Rendering tables in a browser may take some time (check out this page)

• CSS makes it easy to position elements on a page

Relative vs. Absolute
• In CSS, positions (of boxes) and sizes (of fonts and boxes) could be either relative or absolute • In an “absolute” style
 Font size is fixed  Sizes and positions of elements are fixed

• In a “relative” style
 you can change the font size  The sizes and positions of elements may change when the size of the window is changed

Examples of Relative vs. Absolute
• (like most newspapers) has an “absolute” design
 Is it possible to change the font size?  Is it possible to view more material if you have a wide screen?

• has a “relative” design
 You can change the size of the fonts  The width of the two columns is adjusted according to the width of the browser window

Design Tip
• Make your design as “relative” as possible, since
 The Web is not WYSIWYG because of the variability in supported platforms
• 21-inch monitor • Laptop • Hand-held device

• In other words, site designers and page authors should not try to fully control how their pages will be viewed

In Particular
• Site designers and page authors should not override the the style rules of the client (although it can be done)


Different Levels of CSS
• W3C has specifications for CSS Level 1, CSS Level 2 and CSS Level 3 • Most recent versions of browsers try to implement CSS Level 2 • Hardly any browser implements CSS Level 2 completely and correctly • You should try your style sheets on different browsers, especially if you use complex features of CSS

Design Tip
• Design your site so that it will be rendered reasonably well also on browsers that do not support CSS


Examples and Resources
• Suppose you want to fix your logo on the background – look at an example • W3Schools has many simple examples and a good CSS2 reference • Many tutorials on the Web (e.g., Mulder's Stylesheets Tutorial) • Eric Costello describes layout techniques using CSS and has links to tutorials and other resources on layout techniques

CSS Rules


• A declaration consists of a property and one or more values • The property is separated from the values by a colon property1: value1 property2: value1 value2 value3 • Slides 5 and 6 list many of (but not all) the properties of CSS • See a list of properties and their 20 possible values in W3Schools

Declaration Blocks
• A declaration block is a list of zero or more declarations that are separated by semicolons:
property1: value1; property2: value1 value2 value3;…

• A declaration block usually appears inside a pair of { and } • In in-line styles, a declaration block appears inside a pair of double quotes
“declaration block”

• color: red; font-size: 12pt • margin-top: auto; margin-right: 100px; margin-bottom: 10%; margin-left: 5mm • Alternatively, we can set all four margins in one declaration as follows • margin: auto 100px 10% 5mm


Inline Styles
• In an inline style, the declaration block appears as the value of the attribute style (conforming to XML syntax)
<P style=“color: green; font-size: 1.5em; font-style: italic”> This text will be shown in italic green and the size will be 1.5 times the current font size </P>

CSS Rules
• A rule has the following form

selector {declaration block}
• The selector determines when the rule is applied • The following rule applies to text that is inside a <P> tag
P {color: green; font-size: 1.5em; font-style: italic}

Several Kinds of Selectors
• • • • • • • • • •

Universal Selector Type Selectors Descendant Selectors Child Selectors Adjacent-Sibling Selectors Attribute Selectors Class Selectors ID Selectors Pseudo-Class Selectors Pseudo-Element Selectors

Selectors can be grouped

Type Selector
• A type selector is the name of an element type • A type selector matches every instance of the element type
P {color: green; font-size: 1.5em; font-style: italic} DIV {color: red; font-size: 16px}

• What will be the color and the size if the font is inside a <P> element which is inside a <DIV> element?

Universal Selector
• The universal selector matches every element type • The following rule means that all the text will have a size of 40px * {font-size: 40px}
But even that may not work

• The following will always work * {font-size: 40px ! important}

Class Selectors
• The definition of the class
<P class="introductoryparagraph"> .... </P>

• Style rules for the class
P.introductoryparagraph {color: blue}
• applies to P elements with the class name introductorypargraph

.introductoryparagraph {color: blue}
• applies to any element with the class name introductoryparagraph

Class Selectors (cont’d)
• An element may have more than one class, e.g., <P class="green quote new”> • This element matches the following selectors
• • • • It does not match

• Few browsers support it

ID Selectors
• IDs are identical to classes, except that there can only be one element with a given ID in a document
• In the HTML (or XML) document:
 <BODY id="introduction">

• In the style sheet:
 BODY#introduction {font-size: 1.2em}  #introduction {font-size: 1.2em}

Attribute Selectors
• 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 is set to "intro"

• P[class~=green]
 matches P when the class attribute is set to "green small", "small green", "green", etc.

• The pseudo-classes :link and :visited are used to define styles for links and visited links • :hover is used to define a style for an element when the mouse is over that element • :focus is used to define a style when the element is ready to accept input • :active is used while an element is being activated by the user (during the time between pressing the mouse button and releasing it or pressing it again in a different place)

Examples of Rules for Pseudo-Classes
• • • • • A:link {color: blue} For links, the order of the A:visited {color: purple} rules is A:hover {font-size: 1.5em} important A:active {color: red} INPUT:focus {background-color: yellow}
From a usability point of view, it is not recommend to change the default colors of :link and :visited


More Examples of Pseudo-Classes
• Look at the examples in W3Schools


The :first-child Pseudo-Class
• It is used to denote an element which is the first child of its parent <OL> <LI> This is the first child of OL – it is matched by the selector LI:first-child <LI> This is the second child of OL – it is not matched by the above selector </OL>

• A pseudo-element selector matches part of an element (whereas a pseudo-class selector matches a complete element)
• :first-line and :first-letter match the first line and the first letter of an element, respectively • Examples: P:first-line {text-transform: capitalize} P:first-letter {font-size: 48px; color: red}

Contextual Selector
• P B {color: red} • The above rule is matched by a B element if that element is nested (at any level) inside a P element


Grouping of Selectors
• The following rule applies to all elements of that match either H1, H2, H3 or P B P B, H1, H2, H3 {font-size: 120%}


<HTML> <HEAD><TITLE>Formatting 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> 39


Adding 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>


Another Example


<HEAD><TITLE>Some more style examples</TITLE></HEAD> <style TYPE=text/css> <!-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?"

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> 44 </HTML>


The Sources of Style Sheets


Embedded Style Sheets
<HTML> <HEAD> <STYLE type="text/css"> <!-BODY {color: red} --> </STYLE> </HEAD> <BODY> ... </BODY> </HTML>
The embedded style sheet appears in the header inside a <STYLE> element.

All the text of the style sheet is inside an HTML comment so that browsers that do not support CSS will ignore the text.


Inline Styles
• Any tag, except the <HTML> tag itself, can have the style attribute • For example, the following will define the color of the paragraph to be green <P style="color: green"> and this is green</P>


Imported Style Sheets
• The @import rule imports style rules to the beginning of the style sheet • Usage: @import url(nameOfFile.css) • Several import rules may appear at the beginning of the style sheet • Import rules can appear in embedded style sheets or in external style sheets

Linked Style Sheets
• Links to external style sheets can appear in the header of an HTML page <HTML> <HEAD> <LINK rel="stylesheet" type="text/css” href=“name.css“ media=“print handheld”> </HEAD> <BODY> ... </BODY> 50 </HTML>

Inheritance and Cascading


Inheritance of Properties
• If an element does not match any rule for some given property, then the element inherits the computed value for that property from its parent element


• Given the rules:
BODY { font-size: 10pt } H1 { font-size: 120% }

• What will be the font size of the EM element? <BODY> <H1>A <EM>large</EM> heading</H1> </BODY>

Cascading Order
• When several rules define the same property and match the same element, then the cascading order is as follows:
Primary sort: weight and origin Secondary sort: specificity of selectors Final sort: order of appearance

• The cascading order determines which rules applies

Weight and Origin
• Author style sheets override user style sheets • User style sheets override default (browser) style sheets • ! important declaration overrides normal declaration • If both author and user declarations have ! important, the user declarations still override the author declarations (in CSS2, but not in CSS1)

Specificity of a Selector
• Let a be the number of ID attributes in the given selector • Let b be the number of attributes and pseudo-classes in the given selector • Let c be the number of element names in the given selector • Sort the triples (a,b,c) lexicographically) • Pseudo-elements are ignored

• Consider the two rules
P {…} .introductory {…}

• If an element matches both, then the second rule has a higher specificity and overrides the first


Order of Appearance
• If two rules have the same weight, origin and specificity, then the one that appears last in the style sheet overrides the others • Rules in imported style sheets are considered to appear before local rules


Shared By: