CSC 2720 Building Web Applications

1
CSC 2720Building Web Applications

• Cascading Style Sheets (CSS)

2
Benefits of Cascading Style Sheets

• Separate document presentation from document
  content
• More features for formatting the appearance
• Can define font, size, background color,
  background image, margins, etc.
• Share style sheets across multiple documents or
  entire Web site
• Reduce development and maintenance time
• Can specify a class definition for a style,
  effectively defining new HTML elements
• Flexible rules are applied in a hierarchical
  manner (precedence rules)

3
How do Style Sheets work?

• Browser may ignore some or all of the rules
  specified in the style sheets.

4
Cascading Style Sheets

• A simple text file with .css suffix
• CSS, Level 1 (1996)
• Concerned with applying simple styles to HTML
  elements
• CSS, Level 2 (1998)
• Incorporates and extends CSS-1
• Supports media-specific style sheets (visual
  browsers, aural devices, printers, etc)
• CSS, Level 3 (Under development)
• Incorporates and extends CSS-2
• Focused on modularization of the CSS
  specification
• New selectors, fancy borders and backgrounds,
  vertical text, user interaction, speech and much
  more.
• Note
• A browser may not support all features in CSS
  level 1 and 2
• See http//www.westciv.com/style_master/academy/br
  owser_support/ for info about browser's support
  for CSS.

5
What kinds of style does CSS support?

• CSS 1
• Font properties such as typeface and emphasis
• Color of text, backgrounds, and other elements
• Text attributes such as spacing between words,
  lines
• Alignment of text, images, tables, etc.
• Margin, border, padding, and positioning of most
  elements
• Dimension
• CSS 2
• Relative and fixed positioning of most elements
• Bidirectional texts
• New font properties

6
Select an element in the HTML file

• What are statements, selectors, declarations and
  properties?
• How to specify them?

7
CSS Syntax
A single statement
Property names and values (3 properties here)
selector
body font-family Verdana, Helvetica,
sans-serif font-size 1em text-align
justify / CSS Comments /
declaration
8
CSS Syntax

• Statement must have one or more selectors and a
  declaration.
• Selector specifies which HTML elements to be
  affected.
• Declaration is one or more properties separated
  by semicolons .
• Property has name and value separated by a colon
  .
• Some values have unit
• White space is ignored but can improve readability

9
Three Ways of Using CSS

• External Style Sheet
• Store CSS code in an external file (usually with
  .css extension)
• Apply to any document that explicitly includes
  the .css file
• Internal or Embedded Style Sheet
• Defined in HTML document
• Affect only the page where the style is defined
• Inline Styles
• Specified as an attribute in HTML tag
• Apply to only one element

10
Specifying External Style Sheet

• Use ltlinkgt tag in ltheadgt section to associate an
  external style sheet to the HTML file.

ltheadgt ltlink rel"stylesheet" type"text/css"
href"style1.css" gt lt/headgt
style1.css
h1 text-align center font-family Arial h2
color 440000 text-align center
font-family Arial Black, Arial, Helvetica
11
Specifying Internal Style Sheet

• Use ltstylegt tag in ltheadgt section
• Add lt!-- and --gt between statements to hide the
  statements from being displayed by browsers that
  do not understand ltstylegt elements.

ltheadgt ltstyle type"text/css"gt lt!-- hr color
sienna p margin-left 20px body
background-image url("images/back40.gif")
--gt lt/stylegt lt/headgt
12
Specifying Inline Styles

• Use attribute style in HTML tag to specify
  properties applied to that element

ltp style"color sienna margin-left
20px"gt This is a paragraph lt/pgt
13
CSS-1 CSS-2 Selectors

• HTML element selectors
• Selector groups
• Class selectors
• ID selectors
• Contextual selectors
• Link pseudo class selectors
• Pseudo element selectors
• Dynamic pseudo class selectors
• Child selectors
• More advanced selectors

14
HTML element selectors

• The selector is a name of an HTML element.

hr color sienna p font-weight bold

