Advanced CSS Training

As presented by David J. Hark

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.

• CSS Tutorial
• Class files
• Introduction to CSS Training
• Advanced CSS Training On-Line Links
• Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

Class Outline

1. Positioning and Visibility
   1. Element Flow
      1. Gecko Reflow Visualization - mozilla.org
      2. Names of Browser Engines
      3. Comparison of layout engines
         1. Trident
            1. IE
         2. Gecko
            1. Firefox
         3. WebKit
            1. Safari
            2. Google Chrome
         4. Presto
            1. Opera
         5. KHTML
            1. Konqueror
   2. Position
      1. Absolute vs. Relative - Explaining CSS Positioning
      2. CSS static and relative positioning
      3. CSS absolute and fixed positioning
   3. Positioning
      1. CSS Positioning
   4. Positioning
      1. /* Position Is Everything */  Modern browser bugs explained in detail!
      2. The difference between "The Flow" and "Positioning" for Web Pages
      3. Floats and clearing
   5. Z-index
      1. Understanding z-index
   6. Display
      1. CSS Display and Visibility
      2. The Display Property
      3. CSS display Property    W3schools
      4. The display declaration
         1. display: table
      5. The Magical CSS Table Cell
         1.  Example
   7. Visibility
   8. Float
      1. CSS: how opposite floats work
   9. Clear
      1. CSS Property: clear
2. Advanced CSS Page Layout
   1. Page Layout   See: Working Examples
   2. Resetting Styles
      1. Reset CSS
         • CSS reset explained
   3. Full Width Layouts
      1. Two-column
      2. Three-column
         1. How to Build a 3-Column Layout in CSS
   4. Positioning the Headings
   5. Fixed Width Layouts
      1. Two-column
      2. Three-column
   6. Laying out a Page - The power of float
      1. exercise_3_no_color.jpg    exercise_3_no_color.pdf
      2. exercise_3.jpg    exercise_3.pdf
   7. A Recommendation on Positioning
      1. Other Methods of Layout
         1. In Search of the Holy Grail
         2. The Holy Grail CSS Layout Fix for IE7
         3. Accessibility issue: Skip Navigation
         4. RamblingSoul.com
3. CSS Shorthand Properties
   1. What is CSS Shorthand?
      1. 1.4.3 Shorthand properties
   2. Shorthand Margins and Padding
   3. Shorthand Border and Outline
   4. Shorthand Backgrounds
   5. Shorthand Fonts
   6. Shorthand Lists
   7. Using Shorthand (exercise 4 pdf)
   8. Top 5 CSS Shorthand Properties
      1. Transition Properties (CSS3)
4. CSS Lists as Hierarchical Navigation
   1. Styling lists and links
   2. CSS Menus
   3. CSS Navigation Bar
   4. Pure CSS Menu.com : Free CSS Drop Down Menu Generator
   5. Using Lists as Vertical Navigation
   6. Using Nested Lists as Navigation
   7. Using Lists as Horizontal Navigation
   8. Using Lists as Drop-Down or Fly-Out Navigation
      1. A revised and simplified flyout menu with THREE sub levels
   9. Using a List to Create a Navigation Menu
      1. Listamatic
      2. Listamatic2: nested list options
      3. Listutorial: Step by step CSS list tutorial
   10. Css Submenu Arrow
   11. css - Add a sub-menu indicator image dynamically using jQuery
   12. What is the CSS code for main level has sub level indicator?
   13. onwebdev: CSS: styling a definition list
5. CSS Background Tricks
   1. CSS background images
   2. Nine Techniques for CSS Image Replacement
   3. Revised Image Replacement
   4. The State of Rounded Corner Boxes
      1. Rounded Corners / Border Radius, css3 and IE versions below IE9
      2. CSS Border Radius Generator
   5. Fixed-width Rounded Corner Boxes
   6. Relative-width Rounded Corner Boxes
      1. Rounded Corners in CSS3
   7. "Mountaintop" Corner Boxes
      1. A List Apart: Articles: Mountaintop Corners
      2. 25 Rounded Corners Techniques with CSS
   8. Tabbed Navigation
   9. Drop Shadows
      1. CSS drop-shadows without images
      2. Drop shadow with CSS for all web browsers
      3. How to Apply Drop Shadows to Images Using CSS
      4. Learn How to Build CSS Drop Shadows Without Any Images
   10. CSS Sprites
       1. CSS Image Sprites
       2. Easily Create Sprite Images Online with Spritebox
       3. sprite.png
       4. Poor Person's Image Mapper   
       5. EXAMPLE: Online Charts Builder    sprite css
   11. Internet Explorer having layout
