LIS650 lecture 2 Major CSS

1
LIS650 lecture 2Major CSS

• Thomas Krichel
• 2005-02-11

2
today

• introduction to style sheets
• how to give style sheet data
• basic CSS selectors
• some important properties
• some more properties

3
style sheets

• Style sheets are the officially sanctioned way to
  add style to your document
• We will cover Cascading Style Sheets CSS.
• This is the default style sheet language.
• We are discussing version 2.1. This is not yet a
  W3C recommendation, but it is in last call.
• You can read all about it at http//www.w3.org/TR/
  CSS21/

4
style sheet media types

• Different media, different style.
• CSS has a controlled vocabulary lof media
• projection handheld
• print braille
• screen (default) tty
• embossed aural
• all
• Note that style sheet media are not the same as
  the MIME types. MIME types are a controlled
  vocabulary for file types.

5
what is in a style sheet?

• A style sheet is a sequence of style rules.
• In the sheet, one rule follows the other. There
  is no nesting of rules.
• Therefore the way rules are written in a style
  sheet is much simpler than the way elements are
  written in XML.
• Remember that in XML we have nesting of elements.

6
what is a style rule about?

• It is about two or three things
• Where to find what to style? --gt selector
• How style it?
• Which property to set? --gt property name
• Which value to give to the property? --gt
  property value
• In this lecture I will use the following syntax
• Write property names as property-name
• Write property values as value

7
why are they cascading

• You can have many style data in different places.
  Style data comes in the form of rules at this
  place, do that.
• Where there are many rules, there is potential
  for conflict. We do not learn the exact rules
  here but note
• Some rules are read after others other. Later
  rules override earlier rules.
• Some rules concern more specific locations than
  others. The specific rules override general
  rules.

8
inline style

• You can add a style attribute to any element that
  admits the core attributes as in
• ltelement style"style"gt .. ltelementgt
• where style is a style sheet.
• Example
• lth1 style"color blue"gtI am so bluelt/h1gt
• Such a declaration only takes effect for the
  element concerned.
• I do not recommend this.

9
document level style

• You can add a style element as part of the header
• ltheadgtltstylegt style lt/stylegtlt/headgt
• ltstylegt takes the core attributes.
• It takes a "type" attribute, "text/css" is the
  default
• It takes the "media" attribute for the intended
  media. See next slide.
• The "media" attribute allows you to set write
  different styles for different media.

10
linking to an external style sheet

• This is the best way! Use the same style sheet
  file for all the pages in your site, by adding to
  every pages something like
• ltlink rel"stylesheet" type"text/css"
• href"URI"/gt
• where URI is a URI where the style sheet is
  to be downloaded from. On wotan, this can just be
  the file name.
• The ltlinkgt tag must appear in the ltheadgt, it can
  not appear in the ltbodygt, sorry!

11
in our situation

• ltlink rel"stylesheet" type"text/css"
• href"main.css"/gt
• Then create a file main.css with a simple test
  rule such as
• h1 color blue
• main.css is just an example filename, any file
  name will do.
• Try it out!

12
basic style syntax

• selector property1 value1 property2 value2
  
• selector is a selector (see following slides)
• property is the name of a property
• value is the value of a property
• note colon and semicolon use!
• all names and values are case-insensitive
• Examples
• h1 color grey text-align center
• .blue color blue / yes, with a dot /

13
comments in the style sheet

• You can add comments is the style sheet by
  enclosing the comment between / and /.
• This comment syntax comes from the C programming
  language.
• This technique is especially useful if you want
  to remove code from your style sheet temporarily.

14
basic selector

• the basic selector is a comma-separated list of
  elementary selectors.
• Often, the elementary selectors are HTML tags,
  e.g.
• h1, h2 text-align center
• will center all lth1gt and lth2gt element
  contents.
• but the selectors can be more precise, we are
  only look at one alternative here, class
  selectors.

15
class selectors

• The is the standard way to style up a class
• .class property1 value1 property2 value2
  
• will give all the properties and values to
  any element in the class class.
• Recall HTML, you can say
• ltelement class"class"gt ... lt/elementgt
• to make the element element part of the class
  class to the element element. Note that you can
  place any tag into several classes. Use blanks to
  separate the different class names.

16
id selectors

• The standard way to style up a single element is
  to use its id