• Selectors can be grouped together as
  comma-separated list

H1 font-family sans-serif H2 font-family
sans-serif H3 font-family sans-serif is
equivalent to H1, H2, H3 font-family
sans-serif
15
Universal Selector

• "", the universal selector, matches the name of
  any element type.

/ All elements use this font / font-family
sans-serif
16
Class Selectors

• Class selector allows you define different styles
  for the same type of HTML element.
• e.g. Define two classes of paragraph, one center
  justified and one right justified.
• HTML elements class ? "New elements"

/ Define two classes for element 'p' / p.right
text-align right p.center text-align
center / Define a global class usable by all
elements / .warning font-color red
ltp class"right"gtThis paragraph is
right-aligned.lt/pgt ltp class"center"gtThis
paragraph is center-aligned.lt/pgt ltb
class"warning"gtDon't you dare to fall asleep!lt/bgt
17
ID Selectors

• ID selector allows you define styles for a
  specific element (not a specific kind of
  elements.)

pspecial font-weight bold / Specific
style for element with id"layer1" / layer1
positionabsolute left140 top140
z-Index1
ltp id"special"gtI love Java!ltpgt ltpgtThis is some
paragraphlt/pgt ltdiv id"layer1"gtltimg
src"dummy.gif" /gtlt/divgt
18
Contextual Selectors

• Decendent selector
• Selectors separated by space characters
• Select elements that are contained in some
  element
• e.g. div strong text-decoration underline
• Select ltdivgtltstronggt selectedlt/stronggtlt/divgt
• Select ltdivgtltpgtltstronggt selected
  lt/stronggtlt/pgtlt/divgt
• i.e., all the ltstronggt elements inside a div
  element.
• Child selector
• Selectors separated by "gt" character
• Select only the immediate children
• e.g. div gt strong text-decoration underline
• Select ltdivgtltstronggt selected lt/stronggtlt/divgt
• Does not select ltdivgtltpgtltstronggt not selected
  lt/stronggtlt/pgtlt/divgt

19
Pseudo-Classes and Pseudo-Elements

• Pseudo-class selector
• Based on a set of predefined qualities that an
  HTML element can possess.
• No actual class attributes exist in the markup.
• active, link, visited, hover, focus,
  first-child
• Pseudo-element selector
• Identify a virtual element that doesnt exist in
  the markup.
• before, after, first-letter, first-line
• e.g.
• pfirst-childfirst-line
• font-size larger

20
Link Pseudo-Classes
Property Values
alink Define the style for unvisited links
avisited Define the style for visited links
aactive Define the style for active link (when you click on it)
ahover Define the style for hovered link (when mouse move over it)
Hover ltstyle type"text/css"gt.class1 Alink
text-decoration none.class1 Avisited
text-decoration none.class1 Aactive
text-decoration none.class1 Ahover
text-decoration underline color
redBackground colored link .class2 Alink
background FFCC00 text-decoration
none.class2 Avisited background FFCC00
text-decoration none.class2 Aactive
background FFCC00 text-decoration
none.class2 Ahover background FFCC00
font-weightbold color redlt/stylegt
21
Dynamic Pseudo Classes

• Apply to any element (not just links) in the
• Active state
• While the mouse is being pressed on the selected
  element
• Hover state
• While the mouse is over the selected element
• Focus state
• While the selected element has the keyboard focus
• e.g. change the background color of a paragraph
  to green while the mouse is over it.
• phover background green
• Note
• IE does not yet support pseudo class on elements
  other than links.
• Pseudo class must be specified for elements
  (cannot be a generic class or generic id)
• phover and div.someClassactive are ok, but
  .someClasshover is not ok

22
Other Selectors

• Adjacent sibling selectors
• e.g. h1 h2 margin-top -5mm selects H2 if
• (a) h1 and h2 have the same parent
• (b) h2 immediately follows h1
• Attribute selectors
• Select elements with specific attributes
• e.g. h1title color blue selects h1 that
  has an attribute named "title" (regardless of its
  value).