6. Laying out and Styling Forms with CSS
   1. From Reply address: http://www.dhark.com/cgi-bin/perl_form.pl
   2. A List Apart: Articles: Prettier Accessible Forms
   3. Styling forms
   4. Design a Prettier Web Form with CSS 3
   5. 10 CSS Form Examples
   6. Laying out the Questions
   7. Creating the Form
   8. Reset Revisited
   9. Styling the Form
      1. How To Create Custom Select Menus with CSS
   10. Expanding the Form
7. CSS Best Practices
   1. Review some of recommended CSS Best practices
      1. 30 CSS Best Practices for Beginners
      2. Be a CSS Team Player: CSS Best Practices for Team-Based Development
      3. Tips for creating enterprise-level HTML, CSS and JavaScript  (joke)
   2. Best Practices for Speeding Up Your Web Site
      1. Put Stylesheets at Top
      2. Avoid CSS Expressions
      3. Choose <link> Over @import
      4. Avoid Filters
   3. Optimize browser rendering
   4. Writing Efficient CSS for use in the Mozilla UI
   5. CSS Optimization     Website Optimization Secrets
   6. Page Speed: Web Performance Best Practices
   7. CSS Optimization
   8. Keep CSS Simple
   9. Efficiently Rendering CSS
   10. Improving your CSS performance
   11. CSS Compressor
       1. CSS Compressor
       2. CSS Optimiser
       3. Clean CSS
       4. YUI Compressor
       5. Online CSS Optimizer/Optimiser
       6. CSSTidy
          1. CSS Formatter and Optimiser
       7. Robson » CSS Compressor
8. Browser-compatibility Issues
   1. CSS Hacks
   2. Workarounds, Filters, and Hacks
   3. Browser Compatibility
   4. CSS Compatibility and Internet Explorer
   5. Market Share for Mobile and Desktop Browsers
   6. Internet Explorer's Share of Web Traffic Drops Below 50%
   7. Microsoft To World: Stop Using Internet Explorer 6
   8. Internet Explorer IQ study was a hoax
      1. Internet Explorer users 'have below-average IQ'
   9. The Internet Explorer 6 Countdown
   10. CSS Browser Extensions
       1. Firefox CSS Extensions
       2. CSS3 PIE: CSS3 decorations for IE
       3. Internet Explorer CSS Extensions
          1. Microsoft CSS Reference
       4. Don't CSS: Internet Explorer Behaviors
       5. Opera CSS Extensions
       6. Safari and Chrome CSS Extensions
   11. Quirks Mode
       1. Quirks mode
       1. CSS contents and browser compatibility
       2. Comparison of document types
       2. Compatibility Master Table
       3. Quirks mode and strict mode
       4. Standards Mode, Quirks Mode, and Doctype Sniffing
          1. Activating Browser Modes with Doctype
          2. MIME Types
       5. Gecko's "Almost Standards" Mode
       6. How IE8 Determines Document Mode
       7. Mozilla's Quirks Mode
          1. Mozilla Quirks Mode Behavior
   12. Internet Explorer Conditional Statements (IECC)
       1. Conditional comments
       2. About Conditional Comments
       3. Supporting IE with conditional comments
   13. Common Browser Bugs / Issues
       1. Essentials of CSS Hacking For Internet Explorer
       2. CSS Browser Bugs Solutions & Cross-Browser Cross-Platform CSS Bugs Fixes (code)
       3. Category Browser Bug - CSS Discuss
   14. Fixing the Box Model Bug
       1. The Internet Explorer 5 Box Model
   15. IE 5.5/6 PNG Fix
       1. IE PNG Fix 2.0 Alpha 4
       2. IE PNG Alpha Fix Demonstration
   16. Modernizr
       1. Using Modernizr to detect HTML5 and CSS3 browser support
       2. Websites that use Modernizr
          1. Burger King
          2. Find Me By IP.com
          3. Texas.gov
          4. HTML5 Canvas + Audio demo
          5. FarukAt.es

Testing  "You can't control what you can't measure"

