1. Creating the Presentation Layer DECO 3001 Tutorial 2 – Style Presented by Ji Soo Yoon 26 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 Presshttp://www.cis.upenn.edu/~matuszek/cit597- 2002/Lectures/css.ppthttp://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/

2. 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

3. 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 tags Easier site maintenance Can be used for both HTML and XML documents

4. 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

5. 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

6. 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

7. 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 */

8. 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)

9. 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: I'm bold and I'm italic  Result will look something like: I'm bold and I'm italic

10. 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"] {... }

11. 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: The end is nigh! Offer ends 1/1/97. 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}

12. 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

13. 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

14. Pseudo-Elements 2

15. 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: class and id can both be used, and do not need to have different names:

16. The 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 tag when you need to format an area that is separated from the rest of the web page by line breaks  ensures there is a line break before and after The tag is also useful to define an area that will contain other block-level tags (such as paragraphs or spans) within it

17. The Tag A container tag The tag will format an area on the page that is NOT physically separated from others by line breaks Use the tag if you need to format an area that is contained within another, such as within a paragraph

18. 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 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

19. Inline Style Sheets The STYLE attribute can be added to any HTML element: or 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

20. Inline Style Sheets 2

21. Inline Style Sheets 3

22. Embedded Style Sheets Apply to an entire web page In XHTML, within the element: Note: Embedding the style sheet within a comment is a sneaky way of hiding it from older browsers that don’t understand CSS

23. Embedded Style Sheets 2

24. Embedded Style Sheets 3

25. 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

26. External Style Sheets 2 In XHTML, within the element: As a PI in the prologue of an XML document: Note: "text/css" is the MIME type

27. External Style Sheets 3

28. External Style Sheets 4

29. External Style Sheets 5

30. Imported Style Sheets In XHTML, within the element: 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

31. Cascading Order Styles will be applied to HTML in the following order: 1. Browser default 2. External style sheet 3. Internal style sheet (inside the tag) 4. Inline style (inside other elements, outermost first) When styles conflict, the “nearest” (most recently applied) style wins

32. Cascading Order 2 External Style Sheet [call to external stylesheet] [styles embedded inside the document] XHTML File 1) 2) Generalized order of precedence, all other things being equal

33. Cascading Order 3

34. Cascading Order 4

35. 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....

36. CSS Strategies 2 Use and 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

37. 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 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

38. Common Mistakes Check that you have put semicolons ‘;’ between properties Check that you have not forgotten 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

39. 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

40. The Power of CSS - Gallery CSS Zen Garden http://www.csszengarden.com Adopted from http://www.indiana.edu/~webdev/2003/submissions/contenttools/ http://www.indiana.edu/~webdev/2003/submissions/contenttools/

41. 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

42. 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

43. 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

49. Limited References NOTE: This is not an exhaustive list

50. 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

51. 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

52. 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

53. References W3Schools  http://www.w3schools.com/css/css_syntax.asp http://www.w3schools.com/css/css_syntax.asp WWW Consortium  http://www.w3.org/MarkUp/Guide/Style http://www.w3.org/MarkUp/Guide/Style Blooberry  http://www.blooberry.com/indexdot/css/index.html http://www.blooberry.com/indexdot/css/index.html Web Design Group  http://www.htmlhelp.com/reference/css/ http://www.htmlhelp.com/reference/css/ Internet Related Technologies  http://tech.irt.org/articles/css.htm http://tech.irt.org/articles/css.htm