Scribd
Upload
49 views

CS Students' Brief On CSS

This document provides an overview of CSS (Cascading Style Sheets) for CS students. It covers the basics of how CSS works including rules, selectors, the cascade, and visual formatting. It also discusses including CSS and dual presentation for when CSS is not supported.

Uploaded by

babyrohini86
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
49 views

CS Students' Brief On CSS

This document provides an overview of CSS (Cascading Style Sheets) for CS students. It covers the basics of how CSS works including rules, selectors, the cascade, and visual formatting. It also discusses including CSS and dual presentation for when CSS is not supported.

Uploaded by

babyrohini86
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 43

CS Students' Brief on CSS

Essential CSS for CS3172

Background

Presentation vs. Structure


An early goal of the WWW Easy to update many pages at once Easier to maintain consistency

Early goal: authors' vs. readers' rules


Now partly respected by major browsers

CSS 1 CSS 2
Extended the scope of the rules
2

CS Student Overview of CSS

Ignoring most of the incompatibilities for now

To get an overall understanding Later slides will show some details

We'll examine 4 interesting parts of the presentational instructions and options later
Colour
Font

Border

Position

But first we'll see

What it can do (CSS Zen Garden,CSS Examples) & How it works


3

What's Next?

Introduction to CSS rule method CSS selectors How CSS matches rules to elements

The parse tree The cascade A simple example

How to include rules in an XHTML file

Visual formatting and Dual presentation


4

How CSS Works Rules

Rules provide presentation hints to browser


Browser can ignore hints Three sources of rules:


User agent (browser's default settings), Webpage (source file), The user (personal settings in the browser)

Rules apply when selectors match context

E.g. p {text-indent:1.5em }

Selector is p (matches any <p> element)


5

Rules

Attached to elements

As attributes of elements (inline style) Tied to id attribute of elements Tied to class attribute of elements {Property Name : Value;}

Rules all have form Multiple rules separated by ;

Selectors

Can apply to every element of a type


E.g. h2

More often to a class of element <cite class="textbook book"> Matches both textbook and book

Can apply to pseudo-elements


a:visited, etc.

Special Elements
div and span

Only for grouping other elements div is block-level (think about paragraphs) span is in-line (think about <code>)

Selectors (cont.)

E E1 E2 E1 > E 2 E1 + E 2 E#id E.class

The selector always refers to the rightmost element

See the handout for more pattern matches Resources about selectors are listed on a later slide (just after the cascade)
9

How CSS Works Matching

Every XHTML document represents a document tree

The browser uses the tree to determine which rules apply

What about inheritance? And conflicts?


10

HTML Parse Tree


<html>
<head>
<meta /> <title></title>
HEAD META TITLE H1 HTML BODY

UL

</head> <body>
<h1></h1> <p><span></span></p> <ul>
<li></li> <li></li> <li><span></span></li>

SPAN

LI

LI

LI

SPAN

</ul> <p></p>

</body>

</html>

will h1 + p match? What will ul > span match? What will ul {color:blue} do?
What
13

Inheritance in CSS The Cascade


Inheritance moves down tree Cascading move horizontally


It works on elements that the same rules apply to It is only used for tie-breaking when 2 rules apply

The highest ranking rule wins Most specific wins (usually) But important rules override others

!important beats plain User's !important beats everything else


14

Details of the CSS 2.1 Cascade


For each element E
1. 2.

Find all declarations that apply to E Rank those declarations by origin


a. b.

user !important > author !important > inline style inline style > author plain > user plain > browser

3.

If there is not a clear winner then most specific rule wins.


Compute specificity as shown on next 2 slides.

15

CSS 2.1 Cascade (Continued)


3.
a.

Compute specificity thus:


If one rule uses more # symbols than the others then it applies, otherwise If one rule uses more attributes (including class) than the others then it applies, otherwise If one rule uses more elements then it applies For each two rules that have the same number of every one of the above specifiers, the one that was declared last applies

b.

c. d.

class is the only attribute that can be selected with the . in CSS An equivalent method is shown on the next slide
16

CSS 2.1 Cascade Computation


The cascade algorithm in the standard uses a semi-numerical algorithm The computation looks like this: class is an attribute
1 if the selector is an inline style a=

0 otherwise
b= c= d=

Number of id attributes (but only if specified with #) Number of attributes (except those in b) and pseudo-attributes specified Number of non-id elements specified (including pseudo-elements)

The specificity is abase3 + bbase2 + cbase + d


Where base = 1 + maximum(b,c,d) The rule with the largest specificity applies
17

To find the value for an element/property combination, user agents must apply the following sorting order:
Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question. 2. Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence: a. user agent declarations b. user normal declarations c. author normal declarations d. author important declarations e. user important declarations 3. Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively. 4. Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself. Apart from the !important setting on individual declarations, this strategy gives author's style sheets higher weight than those of the reader. User agents must give the user the ability to turn off the influence of specific author style sheets, e.g., through a pull-down menu. CSS 2.1 6.4.1 Cascading order
1.

CSS 2.1 Cascade: Summary


19

Pseudo-Elements? Pseudo-Attributes?!
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

Classes

Elements

:first-child :link, :visited :hover, :active, :focus :lang

:first-line :first-letter :before, :after


CSS 2.1 5.10 Pseudo-elements and pseudo-classes

Selector Resources on the WWW

The CSS 2 Standard


At W3.org (http://www.w3.org/TR/REC-CSS2/) In frames (http://www.meyerweb.com/eric/css/references/css2ref.html)

Selector Tutorial [Excellent!]


(http://css.maxdesign.com.au/selectutorial/)

SelectORACLE (http://gallery.theopalgroup.com/selectoracle/) Other Recommended Resources

In the resources part of the course website


21

How To Include Rules

Inline

<p style=text-align: center ></p> Inside the head element <link rel="stylesheet" type="text/css" href="site.css" /> <style type="text/css"></style> <style type="text/css">
@import url(site.css); /* other rules could go here */

</style>
22

Simple Example

Fonts and background colours Inheritance and cascading

See simple in CSS examples

23

A Very Brief Overview of Visual Formatting With CSS

Visual Formatting

Fonts Colours Position Box model and Borders

Dual presentation / Hiding CSS

24

Visual Formatting: fonts

Some major properties

font-family

body {font-family: Garamond, Times, serif} Serif fonts and sans-serif fonts

font-size:
Length (em,ex), percentage, relative size, absolute size

font-style:
Normal, italic, oblique

font-weight:
Lighter, normal, bold, bolder, 100, 200, , 800, 900

Set all at once with font

25

Visual Formatting: Colours

How to specify

16 Predefined names RGB values (%, #, 0255) System names: e.g. CaptionText See Lynda Weinman's charts Okay for photos, etc.

Dithered Colour

26

Visual Formatting: Colours (cont.)

Major properties

background-color color

transparent and inherit values

27

Visual Formatting: Images

position:
static, relative, absolute, fixed

Static normal elements Relative translate from usual position Absolute scroll with the page Fixed like absolute, but don't scroll away Example: Jon Gunderson
28

Visual Formatting: Images (cont.)

z-index: depth float and clear

float: left or float: right or float: none

Position relative to parent element

Reset with clear

<br style="clear:both" />

29

Visual Formatting: Box Model

Margin Border Padding

Figure from materials by Dietel, Dietel, and Nieto


30

Borders? Do we have borders!


Four types again Can all be set at once with border See Border slides by Jon Gunderson

31

Box Model (Cont.)

Padding

Size in %, em, or ex for text padding-top, padding-right, padding-bottom, padding-left


Mnemonic: TRouBLe

Set all at once with padding

Margin

Similar to padding But can also be auto


see centring example

Width is of content only. Neither the border nor the padding are included in width.

32

Making Room for a fixed position object


body {margin-left: 6.3em} div.up {position: fixed; left: 1em; top: 40%; padding: .2ex; min-width: 5.5ex }

Width computation: see <URL:


http://tantek.com/CSS/Examples/boxmodelhack.html>
33

Formatting The Jump Box

Jump Box
34

Basic Formatting of the Jump Box


HTML Outline
<body> <!-- --> <div class="up"> <dl> <dt>Jump to top</dt> <!-- --> </div> </body>

Extract of CSS Rules


body {margin-left: 6.3em} div.up {position: fixed; left: 1em; top: 40%; padding: .2ex; min-width: 5.5ex }

35

Effects of Box Formatting

36

body {padding:4em}

37

div.up {margin: 4em}

38

div.up dl {margin:4em}

39

CSS For Dual Presentation

What if users don't have CSS?


See button example

What if CSS only sortof works?


Tricks to hide CSS from dumb browsers

How can I make cool webpages?


One of many ways: see W3C Core Styles

40

Hiding CSS Why do we need to?


Two failure modes: graceful and catastrophic Pragmatism Hubris

41

A Trick For Dual Presentation


visibility: visible or hidden display: none

visible:hidden
element can't be seen but it still uses space

display:none
element isn't shown

visibility

example (CSS buttons)

42

Hiding CSS How (overview)

Ensure that markup is meaningful without CSS


Order of presentation Extra/hidden content v4.0 browsers dont recognize @import Some browsers ignore media rules Later, and more specific, rules override other rules Example follows

Make styles in layers


Use parsing bugs for browser detection

Use browser-specific Javascript Server-side detection doesnt work well

Too much spoofing

43

Hiding CSS Some details


Credits follow

IE 5 for Windows computes incorrect sizes It also doesnt understand voice-family, so

p { font-size: x-small; /* for Win IE 4/5 only */ voice-family: "\"}\"";


/* IE thinks rule is over */ voice-family: inherit; /* recover from trick */ font-size: small /* for better browsers */

} html>p {font-size: small} /* for Opera */


44

Hiding CSS Caveats


There are no fool-proof workarounds for every bug in every browser Some workarounds are incompatible with strict XHTML The workarounds take time and are sometimes inelegant But they are necessary if you want to reach the largest possible audience For more about hacks see <URL:http://tantek.com/log/2005/11.html>
45

Hiding CSS Credits


The example was adapted from
p. 324 of Designing with web standards by Jeffrey Zeldman (2003 by the author, published by New Riders with ISBN 0-7357-1201-8)

The methods are due to


Tantek elick (who also created much of Mac IE and much else)

46

You might also like