CO1552 Web Application Development

1
CO1552 Web Application Development

• Semester 2 Week 3

2
Introduction

• We are going to continue looking at ways to apply
  different kinds of style to your HTML files
• This week we are
• Looking at more style sheet properties / values
• Linked to LO5, Syllabus Item 3
• Page 95

3
Background Elements

• Property background-attachment
• Values
• Scroll / fixed
• Description sets whether an image is fixed or
  scrolls along with the rest of the page
• Example,
• body background-attachment fixed

4
Background Elements

• Property background-color
• Values
• Color / rrggbb / rgb(rr,gg,bb) / transparent
• Description Sets the background colour of an
  element
• Example,
• body background-color red
• p background-color FF0000

5
Background Elements

• Property background-image
• Values
• url / none
• Description Sets the background image of an
  element
• Example,
• body background-image images/cdrom.jpg

6
Background Elements

• Property background-position
• Values
• top left / top center / top right / center left /
  center center / center right / bottom left /
  bottom center / bottom right / x-pos, y-pos /
  x-, y-
• Description sets the starting point of a
  background image
• Example,
• body background-position bottom right

7
Background Elements

• Property background-repeat
• Values
• repeat / repeat-x / repeat-y / no-repeat
• Description sets if/how background image will
  be repeated
• Example,
• body background-repeat repeat-y

8
Dimensions

• Property height
• Values
• auto / length /
• Description Sets the height of an element
• Example,
• ltimg srcabc.jpg styleheight100pxgt
• table height 100

9
Dimensions

• Property line-height
• Values
• normal, number, length,
• Description sets the distance between lines
• Example,
• p line-height 5px
• p line-height 0.5

10
Dimensions

• Property max-height
• Values
• none / length /
• Description Sets the maximum height of an
  element
• Example,
• table height 100 maximum-height 200px

11
Dimensions

• Property max-width
• Values
• none / length /
• Description Sets the maximum width of an
  element
• Example,
• table width 100 maximum-width 670px

12
Dimensions

• Property min-height
• Values
• length,
• Description Sets a minimum height of an element
• Example,
• table height 100 min-height 100px

13
Dimensions

• Property min-width
• Values
• length,
• Description sets the minimum width of an
  element
• Example,
• table width 100 min-width 550px

14
Dimensions

• Property width
• Values
• auto / / length
• Description sets the width of an element
• Example,
• td width 100px
• lttd stylewidth100px

15
Lists

• There are a number of elements available for
  adding style to lists
• Look at your book for these
• (They are not at all interesting)

16
Positioning

• The thing that most people have difficulty with
  style sheets is the positioning of elements
• Theoretically the positioning of element with
  style sheets is a lot simpler than using HTML
  (where you have to use tables to accomplish any
  control over positioning)
• However, practically, many people have difficulty
  getting their head around the ways in which to
  use style sheets to position elements
• Some of the more interesting elements are listed
  here.

17
Positioning

• Property top, left, bottom, right
• Values
• auto, , length
• Description set how far the top, left, bottom
  or right is from the parent element

18
Positioning

• Property vertical-align
• Values
• baseline / super / sub / top / text-top / middle
  / bottom / text-bottom / length /
• Description sets the vertical alignment of an
  element

19
Positioning

• Property position
• Values
• static / relative / absolute / fixed
• Description Places an element in a static,
  relative, absolute or fixed position
• Note more on this later

20
Positioning

• Property z-index
• Values
• auto / number
• Description sets the stack order of an
  element
• Note more on this later

21
Positioning

• Property float
• Values
• left / right / none
• Description sets where the text or image will
  appear in another element
• Note more on this later

22
Positioning Elements

• Positioning elements in CSS is more powerful than
  in HTML.
• In HTML you had to use a potentially complicated
  table to position elements in any kind of
  controlled way
• Style sheets give you a lot more control where
  and how things are positioned
• WARNING!!! Because of this control and
  flexibility, it is also VERY easy to completely
  mess up our web pages

23
Positioning Elements

• In HTML, we can only position an element relative
  to its parent position
• If an item is defined within a TD tag, then that
  item can only be positioned within that table cell

24
Positioning Elements

• Style sheets allow us to define absolute
  positions
• An absolute position in style sheets means we can
  position an element relative to the (0,0)
  coordinates of the top left hand corner of the
  browser window
• We can have COMPLETE control over where something
  appears on the screen

25
Positioning Elements

• Without the positioning constraints of HTML, our
  web pages can become a lot simpler
• We no longer need complicated tables to present
  our information to the user
• In fact we can remove presentation tables
  entirely
• Best of all we can use positioning parameters
  on just about every HTML element there is
  including paragraph elements

26
Positioning Elements

• We also have relative positioning
• Relative positioning with position something
  relative to the X,Y coordinates of its parent
  element
• So for example, you may have an image within a
  lttdgt cell if you position this relatively, it
  will have to remain within the table cell
• If there is no parent element you are
  positioning relative to the browser window

27
Layering

• Style sheets also bring us the capability to
  layer elements on top of each other
• Imagine if you had a stack of transparent papers
• You would see what was on the top paper before
  you would see the one underneath that (and so on
  and so on)
• CSS Layering uses the same idea as transparent
  paper analogy

28
Layering

• We had a property called z-index. The z-index
  relates to where in the stack of transparencies
  your element appears
• If something has a higher z-index, then it is
  higher in the stack and will be shown before
  any items below it
• If something has a lower z-index, then it is
  lower in the stack and will be shown only if
  there is nothing on top of it

29
Text Flow and Box Model

• In HTML, everything is relative to its parent
  position
• CSS has the facility to float items to
  different positions on the screen
• By using the float property we can set a
  division of text or an image to appear on the
  left or right hand side of the screen.
• Using this property we can get text to float
  around an image.

30
Text Flow and Box Model

• CSS properties to control the text flow and box
  model can be found on page 105 of your book.