• id property1 value1 property2 value2
• will give all the properties and values to
  the element with the identifier id.
• Recall that in HTML, you can identify an
  individual element element by giving it an id
• ltelement id"id"gt ... lt/elementgt

17
visual style sheets

• In this class we ignore aural style sheets and
  work only on visual ones.
• We have two important concepts.
• The canvas is the support of the rendering. There
  may be several canvases on a document. On screen,
  each canvas is flat and of infinite dimensions.
• The viewport is the part of the canvas that is
  currently visible. There is only one viewport per
  canvas.
• We will now examine some important property
  values in visual style sheet regarding
• colors
• distances

18
property values colors

• they follow the RGB color model.
• expressed as three hex numbers 00 to FF.
• The following standard color names are defined
• 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 may be supported by browsers.

19
values measures

• relatively
• em the font-size of the relevant font
• ex the x-height of the relevant font
• px pixels, relative to the viewing device
• absolutely
• in inches 1 inch is equal to 2.54 centimeters.
  
• cm centimeters
• mm millimeters
• pt points 1 point is equal to 1/72th of an
  inch
• pc picas 1 pica is equal to 12 points
• percentage, depending on other values. That other
  value may be
• some property for other element
• same property of an ancestor element
• the value used in a formating context.

20
the default style sheet (extract)

• blockquote, body, dd, div, dl, dt, h1, h2, h3,
  h4, h5, h6, ol, p, ul, hr, pre display block
• li display list-item
• head display none
• body margin 8px line-height 1.12
• h1 font-size 2em margin .67em 0
• h2 font-size 1.5em margin .75em 0
• h3 font-size 1.17em margin .83em 0
• h4, p, blockquote, ul, ol, dl, margin 1.12em 0
  
• h5 font-size .83em margin 1.5em 0
• h6 font-size .75em margin 1.67em 0

21
the default style sheet (extract)

• 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
• big font-size 1.17em
• small, sub, sup font-size .83em
• sub vertical-align sub
• sup vertical-align super
• del text-decoration line-through
• hr border 1px inset
• ol, ul, dd margin-left 40px
• ol list-style-type decimal

22
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
• colors, and background
• boxes and layout
• fonts
• text
• lists
• tag classification

23
color background properties

• color sets the foreground color of an
  element.
• background-color gives the color of the
  background
• background-image url(URI) places a picture
  found at a URI URI.
• background-repeat can take the value repeat
  (default), repeat-x, repeat-y, and
  no-repeat.
• background-attachment can take the value of
  fixed or scroll (default) to say if the image
  scrolls with the viewport.

24
color background properties II

• background-position property places the
  background image. It can take values
• '0 0' to '100 100'
• 'length length' to put length of offset from top
  left
• mixing both is allowed
• top, center,bottom and left, right,
  center can be used too

25
normal flow

• In general, every piece of HTML is placed into a
  conceptual entity called a box.
• In visual formatting, we can think about the box
  as a rectangle that fills the material that is
  being visualized.
• For in-line elements, the boxes are set
  horizontally next to each other.
• For block-level elements, the boxes are set
  vertically next to each other.

26
the box model

• The total width that the box occupies is the sum
  of
• the left and right margin
• the left and right border width
• the left and right padding
• the width of the boxs contents
• A similar reasoning holds for the height that the
  box occupies.

27
box properties I

• border-color can hold up to four colors,
  separated by blanks
• one value means all borders have the same color
• two values mean first number for top and bottom,
  second for left and right
• three values mean first sets top, second left
  and right, third bottom
• four values mean first sets top, second sets
  right etc.
• border-width can hold up to four widths, as
  well as the words 'thin', 'thick' and 'medium'.

28
box border properties

• border-style border-top-style
  border-right-style border-bottom-style
  border-left-style take the following values
• none No border. border-width becomes zero
• hidden Same as 'none', except in terms of border
  conflict resolution
• dotted The border is a series of dots.
• dashed The border is a series of short line
  segments.
• solid The border is a single line segment.
• double The border is two solid lines.
• groove The border looks as though it were carved
  into the canvas.
• ridge The border looks as though it were coming
  out of the canvas.
• inset The border makes the box look like
  embedded in the canvas.
• outset The border makes the box look like coming
  out of the canvas.

29
box properties II

• border-top-width , border-bottom-width ,
  border-left-width and border-right-width
  also exist.
