LIS900C: Style sheet Thomas Krichel

Style sheets Style sheets are the officially sanctioned way to add style to your document We will cover Cascading Style Sheets CSS version 2. This is the default style sheet language.

setting the style sheet language You can set the default style sheet through http: Thus the rules for setting the style sheet language are as follows –If any tag specify the "Content-Style-Type", the last one determines the default style sheet language. –Otherwise, if any HTTP headers specify the "Content- Style-Type", the last one in the character stream determines the default style sheet language. –Otherwise, the default style sheet language is "text/css"

Cascading The idea of cascading is that –The style sheet is written as a set of rules –Each rule is read in sequence –If a rule recently read is in contradiction with an earlier rule, it overrides the earlier rule.

inline style You can add a style attribute to a tag where style is a style specification Example: I am so blue Such a declaration only takes effect for the element concerned

Document level style You can add a style tag as part of the header admits the usual suspect attributes. It also admits the "media" attribute for the intended media –"screen" is the default value –ttv –projection –handheld –print –braille --embossed –aural –all It also admits a "type" attribute, "text/css" is the default

linking to an external style sheet This is the best way! Use the same style sheet file for all the pages in your site. <link rel=stylesheet type="text/css" href="URL"> where URL is a URL. The link tag must appear in the, it can not appear in the, sorry!