• e.g spantypeexample color blue selects
  span element with attribute type"example"
• See CSS-2 specification for detailed info
• http//www.w3.org/TR/REC-CSS2/selector.html

23
Additional Syntax Rules

• Keywords must not be placed within quotes
• Examples
• width "auto" Incorrect
• width auto Correct
• border "none" Incorrect
• border none Correct
• background "red" Incorrect
• background red Correct
• All CSS style sheets are case-insensitive
• Exceptions font name, HTML attribute values such
  as values of class and id.

24
Inheritance

• An element inherits its parent's properties if
  the properties are not specified for the element.
• e.g.
• lth1 style"colorblue"gtThe headline ltemgtislt/emgt
  important!lt/h1gt
• The emphasized text "is" is displayed in blue
  color.
• Computed values, not actual values, are
  inherited.
• ltbody style"font-size 10pt"gt
• lth1 style"font-size 120"gt
• A ltemgtlargelt/emgt headinglt/h1gtlt/bodygt
• The font size for h1 is 12pt (relative to the
  font size of its parent). The font size for em is
  also 12pt (not 14.4pt)

25
The Cascade (Precedence Rules)

• Author rules gt User rules gt User agents
• Rules marked important have the highest
  priority, and they overrides the normal order of
  cascade.
• User's "important" rules have higher priority
  than the same author's "important" rules.
• Syntax
• h1 font-size 16pt !important
• font-family sans-serif

26

• More specific rules have precedence over less
  specific rules
• A selector's specificity is calculated as
  follows
• count the number of ID attributes in the selector
  ( a)
• count the number of other attributes and
  pseudo-classes in the selector ( b)
• count the number of element names in the selector
  ( c)
• ignore pseudo-elements.
• e.g.
• / a0 b0 c0 -gt specificity
  0 /
• LI / a0 b0 c1 -gt specificity
  1 /
• UL LI / a0 b0 c2 -gt specificity
  2 /
• UL OLLI / a0 b0 c3 -gt specificity
  3 /
• H1 RELup / a0 b1 c1 -gt specificity
  11 /
• UL OL LI.red / a0 b1 c3 -gt specificity 13
  /
• LI.red.level / a0 b2 c1 -gt specificity 21
  /
• x34y / a1 b0 c0 -gt specificity
  100 /
• In case of tie, the last rule has priority.

27
Property Categories

• Text style Fonts properties,
• Text layout Text alignments,
• Foreground Background
• Border
• Margin
• Padding
• Page layout
• Element type
• User interface

28
Text Style Properties

• What properties does text have?
• Color
• Font-specific
• font-weight
• font-family
• font-size
• font-style
• font-size-adjust
• font-stretch
• Text-specific
• text-decoration
• text-transform
• text-shadow

29
Useful Font Properties

• font-weight
• Relative weight (boldness) of font
• normal lighter bold bolder 100 200
  ... 900 inherit
• H1 font-weight 200
• H2 font-weight bolder
• font-style
• Font face type within a family
• normal italic oblique
• P font-style normal
• TH font-style italic

30
Useful Font Properties, cont.

• font-size
• Either relative or absolute size of font
• Absolute length value pt, pc, in, cm, mm
• Relative length values em, ex, px,
• Absolute size xx-large x-large large
  medium small x-small xx-small
• Relative size smaller larger
• STRONG font-size 150
• P font-size 14pt
• P font-size xx-large

31
Useful Font Properties, cont.

• font-family
• Typeface family for the font
• H1 font-family Arial / Arial is a font
  name /
• H2 font-family serif
• / serif is a keyword, which suggests the user
  agents to
• use a font that belong to the "serif" font
  family /
• Generic font families
• serif Times New Roman
• sans-serif Arial
• cursive Comic Sans MS
• fantasy Decorative fonts
• monospace Courier New (Font with fixed width)

32
Text layout properties

• How text is layout on a page?
• Letter-spacing
• Word-spacing
• Line-height
• Vertical-align
• Text-indent
• Text-align
• Direction