• same properties exists for margin-top ,
  margin-bottom etc and padding-top ,
  padding-bottom etc.
• float can be one of 'left', 'right' or 'none'
  which is the default. If a float is set on an
  element, the text near the element floats on the
  left or right site of the element's contents. For
  example, you can use this to create run-in
  headers.

30
box properties III

• width sets the total width of the box and
  height sets the total height of the box, both
  take a dimension or the word 'auto' e.g. img
  width 100px height auto
• clear tells the user agent whether to place
  the current element next to a floating element or
  on the next line below it.
• value 'none' tells the user agent to put contents
  on either side of the floating element
• value 'left' means that the left side has to stay
  clear
• value 'right' means that the right side has to
  stay clear
• value 'all' means that both sides have to stay
  clear

31
position

• 'static' The box is a normal box, laid out
  according to the normal flow.
• 'relative' The box's position is calculated
  according to the normal flow. Then it is offset
  relative to its normal position. The position of
  the following box is not affected.
• 'absolute' The box's position is specified by
  offsets with respect to the box's containing tag.
  There is no effect on sibling boxes.
• 'fixed' The box's position is calculated
  according to the 'absolute' model, but the
  reference is not the containing tag but
• For continuous media, the box is fixed with
  respect to the viewport
• For paged media, the box is fixed with respect to
  the page

32
properties with position

• top, right, bottom, left set offsets
  if positioning is relative, absolute or fixed.
• They can take length values, percentages, and
  'auto'.
• the effect of 'auto' depends on which other
  properties have been set to 'auto
• Now check the examples page.

33
box properties V

• z-index let you set an integer value for a
  layer on the canvas where the element will
  appear.
• If element 1 has z-index value 1 and element 2
  has z-index value number 2, element 2 lies on top
  of element 1.
• A negative value means that the element contents
  is behind its containing block.
• the initial value is 'auto'.
• browser support for this property is limited.

34
general background to foreground order

• For an element, the order is approximately
• background and borders of element
• children of the element with negative z-index
• non-inline in-flow children
• children that are floats
• children that are in-line in-flow
• children with z-index 0 or better
• not worth remembering for quiz

35
box properties VI

• The visibility property sets the visibility
  of a tag. It takes values
• 'visible' The generated box is visible.
• 'hidden' The generated box is invisible (fully
  transparent), but still affects layout.
• 'collapse' The element collapses in the table.
  Only useful if applied to table elements.
  Otherwise, 'collapse' has the same meaning as
  'hidden'.
• With this you can do sophisticated alignments

36
box properties VII

• We now look at overflow and clipping. When a box
  contents is larger than the containing box, it
  overflows.
• overflow can take the values
• visible contents is allowed to overflow
• hidden contents is hidden
• scroll UA displays a scroll device at the edge
  of the box
• auto leave to the user agent to decide what
  to do

37
list properties

• 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-property
• takes the values disc, circle, square,
  none with an unordered list
• takes the value decimal, lower-roman,
  upper-roman, lower-alpha, upper-alpha with
  ordered list, and some others
• list-style-image define the bullet point of a
  list as a graphic, use url(URL) to give the
  location of the graphic.

38
classification properties I

• display sets the display type of an element,
  it take the following values
• 'block' displays the tag contents as a block
• 'inline' displays it as inline contents
• 'list-item' makes it an item of a list, you can
  then
• attach list properties to it
• 'none' does not display it
• 'run-in' (see later)
• 'compact' (see later)

39
classification properties II

• display also takes the following values
• table -- table-footer-group
• table-row -- table-row-group
• table-cell -- table-column
• table-caption -- table-column-group
• inline-table -- table-header-group
• these means that they behave like the table
  elements that we already discussed

40
run-in box

• If a block box (that does not float and is not
  absolutely positioned) follows the run-in box,
  the run-in box becomes the first inline box of
  the block box.
• Otherwise, the run-in box becomes a block box.
• Example on next page

41
example for run-in box

• ltheadgtlttitlegta run-in box examplelt/titlegt
• ltstyle type"text/css"gt
• h3 display run-in
• lt/stylegt lt/headgt ltbodygt
• lth3gta run-in heading lt/h3gtltpgtand a paragraph
  of text that follows it and it continues on the
  line of the h3lt/pgt
• lt/bodygt

42
compact box