importing an external style sheet Within a style sheet, for example the contents of a tag, you can import another file using url( " these two ways appear to be equivalent

media dependent styles Remember the media CSS knows about ? you can import different types for different "URL" medialist where medialist is a list of one or more media, separated by comma challenged.css" braille,handheld

basic style syntax selector {property1: value1; property2: value2 … } selector is a selector (see following slides) property is the name of a property value is the value of a property note colon and semicolon use! all names and values are case-insensitive Examples –h1 { color: grey; text-align: center} –h2,h3 {color: blue}

comments You can add comments is the style sheet by enclosing the comment between /* and */. This comment syntax comes from the C programming language. This technique is especially useful if you want to remove code from your style sheet temporarily.

basic selector the basic selector is a comma-separated list of elementary selectors. Often, the elementary selectors are HTML tags, e.g. h1, h2 {text-align: center} will center all h1 and h2 tag contents but the selectors can be more precise

more selectors * selects any tag. E selects any tag called E E F selects any F tag that is in the contents of an E tag E > F selects any F tag that is a child of an E tag. This is more restrictive. E:first-child selects E when E is the first child of its enclosing tag E:link selects an E tag if it is in the contents of an tag

more selectors E:visited select tag E if E if it is in the contents of and the link has been visited. E:active, E:hover, E:focus selects tag E during certain user actions. E:lang(c) selects tag E if it is in the human language c E + F selects any F tag immediately preceded by an E tag

more selectors E[a] selects any E element with an attribute "a", whatever the value E[a="v"] select any E tag whose "a" attribute value is exactly equal to "v". E[a~="v"] selects any tag E whose "a" attribute value is a list of space-separated values, one of which is exactly equal to "v". E:first-letter selects the first letter in the content of tag E

more selectors E:first-word selects the first word in the contents of tag E E[lang|="en"] selects any E tag whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en". E.m convenient shorthand for E[class~="m"] E#myid convenient shorthand for E[id="myid"]

classes Classes selectors use special selectors starting with a dot..class { property1: value1, property2: value2 …} Recall HTML, when you have set the you can apply the class will apply all the attributes of the class class to the tag tag. Note that you can place an element into several classes, use a "," to separate them.

tricky examples A[rel~="copyright"] A[href=" DIV > P:first-child A:focus:hover P > * > A div[class~="ny"][id="albany"]

important properties We will now look at the properties as defined by CSS. These are the things that you can set using CSS. We group properties into six groups –fonts –colors, and background –text –boxes and layout –lists –tag classification We can not be exhaustive here

font properties I font-family: accepts a comma-separated list of font names there are five generic names, one should be quoted last as a fall-back –serif--sans-serif--cursive –fantasy--monospace example *:lang(ja-jp) { font-family: "Heisei Mincho W9", serif }

font propertiesII font-size: accepts sizes as npt, n%, +npt, where n is a number, or some sizes like –xx-small--x-small-- small-- medium –large--x-large -- xx-large --larger --smaller incremental font sizes may not be handled properly by the browser. font-style: can be either "italic", "oblique" or "normal"

font properties III font-variant: can be either "normal" or "small caps" font-weight: can be –a number between 100 for the thinnest and 900 for the boldest. 400 is the normal. –"normal" --"bold" --"bolder" --"lighter" font-stretch: can be any of –ultra-condensed --extra-condensed --condensed –semi-condensed --normal --semi-expanded –expanded --extra-expanded --ultra-expanded

other font properties There is a whole host of other properties –unicode-range-- units-per-em –panose1-- stemh –stemv-- baseline –centerline--mathline –topline--bbox –stroke--ascent –dscent--widths –definitions-src There also is a font property that allows you to put several of the previous properties together. But all that is not worth learning. Keep fonts simple.

colors they follow the RGB color model. expressed as three hex numbers 00 to FF. The following standard color names are defined –Black = "#000000" Green = "#008000" –Silver = "#C0C0C0" Lime = "#00FF00" –Gray = "#808080" Olive = "#808000" –White = "#FFFFFF" Yellow = "#FFFF00" –Maroon = "#800000" Navy = "#000080" –Red = "#FF0000" Blue = "#0000FF" –Purple = "#800080" Teal = "#008080" –Fuchsia = "#FF00FF" Aqua = "#00FFFF" other names may be supported by browsers.

color & background properties color: sets the foreground color of an element. background-color: gives the color of the background background-image: url(URL) places a picture found at a URL URL. background-repeat: can take the value "repeat" (default), "repeat-x", "repeat-y", and "no-repeat". background-attachment: can take the value of "fixed" or "scroll" (default) to say if the image scrolls with the viewport (obscure)

background-position properties places the background image can take values –'0% 0%' to '100% 100%' –'length length' to put length of offset from top left –mixing both is allowed –top bottom center and left right center can be used too

text properties I letter-spacing: set the spacing between letters, takes a length value or the word 'normal' word-spacing: same as for letter-spacing line-height: sets the distance between several lines of a tag's contents, –in pt or px numbers –% age (referring to a percentage of current font size) – with a number (referring to a multiplicity of the size of the text) – 'normal'

text properties II text-align: can take the values "left" "right" "center" and "justify". text-decoration: can take the values "underline", "overline", "line-through" and "blink". text-indent:, margin-left: take length units but are best expressed in the relative "em" unit. text-shadow: color horizontal-offset vertical- offset blur-radius. Example span.glow { background: white; color: white; text- shadow: black 0px 0px 5px; }

text properties III float: can be set to "left", "right" and "none". width: and height: can also be set. vertical-align: can take the values "baseline", "middle", "sub", "super", "text-top", "text-bottom", "top", "bottom", as well as percentages. text-transform: can take the value "uppercase", "lowercase", "capitalize" and "none".

the box model It derives from the assumption that there is a conceptual box around the element contents. The total width of the box is the sum of –left and right margin –left and right borders –left and right padding –the width of the box' contents A similar reasoning holds for the height of a box.

box properties I border-color: can hold up to four colors, separated by blanks –one value means: all borders have the same color –two values mean: first number for top and bottom, second for left and right –three values mean: first sets top, second left and right, third bottom –four values mean: first sets top, second sets right etc. border-width: can hold up to four widths, for example "thin think medium 2mm"

box properties II border-top-width, border-bottom-width, border- left-width and border-right-width also exist. same properties exists for margin-top, margin- bottom etc and padding-top, padding-bottom etc. border-style: can be "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset" float: can be one of 'left', 'right' or 'none' which is the default. If a float is set, the text near the tag floats on the left or right site of the tag contents. You can use this to create run-in headers.

box properties III width: sets the total width of the box height: sets the total height of the box both take a dimension or the word 'auto' e.g. img {width: 100px; height auto}

box properties IV position: lets you set control the positioning. the default is 'static' if set to 'absolute' the tag is removed from normal flow and placed using position properties –top:--bottom:--left:--right: which accept length or percentage values 'fixed' is the same as 'absolute' but the element is repeated on every page if paged media is used.

box properties V z-index let you set and integer value for a layer on the canvas where the tag will appear. Thus if tag 1 has z-index value 1 and tag 2 has z-index value number 2, they are laying on top of each other. (this is the same thing as the "layer" from photoshop) browser support for this property is limited.

the clear: property tells the user agent whether to place the current element next to a floating element or on the next line below it. –value 'none' tells the user agent to put contents on either side of the floating element –value 'left' means that the left side has to stay clear –value 'right' means that the right side has to stay clear –value 'all' means that both sides have to stay clear box properties VI

box properties VII The clip: and overflow: properties let you specify how large the box of contents is Example p {overflow: hidden; clip: rect(15px, -10px, 5px, 10px)} when the overflow: property is not set to 'hidden' it will take no effect. otherwise, it displays the start of the paragraph in the rectangular box. overflow: can also take value "scroll" to add a scroll bar and "auto" to add a scroll bar only when needed. browser support is not sure

list properties list-style-position: can take the value "inside" or "outside". The latter is the default, the property refers to the position of the list item start marker list-style-image: define the bullet point of a list as a graphic, use url(URL) to give the location of the graphic. list-style-property: –takes the values "disc", "circle", "square", "none" with an unordered list –takes the value "decimal", "lower-roman", "upper- roman", "lower-alpha", "upper-alpha" with ordered list.

table properties I border-collapse: allows to choose the fundamental table model. It can take two values –'separate' implies that each cell has its own box. –'collapse' implies that adjacent cells share the same border

table properties II The properties on this slide are only useful if you choose the separated border model. You can set the distance between adjacent cells using the border-spacing: property. Set it to two distances to specify different horizontal and vertical values empty-cells: can be set to –'show' shows empty cells with their border –'hide' does not show the border around an empty cell there are some other table properties

classification properties I These are the most powerful ones that CSS has to offer. They invite puerile monkey business. display: sets the display type of an tag –'block' displays the tag contents as a block –'inline' displays it as inline contents –'list-item' makes it an item of a list, you can then attach list properties to it –'none' does not display it

classification properties II 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

generated contents properties generated contents is, for example, the bullet appearing in front of a list item. the content: property can be used with the :before and :after selectors. Example p.note:before {content: "note"} will insert the string "note" before any paragraph in the class 'note'. 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

generated contents properties II counter-reset: property resets a counter counter-increment: 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!

conclusions These are not all the properties. But I am not sure if I should go into more.

Thank you for your attention!