33
Useful Text Properties

• text-decoration
• Describes text additions or decorations that
  are added to the text of an element
• none underline overline line-through
  blink
• P text-decoration underline
• vertical-align
• Determines how elements are positioned vertically
• top bottom baseline middle sub super
  text-top text-bottom
• text-align
• Determines how paragraphs are positioned
  horizontally
• left right center justify

34
Useful Text Properties, cont.

• text-indent
• Specifies the indentation of the first line of
  the paragraph
• / pt, pc, in, cm, mm / em, ex, px,
• P text-indent -25px / Hanging indent /
• line-height
• Specifies the distance between two consecutive
  baselines in a paragraph
• normal number pt, pc, in, cm, mm em, ex,
  px,
• .double line-height 200
• .triple line-height 3 / 3x the font
  size /
• DIV line-height 1.5em

35
Background Properties

• How can we set the background of an element?
• Background-color
• Background-image
• Background-attachment
• Background-repeat
• Background-position
• background

36
Useful Color and Background Properties

• color
• Color of the text (foreground color)
• color-name RRGGBB RGB rgb(rrr, ggg, bbb)
  rgb(rrr, ggg, bbb)
• P color blue
• H1 color 00AABB
• H3 color rgb(255, 0, 0 ) / red /
• background-color
• Background color
• transparent all possible values of property
  "color"
• background-image
• none url(filename)
• Specifies an image to use as the background of
  region
• H2 background-image url(Bluedrop.gif)

37
Useful Color and Background Properties

• background-repeat
• Specifies how to tile the image in the region
• repeat repeat-x repeat-y norepeat
• BODY
•   background-image url(Bluedot.gif)
• background-repeat repeat-x
• background
• Lets you combine properties in a single entry
• P background url(wallpaper.jpg) repeat-x

38
Useful Color and Background Properties

• background-attachment
• Specifies whether background image is fixed or
  scrolled with document
• scroll fixed
• e.g Creates an infinite vertical band that
  remains "glued" to the viewport when the element
  is scrolled.
• BODY
• background red url("pendant.gif")
• background-repeat repeat-y
• background-attachment fixed
• note "fixed" fixes image w.r.t. to the viewport
  (the browser displaying area) and not w.r.t. to
  the containing black.

39
Useful Color and Background Properties

• background-position
• Specifies initial position of the background
  image
• Specified using two values
• ltlengthgt ltlengthgt / fixed absolute distance /
• top center bottom left center right
• BODY background url("banner.jpeg") right top
  / 100 0 /
• BODY background url("banner.jpeg") top center
  / 50 0 /
• BODY background url("banner.jpeg") center
  / 50 50 /
• BODY background url("banner.jpeg") bottom
  / 50 100 /
