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. Selector syntax
      2. CSS Selector Reference  W3Schools
      3. Selectoracle
      4. Selectutorial - CSS selectors
      5. CSS selectors   [quir{smode]
      6. Selectors  (footnote p. 3)
      7. Understanding CSS Selectors
      8. Taming Advanced CSS Selectors - Smashing Magazine
      9. The 30 CSS Selectors you Must Memorize
      10. Browser Support  (footnote p. 3)
      11. Pseudo Classes
      12. Pseudo-elements
      13. Attribute Selectors in CSS
      14. Adjacent selectors
      15. Descendant selectors
      16. Selecting by Siblings
      17. Combining Selectors
      18. Selector Grouping
      19. 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
      20. CSS 2.1 selectors, Part 1  (basics of selectors plus the universal, type, id, and class selectors)
      21. CSS 2.1 selectors, Part 2 (combinators, combined selectors, grouping, and attribute selectors)
      22. CSS 2.1 selectors, Part 3  (pseudo-classes and pseudo-elements)
      23. Forgotten CSS selectors
      24. CSS 3 selectors explained
      25. Grouping
      26. Vendor-specific Properties
      27. 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)
      3. Common font name to numeric weight mappings
    8. Font Style, Font Variant and Font Weight
      1. CSS Font and Text Style Wizard
    9. The @font-face Rule in CSS3
    10. Web Fonts
  3. CSS Text
    1. Text styling with CSS
    2. Letter-spacing
    3. Word-spacing
    4. Line-height
    5. Text-align
    6. Text-decoration
      1. CSS Text Decoration Module Level 3
    7. Text-indent
    8. Text-transform
    9. Vertical-align
    10. White-space
    11. MOTHER EFFING TEXT-SHADOW  (CSS3)
    12. Text Properties
      1. CSS Font and Text Style Wizard
  4. Colors and Backgrounds
    1. About Color Values  16 in HTML / 17 in CSS
    2. CSS Color Names
    3. History of Web Color Names  (YouTube Video - 26min)
    4. Color
      1. Here's Something Interesting About the CSS Color Property
    5. Coding Colors Easily Using CSS3 hsl() Notation
      1. Mothereffing HSL (CSS3)
    6. Background-color
    7. Background-image
      1. Background images and how they work | imageCSS.com
      2. Image Opacity: A guide to image opacity using CSS
    8. Colors and Backgrounds
      1. Light text on dark background vs. readability
  5. Custom Cursors
    1. Cursor Styles
    2. CSS cursor Property
    3. Cursors  (Chris Nager)
    4. W3schools cursor Demo
    5. 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
      2. Styling tables with CSS
      3. A CSS styled table | Veerle's blog
      4. Designing Tables with Stylesheets
      5. Using CSS to Replace JavaScript for Your HTML Table Functionality
      6. Styling tables with CSS
      7. Fun with tables
      8. 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: 10 November 2016

 

© 2009 - 2016 David J. Hark