1. The W3C Markup Validation Service
2. W3C CSS Validation Service
3. Diagnostic CSS
4. Web Page Analyzer
5. Web Accessibility Toolbar 2011  Documentation
   • Web Accessibility Toolbar 2011 (download 2mb .exe)
6. Web Accessibility Toolbar [For IE], Version 2.0
   • WAT for IE 2.0 (1.3 mb installation file WAT.exe)
7. Page Speed Extension for Firefox/Firebug
   1. Web Performance Best Practices
8. IE Developer Tools User Interface Reference
9. IETester   (see how HTML5 pages are handled by older browsers)
10. User Agent Switcher
11. Webpagetest
12. Show Slow
13. Use Firebug in Any Browser
14. loads.in

Resources

• Hands On: Windows 8 HTML5 Platform CSS3 Demos
• On-Line CSS3 Generator / WebApps
• CSS3.0 Maker
• CSS3Generator
• CSS Border Radius Generator
• CSS3 Gradient Generator
• Ultimate CSS Gradient Generator
• CSS3 Transforms
• CSS3, Please!   
• CSS3 Generator
• CSS Layout Generator
• CSSplay
  • CSSplay.biz
• Pure CSS Mac Desktop
  • Demo
• Rollover Images
• Object Oriented CSS (OOCSS)
  • An Introduction To Object Oriented CSS
• Sass - Syntactically Awesome Stylesheets
  • Sass
  • RubyInstaller for Windows
• Cascading Style Sheets Style Properties Library
  • CSS 1 Properties
  • CSS 2 Properties
  • CSS 3 Properties
• Free CSS Templates & Free CSS Layouts For Your Website or Blog - From RamblingSoul
• Web Devout
• CSS-Discuss
• CSS3 Mastery
  • 10 CSS3 Properties you Need to be Familiar with
  • Getting to Work with CSS3 Power Tools
• Adobe- CSS Advisor
• Adobe Proposes Changes to the CSS Standards
  • Adobe, standards, and HTML5
  • CSS3 regions: Rich page layout with HTML and CSS3
  • How Adobe Plans to Enable More Fluid Web Layouts With CSS Regions (Video)
  • CSS Regions
    • CSS Regions Module
    • Download CSS Regions Prototype - Adobe Labs
  • Exclusions
    • CSS Exclusions Module
• Ajax
  • Adobe Spry framework for AJAX
  • Adobe Labs - Showcase: Spry framework for Ajax   Note: css
  • Dreamweaver Developer Center
    • Adobe Dreamweaver Cookbook
      • Rounded Corners / Border Radius, css3 and IE versions below IE9
• Accordion
  • Accordion - jQuery  Tutorials
• 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

• Vertical Alignment
  • Vertical Centering With CSS
  • Vertical Centering in CSS
    • Example
    • More understandable example with underscore hack.
  • Understanding vertical-align, or "How (Not) To Vertically Center Content"
• Stick the Footer
  • New CSS Sticky Footer - 2010 - HTML for Bottom of Page Footer
    • The Non-Stick Version
    • CSS Sticky Footer Works in Over 50 Browsers
• jQuery
  • jQuery: The Write Less, Do More, JavaScript Library
  • yayQuery Podcast - A jQuery Podcast
• CSS: stylizing a Google Maps InfoWindow
• <HTML>-Ipsum
• Device-Sensitive CSS3 Template
• Create a Bar Graph with CSS3 and Progressive Enhancement

Students Company's Home Pages

• IP Convergence-Leverage your network
• MindHandle - Ideas Take Hold
• Seattle.gov Home Page
• The Goins Group LLC
• National Library Of Medicine
• Texas Children's Hospital    Mobile
• Wright-Patterson Air Force Base
• mygreatlakes.org | Changing Lives for the Better
• Texas A&M University - College Station, TX
• The SPi Group - innovate enable evolve
• NASDAQ OMX
• Sponsor A Child and Help Needy Children Through the Children International Child Sponsorship Program
• SAP United States - Business Management Software Solutions Applications and Services
• Promo Products | Business Opportunities | Home-Based Businesses | Ad Specialties
• Webucator - Customized Instructor-Led Training Services
• Pioneer Services: Military loans and financial education for the military community – a division of MidCountry Bank

 

---

** 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: 1 May 2012

 

© 2011, 2012 David J. Hark