Chapter%206:%20Cascading%20Style%20Sheets

1
Chapter 6 Cascading Style Sheets

• CIS 275Web Application Development for Business I

2
CSS Introduction

• CSS stands for ____________ style sheets because
  multiple style definitions will cascade into one.
• CSS is a technology for __________ HTML elements.
• Styles were added to HTML ____ to separate
  structure from presentation in web page.
• Style sheets can be
• External (stored in a one or more separate ______
  files)
• Internal (using the ________ tag in the ltheadgt
  element)
• Inline (using the ________ attribute)
• Styles take effect in order of specificity such
  as, inline, internal, external, ________ default

3
CSS Syntax I

• The general CSS syntax is selector property
  value
• For example, body color black
• For multiple properties, use semi-colons
• p text-align center color red font-family
  sans serif
• This is more _________
• p
• text-align center
• color red
• font-family sans serif

4
CSS Syntax II

• For _________ selectors, use grouping as follows
• h1, h2, h3, h4, h5, h6
• color green
• The class attribute
• In the CSS file,
• p.right text-align right
• In the HTML file,
• ltp class"right"gt This paragraph will be
  right-aligned. lt/pgt
• You can use .right text-align right and apply
  it to several different tags, such as ltpgt, lth1gt,
  lttdgt, etc. 

5
CSS Syntax III

• The id attribute is similar to the _______
  attribute
• In the CSS file,
• intro font-size110 font-weightbold
  color0000ff background-colortransparent
• In the HTML file,
• ltp idintro"gt This paragraph uses the intro
  style. lt/pgt
• Also in the CSS file,
• pintro font-size110 font-weightbold
  color0000ff background-colortransparent
  will apply ONLY to ltpgt tags with the idintro
  attribute
• A CSS ________ format / This is a comment /
• A CSS validator http//jigsaw.w3.org/css-validato
  r/

6
CSS How to Apply

• External style sheet (applies to ________ pages)
• ltheadgt
• ltlink rel"stylesheet" type"text/css"
  href"mystyle.css" /gt
• lt/headgt
• Internal style sheet (for a _______ page)
• ltheadgt
• ltstyle type"text/css"gt
• hr color sienna p margin-left 20px body
  background-image url("images/back40.gif")
• lt/stylegt
• lt/headgt
• Inline styles (for a unique element, _____ if
  possible)
• ltp style"color sienna margin-left 20px"gt This
  is a paragraph lt/pgt

7
Background

• body
• background-color yellow
• h1
• background-color 00ff00
• h2
• background-color transparent
• p
• background-color rgb(250,0,255)

• lthtmlgt
• ltheadgt
• ltlink rel"stylesheet" type"text/css"
  hrefmystyle.css" /gt
• lt/headgt
• ltbodygt
• lth1gtThis is header 1lt/h1gt
• lth2gtThis is header 2lt/h2gt
• ltpgtThis is a paragraphlt/pgt
• lt/bodygt
• lt/htmlgt

8
Various Background Effects

