CSS � Cascading Style Sheets by qHIT0G6z


									CSS – Cascading Style Sheets

CSS - intro
   Introduced in late 1996
   Provides a way to separate presentation from structure
   HTML
     Originally not intended to deliver graphic content and

     Designed to allow authors to define structure of

   CSS
     Allows greater control of Web page design

     Works with existing HTML and XHTML tags to tell

       them how to behave

CSS – intro con’t

   Initially not well supported
   Now recommended by W3C – many design related
    HTML tags were slated to be made obsolete in favor of
    CSS (these tags are said to be deprecated)
   There exist other types of style sheets:
     JavaScript Style Sheets

     XSL – Extensible Style Sheets

   CSS is primary one used on the Web

CSS - what it can do

   Text formatting and colors:
       Choose specific fonts and font sizes
       Set bolds, italics, underlines, text shadows
       Change text color and background color
       Change link colors or remove underlining
       Indent text, center text
       Transform sections of text to upper-, lower-, or
        mixed case
       Other special effects

CSS – what it can do

   Graphical appearance and layout
       Set a background graphic and control its location,
        tiling, and scrolling
       Draw borders and outlines around sections of a
       Set vertical and horizontal margins on all elements
        as well as margins for the page itself
       Flow text around images as well as other text
       Redefine how HTML tables and lists are presented

CSS – what it can do
   Dynamic actions
     Mouseover effects on links

     Dynamically inserted content before or after HTML
     Automatic numbering of page elements

   Example:
       (without formatting)
       (with formatting)
    Style sheet:

CSS - definitions

   Style sheet
    File consisting of a number of CSS rules
   Cascade
    How style preferences are combined together when they
      appear to conflict
   Rule
    Defines what the HTML should look like and how it should
      behave in the window
    Example: All <h1> tags should be presented with a green
      background and blue text

CSS – parts of a CSS rule
                       selector {property: value;}

                         Example: p {color: blue;}

   selector – 3 types of CSS selectors:
    1) XHTML selector – indicates a specific mark-up element like
       <h2> or <p>
    2) Class selector – can be applied to any XHTML tag as you wish;
       eg. <p class = “bluecolor”>
    3) ID selector – like class selectors, but usually applied once on the
       page to a particular XHTML tag for use with a JavaScript
       function; eg. <div id = “topofpage”>
   declaration – {property: value;}
     property – attribute to be defined
     value – defines property

CSS – where to put the rules
In an external document:
     These are called external or linked
     Used to affect a complete Web presentation
     Style changes only need to be made in one place, rather than
      in each individual document
     Produces a presentation with a consistent look and feel
     Create separate file with .css extension
         Use basic text editor like Notepad or Wordpad (Windows environment),
          SimpleText or TextEdit (Mac environment), or pico (UNIX environment)
         Use style sheet editor or some XHTML editors include support for CSS
         File needs to be located within public_html
         Good idea to place all style sheets in sub-directory of public_html called
          either CSS or STYLES
         Change permissions on .css file to be world readable; change
          permissions on style sheet sub-directory to be world executable

CSS – where to put rules (con’t)
    Example:
     Basic style sheet:
     /* mystyles.css */
     /* created for CS403-10 */
     body { font-family: Arial;
                          color: black;
                          background-color: red; }
     h1     { color: green; }

     Linking the style sheet to XHTML page:
     <link type = “text/css” rel = “stylesheet” href = “CSS/mystyles.css”>

 CSS – where to put the rules (con’t)
In the head of the XHTML document:
     These are called embedded or internal
     Rules are in the same file as HTML so editing is easier at first – good for
      development purposes (plan to migrate rules to separate files later)
     Good for for rules that apply only to a specific page (this helps keep size of
      global style sheet relatively small)
     Use the <style> tag in the head of the document
     Example:
      <style type = “text/css”>
      <! - -
      h2 { color: red; }
      address { font-family: Verdana, sans-serif;
                          font-size: smaller; }
      - ->

CSS – where to put the rules (con’t)
In an XHTML tag:
     These are called inline
     Inline CSS is very similar to using XHTML presentation
      attributes – it only affects that single instance of the element
     Easier to add to your page as you go along; harder to
      maintain since they are scattered throughout your source
     Style attribute can be set on nearly any XHTML tag that is
      displayed by the browser
     Use when you want to over-ride embedded or linked style
     Does not contain selector – tag itself serves as selector
     Example:
            <table style = “font-family: Arial; font-size: large;”>

CSS – composing rules

   Combining rules
    If rules share same selector you can combine them:
    p { color: blue; }
    p { font-size: large; }
       can be combined as:
    p { color: blue;
           font-size: large; }
    p { color: blue; font-size: large; }

CSS – composing rules

   Combining rules
    If rules share same declaration, you can combine
    p { color: blue; }
    address { color: blue; }
       can be combined as:
    p, address { color: blue; }