• If a block-level box follows the compact box, the
  compact box is formatted like a one-line inline
  box. The resulting box width is compared to one
  of the side margins of the block box,
• left margin if direction is left-to-right
• right margin if direction is right-to-left
• If the inline box width is less than or equal to
  the margin, the inline box is given a position in
  the margin as described immediately below.
• Otherwise, the compact box becomes a block box.

43
compact box example

• ltdiv style"dt display compact
• dd margin-left 4em gt
• ltdlgt ltdtgtshort ltddgtltpgtdescription goes here.
• ltdtgttoo long for the margin
  ltddgtltpgtdescription goes here.
• lt/divgt

44
classification properties III

• The whitespace property controls the display
  of white space in a block level tag.
• 'normal' collapses white space
• 'pre' value similar to ltpregt tag
• 'nowrap' ignores carriage returns only
• It seemed not to work in firefox last time I
  tried.

45
text properties I

• letter-spacing set the spacing between
  letters, takes a length value or the word
  'normal'
• word-spacing same as for letter-spacing
• 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 multiplicity of
  the size of the text)
• 'normal'

46
text properties II

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

47
text properties III

• float can be set to left, right and
  none.
• width and height can also be set.
• 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.

48
font properties I

• font-family accepts a comma-separated list of
  font names
• there are five generic names, one should be
  quoted last as a fall-back
• serif sans-serif cursive
• fantasy monospace
• example
• lang(ja-jp) font-family "Heisei Mincho
  W9", serif

49
font properties II

• font-size accepts sizes as npt, n, npt,
  -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

50
font properties III

• font-variant can be either normal or small
  caps
• font-weight can be
• a number between 100 for the thinnest and 900 for
  the boldest. 400 is normal.
• normal bold bolder lighter
• font-stretch can be any of
• ultra-condensed extra-condensed
  condensed
• semi-condensed normal semi-expanded
• expanded extra-expanded
  ultra-expanded

51
other font properties

• There is a whole bunch of other properties
• unicode-range stemv stroke
• units-per-em stemh bbox
• definitions-src ascent dscent
• baseline widths mathline
• centerline topine panose1
• There also is a font property that allows you
  to put several of the previous properties
  together.
• But all that is not worth learning. Keep fonts
  simple.

52
table properties I

• caption-side says where the caption should go,
  either 'top' or 'bottom'
• border-collapse allows to choose the
  fundamental table model. It can take two values
• 'separate' implies that each cell has its own
  box.
• 'collapse' implies that adjacent cells share the
  same border

53
table properties II

• The properties on this slide are only useful if
  you choose the separated border model.
• You can set the distance between adjacent cells
  using the border-spacing property. Set it to
  two distances to specify different horizontal and
  vertical values
• empty-cells can be set to
• 'show' shows empty cells with their border
• 'hide' does not show the border around an empty
  cell
• there are some other table properties

54
Lesk in HTML/CSS

• I have struggled to reproduce the Lesk tables in
  the examples area.
• It is at doc/examples after the directory of the
  course home page.
• You can see a version with CSS and a version
  without CSS.

55
advice for cheaters

• Within a style sheet, for example the contents of
  a ltstylegt element, you can import another file
  using the _at_import command
• _at_import url(http//www.art.org/kitsch.css)
• or
• _at_import "http//www.art.org/kitsch.css"
• these two ways appear to be equivalent

56
media dependent styles

• Remember the media CSS knows about ?
• Using _at_import, you can import different types for
  different media
• _at_import "URI" medialist
• where medialist is a list of one or more
  media, separated by comma
• Example
• _at_import challenged.css" braille, handheld

57
advice about spacing

• Traditionally only use horizontally, the em
  nowadays is the height of the font, and should be
  used vertically as well, as in div.menu padding
  1.5em margin 1.5em
• For body, use ages, as in body margin-left
  15 margin-right 0
• To create a menu, do something like div.menu
  float left width 15em

58
the 'inherit' value

• Each property can have the 'inherit' value. In
  this case, the value of the property for the
  element is determined by the containing element.
• Sometimes, 'inherit' is the default value.

59
validating CSS

• It is at http//jigsaw.w3.org/css-validator/
• Check your style sheet there when you wonder why
  the damn thing does not work.
• Note that checking the style sheet will not be
  part of the assessment of the web site.

60
http//openlib.org/home/krichel

• Thank you for your attention!