• BODY background url(banner.jpeg") 100px 100px
  

40
Length Units
Unit name Abbreviation Meaning Relative?
Em em The height of a font Yes
Ex ex The height of the letter x in a font Yes
Pica pc 1 pica is 12 points No
Point pt 1/72 of an inch No
Pixel px One dot on a screen No
Millimeter mm Printing unit No
Centimeter cm Printing unit No
Inch in Printing unit No
41
Box Model

• Every displayable element is contained in a box
  that has a content area (text, image, etc.), an
  optional padding, border and margin areas.

42
Content, Padding, Border and Margin

• Content area is the smallest rectangle containing
  the rendered data that make up the element.
• Padding is the space between the content and the
  element's borders.
• Padding takes the background of the element
• Border can have styles
• Margin is the space between the element's borders
  and the "containing box" (which belongs to the
  element's parent or ancestor in the document
  tree)
• Margin is always transparent

43
Padding and Margin

• Padding and margin can be further divided into
  four sub-areas -- top, right, bottom, left
• Padding areas take the background of the element.
• Margin areas are always transparent (takes the
  containing box background).
• Does not apply to table elements (table, td, tr,
  th)
• P padding-top 2em margin-right 10em
• Short hand for setting margin (same for padding)
• body margin 2em / all margins set
  to 2em /
• body margin 1em 2em / top bottom
  1em,
• right left 2em /
• body margin 1em 2em 3em / top1em,
  right2em,
• bottom3em, left2em /

44
Border Properties

• Border has the following properties
• width
• ltlengthgt thin medium thick
• color
• ltcolor valuegt transparent
• Default value is the "color" property value of
  the element
• style
• none hidden dotted dashed solid double
  groove
• ridge inset outset
• When style is "none", the border width is zero
• P border-width 2em
• border-color red
• border-style solid

45
Border Properties

• Border can also divided into top, left, bottom
  and right edges.
• P border-top-width 2em
• border-right-width 4em
• border-bottom-width 2em
• border-left-width 4em
• border-top-style solid
• border-right-style double
• border-bottom-style solid
• border-left-style solid
• / Same as the following shorthand writing /
• P border-width 2em 4em
• border-style solid double solid solid

46
Border Properties

• / Another form of shorthand writing of the
  previous example
• The specified values for each property must be
  in the following order ltwidthgt ltstylegt ltcolorgt
• /
• P
• border-top 2em solid
• border-right 4em double
• border-bottom 2em solid
• border-left 4em solid
• / Other examples Applies to all four edges /
• DIV border thin solid blue
• SPAN border 0.2in dotted red

47
Images and Floating Elements

• width, height
• Specify a fixed size for an element (usually an
  image)
• auto ltlengthgt
• img.bullet width 50px height 50px
  
• float
• This property lets elements float into the left
  or right margins with text wrapping around
• none left right
• clear
• Controlling flow next to float
• none left right both

48
SPAN and DIV

• ltSPANgt
• An inline-level element in HTML, meaning that no
  line breaks are inserted before or after the use
  of it.
• Other inline-level element ltbgt, ltimggt, ltemgt,
• ltDIVgt
• A block-level element in HTML, meaning that line
  breaks are automatically inserted to distance the
  block from the surrounding content.
• Other block-level elements ltpgt, lttablegt, ltolgt,
  lth1gt,
• The whole block can be easily positioned on the
  page.

49
CSS Positioning Schemes

• Static
• Follows normal flow
• Relative
• Places an element with respect to where it would
  be statically positioned (i.e. relative to the
  position assigned by the browser).
• Absolute positioning
• An element will be located with respect to its
  parent element (containing box)
• Fixed positioning
• The page scroll, the elements also scroll (remain
  fixed in the page).
• Not supported in IE

50
Useful Positioning Properties

• top, left, bottom, right
• Specifies the top/left/bottom/right sides of the
  layer relative to the parent window
• ltlengthgt auto
• position
• Describes how the position is defined to the
  parent window
• absolute relative static fixed
• visibility
• Determines whether a layer is visible or hidden
• visible hidden

51
Useful Layering Properties

• z-index
• Specifies which elements should appear
  above/below other elements
• ltintegergt auto
• The higher the numbers, the higher the level

52
Using Customized Fonts

• Introduce the system font concept
• _at_font-face
• font-family "Robson Celtic"
• src url("http//site/fonts/rob-celt.eot")
• Known supported font file type
• Portable Font Resources (.pfr) TrueDoc for Nav
  4.0 and IE 4.0 on Windows, Mac, and Unix
  platforms
• Download the software from
• Embeddable Open Type (.eot) Compatible only with
  Explorer 4.0 on the Windows platform
• Download the software from http//www.microsoft.co
  m/typography/web/embedding/weft3/default.htm

53
Other CSS properties

• Changing Mouse Cursor
• Setting clipping area
• List
• Bullets type (can use image)
• Numbering type

54
Useful Resources

• CSS validation service
• http//jigsaw.w3.org/css-validator/
• English translation of CSS selectors
• http//gallery.theopalgroup.com/selectoracle/

55
References

• W3 Schools CSS Tutorials
• http//www.w3schools.com/css/default.asp
• CSS Level 2 Specification
• http//www.w3.org/TR/REC-CSS2/