Cascading Style Sheets CSS

1
Cascading Style Sheets (CSS)
2
CSS Standards

• CSS1
• is an abbreviation for "Cascading Style Sheets,
  level 1." It is a W3C Recommendation
• CSS2
• Sources of reference
• http//www.w3.org/TR/REC-CSS1

3
Style Sheet Benefits

• separate format and content
• make maintenance easier, faster, and cheaper
• maintain consistency across organization
• simplify exchange of information
• reformat for different audiences

4
Definitions

• Selector
• Chooses elements in document based on name or
  position in structure
• Declaration
• A property (e.g. 'font-size') and a value for it
  (e.g. '12pt')
• Rule
• A Selector and a Declaration for the selected
  elements
• Style Sheet
• Collection of rules

5
Rule Syntax and Comment

• Rule syntax
• selector propertyvalue propertyvalue
• Comments are enclosed in C-style slashes and
  asterisks

ltSTYLE type"text/css"gt P color green /
Green color is used to match the logo of the
company / lt/STYLEgt
6
Kinds of Selectors

• simple
• contextual
• class
• ID

7
Simple Selector

• Chooses elements in document based on name and/or
  attributes only, not based on position in
  structure. Example P specifies all elements
  named P
• P color green
• H1, H2, H3 font-family Helvetica

8
Contextual Selector

• Chooses elements in document based on their
  position in the document's structure. Made up of
  several simple selectors. Example P B specifies
  all B elements which are inside P elements
• P B color blue font-size 12pt

9
Class Selector

• To select all elements of a class, use a period
  followed by the class name.
• example .warning, which selects all elements of
  class warning
• .warning color red
• To select elements by class and name, use the
  element name followed by a period and the class
  name
• example H1.warning, which selects only H1
  elements of class warning
• H1.warning color blue

10
Class Selector Example
ltSTYLE TYPE"text/css"gt .warning color red
H1.warning color blue lt/STYLEgt . .
. ltBODYgt ltPgtWeb Technologies ltP
CLASSwarninggtWeb Mining ltH1 CLASSwarninggtWeb
Security lt/BODYgt
11
ID Selector

• To select an element by its ID attribute value,
  use a sharp () followed by the attribute value

ltSTYLE TYPE"text/css"gt banana background
yellow lt/STYLEgt . . . ltBODYgt ltSPAN
IDbananagtWeb Technologieslt/SPANgt lt/BODYgt
12
Add style information

• Embed a style sheet
• Use STYLE attribute
• Link an external style sheet
• Use _at_import
• Define style using Javascript Code

13
Embed a style sheet

• Put the style sheet at the start of the HTML
  document (usually is embeded in HEAD tag)

ltHEADgtltTITLEgtCSS Stylelt/TITLEgt ltSTYLE
TYPE"text/css"gt lt!-- P colorblue
font-familyhelvetica --gt lt/STYLEgt lt/HEADgt
14
Use STYLE attribute

• STYLE attribute defines a inline style and can be
  used on an ad-hoc basis
• STYLE attribute is available on most elements
• The following overrides the style defined for P
  tag

ltBODYgt ltPgtWeb Technologies ltP STYLE" color
red font-size 14pt "gtWeb Mining lt/BODYgt
15
Use STYLE attribute

• it allows styling commands to be hard coded for a
  single element
• It is not a good practice because it creates a
  hard coded style which will be hard to find and
  update later.
• It is better to assign the element a unique ID
  and define a unique style for that ID

ltB STYLE" color red font-size 14pt "gtWeb
Mininglt/Bgt
16
Link an external style sheet

• It allows you to share a style sheet for a number
  of documents
• all linked style sheets should not contain
  conflicting selectors
• Another style sheet language is DSSSL

ltHEADgt ltLINK RELstylesheet HREFhttp//bb.com/hea
d.css TYPE"text/css"gt ltLINK RELstylesheet
"HREFhttp//bb.com/table.css" TYPE"text/css"gt lt/
HEADgt
ltLINK RELstylesheet HREFnews_style
TYPE"text/dsssl"gt
17
Use _at_import

