and a paragraph of text that follows it and it continues on the line of the h 3
compact box • If a block-level box follows the compact box, the compact box is formatted like a one-line inline box. The resulting box width is compared to one of the side margins of the block box, – left margin if direction is left-to-right – right margin if direction is right-to-left • If the inline box width is less than or equal to the margin, the inline box is given a position in the margin as described immediately below. • Otherwise, the compact box becomes a block box.
compact box example
classification properties III • {the whitespace: } property controls the display of white space in a block level tag. – 'normal' collapses white space – 'pre' value similar to
tag – 'nowrap' ignores carriage returns only • seemed not to work in firefox last time I tried • now we turn to cool selectors
Remember the basic selector • The basic selector is a comma-separated list of elementary selectors. • Often, the elementary selectors are HTML elments, e. g. h 1, h 2 {text-align: center} will center all
class selectors • This is the standard way to style up a class { property 1: value 1, property 2: value 2 …} will give all the properties and values to any element in the class. • Recall HTML, when you have set the you can apply the class
fun with selectors • * selects any element. • E selects any element called E • E F selects any F element that is in the contents of an E element, as a child, grand-child etc • E > F selects any F tag that is a child of an E element. This is more restrictive than the previous selector. • E: first-child selects E when E is the first child of its enclosing element • E: link selects an E element if it is in the contents of an element
more selectors • E: visited selects element E if it is in the contents of a link and the link has been visited. • E: active, E: hover, E: focus selects element E during certain user actions with the mouse. • E: lang(c) selects element E if it is in the human language c • E + F selects any F element immediately preceded by an E element start tag.
![more selectors • E[a] selects any E element with an attribute](https://present5.com/presentation/dc93f8f032f1c5ebbc9e9eeebad6524f/image-26.jpg "more selectors • E[a] selects any E element with an attribute")
more selectors • E[a] selects any E 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|="en"] selects any E 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 • 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
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 • #myid is a convenient shorthand for *#myid
: before and : after • E: before or E: after can be used to add contents before or after a element E. • 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 • h 1, h 2, h 3 { font-family: sans-serif } • h 1 { color: red } em { color: red } h 1 em { color: blue } • div * p • div p *[href] • body > p { line-height: 1. 3 } • div ol > li p
more example • • • h 1 + p {text-indent: 0} h 1 + h 2 {margin-top: -5 mm} h 1. opener + h 2 {margin-top: -5 mm} h 1[title] {color: blue} span[class="example"] {color: blue } span[hello="Cleveland"][goodbye="Columbus"] { color: blue} • a[rel~="copyright"] {color: red} • a[href="http: //www. w 3. org/"] {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!)
p: first-child a:" src="https://present5.com/presentation/dc93f8f032f1c5ebbc9e9eeebad6524f/image-34.jpg" alt="more examples • • • a[rel~="copyright"] a[href="http: //openlib. org/home/krichel"] div > p: first-child a:" />
more examples • • • a[rel~="copyright"] a[href="http: //openlib. org/home/krichel"] div > p: first-child a: focus: hover p>*>p div[class~="ny"][id="albany"]
Example: drop caps with uppercase • CSS p { font-size: 12 pt; line-height: 12 pt } p: first-letter { font-size: 200%; font-style: italic; fontweight: bold; float: left } span { text-transform: uppercase } • HTML
The first few words of an article in The Economist.
generated contents properties • 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-increment: counter} increments a counter – {counter(counter)} uses the counter • Example h 1: before {counter-increment: chapter_counter; counter-reset: section_counter; content: "Chapter " counter(chapter_counter) ": "} and then we can use h 2 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 –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
user interface properties II • outlines are like borders, but they don't take up space. they are decorative shades drawn around some • {outline-width: } sets the width • {outline-style: } takes the same values as {borderstyle: } • {outline-color: } has a color value.
Paged media support I • CSS has the concept of a page box in which paged output should be placed into. • @page rule can be used to specify the size of the page • @page {size: 8. 5 in 11 in} • Valid values are one or two lengths and they words ‘portrait’ and ‘landscape’. The latter will depend on the default print sheet size, countryspecific.
Paged media support II • You can add {margin: }, {margin-top: }, {marginleft: }, 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 – @page : first {margin-top: 3 in}
Named pages • You can give a page rule an optional name. Example @page 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-breakbefore: } 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.
conclusions • These are not all the properties. • Audio properties are still missing • But I am not sure if I should go into more.
http: //openlib. org/home/krichel Thank you for your attention!