LIS650 lecture 4 Minor CSS, accessibility Thomas Krichel

more on selectors We have seen three types of simple selectors. Here we are discussing some more advanced selectors. Most, but not all, of the selections that they achieve could also be done by appropriate class= use. 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.

ORing selectors When we write elementary several selectors separated by commas, we refer to all of them Example h1,.heading {text-align: center} will center all and all elements that are that are in the heading class.

more selectors * selects any element. E selects any element called E F selects any element that is in the contents of an element, as a child, grand- child etc E > F selects any element that is a direct child of an element. This is more restrictive than the previous selector. E + F selects any element immediately preceded by a sibling element.

more selectors E:link selects an element if it is a link. E:visited selects element if if it is in the contents of a link and the link has been visited. E:active, E:hover, E:focus selects element during certain user actions with the mouse.

more selectors E:first-child selects when is the first child of its enclosing element E:first-letter selects the first letter in the content of element E:first-word selects the first word in the contents of element

more selectors E[a] selects any element with an attribute a=, whatever the value E[a="v"] select any E element whose a= attribute value is exactly equal to "v". E[a~="v"] selects any element E whose a= attribute value is a list of space-separated values, one of which is exactly equal to "v". Useful for classes, because you can put an element into several classes, separated by blanks.

more selectors E:lang(c) selects element if it is in the human language c. E[lang|="en"] selects any element whose lang= attribute has a hyphen-separated list of values beginning (from the left) with `en. This would select all en languages, be they en-us or en-gb

convenient shorthand We have already seen some. E.m is a convenient shorthand for E[class~="m"] E#myid is a convenient shorthand for E[id="myid"].m is a convenient shorthand for *.m

E:before and E:after E:before or E:after can be used to add contents before or after a element. We will deal come to these when we discuss generated contents properties. This will be coming up after the examples for selectors that we will discuss now.

examples h1, h2, h3 { font-family: sans-serif } h1 { color: red } em { color: red } h1 em { color: blue } p *[href] {font-family: monospace} body > p { line-height: 1.3 } ol > li {color: black} h1 + p {text-indent: 0}

more example h1 + h2 {margin-top: -5mm} h1.opener + h2 {margin-top: -5mm} h1[title] {color: blue} span[class~="example"] {color: blue } a[href="index.html"][title="Thomas"] { color: blue} a[rel="copyright"] {color: red} a[href=" {background-color: grey} *[lang="fr"] {display: none}

more examples *[lang|="en"] {color : red }.dialog.romeo {voice-family: "Lawrence Olivier", charles, male} a:link {color: red} /* unvisited links */ a:visited {color: blue} /* visited links */ a:hover {color: yellow} /* user hovers */ a:active {color: lime} /* active links */ a.external:visited {color: blue}

more examples html:lang(fr) { quotes: '« ' ' »' } html:lang(de) { quotes: '' '} *:lang(fr) > q { quotes: '« ' ' »' } *:lang(de) > q { quotes: '' '} (quotation style depending on the surrounding language, not the language of the quote!)

more examples a[href=" {display: none} div > p:first-child {text-decoration: underline} a:focus:hover {color: red} div > * > div {font-family: sans-serif} img[class~="ny"][title="Albany town map"] {border-style: solid}

example: drop caps with uppercase 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 The first few words of an article in The Economist.

generated contents properties I generated contents is, for example, the bullet appearing in front of a list item. {content:} can be used with the :before and :after selectors.The content can be –a text string –a url(URL) where the contents is to be found –a attr(att) where att is the name of the attribute, the content of which is being inserted Example p.note:before {content: "note"} will insert the string "note" before any paragraph in the class 'note'.

generated contents properties II Here are some counter properties –{counter-reset: counter} resets a counter counter –{counter-increment: counter} increments a counter –{counter(counter)} uses the counter Example h1:before {counter-increment: chapter_counter; counter-reset: section_counter; content: "Chapter " counter(chapter_counter) ":"} and then we can use h2 for the sections, of course! browser support uncertain!

user interface properties I There is a {cursor:} property to change the shape of the cursor. It takes the following values –auto-- crosshair-- default –pointer (something suggesting a link) –e-resize –ne-resize –nw-resize –n-resize –se-resize –sw-resize, --s-resize –w-resiz (Indicate that some edge is to be moved) –text (usually as an I) --wait (watch or hourglass) –help (question mark or balloon) –url (with a uri to svg file, that has the graphic to show) use these to totally confuse your users

paged media support I CSS has the concept of a page box in which paged output should be placed rule can be used to specify the size of the {size: 8.5in 11in} Valid values are one or two lengths and they words portrait and landscape. The latter will depend on the default print sheet size, country- specific.

paged media support II You can add {margin: }, {margin-top: }, {margin- left: }, and {margin-right: } properties. They will add to the margins that the printer will set by default. The default printer margins are beyond your control. You can add a {marks: crop} property to add crop marks You can add a {mark: cross} property to create registration marks.

paged media support III 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 :first {margin-top: 3in}

named pages You can give a page rule an optional name. rotated { size: landscape} Then you can use this with the page property to specify specific ways to print things. Example table {page: rotated} will print the table on a landscape sheet. This comes in handy for bulky tables.

actual page breaking Pages will break if –the current page box flows over or if –a new page format is being used with a {page: } property You can take some control with the {page-break- before: } and {page-break-after: } properties. They take the values –auto– always – avoid– left– right The latter two make sure that the element is on a left or right page. Sometimes this will require two page breaks.

more examples I have made a stolen and simplified example available for three column layout, with flexible middle column, css_layout/triple_column.html Unfortunately, this example relies a lot on dimensions that are fixed in pixels.

W3C tips on anchors When calling the user to action, use brief but meaningful link text that: –provides some information when read out of context –explains what the link offers –doesn't talk about mechanics –is not a verb phrase

W3C tips on anchors Bad: To download W3C's editor/browser Amaya, click here. Bad: To download Amaya, go to the Amaya Website and get the necessary software. Good: Get Amaya! Bad: Tell me more about Amaya Good: Tell me more about Amaya

W3C tips for headings Use for your top heading. If it is too big a font in the most common browsers, you can scale it down. But then you have a scale down other headers correspondingly.

W3C tips for alt= If the image is simply decorated text, put the text in the alt attribute If the image is used to create bullets in a list, a horizontal line, or other similar decoration, it is fine to have an empty alt=, but it is better to use things like {list-style-image: } in CSS If the image presents a lot of important information, try to summarize it in a short line for the alt attribute and add a longdesc= link to a more detailed

accessibility There are two versions of the Web Contents Accessibility Guideline (WCAG) published by the W3C. Version 1 had 14 guidelines and each guideline has 1 or more checkpoints. It is stable. Version 2 is being developed right now supposed to be –easier to understand –easier to implement –easier to test It still looks rather rough!

WCAG principles 4 principles –Content must be perceivable –Interface elements in the content must be operable. –Content and controls must be understandable –Content must be robust enough to work with current and future Web technologies 3 implementation docs –1 for HTML –1 for CSS (not published yet) –1 that is technology independent (not published yet)

WCAG HTML tasks Set a DTD using the DTD declaration Set a Use the to give a document's author, e.g. This page was written by Karl Marx Reveal the structure of the site through the element. E.g, if you have a glossary, have it ed to with the rel="glossary" in the.

WCAG Do not use redirects that are timed, only immediate redirects. (redirects are covered later) Do not refresh page contents by itself. Use to to give the structure of the document. Don't use them for visual effects. Use to give the language for the document

WCAG Note changes of language with the lang= attribute. e.g. voiture will avoid it being pronounced as "voter" by an English reading software. Use and rather than and. Use with the title= to explain an abbreviation eg inc.. Same with for acronyms.

WCAG Use and for quotes, but don't use for formatting. Avoid. In nested lists, use compound counters. In tables, use the headers= and scope= attributes to explain the structure of your table. Avoid using tables for layout. If you must do it, only use, and elements and border= cellspacing= and cellpadding= attributes.

WCAG Provide useful link text. If you have an image and text for your link, combine them in the same. You can use the accesskey= attribute with to give users a key that is used to access a link. Hide the navigation links for challenged media. Use alt="" for purely decorative images. Avoid ASCII art. Use emoticons judiciously. Do not embed text in images.

WCAG Do not use background images. Whenever possible use markup and text, rather than images, to convey information. (there are other guidelines but they talk about things that we did not cover here, such as frames, forms, scripting.)

Please shutdown the computers when you are done. Thank you for your attention!