Introduction to CSS Training

As presented by David J. Hark

CSS3 Logo

CSS3 Logo

"Where is the wisdom we have lost in knowledge?
Where is the knowledge that we have lost in information?"
T.S. Eliot , The Rock (1934) pt.1

 

On this page a hyper link that has a "title" atribute has a dashed underline. A good example of the Attribute Selector in use.

 

  1. Crash Course in CSS
    1. Benefits of Cascading Style Sheets
      1. CSS Accessibility Features
    2. CSS Rules
      1. CSS syntax
    3. Selectors
      1. Selectoracle
      2. Selectutorial - CSS selectors
      3. Selectors  (footnote p. 3)
      4. Understanding CSS Selectors
      5. Taming Advanced CSS Selectors - Smashing Magazine
      6. The 30 CSS Selectors you Must Memorize
      7. Browser Support  (footnote p. 3)
      8. Pseudo Classes
      9. Pseudo-elements
      10. Attribute Selectors in CSS
      11. Adjacent selectors
      12. Descendant selectors
      13. Selecting by Siblings
      14. Combining Selectors
      15. Selector Grouping
      16. Pseudo-Elements and Pseudo-Classes
        1. Pseudo Elements
        2. CSS Pseudo-elements
          1. pseudo-element-selectors
            1. :first-line pseudo-element
            2. :first-letter pseudo-element
            3. :before and :after pseudo-elements
        3. pseudo-class-selectors
        4. CSS Pseudo-classes
        5. :first-child pseudo-class
        6. The link pseudo-classes: :link and :visited
        7. The dynamic pseudo-classes:   :hover,  :active,  and   :focus
        8. The language pseudo-class:   :lang
      17. CSS 2.1 selectors, Part 1  (basics of selectors plus the universal, type, id, and class selectors)
      18. CSS 2.1 selectors, Part 2 (combinators, combined selectors, grouping, and attribute selectors)
      19. CSS 2.1 selectors, Part 3  (pseudo-classes and pseudo-elements)
      20. Forgotten CSS selectors
      21. CSS 3 selectors explained
      22. Grouping
      23. Vendor-specific Properties
      24. 4.1.2.1 Vendor-specific extensions
    4. Precedence of Selectors
    5. CSS Specificity And Inheritance
    6. The Cascade
      1. Assigning property values, Cascading, and Inheritance
      2. Cascading Style Sheets: The Cascade
        1. !Important Declaration
        2. !important Declarations  (see notes)
        3. The importance of the !important CSS declaration
        4. !important CSS Declarations: How and When to Use Them
        5. Override Inline Styles with !important
    7. Three Ways to Insert CSS
      1. Creating an Embedded Style Sheet
        1. Alternative style sheets
      2. Creating an External Style Sheet
        1. Accessibility Consulting, audits and assessments
        2. CSS from Adobe Lab: Spry framework for Ajax
      3. Adding Inline Styles
        1. Syntax of CSS rules in HTML's "style" attribute
        2. Overriding CSS inline styles: methods
    8. Media Types
      1. CSS media monitor
      2. Media dependent style sheet glossary
      3. Style Sheets for Printing
        1. PrintStylesheets
        2. Print stylesheet - the definitive guide
        3. CSS Media Type Tests
        4. CSS print media browser conformance
      4. Pages for Mobile Devices
        1. W3C Mobile Web Initiative
        2. W3C mobileOK Checker
        3. Web Compatibility Test for Mobile Browsers
        4. Stylesheets for handheld devices
        5. Opera:  Mobile
        6. CSS handheld media browser conformance
        7. Return of the Mobile Stylesheet
      5. Media Queries
        1. Media Queries  a collection of sites using media queries
        2. How To Use CSS3 Media Queries To Create a Mobile Version of Your Website - Smashing Magazine
        3. How to use CSS3 Orientation Media Queries
        4. Introduction to media queries – Part 1: What are media queries?
        5. Introduction to media queries – Part 2

    9. <div> and <span>
      1. Divs and Spans
    10. Units of Measurement
    11. The Inherit Value
    12. @import
      1. Using @import in Cascading Style Sheets
      2. don't use @import
  2. CSS Fonts    CSS Fonts
    1. Font - the old way
      1. Rainbow Words : See the Font Tag in Action!
    2. Font-family
      1. CSS font sampler and survey  
      2. Over 100 Font Types
      3. Sometimes maligned, sometimes celebrated, the Comic Sans typeface remains a sensitive topic in the design world
        1. Killer Typography Tools and Free Font Downloads
    3. Font-size
    4. Font Family
      1. Font Family Samples - Extended Listing
    5. Font-style
    6. Font-variant
    7. Font-weight
      1. Selected Fonts' Available Weights
      2. font-weight -- number keywords (100 - 900)
    8. Font Style, Font Variant and Font Weight
      1. CSS Font and Text Style Wizard
  3. CSS Text
    1. Letter-spacing
    2. Word-spacing
    3. Line-height
    4. Text-align
    5. Text-decoration
    6. Text-indent
    7. Text-transform
    8. Vertical-align
    9. White-space
    10. MOTHER EFFING TEXT-SHADOW  (CSS3)
    11. Text Properties
      1. CSS Font and Text Style Wizard
  4. Colors and Backgrounds
    1. About Color Values  16 in HTML / 17 in CSS
    2. Color
      1. Here's Something Interesting About the CSS Color Property
    3. Coding Colors Easily Using CSS3 hsl() Notation
      1. Mothereffing HSL (CSS3)
    4. Background-color
    5. Background-image
      1. Background images and how they work | imageCSS.com
      2. Image Opacity: A guide to image opacity using CSS
    6. Colors and Backgrounds
      1. Light text on dark background vs. readability
  5. Custom Cursors
    1. Cursor Styles
    2. CSS cursor Property
    3. Using Custom Cursors
      1. Edderkop Net
      2. Custom Cursors
      3. CursorPedia
      4. Mouse and Cursor Script
      5. Image Trail Script
      6. Watching Eyes script
      7. Wreck Of The Julie Plante
        1. document.write("Turn Trails: OFF");document.write('');
        2. http://lair2000.net/mermaid_trails.js
  6. CSS and Links
    1. Pseudo-classes
    2. CSS Push Button Effect
    3. 3D CSS buttons
      1. CSS Library Links & Buttons
      2. Top 10 CSS buttons tutorial list 
      3. Beautiful CSS buttons with icon set  
      4. 50+ Nice Clean CSS Tab-Based Navigation Scripts
    4. Modifying Links
  7. Borders, Margins and Padding
    1. Getting Started
      1. Box Model Hack
      2. About: Box Model Hack
    2. Borders
    3. Margin
    4. Padding
    5. Borders, Margin and Padding
  8. Styling Tables with CSS
    1. A Review of HTML Table Syntax
      1. CSS: thead, tbody, tfoot and background images
    2. Styling a table
      1. Styling tables with CSS
      2. A CSS styled table | Veerle's blog
      3. Designing Tables with Stylesheets
      4. Styling tables with CSS
      5. Fun with tables
      6. A definition list that looks like a table
    3. Table based layout
      1. Research Laboratory of Electronics at MIT

Advanced CSS Training

Resources:

** Home ** Class Pages ** Site Map **

David J. Hark
HARK/INTERNET-HELP, Inc.
P. O. Box 201 Shepherdstown, WV 25443-0201
304-876-2607
N8GMQ
dhark@fred.net
http://www.dhark.com
http://www.fred.net/dhark
Last updated: 5 February 2011

 

© 2009, 2010, 2011, 2012 David J. Hark