Week 7: Introduction to CSS

1
March 4, 2008

• Week 7 Introduction to CSS

Margaret Kipp margaret.kipp_at_gmail.com http//myweb
.liu.edu/mkipp/
2
Cascading Style Sheets (CSS)?

• Style sheets are the officially sanctioned way to
  add style to your document
• CSS or Cascading Style Sheets is the default
  style sheet language
• We will cover CSS 2.1
• The official specification is here
  http//www.w3.org/TR/CSS21/

3
Style Sheets

• A style sheet is a sequence of style rules
• In the sheet, one rule follows the other
• Rules cannot be nested like XHTML tags
• The way rules are written in a style sheet is
  much simpler than the way elements are written in
  XHTML
• CSS defines the appearance of the page while
  XHTML defines the structure

4
Style Sheets

• a text file (or block of text) that contains a
  list of rules
• these rules define how certain elements of a web
  page will be displayed
• each rule consists of properties and values
• properties control formatting (e.g. colour, font
  size, positioning of elements)?

5
Cascading Styles

• a style cascade occurs when there are two or more
  rules that can apply to a selector
• determined by three things inheritance,
  specificity and location
• inheritance is specified in the appendix, some
  rules are inherited some are not
• otherwise, the more specific rule is applied or
  the last rule

6
In Element Styles

• You can add a style attribute to any element
  that accepts the core attributes ltelement
  style"style"gt .. ltelementgt where style is a
  style sheet. There is no selector.
• Example
• lth1 style"color red"gtRed Textlt/h1gt
• In element styles only affect that specific
  element.

7
Internal Style Sheets

• add a ltstylegt tag to your document and type
  styles into the tag
• ltstyle type"text/css"gt
• img border 3px dotted blue
• p color red
• lt/stylegt

8
Internal Style Sheets 2

• ltstylegt takes the core attributes
• It requires the type attribute. Set it to
  "text/css"
• It takes the media attribute for the intended
  media. This attribute allows you to set different
  styles for different media

9
External Style Sheets

• add a ltlinkgt tag to your document, then store
  styles in a separate file
• ltlink rel"stylesheet" type"text/css"
  href"mysheet.css" /gt
• type and href are required attributes
• this form of style sheet can be used with
  multiple pages

10
Adding a Simple Style Sheet

• Add the following link tag to your page ltlink
  rel"stylesheet" type"text/css"
• href"main.css" /gt
• Then create a file main.css with a simple test
  rule such as pcolor red
• Make sure you use a tag that you are actually
  using on your page
• Try it out!

11
Alternate Stylesheets

• You can give a page several style sheets and let
  the user choose
• ltlink rel"stylesheet" title"default"
  type"text/css" href"main.css" /gt
• ltlink rel"alternate stylesheet
  title"nostalgic" type"text/css"
  href"nostalgic.css" /gt
• The sheet with no "alternate" will be shown by
  default. Others have to be selected. title is
  required

12
Style Rules

• each style rule has two main parts the selector
  and the declaration
• selectors determine which XHTML elements are
  affected by the rule
• declarations specify what properties are being
  affected and what the value for the property will
  be (each declaration has a property value pair)?
• e.g. color red

13
Style Rules 2

• Example
• h1color red
• all heading 1 elements will be red
• imgborder 3px dotted blue
• all images will be surrounded by a 3 pixel dotted
  blue border
• pcolor red background yellow
• paragraph with red text and yellow background

14
Style Rules 3

• All style rules are composed of selectors and
  declarations
• Declarations consist of one or more
  property-value pairs separated by semicolons
  inside curly brackets

Missing or duplicate semicolons may cause the
browser to skip the rule
15
Style Syntax

• All names and values are case-insensitive, but
  lower case is preferable
• the semicolon is not required on only one element
• Example
• h1 color blue
• h1 color blue background yellow

16
Style Syntax - Multiple Properties

• selector property1 value1
• property2 value2
• You can have as many property-value pairs as you
  like
• Each set of property values pairs must be
  separated by a semicolon

