Creating the Presentation Layer DECO 3001 Tutorial 2 – Style Presented by Ji Soo Yoon 26 February 2004 Slides adopted from matuszek/cit597-

Creating the Presentation LayerDECO 3001 Tutorial 2 – Style

Presented by Ji Soo Yoon26 February 2004

Slides adopted from http://www.cis.upenn.edu/~matuszek/cit597-2002/Lectures/css.ppt, http://darkwing.uoregon.edu/~anthonym/cis125h, http://www.w3schools.com/xhtml/default.asp, http://escholarship.cdlib.org/rtennant/presentations/2004cil/xhtml, http://wally.cs.iupui.edu/n241-new/ and Beginning XHTML ©2000 Wrox Press

Overview

Style Sheets have been used for years in Desktop Publishing to apply typographical styles and spacing to printed media

Cascading Style Sheets (CSS) provides this functionality (and much more) for web developers

CSS is a flexible, cross-platform, standards-based language developed by the W3C

We will be concentrating on using CSS for formatting – a feature that is well-supported by browsers

Advantages

Greater typography and page layout control

Style is separate from structure

Styles can be stored in a separate document and linked to from the web page

Potentially smaller documents

No need for <font> tags

Easier site maintenance

Can be used for both HTML and XML documents

Disadvantage

CSS technology is not yet uniformly supported by browsers Currently this is a major problem This will be less of an issue in the future

as more browsers that comply with the standards are developed

CSS Syntax

Style sheets are composed of "Rules" that describe the styling to be applied

CSS syntax is very simple Just a file containing “rules” – a list of selectors (to choose

tags) and descriptors (to tell what to do with them)

A CSS file is just a list of these selector/descriptor pairs Selectors may be simple HTML tags or XML tags, but

CSS also defines some ways to combine tags Descriptors are defined in CSS itself, and there is quite a

long list of them

CSS Syntax 2

The general syntax is: selector {property: value} or selector, ..., selector {

property: value; . . . property: value}

where selector is the tag to be affected (the selector is case-

sensitive if and only if the document language is case-sensitive)

property and value describe the appearance of that tag Spaces after colons and semicolons are optional A semicolon must be used between property:value pairs, but

a semicolon after the last pair is optional

CSS Examples

h1,h2,h3 {font-family: Arial, sans-serif;} /* use 1st available font */

p, table, li, address { /* apply to all these tags */ font-family: "Courier New"; /* quote values containing spaces */ margin-left: 15pt; /* specify indentation */}

a:link {color:darkred} /* an unvisited link */

a:visited {color:darkred} /* a link that has been visited */

a:active {color:red} /* a link now being visited */

a:hover {color:red} /* when the mouse hovers over it */

Selectors

