Style Sheets

1
Style Sheets

• Describe the evolution of style sheets from print
  media to the web
• List advantages of using cascading style sheets
• Create style sheets that configure common page
  and text properties
• Use inline styles
• Use embedded style sheets
• Use external style sheets
• Use pseudo-classes

2
Overview ofCascading Style Sheets

• Style Sheets have been used for years in Desktop
  Publishing to apply typographical styles and
  spacing to printed media
• Cascading Style Sheets (CSS) provides this
  functionality (and much more) for web developers.
  
• CSS is a flexible, cross-platform,
  standards-based language developed by the W3C.
• This text concentrates on using CSS for
  formatting a feature that is well-supported by
  browsers.

3
CSSAdvantages

• Greater typography and page layout control
• Style is separate from structure
• Styles can be stored in a separate document and
  linked to from the web page
• Potentially smaller documents
• No need for ltfontgt tags
• Easier site maintenance

4
CSSDisadvantages

• There is one large disadvantage -- Cascading
  Style Sheet technology is not yet uniformly
  supported by browsers.
• This text will focus on features that are well
  supported by popular browsers.
• This current disadvantage will be less of an
  issue in the future as the browsers comply with
  standards.

5
Types ofCascading Style Sheets

• Inline Styles
• Inline styles are coded in the body of the web
  page as an attribute of an XHTML tag. The style
  only applies to the specific element that
  contains it as an attribute
• Embedded Styles
• Embedded styles are defined in the header of a
  web page. These style instructions apply to the
  entire web page document.
• External Styles
• External Styles are coded in a separate text
  file. This text file is linked to the web page by
  using a ltlinkgt tag in the header section.
• Imported Styles
• Imported Styles are similar to External Styles in
  that they are coded in a separate text file.
  Well concentrate on the other types of styles in
  this text.

6
CSSSyntax

• Style sheets are composed of "Rules" that
  describe the styling to be applied.
• Each Rule contains a Selector and a Declaration

7
CSSSyntax Sample

• body color blue
• background-color yellow
• This could also be written using hexadecimal
  color values as shown below.
• body color 0000FF
• background-color FFFF00

8
Common FormattingCSS Properties

• See Table 9.1 Common CSS Properties, including
• background-color
• color
• font-family
• font-size
• font-weight
• font-style
• text-decoration
• line-height
• text-align
• background-image

9
Using Inline Styles

• Inline Styles are coded as attributes on XHTML
  tags.
• The following code will set the text color of a
  lth1gt tag to a shade of red
• lth1 style"colorCC0000"gtThis is displayed as a
  red headinglt/h1gt
• The following code sets the text in the heading
  to red and italic.
• lth1 style"colorCC0000font-styleitalic"gtThis
  is displayed as a red heading in italic stylelt/h1gt

10
XHTML ltdivgt tag

• The ltdivgt tag
• A container tag
• Used to create a specially formatted division or
  area of a web page. It can be used to format that
  area and places a line break before and after the
  division.
• Use the ltdivgt tag when you need to format an area
  that is separated from the rest of the web page
  by line breaks.
• The ltdivgt tag is also useful to define an area
  that will contain other block-level tags (such as
  paragraphs or spans) within it.

11
XHTMLltspangt tag

• The ltspangt tag
• A container tag
• The ltspangt tag will format an area on the page
  that is NOT physically separated from others by
  line breaks.
• Use the ltspangt tag if you need to format an area
  that is contained within another, such as within
  a paragraph.

12
Questions

• List three reasons to use CSS on a web page.
• When designing a page to use other than the
  default colors for text and background, explain
  why it is a good reason to configure both
  properties text color and background color.
• Write the code to configure an inline style
  attached to a ltdivgt tag. Configure as follows
  background color set to a light green color, text
  set to a dark green color, font set to Arial or
  sans-serif, size set to larger, font weight set
  to bold.

13
Embedded Styles
ltstyle type"text/css"gt body background-color
000000 color FFFFFF
font-familyArial,sans-serif
lt/stylegt

• Apply to an entire web page.
• Placed within a ltstylegt tag located in the header
  section of a web page.
• The opening ltstylegt tag begins the embedded style
  rules.
• The closing lt/stylegt tag ends the area containing
  embedded style rules.
• When using the ltstylegt tag, there is no need for
  the style attribute.
• The ltstylegt tag does use a type attribute that
  should have the value of "text/css".

14
Using CSSwith class
ltstyle type"text/css"gt .new text FF0000
font-styleitalic
lt/stylegt

• class Selector
• Use to apply a CSSrule to a certain"class" of
  elementson a web page and not necessarily tie
  the style to a particular XHTML tag.
