Learning Center
Plans & pricing Sign in
Sign Out



									Cascading Style Sheets

Why use Cascading Style Sheets?
• Allows you to set up a series of rules for all pages
  in a site.
• The series may be changed by making a single
  change to the rule—without requiring changes to
  all the pages in the site.
• A separate file can be defined for the rules.
• Standards-compliant
 How to add CSS to HTML Tags
• You can use the tags <style> </style>to list
  a series of rules embedded in the header
• The styles are used to define specific sets of
  characteristics for HTML tags, classes, or
  IDs. Classes can be added to tags by using a
  class attribute : <p class="fred">
         Block vs. inline tags
• Block-level tags such as <p> add a line
  break before and after the tag.
  – <div> is block-level
• Inline tags such as <b> do not.
  – <span> is inline
• Don't confuse these with inline styles, e.g.:
  – <p style="color:red";>
        Styles inline: in the Tag
• CSS rules consist of
  selector {property1:value1; property2:value2;}.
• (For inline styles, the rules are enclosed in
• <h1 style="font-family: 'Times New
  Roman'; font-variant: small-caps; color:
  red;"> Hello World </h1>
  Style Sheets Defined in <head>
• Surround with <style> … </style> tags. For HTML
  include comments:
  <style type="text/css">
  /* CSS rules go here */

• Selectors can be HTML tags (h1), classes (.fred), ids
  (#fred), pseudo-classes (.fred:hover), pseudo-elements
  (.fred:first-letter) and attributes (img[alt]). Ids can only be
  used once per XHTML page.
   Sample Style sheet in Header
<style type="text/css">
h1 {font-family: Georgia, ‘Times New Roman’, Times, serif;
   color: red; text-align: center;}
h2 {font-weight: bold; color: orange;}
.dropcap {font: 100%/200% serif; color: blue; margin-top:
   1em; position: relative; left: 10px; top: 10px;}
p {color: red; font-family: courier, monospace; padding:
#fred {border: 2px solid #cf4;}
(Use vertical format as in Zeldman Chap. 9)
        Using the Style Sheet
• When you use the H1, H2 or P tags the
  styles defined in the style sheet are applied.
• To use the .dropcap class you may
  – Either add the class to the tag
     • .dropcap and add the class name <p
  – Define a set of div or span tags and add the
    attribute class=" "
     • <span class="dropcap">
           External Linking
• You may also define a style sheet as a text
  file which includes the defined set of rules.
• The file contains only the selectors and the
  property: value pairs.
• The file is the same as the rules in the
  <head> element without the <style></style>
• The external file is then connected to the HTML page by
  using the tag
• <link rel="stylesheet" href="xxx.css" type="text/css" />
  (note /> for XHTML)
• The xxx.css is the name of the file path that contains the
  list of rules.
• You should end the file with the extension css to be sure
  you know what the file contains.
• You may also import one CSS file into another:
  <style type="text/css"> @import url(other.css)</style>.
   Order of style rules (cascade)
• The last definition is the one which is applied to
  the tag.
• So if a css file is attached with a definition for p
  tags and there is an inline definition for the p tag
  after the reference to the embedded or external
  file, the inline definition will apply. In general
• If the user has a set of defined browser
  characteristics which conflict with the css, the user
  characteristics will override the css definition.
           Defining Classes
• You can define a set of specifics which may
  be applied to a series of tags.
• The definition is prefaced with a
  .classname. You reference the class name
  in the HTML tag by using the attribute
               Defining IDs
• In the style sheets, you may also define an ID,
  which acts like a class except there can be only
  one per page <div class="header">. Note in
  HTML this would be replaced by <header>
• The ID always starts with a pound/hash sign (#):
• To apply the ID tag to the HTML tag, you add the
  attribute <p id="idname">
• See Zeldman chapter 8 for reasons to use id.
• #area1 {color: red}

• < div id="area1">
   Multiple Tags with the same
    Style (grouped selectors)
• Separate the list of tags by commas and the
  place the set of style rules in parentheses for
  the entire group.

• h1, h2, h3 {color: blue;}
  Descendant (contextual) Selectors
• You can pass a style definition down a list of related
  selectors. E.g.
  #copy li p {font-size: 1.5em;} (Read this right to left. All p
  that are descendants of li that are descendants of an
  element with id="copy" get this rule.)
• The selectors are separated by a space.
• The first selector in the list is the parent, the others are
• Changes to the first selector will be inherited by the next
CSS 2.1 selectors (IE 7+, MOSe)
• Child selectors
  li>p {color: red;} (all p that are children of an li)
• Adjacent siblings
  li+li {color: #234;} (all li that are adjacent siblings of li)
• Universal (wild card) selector
  * {color:red;}
• #copy * i{color:#123456;}
• Attribute selectors
  a[href="page2.html"] {color: black;} OR
  div[align] {font-family: serif;}
• Most common are
  :link, :visited, :hover, :active. E.g.
  a:hover {text-decoration:underline;}
• Also (2.1) :first-child, :focus, :lang()
• With IE7+ (and always with Firefox) can
  use the "whatever:hover" e.g.
  li:hover {text-decoration:underline;}
• Not often used, but Gillenwater uses :before
  and :after for "generated content."
• :first-letter, :first-line, :before, :after
           Some other options
• !important tag
• Adding the !important to the style rule will
  override any other rule.
• Media queries: in <link …> or <style>
  media="screen" media="print" media="handheld"
  media="all" etc.
• .media="print" — used for a print page style sheet.
  (Resume project)
• media="screen" – used for a browser display [but
  omit if only sending to a browser]
            Competing rules
• The cascade as described earlier
• Inheritance (rules passed to descendants)
• Specificity (id=100, class=10, tag=1) (sort
• Lower rule in a style sheet or declaration
  h1 {color:blue;}
  h1 {color:red;} so h1 will be red
• CSS comments look like JavaScript:
  <style type="text/css">
  /* Multiple lines of comment go here and can continue
  until the closing mark */
  p {color:red;}
• Conditional comments are best way to serve IE rules. E.g.
  <!--[if IE 7]>
  <link type="text/css" rel="stylesheet" href="ie7.css">
  OR <!--[if lte IE 7> ... <![endif]-->
  Or <!--[if IE]> ... <![endif]-->
      Defaults for font-family
• serif—small ornamentation at the end of the
• sans-serif – not serif
• monospace—all letters occupy same
  amount of space
• cursive—resembles handwriting
• fantasy—decorative fonts that are not the
  same as the other styles
                Setting Font
• font-family: font stack (give the one you prefer
  first); multiple word families need quotes
  font-family: "courier new", courier, monospace;
• @font-face is used to define the name and location
  of a font to be downloaded to the user’s computer.
• @font-face{font-family:nametodownload;
• Best idea—use browser-safe screen fonts
  (Georgia, Verdana)
         Other font properties
• font-size:
  – Absolute (pt, in cm, mm)
  – Relative (sort of) (px, em, %)
  – Absolute expression
     • xx-small, x-small, small, medium, large, x-large,
     xx-large (smaller, larger are relative)
• font-style:
  – italic
•   font-weight:
    – normal, bold, lighter.
    – Or use a value of 100 to 900 in increments of 100.
• Creating smallcaps
    – font-variant
        • small-caps
        • normal
• Shorthand: font options separated by spaces after the font:
  property. E.g.
  h1 {font: bold italic small-caps 12px/18px verdana, serif;}
• At a minimum, need font-family, font-size. E.g.
  h1 {font: 12px georgia, "times new roman", times, serif;

To top