As we have seen, an XML or HTML tag can be used as a simple element selector: body { background-color: #ffffff }

You can use multiple selectors: em, i {color: red}

You can repeat selectors: h1, h2, h3 {font-family: Verdana; color: red} h1, h3 {font-weight: bold; color: pink} When values disagree, the last one overrides any earlier ones

The universal selector * applies to any and all elements: * {color: blue} When values disagree, more specific selectors override general ones (so

em elements would still be red)

Selectors 2

A descendent selector chooses a tag with a specific ancestor: p code { color: brown } selects a code if it is somewhere inside a paragraph

A child selector > chooses a tag with a specific parent: h3 > em { font-weight: bold } selects an em only if its immediate parent is h3

An adjacent selector chooses an element that immediately follows another: b + i { font-size: 8pt }

Example: <b>I'm bold and</b> <i>I'm italic</i> Result will look something like: I'm bold and I'm italic

Selectors 3

A simple attribute selector allows you to choose elements that have a given attribute, regardless of its value: Syntax: element[attribute] { ... } Example: table[border] { ... }

An attribute value selector allows you to choose elements that have a given attribute with a given value: Syntax: element[attribute="value"] { ... } Example: table[border="0"] { ... }

The Class Attributes

The class attribute allows you to have different styles for the same element In the style sheet:

p.important {font-size: 24pt; color: red}p.fineprint {font-size: 8pt}

In the XHTML:<p class="important">The end is nigh!</p> <p class="fineprint">Offer ends 1/1/97.</p>

To define a selector that applies to any element with that class, just omit the tag name (but keep the dot): .fineprint {font-size: 8pt}

Pseudo-Classes

Pseudo-classes are elements whose state (and appearance) may change over time

Syntax: element:pseudo-class {...} :link

a link which has not been visited :visited

a link which has been visited :active

a link which is currently being clicked :hover

a link which the mouse is over (but not clicked)

Pseudo-classes are allowed anywhere in CSS selectors

Note: XML doesn’t really support hyperlinks yet

Pseudo-Elements

Pseudo-elements describe “elements” that are not actually between tags in the XML document

Syntax: element:pseudo-class {...} first-letter the first character in a block-level element first-line the first line in a block-level element (depends on the

browser’s current window size)

Especially useful for XML (but not implemented in Internet Explorer): before adds material before an element

Example: author:before {content: "by "} after adds material after an element

Pseudo-Elements 2

The ID Attributes

The id attribute is defined like the class attribute, but uses # instead of . In the style sheet:

p#important {font-style: italic} or# important {font-style: italic}

In XHTML:<p id="important">

class and id can both be used, and do not need to have different names:<p class="important" id="important">

The <div> Tag

A container tag

Used to create a specially formatted division or area of a web page

Can be used to format that area and places a line break before and after the division.

Use the <div> tag when you need to format an area that is separated from the rest of the web page by line breaks <div> ensures there is a line break before and after

The <div> tag is also useful to define an area that will contain other block-level tags (such as paragraphs or spans) within it

The <span> Tag

A container tag

The <span> tag will format an area on the page that is NOT physically separated from others by line breaks

Use the <span> tag if you need to format an area that is contained within another, such as within a paragraph

Types of CSS

Inline Styles Inline styles are coded in the body of the web page as an attribute of an

XHTML tag The style only applies to the specific element that contains it as an

attribute

Embedded Styles Embedded styles are defined in the header of a web page These style instructions apply to the entire web page document

External Styles External Styles are coded in a separate text file This text file is linked to the web page by using a <link> tag in the

header section

Imported Styles Imported Styles are similar to External Styles in that they are coded in a

separate text file They are not widely supported by browsers at this time

Inline Style Sheets

The STYLE attribute can be added to any HTML element: <html-tag style="property: value"> or <html-tag style="property: value;

property: value; ...; property: value">

Advantage: Useful if you only want a small amount of markup

Disadvantages: Mixes display information into HTML Clutters up HTML code Can’t use full range of CSS features

Inline Style Sheets 21 <?xml version = "1.0"?>

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

4

5 

6 

7

8 <html xmlns = "http://www.w3.org/1999/xhtml">

9 <head>

10 <title>Inline Styles</title>

11 </head>

12

13 <body>

14

15 <p>This text does not have any style applied to it.</p>

16

17 

18 

19 

20 <p style = "font-size: 20pt">This text has the

21 <em>font-size</em> style applied to it, making it 20pt.

22 </p>

23

Inline Style Sheets 3

Embedded Style Sheets

Apply to an entire web page

In XHTML, within the <head> element: <style type="text/css"> </style>

Note: Embedding the style sheet within a comment is a sneaky way of hiding it from older browsers that don’t understand CSS

Embedded Style Sheets 21 <?xml version = "1.0"?>



4

5 

6 

7


9 <head>

10 <title>Style Sheets</title>

11

12 

13 <style type = "text/css">

14

15 em { background-color: #8000ff;

16 color: white }

17

18 h1 { font-family: arial, sans-serif }

19

20 p { font-size: 14pt }

21

22 .special { color: blue }

23

24 </style>

25 </head>

26

27 <body>

28

29 

30 <h1 class = "special">Deitel & Associates, Inc.</h1>

31

32 <p>Deitel & Associates, Inc. is an internationally

33 recognized corporate training and publishing organization

34 specializing in programming languages, Internet/World

35 Wide Web technology and object technology education.

36 Deitel & Associates, Inc. is a member of the World Wide

37 Web Consortium. The company provides courses on Java,

38 C++, Visual Basic, C, Internet and World Wide Web

39 programming, and Object Technology.</p>

40

41 <h1>Clients</h1>

42 <p class = "special"> The company's clients include many

43 <em>Fortune 1000 companies</em>, government agencies,

44 branches of the military and business organizations.

45 Through its publishing partnership with Prentice Hall,

46 Deitel & Associates, Inc. publishes leading-edge

47 programming textbooks, professional books, interactive

48 CD-ROM-based multimedia Cyber Classrooms, satellite

49 courses and World Wide Web courses.</p>

50

51 </body>

52 </html>

Embedded Style Sheets 3

External Style Sheets

External Style Sheets are contained in a text file separate from the XHTML documents

Multiple web pages can link to the same external style sheet file

External Style Sheet text file is saved with the file extension ".css" and contains only style rules

Does not contain any XHTML tags

External Style Sheets 2

In XHTML, within the <head> element:<link rel=“stylesheet" type="text/css" href="Style Sheet URL">

As a PI in the prologue of an XML document:<?xml-stylesheet href="Style Sheet URL" type="text/css"?>

Note: "text/css" is the MIME type


1 /* Fig. 6.4: styles.css */

2 /* An external stylesheet */

3

4 a { text-decoration: none }

5

6 a:hover { text-decoration: underline;

7 color: red;

8 background-color: #ccffcc }

9

10 li em { color: red;

11 font-weight: bold;

12 background-color: #ffffff }

13

14 ul { margin-left: 2cm }

15

16 ul ul { text-decoration: underline;

17 margin-left: .5cm }

External Style Sheets 41 <?xml version = "1.0"?>



4

5 

6 

7


9 <head>

10 <title>Linking External Style Sheets</title>

11 <link rel = "stylesheet" type = "text/css"

12 href = "styles.css" />

13 </head>

14

15 <body>

16

17 <h1>Shopping list for <em>Monday</em>:</h1>

18 <ul>

19 <li>Milk</li>

20 <li>Bread

21 <ul>

22 <li>White bread</li>

23 <li>Rye bread</li>

24 <li>Whole wheat bread</li>

25 </ul>

26 </li>

27 <li>Rice</li>

28 <li>Potatoes</li>

29 <li>Pizza <em>with mushrooms</em></li>

30 </ul>

31

32 <p>

33 <a href = "http://www.food.com">Go to the Grocery store</a>

34 </p>

35

36 </body>

37 </html>


Imported Style Sheets

In XHTML, within the <head> element: <style type="text/css"> </style>

All @import statements must occur at the start of the style sheet

Order in which the style sheets are imported is important in determining how they cascade

Any rules specified in the style sheet itself override conflicting rules in the imported style sheets – cascading rule

Cascading Order

Styles will be applied to HTML in the following order:1. Browser default2. External style sheet3. Internal style sheet (inside the <head> tag)4. Inline style (inside other elements, outermost

first)

When styles conflict, the “nearest” (most recently applied) style wins

Cascading Order 2

External

StyleSheet

[call to external stylesheet]

[styles embedded inside the document]

XHTML File

1)

2)

Generalized order of precedence, all other things being equal

Cascading Order 31 <?xml version = "1.0"?>



4

5 

6 

7


9 <head>

10 <title>More Styles</title>

11

12 <style type = "text/css">

13

14 a.nodec { text-decoration: none }

15

16 a:hover { text-decoration: underline;

17 color: red;

18 background-color: #ccffcc }

19

20 li em { color: red;

21 font-weight: bold }

22

23 ul { margin-left: 75px }

24

25 ul ul { text-decoration: underline;

26 margin-left: 15px }

27

28 </style>

29 </head>

30

31 <body>

32

33 <h1>Shopping list for <em>Monday</em>:</h1>

34

35 <ul>

36 <li>Milk</li>

37 <li>Bread

38 <ul>

39 <li>White bread</li>

40 <li>Rye bread</li>

41 <li>Whole wheat bread</li>

42 </ul>

43 </li>

44 <li>Rice</li>

45 <li>Potatoes</li>

46 <li>Pizza <em>with mushrooms</em></li>

47 </ul>

48

49 <p><a class = "nodec" href = "http://www.food.com">

50 Go to the Grocery store</a></p>

51

52 </body>

53 </html>

Cascading Order 4

CSS Strategies

Always include end tags (even though browsers usually display the page, anyway) for all XHTML container tags

Develop web sites in stages Design and code the page to look "OK" or "Acceptable" Then use style sheets for extra-special effects and formatting

Use style sheet components that will degrade gracefully

Check the compatibility charts and test, test, test, test, test....

CSS Strategies 2

Use <div> and <span> tags to create logical page sections NOTE: Different browsers will display differently

Use style sheets in Intranet environments Ideal, since all users will be using the same

browser

CSS Strategies 3

CSS is designed to separate content from style Therefore, names that will be used in HTML or

(especially) in XML should describe content, not style

Example: Suppose you define span.huge {font-size: 36pt} and

you use <span class="huge"> throughout a large number of documents

Now you discover your users hate this, so you change the CSS to be span.huge {font-color: red}

Your name is inappropriate; do you change all your documents?

If you had started with span.important {font-size: 36pt}, your documents wouldn’t look so dumb

Common Mistakes

Check that you have put semicolons ‘;’ between properties

Check that you have not forgotten </style> end tag

If specifying colours by name, make sure that it is one of 16 names allowed by CSS

Need to spell “color” as in the US-English way Note: Colour will not be understood by the browsers

Common Mistakes 2

If specifying fonts, check the spelling Browsers are intolerant of spelling mistakes

Font names of more than one word should be quoted and that quotes are not allowed anywhere else

When using CSS properties make sure the target browsers support them

The Power of CSS - Gallery

CSS Zen Gardenhttp://www.csszengarden.com

Adopted from http://www.indiana.edu/~webdev/2003/submissions/contenttools/

CSS Skinning

The skin is the design placed over the skeleton structure

It’s like a mobile phone Model of phone is the skeleton Face plates are the skins You can swap face plates

CSS Skinning 2

Like a cell phone, web pages can have “face plates” (skins) that are changeable

The CSS skins have nothing to do with the XHTML markup

External CSS file

Easily modifiable

Faster Redesign

CSS Skinning 3

XHTML DIVs are like the parts of the phone (antenna, buttons, speaker, etc.)

Layout CSS is like the different models of phones (where parts are positioned)

Skin CSS is like the face plates

Limited References

NOTE: This is not an exhaustive list

Font Properties and Values

font-family: inherit (same as parent) Verdana, "Courier New", ... (if the font is on the client computer) serif | sans-serif | cursive | fantasy | monospace

(Generic: your browser decides which font to use)

font-size: inherit | smaller | larger | xx-small | x-small | small | medium |

large | x-large | xx-large | 12pt

font-weight: normal | bold |bolder | lighter | 100 | 200 | ... | 700

font-style: normal | italic | oblique

Colors and Lengths

color: and background-color: aqua | black | blue | fuchsia | gray | green | lime |

maroon | navy | olive | purple | red | silver | teal | white | #FF0000 | #F00 | rgb(255, 0, 0) | Browser-specific names (not recommended)

These are used in measurements: em, ex, px, %

font size, x-height, pixels, percent of inherited size in, cm, mm, pt, pc

inches, centimeters, millimeters, points (1/72 of an inch), picas (1 pica = 12 points), relative to the inherited value

Text Properties and Values

text-align: left | right | center | justify

text-decoration: none | underline | overline | line-through

text-transform: none | capitalize | uppercase | lowercase

text-indent length | 10% (indents the first line of text)

white-space: normal | pre | nowrap

References

W3Schools http://www.w3schools.com/css/css_syntax.asp

WWW Consortium http://www.w3.org/MarkUp/Guide/Style

Blooberry http://www.blooberry.com/indexdot/css/index.html

Web Design Group http://www.htmlhelp.com/reference/css/

Internet Related Technologies http://tech.irt.org/articles/css.htm

Creating the Presentation Layer DECO 3001 Tutorial 2 – Style Presented by Ji Soo Yoon 26 February 2004 Slides adopted from matuszek/cit597-

Documents