• _at_import and ltLINKgt tag do the same thing
• Unlike ltLINKgt tag, you can combine with local
  style defintions

ltSTYLE type"text/css"gt _at_import
URL("globalstyle.css") _at_import
"otherstyle.css" P color green H1
font-family sans-serif lt/STYLEgt
18
Define style with JavaScript(in Netscape only)

• Using JavaScript, you can define style sheets
  that use the document object model
• The tags property always applies to the document
  object for the current document, so you can omit
  document from the expression document.tags within
  STYLE tag.

ltSTYLE TYPE "text/javascript"gt
document.tags.P.color "blue"
document.tags.P.marginLeft "20pt" lt/STYLEgt
tags.P.color "blue" tags.P.marginLeft "20pt"
19
Define Simple Selector
ltSTYLE TYPE "text/css"gt H1 color blue
lt/STYLEgt
ltSTYLE TYPE "text/javascript"gt
tags.H1.color"blue" lt/STYLEgt
ltSCRIPTgt document.tags.H1.color"yellow" lt/SCRIP
Tgt
20
Define Contexual Selector
ltSTYLE TYPE "text/css"gt H1 EM color blue
lt/STYLEgt
ltSTYLE TYPE "text/javascript"gt
contextual(tags.H1, tags.EM).color"blue" lt/STYLEgt
ltSCRIPTgt document.contextual(document.tags.H1,
document.tags.EM).color"yellow" lt/SCRIPTgt
21
Define Class Selector
ltSTYLE TYPE "text/css"gt .main color blue
H1.main font-size 30pt lt/STYLEgt
ltSTYLE TYPE "text/javascript"gt
classes.main.all.color"blue"
classes.main.H1.fontSize"30pt" lt/STYLEgt
ltSCRIPTgt document.classes.main..all.color"yello
w" document.classes.main.H1.fontSize"30pt" lt/SC
RIPTgt
22
Define ID Selector
ltSTYLE TYPE "text/css"gt newTopic color
blue lt/STYLEgt
ltSTYLE TYPE "text/javascript"gt
ids.newTopic.color"blue" lt/STYLEgt
ltSCRIPTgt document.ids.newTopic.color"yellow" lt/
SCRIPTgt
23
Put in ltHEADgt or ltBODYgt ?

• If the ltSTYLEgt element is in the ltHEADgt, the
  entire document will be affected
• if the ltSTYLEgt element is in the ltBODYgt, only the
  subsequent HTML elements will be affected.

24
Style sheet declaration processing hierarchy

• ltLINKgt
• Last style sheet linked overrides previous style
  sheet
• _at_import
• Last style sheet linked overrides previous style
  sheet
• Style blocks
• Overrides imported styles
• Inline styles
• Overrides imported styles and style block

25
Units

• must always specify units
• use relative units rather than absolute units
  when possible
• Length Units
• Color Units

26
Length units
P coloryellow text-indent 2cm H1
font-size 3ex
27
Color units

• Can use keyword color names from Windows VGA
  palette
• aqua, black, blue, fuchsia, gray, green, lime,
  maroon, navy, olive, purple, red, silver, teal,
  white, yellow

TD color red P color FF0000 B color
RGB(255,0,0) H1 color RGB(100, 0, 0)
28
CLASS attribute

• makes it possible to group elements of different
  kinds (P, H1, BLOCKQUOTE, etc.) into a class so
  that they can share the style defined for that
  class

29
ID attribute

• makes it possible to give an element a unique
  identifier so that the element can be selected
  using the identifier and given a unique style

30
CSS properties divisions

• Font
• font, font-size, font-weight, font-variant,
  font-style, font-family
• Color and background
• color, background, background-image
• Text
• word-spacing, letter-spacing, text-transform,
  text-align, text-indent
• Box
• margins, padding, borders, width, height
• Classification
• visibility (visible/hidden), list-styles

31
block level elements

• HTML elements which have a line break before and
  after. Examples ltPgt, ltH4gt

32
Pseudo Classes

• Not all browsers support pseudo classes
• link
• represents an element that functions as an HTML
  link
