1. Style sheets can also affect the BODY

2. style4.css BODY {BACKGROUND-COLOR : white} H1 {COLOR : red; FONT-SIZE : 50; FONT-FAMILY : arial} H2 {COLOR : green} P {COLOR : blue}

3. Appying style4.css to wars2.htm

4. Notice carefully: The HTML language is evolving This means, unfortunately, that it is not as elegant as it could be A defect is that there are inconsistencies between various generations of the language Remember BGCOLOR from last lecture -- I said you should not use it because –In style sheets, the same effect is achieved with BACKGROUND- COLOR

5. FONT-STYLE

6. style5.css BODY {BACKGROUND-COLOR : white} H1 {COLOR : red; FONT-SIZE : 50; FONT-FAMILY : arial} H2 {COLOR : green ; FONT-STYLE : italic} P {COLOR : blue}

7. Applying style5.css to wars2.htm

8. Summary so far: A style sheet comprises a sequence of one or more items of this type: selector { declaration } The selector specifies a type of logical item whose rendering we want to control The declaration specifies the rendering

9. Summary (contd.) The types of logical item that can be selected by a selector include BODY, P, H1, H2, H3, … and more that we will consider later The way in which we can control rendering depends on the type of logical item we have selected to render -- we will consider the possibilities later

10. Places to specify style sheets In a separate file and called by a LINK (this makes a style sheet available for lots of documents) Within the HEAD of a document, but this restricts its usage to the parent document Embedded within the BODY content of a document -- there are only rare situations where this is needed or desirable

11. in-HEAD style sheets An in-HEAD style sheet must be delimited by a pair of tags: and Example: Wars of the 20th Century BODY {BACKGROUND-COLOR : white} H1 {COLOR : red ; FONT-SIZE : 50 ; FONT-FAMILY : arial} H2 {COLOR : green ; FONT-STYLE : italic} P {COLOR : blue}....

12. Prioritization (Cascading) More specific style specifications override more general ones If you use linked, HEAD and in-BODY style sheets, in-BODY is given first preference, then HEAD then linked sheets A style for a child element overrides one for its parent/ancestor

13. Logical items and their “boxes” Most logical items can be regarded as being placed, by the browser, in a “box”

14. Boxes and their contents A box has various attributes, such as –empty margin outside the box, border of the box, padding between border of the box and its content, background of the box These attributes can be controlled The content of a box has attributes, such as color, font, spacing, alignment, decoration, indentation, transformation, and others These attributes can be controlled

15. Controlling Box attributes A box has a BORDER A border has a STYLE which can have the following values: –none, dotted, dashed, solid, double, groove, ridge, inset and outset –none is the default value Not all browsers may support all values of the STYLE, displaying many of them as if they were solid

20. Box BORDER contd. A border has a WIDTH which can be specified in various ways, including giving a value in inches

23. Box BORDER contd. Now that we have a thick BORDER, we can see the effect of STYLE more clearly

26. Box BORDER contd. A BORDER has a TOP, BOTTOM, LEFT and RIGHT, whose WIDTH and STYLE can be set separately

29. Box BORDER contd. A BORDER has a COLOR but we cannot give different sides of the border different colours

34. Box PADDING We can control the PADDING between the BORDER of a box and its content We can control separately the PADDING on the TOP, BOTTOM, LEFT and RIGHT of the box

37. Box PADDING Of course, we can just specify a PADDING that we want on all four sides

40. Box MARGIN We can control the MARGIN of clear space which exists outside a box

43. Box MARGIN We can control separately the MARGIN outside the TOP, BOTTOM, LEFT and RIGHT of a box

46. Box BACKGROUND A box has a foreground (the content of the box) and a BACKGROUND We can control the appearance of the BACKGROUND, by specifying its COLOR or by controlling the use of an IMAGE as the basis of the background

49. BACKGROUND IMAGE We specify the image which is to be used as the basis of the BACKGROUND by giving its url, which, of course, can be a relative or an absolute url The specified image is used as a tile to cover the BACKGROUND

52. BACKGROUND IMAGE contd. We can specify the POSITION, relative to the top left corner of the box, where we want tiling to start We can specify the POSITION –symbolically –using percentages –using absolute coordinates

53. BACKGROUND IMAGE contd. Specifying a POSITION symbolically: –use left, center or right for horizontal positioning –use top, center or bottom for vertical positioning

58. BACKGROUND IMAGE contd. We specify a POSITION absolutely by using coordinates, specified in our favourite units, from the top-left corner of the box

61. BACKGROUND IMAGE contd. We specify a POSITION in percentage terms by specifying the percentage of the box height down from the top and the percentage of the box width in from the left that we want tiling to start

64. BACKGROUND IMAGE contd. We can also control the form of REPEAT used in the tiling, using one of the three values: repeat, repeat-x repeat-y