Cascading Style Sheets

1
Cascading Style Sheets

• CSS - Cascading Style Sheets language
• Cascading Style Sheets (CSS) is a simple
  mechanism for adding style (e.g. fonts, colors,
  spacing) to Web documents
• designed for HTML in 1996
• CSS1 (1996), CSS2 (1998), CSS Mobile Profile
• CSS3 (working drafts)
• browser support (better than for XSL)
• CSS1 IE5 onwards, Firefox, etc.
• CSS level 2 IE8, Firefox, Opera
• http//www.w3schools.com/css/css_reference.asp
• own syntax

2
CSS rules

• CSS style rules
• Each rule starts with a tag name
• followed by a list of style properties bracketed
  by and
• tag name defines the element
• Each style property starts with the property's
  name, then a colon and lastly the value for this
  property. When there is more than one style
  property in the list, you need to use a semicolon
  between each of them
• property value
• property i.e. font-size
• value i.e. 16 pt'
• h2 font-size 16pt font-weightbold
• latest rule is valid

3
Using inline styles

• lthtmlgt
• lt!-- Exercise 1 inline style --gtltheadgtlttitlegtXM
  L - Inline Styleslt/titlegtlt/headgtltbodygtltpgtThis
  text does not have any style applied to
  it.lt/pgtlt!-- The style attribute allows you to
  declare inline --gtlt!-- styles. Separate multiple
  styles with a semicolon. --gtltp style
  "font-size 20pt"gtThis text has the
  ltemgtfont-sizelt/emgtstyle applied to it, making it
  20pt.lt/pgtltp style "font-size 20pt color
  0000ff"gtThis text has theltemgtfont-sizelt/emgt and
  ltemgtcolorlt/emgt styles applied to it, making it
  20pt. and blue.lt/pgtlt/bodygtlt/htmlgt

4
Internal styles

• lthtmlgtlt!-- Exercise 2 internal style
  --gtltheadgtlttitlegtXML introduction to CSS
  lt/titlegt
• lt!-- Declaring a style in the header section
  --gtltstyle type "text/css"gt
• em background-color 8000ff color white
• h1 font-family arial, sans-serif p
  font-size 14pt .special color blue
• lt/stylegtlt/headgt
• ltbodygtlt!-- This class attribute applies the
  .blue style --gtlth1 class "special"gtMain
  headinglt/h1gtltpgt For st etc.

5
External styles

• lthtmlgt
• ltheadgtlttitlegt Linking an external style sheet
  lt/titlegtltlink rel "stylesheet" type
  "text/css" href "style4.css"gtlt/headgt
• ltbodygt
• / Example style4.css /
• / External style sheet /
• a.nodec text-decoration none
• ahover text-decoration underlinecolor
  redbackground-color ccffcc
• li em color red font-weight bold
• ul margin-left 2cm

6
Some points of CSS examples

• in HTML
• ltspan style clear rightgthere a non-floating
  part of text is started. Span is used to delimit
  a text area for exceptional formatting.lt/spangt
• div defines a separate paragraphdiv text-align
  center margin-bottom 1em
• The z-index property sets the stack order of an
  element. An element with greater stack order is
  always in front of another element with lower
  stack order.
• in CSS
• em refers to the relative size of text

7
Cascading Style Sheets
Inheritance
ltbodygt
ltdivgt
lth1gt
ltpgt
ltbgt
8
Inheritance

• ltstyle type"text/css"gt
• body color red
• h1 color blue
• p font-family helvetica, arial, sans-serif
  padding 2px
• lt/stylegt

9
Text boxes

• padding 2pt 3 pt 4pt 5pt
• between frame and content
• margin 2px 3px 4px 5px
• between boxes (order top, right, bottom, left)
• margin-left, margin-right, etc.
• width 50 height auto
• size of image
• float left / right / (makes the box float)
• clear both / left, right/ (no floating)

10
Text boxes
inline
content
padding
block
border
margin
page
block
margins
11
How the browser sets priority for style
definitions

• Styles declared as important by the page creator
  color red !important
• Styles declared as important by the user
• Normal styles by the page creator
• Normal styles by the user
• Default styles by the browser if there are no
  user styles

12
External information Pseudo-classes and
pseudo-elements

• normally CSS styles are based on HTML tags and
  attributes. Sometimes it is not sufficient.
• CSS introduces the concepts of pseudo-elements
  and pseudo-classes to permit formatting based on
  information that lies outside the document tree.
• Anchor pseudo-class
• Links (LINK) are VISITED or ACTIVE
• Example alink color red avisited color
  blue aactive color white
• The hover pseudo-class applies while the user
  designates an element (with some pointing
  device), but does not activate it.

13
Some pseudo-elements

• P.INITIALFIRST-LETTER font-size 200
• P.INITIALFIRST-LINE text-transform uppercase
• The first-child pseudo-class matches an element
  that is the first child of some other element.

14
Using CSS on HTML pages

• Generalized use
• Write style definitions to fit several pages,
  preferably the entire site. If you need page
  specific styles, use the STYLE attribute inside
  the document.
• Scalability
• Avoid using absolute values for font size,
  margins, etc. Users can have very different
  browsers, screen resolutions, window sizes, etc.
  Use relative measures.

15
Using CSS on HTML pages

• Test the styles with different browser versions,
• Design your pages to work also without style
  sheet support