CSS – representing colors in CSS

   Straightforward hex notation:
                 body { color: #CC66FF; }
   Short hex:
                  body { color: #C6F; }
   rgb function:
       Provide a decimal triplet of rgb numbers (0 – 255)
        separated by commas:
            body { color: rgb(204,102,255); } OR
       Provide percentages:
            body { color rgb(80%, 40%, 100%); }

CSS – representing colors in CSS (con’t)
   Color names – there are 16 color names supported by browsers:

                  aqua                   navy

                  black                  olive

                  blue                  purple

                 fuchsia                  red

                  gray                   silver

                  green                  teal

                  lime                   white

                 maroon                 yellow

    CSS – classes and ids
    In addition to setting styles based on HTML elements, you can
     also have rules based on 2 optional HTML attributes: class and id
    Class
      Used to define a related group of HTML elements on a page

      Elements within a class can be of any type

      To create it, just name it:

                            <p class = “abc”> ... </p>
      Once you have defined a class in your HTML you can use it as a
        class selector in CSS; class selectors are indicated by a . before
        the name:
                                .abc {color: blue; }
      You can combine an element selector with a class selector; then
        only those elements that are members of the class are selected:
                            p.abc { font-family: Arial; }

CSS – classes and ids (con’t)

   id
     Similar to the class attribute but more restricted
     Must be unique – only one tag on a page can have a

      given id
     Id’s attribute value must begin with a letter:

     Example:

          <a href = “next.html” id = “next”>Next Page</a>
     In CSS rule:
        #next { font-size: large }

CSS – using class selectors

   Combine class selectors with <div> tags to
    designate specific sections of a page that should
    receive special styling:
      <div class = “headofpage”>
      <h1>Great Places to Eat in Portsmouth</h1>...
      <div class = “footofpage”>
      <hr />
      &copy; Ellen Hepp, 2004. ...

CSS – using class selectors - <div> and <span> (con’t)
   <div> tag
       Divides your document into separate, distinct, sections
       Can be used strictly as organizational tool without
        formatting but becomes more effective if you add class
        attribute to label the division
   <span> tag
       Delimits a portion of xhtml content
       Allows you to change a portion of text
       Browsers treat span as another physical (content-based)
        style tag but default is to leave it alone
       E.g., <span style = “font-size: larger;”>Hello!</span>

CSS – using class selectors (con’t)

   In CSS file:
      /* Top Heading of Page /*
      .headofpage { color: white;
                      background-color: maroon;
                      font-family: Verdana, sans-serif; }
      /* Bottom of Page */
      .footofpage { color: green;
                      background-color: white;
                      font-family: “Times New Roman”, serif;

CSS – pseudo-classes and elements

   Pseudo-class selector is based on a set of
    predefined qualities that an HTML element
    can have:
   Can stand alone but is usually used with a
    type selector
     a:link {color: red; }

CSS – pseudo-classes and elements (con’t)
   Example: Typical body tag in HTML
<body bgcolor = “#FFFFCC” background = “mybg.jpg” text = “#000066”
  link = “#FF0000” vlink = ‘#999999” alink = “#FFCC99”>
   To accomplish same thing using CSS (XHTML)
body { background-color: #FFFFCC;
        background-image: url(mybg.jpg);
        color: #000066; }
a:link { color: #FF0000; }
a:visited { color: #999999; }
a:active { color: #FFCC99; }

CSS – simple CSS properties for text formatting
   Color – sets the foreground color of the element:
                                 h1 {color: blue; }
   Background-color – sets the background color
                    body { background-color: purple; }
   Font-size – (easy method – think tee-shirt sizes) give value relative
    to the user’s default text size
     Default text size has value of “normal”

     Larger sizes go up in increments of about 20%
    xx-small * x-small * small * normal * large * x-large * xx-large
       Can use relative values larger and smaller
       Examples:
        dl { font-size: larger; }
        em { font-size: xx-large; }

CSS - simple CSS properties for text formatting
   Font-family – can specify specific font (Arial) and/or
    generic font family (sans-serif)
   If a font is specified that is not installed on user’s
    machine, browser will use default font if other options are
    not listed
   Examples:
    body {font-family: Arial, sans-serif; }
    h1 { font-family: “Courier New”, monospace; }
    h2 { font-family: “Times New Roman”, serif; }
   5 generic font families in CSS are:
          serif * sans-serif * cursive * fantasy * monospace

CSS - simple CSS properties for text formatting

   Other font properties:
       font-weight (makes text bolder or lighter)
           Specify values 100 to 900 (normal is 400) in increments of 100
           Specify bold (700), bolder (+100), lighter (-100)
       font-variant (creates “small caps” effect)
           Specify normal, small-caps
       font-style (creates italic or slanted effect)
           Specify italic, normal, oblique
       line-height (sets the height of the line but not text size)
           Specify normal, measurement, multiplier, percentage

CSS - simple CSS properties for text formatting

   font shorthand property
     Shorthand property has 2 effects: sets properties to
      default values and assigns specified values to
      designated properties
     Shorthand for: font-family, font-size, font-weight, font-
      variant, font-style, and line-height
     Format:

      selector { font: style variant weight size family }
          note: values for weight, size, and family must be in
          that order!
     Example:

      body { font: oblique small-caps small Verdana }

CSS - simple CSS properties for text formatting

   Special text effects:
    selector { text-decoration: blink
                                   none }
   Removing underlines on hyperlinks:
    a:link, a:visited { text-decoration: none; }
    a:hover { text-decoration: underline; }

CSS – backgrounds and background colors

   background-color property:
       Similar to bgcolor attribute in html
       Gives you more flexibility than bgcolor because it lets you
        change the background for specific parts of the page
       Values the background-color can take:
           Color names, rgb codes, triplets of numbers, or triplets of
           transparent (default) – whatever background already exists
            will be shown
           inherit – setting a value equal to that of the containing block’s

    CSS – backgrounds and background colors (con’t)

   background-image property
       Similar to background attribute in <body> tag
       Values for the background-image property:
           Image address url
              url will be calculated relative to wherever the rule appears
             Example:

            Selector { background-image: url(bg.gif); }
            Selector { background-image: url(‘bg.gif’); }
            Selector { background-image: url(“bg.gif”); }

CSS – backgrounds and background colors (con’t)

     background-repeat property
         Specifies whether or not the background image
          tiles across the screen
         Values for the background-repeat property:
             repeat (default)
             repeat-x
             repeat-y
             no-repeat
             inherit

    CSS – backgrounds and background colors (con’t)
   background-position property
   Use to change the location of the initial image
   Consists of two size values or percentages (one for
    horizontal and one for vertical) OR if only one value is
    given, it sets the horizontal position
   Values:
     A number and a unit (10px or 2em)
           In CSS 1em is defined as the total height of the current font in
           px stands for pixel
       A percentage (50% 75%)
       Word values: top, bottom, left, right, center

    CSS – backgrounds and background colors (con’t)

    background-attachment property
      Images normally scroll with rest of the page but you

       can modify so that image does not move
      Values:

        scroll (default)

        fixed – image does not move relative to the original
         position of the page
        inherit – value does not inherit from containing
         block unless value is explicitly set to inherit

    CSS – backgrounds and background colors (con’t)

    background shorthand property
      Allows you to set several properties at once

      List the values you want (in any order) as the value for

       background (values you do not set will be set to their
       default values)
      Example:

     body { color: white;
               background: url(“bg.gif”) repeat-y fixed
                 top left red; }

CSS – alignment and spacing

   text-align property – defines the way in which text lines
    up with the left or right margins
   Values:
     center (centers the content)

     justify (justifies text on both sides)

     left (aligns content on the left)

     right (aligns content on the right)

   Example:
    h1 { font-family: Verdana, sans-serif;
           text-align: center; }

CSS – alignment and spacing (con’t)

   text-indent property - indents the first line of an
    element by adding blank space (usually seen with
    <p> tags)
   Example:
    p {text-indent: 3em }
   Values:
       measurement (eg., 5em or 15px)
       negative measurement (sets a hanging indent)
       Percentage (value based on size of containing box)

CSS – alignment and spacing (con’t)
   vertical-align property – most useful for creating
    superscripts or subscripts
   Used only for inline elements OR table cells
   Values: baseline, bottom, middle, sub, super, text-
    top, text-bottom, top, or some measurement (+ or -)
    or percentage (+ or -)
   Example:
    .power { vertical-align: super;
                font-size: smaller; }
    Use in html by setting class attribute:
    x<span class = “power”>2</span> = 64

CSS – alignment and spacing (con’t)

   white-space property – allows control of whitespace
    condensation and word wrapping
   Values:
     normal (normal word wrapping and whitespace condensation)

     nowrap (condenses whitespace but does not wrap lines)

     pre (wraps lines as in the source)

   Example:
    .poem { white-space: pre; }
    Use in html by setting class attribute:
    <div class = “poem”> ...

CSS – how cascading works
   Cascade determines what rules apply:

   mystyles.css:
    body { background-color: white;
           color: black; }
    h1 { background-color: blue;}

   XHTML document:
    <head><title> … </title>
    <link type = “text/css” rel = “stylesheet” href = “mystyles.css”>
    <style type = “text/css”>
    .myclass { background-color: red; }
    h1 { color: yellow; }
    <h1 style = “background-color: green;”>Hello <em class = “myclass”>World</em>!</h1>
See result at: http://pubpages.unh.edu/~ehepp/CSS/CSSexperiment.html


To top