April 15, 2008

1. Week 13: XHTML, CSS and Site Design April 15, 2008 Margaret Kipp margaret.kipp@gmail.com http://myweb.liu.edu/~mkipp/

2. Importing External Style Sheets • three ways we have already used to add CSS: external sheet, internal style sheet, styles attached to individual tags • you can also import another style sheet using the @import command inside an external or internal style sheet • e.g. @import url(main.css); • or @import "main.css";

3. CSS Media Types • Allow for separate CSS styles for different media • CSS has a controlled vocabulary of media • 'projection' – 'handheld' • 'print' – 'braille' • 'screen' (default) – 'tty' • 'embossed' – 'aural' • 'all' • style sheet media are not the same as the MIME types (MIME types are file types)‏

4. Media Dependent Styles • @import can be used to import different styles for different media • @import "URI" medialist • where medialist can be a list of one or more media, separated by comma • Example • @import "accessible.css" braille, handheld

5. @media Selector • @media can be used as a selector in a style sheet to apply a style only to a specific media type • @media media {style} • E.g. • @media print { a {text-decoration: none; color: black} }

6. More on Selectors • selectors seen so far: tags, tags and class names, and tags and id names • more advanced selectors allow for more specific and more complex application of CSS styles • CSS can be applied to any XML document, including, but not limited to XHTML documents. • Remember that all selectors select elements in the XHTML or XML document.

7. Combining Selectors • a style can be applied to multiple selectors • simply write all the selectors in a row, separated by commas • e.g. h1, .heading {font-size: 200%} • will increase the font size of all h1 elements and everything with a class named heading

8. Combinations of Selectors • * selects any element, this style will apply to everything, most useful when combined with other selector elements • E selects any element called <E> • the selector p applies to all <p> elements • E F selects any <F> element that is the child of an <E> element • the selector p span selects all elements inside a <span> tag that are also inside a <p> tag • <p>This is <span class="red">red</>.</p>

9. Combinations 2 • E > F selects any <F> element that is a direct child of an <E> element (remember that E F allows F to be a grandchild)‏ • p > span {color: red} • E + F selects any <F> element immediately preceded by a sibling element <E> • h1 + p {text-indent: 0}

10. Combinations 3 • E[a] selects any <E> element with an attribute a= • h1[title] {color: blue} • E[a="v"] same as above, but the value must be "v" • a[href="index.html"] {font-size: 150%} • E[a~="v"] same as the others, but the value must be in the list "v", remember an element can have multiple classes • span[class~="example"] {color: blue }

11. Shortcuts for Selector Combinations • E.m is a convenient shorthand version of E[class~="m"] • E#myid is a convenient shorthand version of E[id="myid"] • .m is short for *.m • remember you can also use .class to refer to a class name used with many elements or tags

12. Combinations 4 • E:lang(c) selects element <E> if it is labelled as language c • *[lang(fr)] {color: blue} • E[lang|="en"] selects any <E> element whose lang= attribute starts with "en", this includes en-us and en-uk, etc. • *[lang|="en"] {color : red }

13. Selectors for User Actions • E:link selects an <E> element if it is a link (i.e. if it is an a(nchor) tag or <a>)‏ • a:link {color: purple} /* unvisited link */ • E:visited selects element <E> if <E> if it is in the contents of a link and the link has been visited. • a:visited {color: green} /* visited link */ • although you can change all these colours it is often best to leave them set to the standard

14. Selectors for User Actions 2 • E:active, E:hover, E:focus select links based on user actions with the mouse • active is when the element is active (between pressing and releasing mouse button)‏ • a:active {color: gray} • hover is when the mouse is positioned over the item • a:hover {color: yellow} /* user hovers */ • focus is when an element accepts keyboard input (tab through links or on a form)‏

15. Positional Pseudoclasses for Selectors • E:first-child selects <E> when <E> is the first child of its enclosing element • E:first-letter selects the first letter in the content of element <E> • E:first-word selects the first word in the contents of element <E> • these selectors make use of predefined pseudoclasses (first-child, first-letter, etc) to select items of text so that, for example, you can set the first letter larger than the others

16. CSS Property Examples • h1, h2, h3 { font-family: sans-serif } • h1 { color: red } em { color: red } h1 em { color: blue } • p *[href] {font-family: monospace} • ol > li {color: black} • h1 + p {text-indent: 0} • h1 + h2 {margin-top: -5mm} • h1[title] {color: blue}

17. Examples 2 • span[class~="example"] {color: blue } • a[href="index.html"][title="The Title"] { color: blue} • a[href="http://www.w3.org/"] {background-color: grey} • *[lang="fr"] {display: none} • *[lang|="en"] {color : red } • a:link {color: red} • a:visited {color: blue}

18. Examples 3 • a:hover:focus {color: green} • div > p:first-child {text-decoration: underline}

19. Longer Example • CSS • p { font-size: 12pt; line-height: 12pt } • p:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left } • span { text-transform: uppercase } • HTML • <p><span>The first</span> few words of an article in The New York Times.</p> • What does this do?

