1. LIS901N: Style sheet Thomas Krichel 2003-01-17

2. 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 a new lecture.

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

4. Document level style Add style tag as part of the header admits the attributes –dir –lang –media "screen" is the default other values are available –title –type always "text/css"

5. linking to an external style sheet <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!

6. importing an external style sheet Within a style sheet, for example the contents of a tag, you can import another file using the @import command @import url(http://www.art.org/kitsch.css);http://www.art.org/kitsch.css or @import "http://www.art.org/kitsch.css";http://www.art.org/kitsch.css these two ways appear to be equivalent

7. media dependent styles CSS knows about the following media –tty--tv--projection--handheld--print –braille --embossed--aural--all Using @import, you can import different types for different media @import "URL" medialist where medialist is a list of one or more media, separated by comma Example @import challenged.css" embossed,braille

8. basic style syntax selector {property1: value1; property2: value2 … } selector is a comma-separated list of tag names property is the name of a property value is the value of a property all names and values are case-insensitive Examples –h1 { color: grey; text-align: center} –h2,h3 {color: blue}

9. more selectors You can require to apply a style only if one element appers within another, by listing several tags without comma separation. Example h1 em {color: green} will set the color green if is used inside, as is She is new. "*" is the universal selector, it selects all elements.

10. Other selectors tag[attribute] selects only tags that have the name tag and attribute attribute. tag[attribute="value"] selects only tags that have the name tag and attribute attribute that takes the value value. tag[attribute~="value"] selects only tags that have the name tag and attribute attribute that contains the value value.

11. classes Classes are defined with special selectors starting with a dot..class { property1: value1, property2: value2 …} Later on, you can apply the class will apply all the attributes of the class class to the tag tag.

12. style classes You can attach classes to elements by appending the class to the selector. Suppose you want to define a paragraph in quote style p.quote {font-style: italic; margin-left: 3cm; margin-right: 3cm} Then if a paragraph is an abstract This is a quote. Class names (quote" our example) are case- sensitive. Don't ask me why!

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

14. font properties I font-family: accepts a comma-separated list of font names 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"

15. font properties II font-variant: can be either "normal" or "small caps" font-weight: is a number between 100 for the thinnest and 900 for the boldest. 400 is the normal (there are other properties that are not well supported by browsers) (Thomas advises to go easy on fonts.)

16. color & background properties background-repeat: can take the value "repeat" (default), "repeat-x", "repeat-y", and "no-repeat". background-color: gives the color of the background background-image: url(URL) places a picture found at a URL URL. color: sets the foreground color of an element.

17. text properties I line-height: sets the distance between several lines of a tag's contents, in pt, %, with a number or the word "normal" 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. float: can be set to "left", "right" and "none". width: and height: can also be set.

18. text properties II 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".

19. box properties they derive from the assumption that there is a conceptual box around the element contents the total width of a 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.

20. box properties II border-color: can hold up to four colors, separated by blanks border-with: can hold up to four widths, for example "thin think medium 2mm" border-top-width, border-bottom-width, border- left-width and border-right-width also exist. same properties exists for margin- and padding- border-style: can be "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset" height and width can also be set

21. list properties list-style-position: can take the value "inside" or "outside". list-style-image: define the bullet point of a list. 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"

22. http://openlib.org/home/krichel Thank you for your attention!