CO1552 Web Application Development

1
CO1552 Web Application Development

• Semester 2 Week 2

2
Introduction

• Last week we looked at the reasoning behind
  separating presentation from structure
• We started looking at style sheets
• We looked at the common syntax for writing a
  style sheet
• This week we are looking at
• Writing style sheet rules
• Linked to LO5, Syllabus Item 3
• Page number 88

3
Formatting Text

• Property color
• Values
• rrggbb
• Rgb(rr,gg,bb)
• Description sets the colour of the text
• Example
• p color FF0000
• p color rgb(FF,00,00)
• ltpgtThis will appear in redlt/pgt

4
Text Formatting

• Property letter-spacing
• Values
• Normal
• Length
• Description increases or decreases the
  horizontal white space between characters
  (absolute or relative values)
• Example,
• p letter-spacing 12px
• p letter-spacing -5px
• ltpgtThese letters are well spacedlt/pgt

5
Text Formatting

• Property text-align
• Values
• left / right / center / justify
• Description Aligns text within parent object
• Example
• p text-align right
• ltpgtThis text is right alignedlt/pgt

6
Text Formatting

• Property text-decoration
• Values
• none / underline / overline / line-through /
  blink
• Description Adds decoration to text (please
  dont use blink!!!)
• Example
• p text-decoration underline
• ltpgtThis text is underlinedlt/pgt

7
Text Formatting

• Property text-indent
• Values
• length /
• Description Indents the first line of an
  element
• Example,
• p text-indent 10
• p text-indent 15
• ltpgtFirst line of a long paragraph is indentedlt/pgt

8
Text Formatting

• Property text-transform
• Values
• none / capitalize / uppercase / lowercase
• Description Defines how letters will be
  rendered to the screen
• Example,
• p text-transform capitalize
• ltpgtall words on in this sentence will have a
  capital letterlt/pgt

9
Text Formatting

• Property white-space
• Values
• normal / pre / nowrap
• Description Sets how white space is rendered on
  to the screen
• Example,
• p white-space pre
• ltpgtHave a lot of
  fun?lt/pgt

10
Text Formatting

• Property word-spacing
• Values
• normal / length
• Description increases or decreases the amount
  of space between words (absolute or relative)
• Example,
• p word-spacing 10px
• p word-spacing -0.5px

11
Fonts

• Property font-family
• Values
• family-name / generic name
• Description A prioritised list of font names or
  generic font family names (see Dreamweaver for
  more information)
• Example,
• td font-family verdana, arial, helvetica,
  sans-serif
• lttdgtThis is some text with or without a font?lt/tdgt

12
Fonts

• Property font-size
• Values
• xx-small / x-small / small / medium / large /
  x-large / xx-large / smaller / larger / length /
  
• Description Sets the size of the font
• Example,
• td font-size 10px
• td font-size medium

13
Fonts

• Property font-style
• Values
• normal / italic / oblique
• Description sets the style of the font
• Example,
• p font-style oblique

14
Fonts

• Property font-weight
• Values
• normal / bold / bolder / lighter / 100-900
• Description sets the weight of the font
• Example,
• p font-weight bolder
• p font-weight 500

15
Conflicting Style Sheets

• Consider the example,
• ltstyle typetext/cssgt
• p font-family arial color FFFFFF
• em color FF00FF
• lt/stylegt
• ltpgtThis paragraph contains a ltemgtnested style
  sheetlt/emgt but what will be displayed?lt/pgt

16
Conflicting Style Sheets

• This is an example of a cascading style sheet.
• The text in the example will display the sentence
  with the emphasised text in a different colour.
  However the emphasised text will still be
  displayed in the same font as the paragraph text.

17
Conflicting Style Sheets

• The style from the ltpgt tag is said to have
  cascaded in to the ltemgt tag. However, the
  style defined in the ltemgt tag has overruled the
  ltpgt tag thus displaying the emphasised text in
  a different colour.

18
CSS Model

• Different people can apply a cascading style
  sheet definition to a HTML page.
• The programmer can write and apply their own
  style
• The user of the website can also apply their own
  style sheet
• The browser can also apply a style (default style)

19
CSS Syntax

• As mentioned previously, it is possible to have
  an external file with all of your style rules
  written in
• In order for your HTML file to get hold of those
  rules, you must link your HTML file to the style
  sheet
• Your HTML file can be linked to more than one
  style sheet file
• The following command links a file to a style
  sheet file
• ltlink relstylesheet typetext/css
  hrefafile.cssgt
• You should add this to the ltheadgt section of your
  HTML page