• A CSS class is indicated by .classname
• The sample above creates a class called new
  with red italic text.
• To use the class, code the following XHTML
• ltp classnewgtThis is text is red and in
  italicslt/pgt

15
Using CSSwith id
ltstyle type"text/css"gt new text FF0000
font-styleitalic
lt/stylegt

• id Selector
• Use to apply a CSSrule to a certaintype of
  elementon a web page and not necessarily tie
  the style to a particular XHTML tag.
• A CSS id is indicated by idname
• The sample above creates an id called new with
  red italic text.
• To use the id, code the following XHTML
• ltp idnewgtThis is text is red and in italicslt/pgt

16
External Style Sheets

• External Style Sheets are contained in a text
  file separate from the XHTML documents.
• The ltlinkgt tag is a self-contained tag used in
  the header section of an XHTML document to "link"
  the style sheet with the web page.
• Multiple web pages can link to the same external
  style sheet file.
• The External Style Sheet text file is saved with
  the file extension ".css" and contains only style
  rules. It does not contain any XHTML tags.

17
Using anExternal Style Sheet
External Style Sheet color.css
body background-color 0000FF
color FFFFFF

• To link to the external style sheet called
  color.css, the XHTML code placed in the header
  section is
• ltlink rel"stylesheet" href"color.css"
  type"text/css" /gt

18
Questions

• Describe a reason to use embedded styles. Explain
  where embedded styles are placed on a web page.
• Describe a reason to use external styles. Explain
  where external styles are placed and how web
  pages indicate they are using external styles.
• Write the code to configure a web page to use an
  external style sheet called mystyles.css.

19
TheCascade

• This cascade applies the styles in order from
  outermost (External Styles) to innermost (actual
  XHTML coded on the page).
• This way site-wide styles can be configured but
  overridden when needed by more granular (or page
  specific) styles.

20
CSSPseudo-classes
ltstyle typetext/cssgt alink colorFF0000
ahover text-decorationnone
color000066 lt/stylegt

• Pseudo-classes and the anchor tag
• Link default state for a link (anchor tag)
• Visited state of a link that has been visited
• Hover state of a link that the mouse is
  currently over
• Active state of a link that is being clicked

21
CSS buttons

• ltstyle type"text/css"gt
• .button border 2px inset cccccc
• width 100px
• padding 3px 15px
• color ffffff
• background-color 006600
• font-family Arial, Helvetica, sans-serif
• font-size 16px
• font-weight bold
• text-align center
• text-decorationnone
• a.buttonlink color FFFFFF
• a.buttonvisited color cccccc
• a.buttonhover color 66cc33
• border2px outset cccccc
• lt/stylegt

ltdiv align"center"gt lth2gtCSS Buttons!lt/h2gt lta
href"index.htm" class"button"gtHomelt/agt lta
href"products.htm" class"button"gtProductslt/agt lta
href"sevices.htm" class"button"gtServiceslt/agt lta
href"contact.htm" class"button"gtContactlt/agt lta
href"about.htm" class"button"gtAboutlt/agt ltdivgt
22
CSS border-style values
23
CSSStrategies(1)

• Always include end tags (even though browsers
  usually display the page, anyway) for all XHTML
  container tags.
• Design and code the page to look "OK" or
  "Acceptable" -- then use style sheets for
  extra-special effects and formatting.
• Use style sheet components that will degrade
  gracefully. Check the compatibility charts and
  test, test, test, test, test....

24
CSSStrategies(2)

• Use ltdivgt and ltspangt tags to create logical page
  sections. Be aware that Netscape 4.x handles the
  ltdivgt tag better than the ltspangt tag.
• Use style sheets in Intranet environments -- you
  know exactly what browsers your visitors will be
  using.
• Consider using a browser detection script
  (discussed in Chapter 12) to test for a specific
  browser and link to the style sheet coded
  specifically for that browser.

25
Questions

• 1. List the following terms in the order that the
  properties and attributes are applied when using
  CSS.
• Inline styles
• External styles
• XHTML attributes
• Embedded styles

26
Questions

• 2. You are using an external style sheet to
  configure all the pages on a web site. Describe
  your strategy when you encounter a web page that
  needs slightly different styling from the other
  pages.
• How could you use external, embedded, or inline
  styles in this situation?

27
Questions

• 3. You are using CSS pseudo-classes on a web page
  to configure the navigation links to look like
  buttons. You want the regular links in the
  web page content to be configured as they
  normally would (not looking like a button).
  Describe how you could configure the styles and
  XHTML to accomplish this.