CS105 Introduction to Computer Concepts Section 1

							CS105 INTRODUCTION TO
COMPUTER CONCEPTS

CASCADING STYLE SHEETS (CSS)




          Instructor: Cuong (Charlie) Pham
Definition
   Cascading Style Sheets (CSS) form the presentation
    layer of the user interface.
     Structure(XHTML)
     Behavior (Client-Side Scripting)

     Presentation (CSS)

   Tells the browser agent how the element is to be
    presented to the user.
Why CSS?
   CSS removes the presentation attributes from the
    structure allowing reusability, ease of maintainability,
    and an interchangeable presentation layer.
   HTML was never meant to be a presentation language.
    Proprietary vendors have created tags to add
    presentation to structure.
     <font>
     <b>
     <i>

   CSS allows us to make global and instantaneous
    changes easily.
The Cascade
   The power of CSS is found in the
    “cascade” which is the
    combination of the browser’s
    default styles, external style
    sheets, embedded, inline, and
    even user-defined styles.
   The cascade sets priorities on the
    individual styles which effects
    inheritance.
CSS Inheritance
   Allows elements to “inherit” styles from parent
    elements.
   Helpful in reducing the amount of CSS to set styles
    for child elements.
   Unless a more specific style is set on a child
    element, the element looks to the parent element for
    its styles.
   Each style has a numeric specificity value that is
    given based on its selector.
Using Style Sheets
   External Style Sheet
    <link href=“stylesheet” type=“text/css”
      href=“location.css” />
       Also a “media” descriptor (screen, tv, print, handheld, etc)
       Preferred method.

   Embedded Styles
    <style type=“text/css”>
    body {}
    </style>

   Inline Styles
    <p style=“font-size: 12px”>Inline Style Example</p>
CSS Syntax
selector/element {
  property: value;
}

The selector can either be a grouping of elements, an
  indentifier, class, or single XHTML element (body,
  div, etc)
Type (Element) Selector
Specify the style(s) for a single XHTML element.

  body {
    margin: 0;
    padding: 0;
    border-top: 1px solid #ff0;
  }
Grouping Elements
Allows you to specify a single style for multiple
  elements at one time.

  h1, h2, h3, h4, h5, h6 {
    font-family: “Trebuchet MS”, sans-serif;
  }
The Class Selector
 <p class=“intro”>This is my introduction text</p>

 .intro {
   font: 12px verdana, sans-serif;
   margin: 10px;
 }
The Identifier Selector
 <p id=“intro”> This is my introduction text</p>

 #intro {
    border-bottom: 2px dashed #fff;
 }
CSS Selectors
   Identifier or class? What’s the difference?
     An identifier is specified only once on a page and has
      a higher inheritance specificity than a class.
     A class is reusable as many times as needed in a page.

     Use identifiers for main sections and sub-sections of
      your document.
Advanced CSS Selectors
   Descendant Selector
    body h1 { }
    #navigation p {}


   Adjacent Sibling Selectors
    p.intro + span {}


   Child Selectors
    div ol > p {}


   Universal Selector
    * {}


•   Attribute Selectors
    div[href=“http://home.org”]


   Pseudo-Class Selectors
    a:active {}
    #nav:hover {}
The Box Model
   Every element in the DOM
    (Document Object Model)
    has a conceptual “box” for
    presentation.
   The box consists of margin,
    padding, border, content
    (width, height), and offset
    (top, left)
CSS and Semantic Web

    CSS aids in increasing the semantic value of the web
     content.
    Increasing the semantic value of content aids in
     accessibility, and it is integral in the move away from
     (X)HTML to XML driven applications.
    An example would be using an unordered list for
     navigation instead of a table.
        Navigation is truly a “list” of information and not tabular data.
CSS Browser Acceptance
   The advent of modern browsers (IE 5.5+, Firefox
    1.5+, Safari 2+, Opera) has eliminated the fear of
    effectively utilizing CSS.
   There remain certain selectors and attributes that
    vary in browser acceptance, but IE7, FF 2, Safari 3
    all accept the CSS 2.1 specification.
   There no longer remains any excuse not to utilize
    CSS in your application.
CSS Fonts
   Font-family
   Font-weight
   Font-style
   Font-size
CSS Units & Colors
   Units
       %
       in
       cm
       mm
       em
       px
       pt
   Colors
       color name (red, etc)
       rgb(x,x,x)
       #rrggbb (HEX)
CSS Layout
   Margin
   Padding
   Border
   Z-index
   Positioning
   Width
   Height
   Float
   Text-align
   Vertical-align
CSS vs Table Layouts
   Tables are designed only for tabular data and not
    for layout.
     Reducessemantic value of markup
     Makes updating difficult and impractical

   CSS allows positioning that reduces overall markup
    size, form, and allows layout to be changed by only
    editing a stylesheet.
   CSS layouts also improve accessibility, because
    screen readers turn off style sheets allowing only
    the content to remain.
CSS Text
   Text-indent
   Text-align
   Text-decoration
   Letter-spacing
   Text-transform
   Word-spacing
   White-space
CSS Background
   Background-color
   Background-image
   Background-position
   Background-repeat
CSS Lists
   List-style
   List-style-image
   List-style-position
   List-style-type
CSS Shorthand
   Consolidates many styles into a single declaration.

    font-family: verdana, sans-serif;
    font-weight: bold;
    font-size: 12px;

     font: bold 12px verdana, sans-serif;

    padding-top: 5px;
    padding-right: 8px;
    padding-bottom: 5px;
    padding-left: 10px;

     padding: 5px 8px 5px 10px;
CSS and Accessibility
   Section 508 Standards
       “Web pages shall be designed so that all information conveyed with color is also available
        without color, for example from context or markup.” (1194.22C)
       “A text-only page, with equivalent information or functionality, shall be provided to make a web
        site comply with the provisions of this part, when compliance cannot be accomplished in any
        other way. The content of the text-only page shall be updated whenever the primary page
        changes.” (1194.22K)
   By moving all presentation into style sheets and removing tables from layout
    the content is presented in an optimal manner to screen readers and other
    accessibility tools.
   CSS 2.1 has “aural” properties that can be applied to content.
Recommendations
   Remove antiquated browser checks and deliver different sheets.
   Consolidate all our main styles into site.css in the App_Themes folder.
   All CSS files should be in the App_Themes folder and have a .css
    extension (not .txt).
   Make a decision on what standard colors, fonts, alignment, etc
    should go into the app.
   Remove spacer.gifs, table layouts, and other browser hacks in lieu of
    proper CSS.
   Make a decision on how individual modules should implement their
    styles.
   Make a decision on how the CSS file is to be structured.
   Move inline presentation formatting to CSS external sheets.
Resources
   http://www.csszengarden.com
     This   is CSS at its finest
   http://www.w3.org/Style/CSS/
     The    Official CSS Site
   http://css.maxdesign.com.au/
     Australian    firm, very professional
   http://webmonkey.wired.com/webmonkey/referenc
    e/stylesheet_guide
     Where     you can CSS and Web Design