• active
• when a link is clicked, the link becomes a member
  of the active pseudo class
• visited
• after a link is visited, the visited link becomes
  a member of the visited pseudo class

Alink color green Avisited color grey
33
DIV and SPAN tags

• Elements to be manipulated must have unique Ids.
  Mostly ltDIVgt and ltSPANgt tags do this job
• these tags are containers of any HTML elements
• ltDIVgt puts element(s) to occupy the entire row
• ltSPANgt occupies the region covered by ltSPANgt only

ltDIV ID"imgTarget1"gtltIMG SRC"..."gtSome Text
Herelt/DIVgt ltSPAN ID"imgTarget2"gtltIMG
SRC"..."gtSome Text Herelt/SPANgt
34
DHTML

• Dynamic HTML combines the technology of
• HTML (latest version 4.0)
• CSS (level 1, 2)
• JavaScript
• Possibilities
• Dynamic content
• Dynamic style
• Animations

35
Dynamic Style Content (1)

• ltSTYLEgt
• lt!--
• mystyle background-color white
• hiddenText visibility hidden
• --gt
• lt/STYLEgt
• ltBODYgt
• ltDIV IDmystyle onMouseOver"MseOvr()"
  onMouseOut"MseOut()"gt
• Instruction lt/DIVgtltPgt
• Sample text below shows ""ltPgt
• Color unitsltBRgt
• ltSPAN IDhiddenTextgtText is hidden or showed
  depends on eventlt/SPANgtltBRgt

36
Dynamic Style Content (2)
ltSCRIPT LANGUAGE"JavaScript"gt lt!--
function MseOvr() mystyle.style.backgrou
ndColor "red" hiddenText.style.visibilit
y "visible" function MseOut()
mystyle.style.backgroundColor "white"
hiddenText.style.visibility "hidden"
//--gt lt/SCRIPTgt
37
Sample applications

• Show the answer when the user clicks on the
  question
• Show a multi-levelled document with a collapsible
  outlines
• A tree of folders can be collapsed and expanded
  (quite complicate to implement and require a
  series of images)

38
CSS Positioning (CSSP)

• It allows exact positioning of information
  including image
• Position
• Relative vs Absolute
• Layering
• the z-index

39
Positioning Examples

• ltSTYLEgt
• pos1 position absolute left 10 top 10
  width 25
• lt/STYLEgt

ltSTYLEgt pos1 position relative float
right width 25 lt/STYLEgt
40
Containers

• ltSTYLEgt
• pos1 positionabsolute width100px
  height100px top50px left50px
  background-colorred
• pos2 positionabsolute width100px
  height100px top250px left250px
  background-colorblue
• lt/STYLEgt
• ltBODYgt
• ltDIV IDpos1gtText 1lt/DIVgt
• ltDIV IDpos2gtText 2lt/DIVgt
• lt/BODYgt

41
Overflow

• For handling excess text in the container

ltSTYLEgt pos1 positionabsolute width70px
height70px top50px left50px
background-colorred overflowscroll pos2
positionabsolute width70px height70px
top250px left250px background-colorblue
overflowhidden lt/STYLEgt ltBODYgt ltDIV
IDpos1gtYou put a lot of text here and it makes
it outflowlt/DIVgt ltDIV IDpos2gtYou put a lot of
text here and it makes it outflowlt/DIVgt lt/BODYgt
42
Layers and z-index

• It determines which layers appear in the
  foreground and background
• Default value is 0

ltSTYLEgt backgrd positionabsolute
width100px height100px top20px left20px
background-colorpink z-index-1 foregrd
positionabsolute width100px height100px
top10px left50px background-coloryellow
z-index2 lt/STYLEgt ltBODYgt See how this text
appears in browser ltDIV IDforegrdgt1lt/DIVgt ltDIV
IDbackgrdgt2lt/DIVgt lt/BODYgt
43
Make a thing draggable

• Demonstration

44
Internet Resources

• CSS Specifications from WWW.W3.ORG
• CSS1 Specification (http//www.w3.org/TR/REC-CSS1)
  
• CSS2 Specification (http//www.w3.org/TR/REC-CSS2)