• Background image
• body background-image url("../images/bgdesert.jp
  g")
• __________ a background image
• body background-image url("../images/bgdesert.j
  pg")background-repeat repeat-y
• ____________ a background image (IE only)
• body background-image url("../images/smiley.gif
  ") background-repeat no-repeat
  background-position center center
• ___________ a background image (IE only)
• body background-image url("../images/smiley.gif"
  ) background-repeat no-repeat
  background-attachment fixed
• One ____________
• body background 00ff00 url("../images/smiley.g
  if") no-repeat fixed center center

9
Text

• _________ text
• h1 text-decoration overline
• h2 text-decoration line-through
• h3 text-decoration underline
• a text-decoration none
• ______ control
• use ltp class uppercasegtlt/pgt
• p.uppercase text-transform uppercase
• p.lowercase text-transform lowercase
• p.capitalize text-transform capitalize

• Setting text _____
• h1 color 00ff00
• Letter ________ (IE only)
• h1 letter-spacing -3px
• h4 letter-spacing 0.5cm
• ________ text
• h1 text-align center
• __________ text
• p text-indent 1cm

10
Font

• Set the font _________
• h3 font-family times
• p font-family arial, sans-serif
• p.sansserif font-family sans-serif
• Use ltp classsans-serifgtlt/pgt in HTML document
• Set the font _______
• h1 font-size 150
• p font-size 14pt

• Set the font _______
• h1 font-style italic
• h2 font-style normal
• p font-style oblique
• Set the font _________
• p.thick font-weight bold
• One declaration
• p
• font italic small-caps 900 12px arial

11
Border

• Border _______
• p.dotted border-style dotted
• __________ borders
• p.soliddouble border-style solid double
• Border ________
• p.one border-style solid border-color
  0000ff
• Border ________
• p border-style solid border-bottom-width
  15px
• One declaration
• p border medium double rgb(250,0,255)

12
Margin and Padding

• Left margin
• p.margin margin-left 2cm
• One declaration (top, right, bottom, left)
• p.margin margin 2cm 4cm 3cm 4cm
• Padding in a table cell (between cell edge and
  content)
• td padding-top 2cm
• One declaration (top-bottom and left-right)
• td.twovalues padding 0.5cm 2.5cm

13
List

• Unordered list style type
• ul.disc list-style-type disc
• Ordered list style type
• ol.lroman list-style-type lower-roman
• Using images
• ul list-style-image url("../images/arrow.gif")
• List item placement
• ul.inside list-style-position inside
• Nested elements (applies to a list within another
  list)
• ul ul text-decoration underline margin-left
  .5cm
• One declaration
• ul list-style square inside url("../images/arrow
  .gif")

14
Dimension Properties

• Controlling the dimensions of ________
• img.normal height auto width auto
• img.big height 80px width 100px
• img.small height 30px width 50px
• Controlling the _______ between lines
• p.increase line-height 1cm

15
Classification I

• The display property
• div display none Contents of ltdivgtlt/divgt are
  invisible
• p display inline Contents of ltpgtlt/pgt display
  continuously
• Images may ________ next to text
• img float left Image will float to the left of
  text.
• Positioning text _________ to normal
• h1.shift positionrelative left20 20 pixels
  to left position
• Positioning text at _________ location
• h1.x positionabsolute left100 top150
• Making an element __________
• h1.two visibilityhidden

16
Changing the Cursor I

• ltspan style"cursorauto"gt
• Autolt/spangt
• ltspan style"cursorcrosshair"gt
• Crosshairlt/spangt
• ltspan style"cursordefault"gt
• Defaultlt/spangt
• ltspan style"cursorhand"gt
• Handlt/spangt

• ltspan style"cursormove"gt
• Movelt/spangt
• ltspan style"cursore-resize"gt
• e-resizelt/spangt
• ltspan style"cursorne-resize"gtne-resizelt/spangt
• ltspan style"cursornw-resize"gt
• nw-resizelt/spangt

17
Changing the Cursor II

• ltspan style"cursorn-resize"gt
• n-resizelt/spangt
• ltspan style"cursorse-resize"gt
• se-resizelt/spangt
• ltspan style"cursorsw-resize"gtsw-resizelt/spangt
• ltspan style"cursors-resize"gt
• s-resizelt/spangt

• ltspan style"cursorw-resize"gtw-resizelt/spangt
• ltspan style"cursortext"gt
• textlt/spangt
• ltspan style"cursorwait"gt
• waitlt/spangt
• ltspan style"cursorhelp"gt
• helplt/spangt

18
Positioning I

• Positioning HTML __________ on the screen
• h1 position absolute top 100px left 100px
• p position absolute bottom 80px right 40px
• Controlling the display if _______ exceeds space
• In the style sheet
• div background-color00FFFF width150px
  height150px overflow scroll
• In the HTML document
• ltdivgtYou can use the overflow property when you
  want to have better control of the
  layout.ltbrgtltbrgtTry to change the overflow
  property to visible, hidden, auto, or inherit
  and see what happens. The default value is
  visible.lt/divgt

elements
content
19
Positioning II

• Aligning images vertically within _____
• In the style sheet
• img.top vertical-aligntext-top
• In the HTML doc
• ltpgtThis is an ltimg class"top border"0"
  src"../images/alert_red_bg.gifgt image inside a
  paragraph.lt/pgt
• z-index is used to _________ HTML elements.
• This code positions an image in the upper left
  corner AND allows text to display over it.
• img.x positionabsolute left0 top0
  z-index-1
• Elements with larger z-index values display on
  top of those with smaller z-index values.

20
Pseudo-classes

• A pseudo-class is designed to add effects to some
  __________.
• The syntax is
• selectorpseudo-class property value
• ________ pseudo-classes (MUST occur in this
  order)
• alink color FF0000 / unvisited link
  /
• avisited color 00FF00 / visited link /
• ahover color FF00FF / mouse over link /
  
• aactive color 0000FF / selected link /
• An interesting effect (see other examples)
• a.twolink color ff0000
• a.twovisited color 0000ff
• a.twohover font-size 150

21
Pseudo-elements

• A pseudo-element is similar to a pseudo-class.
• The first line will display special formatting
• p font-size 12pt
• pfirst-line color 0000FF font-variant
  small-caps
• The indicated effect will occur before/after an
  occurrence of an element
• h1before content url(beep.wav)
• h1after content url(beep.wav)

22
The first-child Pseudo-class I

• The indicated effect applies only to the
  first-child element of the specified element
• In style sheet
• divfirst-child p text-indent 25px
• In HTML doc
• ltdivgt
• ltpgt First paragraph in div. This paragraph will
  be indented. lt/pgt
• ltpgt Second paragraph in div. This paragraph will
  not be indented. lt/pgt lt/divgt
• ltdivgt lth1gtHeaderlt/h1gt ltpgt The first paragraph
  inside the div. This paragraph will not be
  indented. lt/pgt lt/divgt

23
The first-child Pseudo-class II

• The following applies to an ltagt that is the
  first-child of any element
• In the style sheet
• afirst-child text-decoration none
• In the HTML doc (only the first ltagt is affected)
• ltpgt
• Visit lta href"http//www.w3schools.com"gt
  W3Schools lt/agt and learn CSS!
• Visit lta href"http//www.w3schools.com"gt
  W3Schools lt/agt and learn HTML!
• lt/pgt

24
Media Types

• Media Types allow you to specify how documents
  will be presented in different media.
• In the style sheet
• _at_media screen p.test font-family
  verdana,sans-serif font-size 14px
• _at_media print p.test font-family times,serif
  font-size 10px
• _at_media screen, print p.test font-weight bold