• Browsers behave and render pages in non-standard
  ways!
• Select fonts with care
• people may not have all nice fonts on their PC
• Dont push it too far!
• Not every single element and attribute needs a
  pre-set value.

16
XML and CSS

• calling an external CSS from an XML-document
• lt?xml-stylesheet href"my.css" type"text/css?gt
• HTML CSS refers to standard tags (ltpgt is
  paragraph, ltemgt inline text)
• XML you need to explicitly define block
  elements, inline elements, etc.

17
XML and CSS

• display block
• paragraph display block
• display inline
• name displayinline
• display none
• element is hidden
• display list-item

18
XML and CSS2 example

• lt?xml-stylesheet type"text/css"
  href"bach.css"?gt
• ltarticlegt
• ltheadlinegtFredrick the Great meets Bach
  
• lt/headlinegt
• ltauthorgtJohann Nikolaus Forkellt/authorgt
• ltparagt
• One evening, just as he was getting
  his
• ltinstrumentgtflutelt/instrumentgt ready
  and his musicians were assembled, an officer
  brought him a list of the strangers who had
  arrived.
• lt/paragt
• lt/articlegt

19
XML and CSS2 example

• article, headline, author, para display block
  
• headline font-size 1.3em
• author font-style italic
• article, headline, author, para margin 0.5em
• instrument display inline

20
XML and CSS internal styles and images

• internal styles in XML
• lt?xml-stylesheet type"text/css"
  href"internalstyles" ?gt
• picture reference
• ltstyle id"internalstyles"gt
• logo_img background-imageurl(mylogo.jpg)
  width 125pxheight110 px position relative
• lt/stylegt
• ltlogo_img/gtltpgtWelcome to our institute!lt/pgt

21
XML and Cascading Style Sheets Examples

• sidebars and tables
• lt?xml-stylesheet type"text/css"
  href"internalstyles"?gt
• ltstyle id internalstylesgt
• style display none
• document display block
• heading display block font-size24pt
• p display block font-family Arial
  positionrelative
• sidebar display block float right
  borderinset 3pt background-colorC0C0FF
• sidebar headingdisplay block font-size
  18pt
• sidebar pdisplayblock font-size 10pt
• lt/stylegt

22
XML and CSS Lists

• lt!- example.css --gt
• employees displayblock visibilityvisible
• employee displaylist-itemlist-style-typedisc
• lastName display inline font-size12pt
• firstName display inline font-size12pt
• salary display none

23
XML and CSS tables

• tables have poor browser support (Mozilla only)
• lt! table.css --gt
• employees displaytable
• employee displaytable-row
• firstName display table-cell
• lastName display table-cell
• title display table-cell
• salary display table-cell

24
Encoding ASCII
A is represented by this bit pattern 1 byte 8
bits
A
0
1
0
0
0
0
0
1
Encoding
25
ASCII -character set
26
Encoding standards

• ASCII American Standard Code for Information
  Exchange
• 7 bit 2 7 128
• 8 bit 28 256 , including control characters
• ANSI, ISO Latin-1 8 bit codes
• Unicode (IBM, Microsoft, Sun)
• 16 bit encoding 216 65 536
• ISO 10646 four bytes

27
White space

• space, linefeed, tabulators character Unicode
  valuetab x9newline xAcarriage
  return xDspace x20
• linefeed in different OSsMacOS CRUnix LFWind
  ows CR LF

28
White space

• space, linefeed, tabulators
• HTML simply ignores
• XML in principle white space is kept
• normalization
• spaces between elements removed
• line breaks are replaced by space
• spaces from beginning and end of a block are
  removed
• quotations around literals are removed
• entity references are replaced by corresponding
  character strings
• if you wish to keep the white space
• white-space pre / normal, nowrap /

29
CSS2 extensions

• CSS2 includes CSS1 plus extensions location of
  an element
• book title ... / sub-elements of book
  element /
• book gt title ... / title-child-elements of
  book-element
• title para ... / para-elements which
  follow the title-element /
• para first-child ... / para-elements 1.
  child /

30
CSS2 extensions

• The 'before' and 'after' pseudo-elements can be
  used to insert generated content before or after
  an element's content
• notebefore content"NOTE " font-weightbold
• noteafter content"!!!"

31
CSS2 extensions

• before and after
• example ltSTYLEgt
• P.Juliet font-styleitalic
• P.Julietbefore content Juliet colorred
• P.Romeo font-stylebold
• P.Romeobefore content Romeo colorblue
• lt/STYLEgt
• ltP classRomeogtHark! What light on yonder
  window breaks?gtlt/Pgt
• ltP classJulietgt Romeo? Romeo? Wherefore art
  thou, Romeo?gtlt/Pgt

32
CSS2 extensions

• reference to attribute value
• titlebefore content attr(author)
• courseafter content "(" attr(for) ")"
• element selection based on an attribute value
• parasecurity ... /attribute exists /
• parasecurity"secret" ...
• parakeywords"css" ... / one of the values
  is css /
• security"secret" ... / all elements with
  attribute security and value secret /

33
CSS2 extensions

• media
• aural sound
• _at_media aural
• documentplay-duringurl(backgroundmusic.mp3)
  repeat mix
• title voice-familyElvis malevolumemedium
• _at_media visual
• _at_media braille
• _at_media print
• BODY font-size 10pt
• _at_media screen
• BODY font-size 12pt
• _at_page