20. Generated Contents • Generated contents are rare in CSS, mainly this consists of bullets in lists and other items from HTML • Generally CSS is supposed to alter only the format and not the content of a page • However, two pseudoclasses exist to insert items before or after an element: • E:before or E:after can be used to add contents before or after element <E>

21. {quotes:} • This property sets the quotes around <q> • See the list of ISO 10646 characters • It takes two characters, enclosed by double quotes, for opening and closing quote • e.g. *:lang(fr) {quotes: '« ' ' »' '<' '>'} • quotes are not necessarily the same character from language to language

22. The {content: } Property • {content:} can be used with the :before and :after selectors. (no IE support)‏ • The content can be • a text string • a url(URL) where the contents will be found • open-quote or close-quote, no-open-quote or no-close-quote • counter(countername)‏ • e.g. p.note:before {content: "note"} will insert the string "note" before any paragraph in the class note

23. Counters • Counters allow you to set dynamic numbering in CSS • used with the counter(countername) property of {content:} • countername is a name you assign, it could be chapternumber or sectionnumber • {counter-reset: counter} resets a counter counter to 0. It also creates it • {counter-increment: counter} increments a counter by 1, or a specified number • {counter(counter)} uses the counter

24. Counter Example • H1:before { content: "Chapter " counter(chapter) ". "; • counter-increment: chapter; /* Add 1 to chapter */ • counter-reset: section; /* Set section to 0 */} • H2:before { content: counter(chapter) "." counter(section) " "; counter-increment: section;} • What is the result?

25. Tables • Here is a typical table <table> <caption>table caption</caption> <tr><td>row 1 col 1</td><td>row 1 col 2</td></tr> <tr><td>row 2 col 1</td><td>row 2 col 2</td></tr> </table> • We write the rows first, then we write out the columns implicitly, as we write out cells

26. Tables and CSS • The CSS table model, just like the HTML table model, has what is called row primacy. Basically means that rows are given first, then columns • Columns and columns groups can only be applied for groups of properties • border – background • width – visibility

27. Tables and CSS 2 • Borders can be set for columns and column groups only if {border-collapse:} is set to 'collapse' • The background of a column or column group will be visible only if cell and row backgrounds are transparent • The {width:} of a column or column group give the minimum width only • If the {visibility:} of a column or column group is set to 'collapse' none of its cells are displayed

28. The {caption-side:} Property • {caption-side:} locates the caption with respect to the table, values are 'top' (default) or 'bottom' • Captions can be styled like any other block level element • not universally supported by browsers

29. The {border-collapse: } Property • {border-collapse: } allows to choose the table model • It can take three values • 'separate': each cell has its own box (default)‏ • 'collapse': adjacent cells share the same border • 'inherit' • If {border-collapse: } is set to separated you can set both {border-spacing: } and {empty-cells: } as well

30. The {border-spacing: } Property • For <table>s only • This property is only useful if {border-collapse: } is set to separate • {border-spacing:} takes two distances to specify different horizontal and vertical values (horizontal value first)‏ • e.g.: table {border-spacing: 1px 3px;} • more powerful than the cellspacing= attribute of <table> but has a more limited application

31. The {empty-cells: } Property • This property is only useful if {border-collapse: } is set to separate • {empty-cells:} can be set to • 'show' show the border around empty cells (default)‏ • 'hide' hide the border around an empty cell • empty cells only (<td></td>) if there is anything between the tags, even a space, it is not empty • If cells in a row all empty and {empty-cell:} set to hide row will be hidden (as if {display: } were set to 'none')‏

32. Collapsing Tables • tables with collapsed cells can not have padding, only margins • Borders between cells collapse into each others where they adjoin. The most interesting border is shown, determined by the browser • This interesting border is centred between the adjacent cells

33. The {table-layout:} Property • Takes the values: • 'auto': table takes up as much space as its contents (default)‏ • 'fixed': table has a fixed width • 'inherit' • Fixed layout is faster, because the browser does not have to read the entire table before rendering it

34. Fixed Table Layouts and Width • With fixed layout, any column with a {width:} other than 'auto' sets the width for that column • Any columns that are still auto sized are spaced equally between them • The width of the table is the {width:} of <table> or the sum of {width:}s of the columns, whichever is greater

35. Auto Table Layouts • In many current browsers, auto layout may be applied if the table has a width set to 'auto' even though the table layout may be set to 'fixed' • auto rendering is complicated, therefore slow, but is the default unless you set a fixed width

36. Page Boxes: @page • CSS has the concept of a page box in which paged output should be placed • @page is used to work with pages • You can set margins for the page • e.g. @page {margin-top: 1in}but the margins will be added or subtracted to the default margins of the printer

37. page pseudoclasses • You can use three pseudoclasses to specify special cases • :first for the first page • :left for any left page • :right for any right page • Example @page :first {margin-top: 3in}

38. page breaking • A page will break if the page is full • {page-break-before: } and {page-break-after: } properties offer some control • They take the values • 'auto' – 'always' – 'avoid' • 'left' – 'right' – 'inherit' • latter two make sure that element is on a left or right page, this may require two page breaks