17
Comments

• add comments to a style sheet by typing your
  comment inside a pair of these / /
• e.g. / this rule makes all the heading 1 text
  red /

18
CSS Properties

• Appendix B contains a list of many important CSS
  properties
• Each property is described and possible values
  are listed
• Common properties border, font-size, color,
  background, height, width

19
Property Values

• possible values for specific properties are
  listed in Appendix B
• all properties can take the inherit value which
  allows them to inherit styles from a parent
  element
• many properties take predefined values from a
  list
• other properties take lengths in pixels or as a
  percentags

20
Property Value Examples

• in pixels
• height 500px
• font-size 24px
• by percentage
• font-size 10
• height 50
• from a list
• border blue
• font-style italic

21
Validating CSS

• http//jigsaw.w3.org/css-validator/
• Check your style sheet there (style sheet must be
  a separate filed with the extension .css or it
  must be on the web)?
• Note that checking the style sheet will not be
  part of the assessment of the web site

22
Selectors

• Selectors select elements. They dont select any
  other XML nodes
• The most elementary selector is the name of an
  HTML element, e.g. h1 text-align center will
  center all lth1gt element contents
• Two other common selector types are
• id selectors
• class selectors

23
id Selectors

• standard way to add style to a single element is
  to use id attribute
• id property value will give all the
  properties and values to the element with the
  identifier id attribute set to id.
• Example validator display none
• Remember that in HTML you can identify an element
  by giving it an id
• ltelement id"id"gt ... lt/elementgt

24
class Selectors

• standard way to add style to a group of elements
• .class property1 value1 property2 value2
  will assign all the properties and values to any
  element in class class
• Remember that in HTML you can assign a class to
  an element by saying ltelement class"class"gt ...
  lt/elementgt

25
Types of Property Values

• Numeric or Percentages
• Measures
• Keywords
• Colour values (keyword or numeric)?

26
Property Values Numeric

• Numbers like 1.2, -3 etc are often valid values.
• Percentages are numbers followed by the sign.
• This means the value will be a percentage of
  something else. That other value may be
• some property value for another element
• same property of an ancestor element
• the value used in a formatting context

27
Property Values Measures

• Relative values
• em the font-size of the relevant font
• ex the x-height of the relevant font, often
  1/2 em
• px pixels, relative to the viewing device
• Absolute values
• in inches 1 inch is 2.54 centimetres
• cm centimetres (1 cm is 10 mm)?
• mm millimetres
• pt points 1 point is 1/72th of an inch
• pc picas 1 pica is 12 points

28
Property Values Keywords

• URLs are written as url(URL)?
• Keywords are just written as words, multiple
  keywords need to be separated by commas.
• 'inherit' is a special keyword that says apply
  the property to the current element in the same
  way it has been applied to the parent element

29
Property Values Colours

• Colours follow the RGB model
• They are expressed as a number sign followed by
  three hex numbers from 00 to FF
• Example p background-color FF283C
• See the colour table at the back of the book,
  Appendix E for colour charts or
  http//www.webmonkey.com/reference/color_codes/

30
Property Values Colour Names

• The following are standard colour names defined
  by most browsers
• Black 000000 Green 00FF00
• Silver C0C0C0 Lime 008000
• 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 are not standard, but may work.

31
Property Inheritance

• One of the general principles of CSS properties
  is inheritance.
• Some properties are automatically inherited.
• This means that the property value is
  automatically transmitted from a parent element
  to a child element.
• Appendix B lists which properties inherit.

32
Important CSS Properties

• This week we will look at CSS properties for
  styling text and other basic elements of the
  page. Next week we will look at CSS properties
  for styling the entire page and laying out
  sections of the page.
• Properties
• colours and backgrounds
• lists
• text
• fonts

33
color and background-color

• color sets the foreground colour of an
  element. It takes color values or inherit
• background-color sets the colour of the
  background. Takes the same values as color
• Remember that you need to change both in most
  cases in order to make your text comfortably
  readable
• body color 6666FF background-color FFFFCC

