LIS901N: Style sheet

1
LIS901N Style sheet

• Thomas Krichel
• 2003-01-17

2
Style sheets

• Style sheets are the officially sanctioned way to
  add style to your document
• We will cover Cascading Style Sheets CSS version
  2.
• This is a new lecture.

3
inline style

• You can add a style attribute to a tag
• lttag style"style"gt
• where style is a style specification
• Example
• lth1 style"color blue"gtI am so bluelt/h1gt
• Such a declaration only takes effect for the
  element concerned

4
Document level style

• Add style tag as part of the header
• ltheadgtltstylegtlt/stylegtlt/headgt
• ltstylegt admits the attributes
• dir
• lang
• media
• "screen" is the default
• other values are available
• title
• type
• always "text/css"

5
linking to an external style sheet

• ltlink relstylesheet type"text/css"
• href"URL"gt
• where URL is a URL.
• The link tag must appear in the ltheadgt, it can
  not appear in the ltbodygt, sorry!

6
importing an external style sheet

• Within a style sheet, for example the contents of
  a ltstylegt tag, 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

7
media dependent styles

• CSS knows about the following media
• tty --tv --projection --handheld --print
• braille --embossed --aural --all
• Using _at_import, you can import different types for
  different media
• _at_import "URL" medialist
• where medialist is a list of one or more
  media, separated by comma
• Example
• _at_import challenged.css" embossed,braille

8
basic style syntax

• selector property1 value1 property2 value2
  
• selector is a comma-separated list of tag names
• property is the name of a property
• value is the value of a property
• all names and values are case-insensitive
• Examples
• h1 color grey text-align center
• h2,h3 color blue

9
more selectors

• You can require to apply a style only if one
  element appers within another, by listing several
  tags without comma separation.
• Example
• h1 em color green
• will set the color green if ltemgt is used
  inside lth1gt, as is lth1gtShe is ltemgtnewlt/emgt.lt/h1gt
• "" is the universal selector, it selects all
  elements.

10
Other selectors

• tagattribute selects only tags that have the
  name tag and attribute attribute.
• tagattribute"value" selects only tags that
  have the name tag and attribute attribute that
  takes the value value.
• tagattribute"value" selects only tags that
  have the name tag and attribute attribute that
  contains the value value.

11
classes

• Classes are defined with special selectors
  starting with a dot.
• .class property1 value1, property2 value2
  
• Later on, you can apply the class
• lttag class"class"gt
• will apply all the attributes of the class
  class to the tag tag.

12
style classes

• You can attach classes to elements by appending
  the class to the selector. Suppose you want to
  define a paragraph in quote style
• p.quote font-style italic margin-left 3cm
• margin-right 3cm
• Then if a paragraph is an abstract
• ltp class"quote"gtThis is a quote.lt/pgt
• Class names (quote" our example) are
  case-sensitive. Don't ask me why!

13
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
• fonts
• colors, and background
• text
• boxes and layout
• lists
• tag classification
• We can not be exhaustive here

14
font properties I

• font-family accepts a comma-separated list of
  font names
• font-size accepts sizes as npt, n, 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"

15
font properties II

• font-variant can be either "normal" or "small
  caps"
• font-weight is a number between 100 for the
  thinnest and 900 for the boldest. 400 is the
  normal
• (there are other properties that are not well
  supported by browsers)
• (Thomas advises to go easy on fonts.)

16
color background properties

• background-repeat can take the value "repeat"
  (default), "repeat-x", "repeat-y", and
  "no-repeat".
• background-color gives the color of the
  background
• background-image url(URL) places a picture found
  at a URL URL.
• color sets the foreground color of an element.

17
text properties I

• line-height sets the distance between several
  lines of a tag's contents, in pt, , with a
  number or the word "normal"
• 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.
• float can be set to "left", "right" and "none".
• width and height can also be set.

18
text properties II

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

19
box properties

• they derive from the assumption that there is a
  conceptual box around the element contents
• the total width of a box is the sum of
• left and right margin
• left and right borders
• left and right padding
• the width of the box' contents
• A similar reasoning holds for the height of a box.

20
box properties II

• border-color can hold up to four colors,
  separated by blanks
• border-with can hold up to four widths, for
  example "thin think medium 2mm"
• border-top-width, border-bottom-width,
  border-left-width and border-right-width also
  exist.
• same properties exists for margin- and padding-
• border-style can be "dotted", "dashed", "solid",
  "double", "groove", "ridge", "inset", "outset"
• height and width can also be set

21
list properties

• list-style-position can take the value "inside"
  or "outside".
• list-style-image define the bullet point of a
  list.
• 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"

22
http//openlib.org/home/krichel

• Thank you for your attention!