34
background-image

• background-image url(URL) causes the picture
  found at URL to be displayed as the background to
  your page
• It is important to note that many people find
  background images make reading text very
  difficult unless the image is very light

35
background-repeat

• background-repeat can take the values
• 'repeat' (default)?
• 'repeat-x'
• 'repeat-y'
• 'no-repeat'
• This affects how the background image is
  displayed. The default is to repeat. This way you
  can use a small image (tile) to cover a large
  space.

36
background-position

• background-position locates the background
  image on the page
• It can take values '0 0' to '100 100'
• Use 'length length' to put length of offset from
  top left
• Mixing both is allowed
• You can also use 'left', 'right', 'center' and
  'top', 'center', 'bottom'

37
Text Properties

• These can be used on text
• letter-spacing sets additional spacing
  between letters, takes a length value or the word
  'normal'
• word-spacing does the same as letter-spacing
  inside a word.
• These set additional spacing to separate the
  letters or words.

38
Text Properties 2

• line-height sets the distance between several
  lines of an element's contents,
• in pt or pixel numbers
• age (referring to a percentage of current font
  size)?
• with a number (referring to a multiple of the
  size of the text)?
• 'normal'
• This allows text items to be spaced out,
  overriding HTMLs default behaviour to remove
  excess white space.

39
Text Properties 3

• text-align can be 'left' 'right' 'center' and
  'justify'
• text-decoration takes 'underline',
  'overline', 'line-through' and 'blink'
• text-indent , margin-left take length
  units
• vertical-align takes 'baseline', 'middle',
  'sub', 'super', 'text-top', 'text-bottom', 'top',
  'bottom', and percentages
• text-transform takes 'uppercase',
  'lowercase', 'capitalize' and 'none'

40
Font Properties 1

• font-family accepts a comma-separated list of
  font names
• Font families include a font name and a font
  style
• Font types 'serif', 'sans-serif', 'cursive',
  'fantasy', 'monospace'
• font-family "Deja Vu", serif
• font-family "Arial", sans-serif

41
Font Properties 2

• font-size accepts sizes in the form npt, n,
  npt, -npt where n is a number, or from this
  list
• '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 takes 'italic', 'oblique' or
  'normal'

42
Font Properties 3

• font-variant takes 'normal' or 'small caps'
• font-weight takes
• a number between 100 for the thinnest and 900 for
  the boldest. 400 is normal.
• 'normal', 'bold', 'bolder', 'lighter'

43
Font Properties 4

• Other font properties are listed in the Appendix.
  Many are very technical and based on print
  printing conventions
• The font property can be used to combine many
  of the font properties into one CSS element.

44
List Properties

• List properties allow you to style lists
• 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 defines the list item marker
  as a graphic, use url(URL) to give the location
  of the graphic. Note that this has to be a graphic

45
List Properties 2

• list-style-property values
• 'none'
• 'disk'
• 'circle'
• 'square'
• 'decimal'
• 'decimal-leading-zero'

• 'lower-roman'
• 'upper-roman'
• 'lower-alpha'
• 'upper-latin'
• 'upper-alpha'
• 'lower-latin'
• 'lower-greek'
• 'armenian'
• 'georgian'

46
Default HTML 4 Style Sheet

• The default style sheet for HTML 4
• http//www.w3.org/TR/CSS21/sample.html

47
Extract from Default Style Sheet

• h5 font-size .83em margin 1.5em 0
• h6 font-size .75em margin 1.67em 0
• h1, h2, h3, h4, h5, h6, b, strong
  font-weight bolder
• blockquote margin-left 40px margin-right
  40px
• i, cite, em, var, address font-style italic
  
• pre, tt, code, kbd, samp font-family
  monospace
• pre white-space pre

48
Examples

• Course website redone by hand in XHTML with
  basic CSS
• includes lists, tables and other tags and some
  basic CSS styles
• Note that this is not an example of good design
• http//myweb.liu.edu/mkipp/650/index-xhtml.html
• http//myweb.liu.edu/mkipp/650/main.css