Advanced 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.

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. Inside Microsoft's New Rendering Engine For The "Project Spartan"
        2. Trident
          1. IE
        3. Gecko
          1. Firefox
        4. WebKit
          1. Safari
          2. Google Chrome
        5. Blink
          1. Blink! Google forks WebKit
        6. Presto
          1. Opera
        7. KHTML
          1. Konqueror
    2. Position
      1. Absolute vs. Relative - Explaining CSS Positioning
      2. Difference between static and relative positioning
      3. CSS absolute and fixed positioning
    3. Positioning
      1. CSS Positioning    W3Schools
      2. CSS Positioning    HTMLGoodies
    4. Positioning
      1. /* Position Is Everything */  Modern browser bugs explained in detail!
    5. Z-index
      1. How z-index Works
      2. Understanding z-index
    6. Display
      1. CSS Display and Visibility
      2. The Display Property
      3. The display declaration
        1. display: table
        2. CSS display: inline-block: why it rocks, and why it sucks
        3. Cross-Browser Inline-Block
    7. Visibility
    8. Float
      1. CSS: how opposite floats work
    9. Clear
      1. CSS Property: clear
  2. Advanced CSS Page Layout
    1. Learn CSS Layout
    2. Page Layout   See: Working Examples
    3. Resetting Styles
      1. CSS Reset Examples
      2. Reset CSS
    4. Full Width Layouts
      1. Two-column
      2. Three-column
        1. How to Build a 3-Column Layout in CSS
    1. Positioning the Headings
    2. Fixed Width Layouts
      1. Two-column
      2. Three-column
    3. 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
    4. 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
    5. CSS3 Text Columns
      1. CSS3 Multiple Columns - W3Schools
      2. Using CSS multi-column layouts- Mozilla Developer Network
      3. A CSS Multi-column Layout Tutorial for Beginners- Sitepoint
      4. CSS3 Multi Column Generator
    6. Flexible Box Model
      1. Grid by Example Everything you need to learn CSS Grid Layout
      2. 11 things I learned reading the flexbox spec
      3. CSS Flexible Box Layout Module Level 1 - W3C
      4. CSS3 Flexible Box - W3Schools
      5. FlexBox Cheatsheet
      6. 11 things I learned reading the flexbox spec
      7. How to Create Perfectly Centered Text With Flexbox
      8. Using CSS Flexible Boxes - Mozilla Developer Network
      9. A Complete Guide to Flexbox - CSS Tricks
      10. “Old” Flexbox and “New” Flexbox
      11. flexbox in 5 minutes
      12. CanIUse: Flexible Box Layout Module
      13. CSS3 FlexBox Generator
      14. W3Schools CSS flex Property examples:
        1. flex-flow example 1
        2. justify-content  example 2
        3. flex-direction example 3
        4. flex-wrap example 4, 5
        5. CSS order Property example 6
        6. CSS flex Property example 7, 8
          1. flex-grow
          2. flex-shrink
          3. flex-basis
    7. Exercise: Flexible Box Layout
  3. Media Queries
    1. What Are Media Queries?
      1. Media Queries (examples)
      2. Respond to Different Devices With CSS3 Media Queries
      3. Targeting Specific Devices in your Style Sheets
      4. Targeting styles with media queries
      5. CSS Animations Between Media Queries    Demo
    2. The Viewport Metatag
      1. A tale of two viewports — part one - QuirksMode
      2. A tale of two viewports — part two - QuirksMode
      3. The Mobile Viewport and Orientation
      4. Configure the Viewport
      5. Viewport Sizes
      6. screensiz.es
    3. Responsive Design
      1. Responsive Web Design A list Apart, Ethan Marcotte, May 25, 2010
      2. Responsive web design - Wikipedia
      3. HTML Responsive Web Design - W3Schools
      4. Responsive web design basics - Google Developers
      5. Responsive Web Design: 50 Examples and Best Practices
      6. How Responsive is Your Website? (test yours)
    4. Responsive Image / Image Widths
      1. A pixel is not a pixel is not a pixel
      2. Responsive Web Design - Images- W3Schools
      3. Responsive Images Done Right: A Guide To <picture> And srcset
      4. CSS Fluid Image Techniques for Responsive Site Design - The New Code
      5. Using Responsive Images (Now) - A List Apart
  4. 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. Top 5 CSS Shorthand Properties
  5. 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. Menus as Lists
    6. CSS Horizontal Menu
    7. CSS Vertical Menu
    8. CSS Dynamic Menus
    9. CSS Flyout Menu
      1. Using Lists as Drop-Down or Fly-Out Navigation
        1. A revised and simplified flyout menu with THREE sub levels
    10. CSS3 Menus
      1. How to Create Vertical Navigation (With Fly-Outs) Using CSS3
    11. Accessibility
    12. Using a List to Create a Navigation Menu
      1. Listamatic
      2. Listamatic2: nested list options
      3. Listutorial: Step by step CSS list tutorial
    13. Css Submenu Arrow
    14. css - Add a sub-menu indicator image dynamically using jQuery
    15. What is the CSS code for main level has sub level indicator?
    16. onwebdev: CSS: styling a definition list
  6. CSS Background Tricks
    1. Rounded Corner Boxes
      1. Fixed-width Rounded Corner Boxes
      2. Flexible-width Rounded Corner Boxes
      3. Rounded Corners with CSS
        1. Rounded Corners / Border Radius, css3 and IE versions below IE9
        2. CSS Border Radius Generator
        3. Rounded Corners in CSS3
      4. Mountaintop Corners
        1. A List Apart: Articles: Mountaintop Corners
        2. 25 Rounded Corners Techniques with CSS
        3. CSS JUICE
    2. Exercise: Creating a Rooftop Panel
    3. Tabbed Navigation
      1. How to Create Image Maps With HTML and CSS
      2. Image Map Tool
      3. CSS Image Map Generator
      4. Internet Explorer having layout
    4. Exercise: Tabbed Navigation: Rounding the Corners
    5. Drop Shadows
      1. CSS Drop Shadows: The box-shadow Property
      2. CSS drop-shadows without images
      3. Drop shadow with CSS for all web browsers
      4. How to Apply Drop Shadows to Images Using CSS
      5. Learn How to Build CSS Drop Shadows Without Any Images
    6. CSS Sprites
      1. CSS Image Sprites
      2. Easily Create Sprite Images Online with Spritebox
      3. sprite.png
      4. CSS Sprites vs. Data URIs: Which is Faster on Mobile?
        1. Amazon sprite
      5. Poor Person's Image Mapper   
      6. EXAMPLE: Online Charts Builder    sprite css
      7. Sprite Animations
    7. Background Opacity and Images
      1. Color
        1. 147 Colors | CSS Color Names   grid
        2. CSS Color Module Level 3
          1. 4.2.4. HSL color values
          2. 4.2.4.1. HSL examples
        3. HSLA Color Picker / RGBA Converter
        4. hsl-alpha
        5. More CSS3 Styles: buttons and gradients
        6. CSS Gradients   Demo
        7. Introduction to gradients
        8. Ultimate CSS Gradient Generator
        9. Flags with CSS3 Gradients
        10. The Opacity Property
          1. CSS3 opacity property - W3Schools
          2. 3.2. Transparency: the ‘opacity’ property
    8. Exercise: Using HSL and Opacity
      1. Backgrounds
        1. Background-clip
            1. CSS3 background-clip Property - W3Schools
            2. 3.7. Painting Area: the ‘background-clip’ property
        1. Background-origin
            1. CSS3 background-origin Property - W3Schools
            2. 3.8. Positioning Area: the ‘background-origin’ property
        2. Background-size
          1. CSS3 background-size Property - W3Schools
          2. 3.9. Sizing Images: the ‘background-size’ property
      1. CSS3: background-origin and background-clip
      2. CSS background images
      3. Free Online Gradient Background Generator
      4. Nine Techniques for CSS Image Replacement
      5. Revised Image Replacement
    9. Exercise: Multiple Background Images with background-clip,
  7. Laying out and Styling Forms with CSS
    1. Laying out the Questions
    2. Creating the Form
      1. HTML
        1. Webucator's Introduction to <HTML5>: Forms
        2. HTML5 Digital Classroom: Forms
      2. Form Fields
    3. Adding the Form Fields
    4. Reset Revisited
    5. Styling the Form
    6. Exercise: Expanding the Form
    7. From Reply address: http://www.dhark.com/cgi-bin/perl_form.pl
    8. A List Apart: Articles: Prettier Accessible Forms
    9. Design a Prettier Web Form with CSS 3
    10. 10 CSS Form Examples
    11. Laying out the Questions
    12. Creating the Form
    13. Reset Revisited
    14. Styling the Form
      1. How To Create Custom Select Menus with CSS
    15. Expanding the Form
  8. CSS Best Practices
    1. Considerations
    2. Use CSS
    3. Use External Style Sheets
    4. Organize Your Style Sheets/Preprocessors
      1. Sass (stylesheet language)
      2. SASS: Syntactically Awesome Stylesheets
        1. Burbon
        2. Compass
        3. Susy
      3. How To Use Sass Variables
      4. Less: The dynamic stylesheet language
      5. RubyInstaller
    5. Exercise: Using Sass
    6. ID the Body
    7. Use CSS Shorthand
    8. Combine CSS Rules
    9. Use a CSS Reset
    10. Use the "LoVe HAte" Rule
    11. Use HTML Lists for Navigation Menus
    12. Avoid CSS Hacks
    13. Use a CSS Compressor
    14. Use a Master Style Sheet
    15. Summary of Best Practices
    16. 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. CSS coding techniques
      4. Best Practices with using CSS3 in your HTML5 web pages
      5. Enterprise HTML, CSS and JavaScript explained
      6. An Event Apart: CSS Best Practices
      7. 10 Fonts for Code
      8. Jank Free
      9. Front-end Code Standards & Best Practices
    17. 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
    1. Optimize browser rendering
    2. Writing Efficient CSS for use in the Mozilla UI
    3. CSS Optimization     Website Optimization Secrets
    4. Page Speed: Web Performance Best Practices
    5. CSS Optimization
    6. Keep CSS Simple
    7. 70% Repetition in Style Sheets: Data on How We Fail at CSS Optimization
    8. Efficiently Rendering CSS
    9. Improving your CSS performance
    10. CSS Compressor  Minification (programming)
      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. Minify CSS
      9. cssminifier.com
  9. 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. 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
    7. 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
    8. Internet Explorer Conditional Statements (IECC)
      1. Conditional comments
      2. About Conditional Comments
      3. Supporting IE with conditional comments
      4. Example: Cedar Lakes Conference Center - Ripley, West Virginia
    9. 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
    10. Fixing the Box Model Bug
      1. The Internet Explorer 5 Box Model
    11. IE 5.5/6 PNG Fix
      1. IE PNG Fix 2.0 Alpha 4
      2. IE PNG Alpha Fix Demonstration
    12. 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. WebPagetest - Website Performance and Optimization Test\
  6. Web Accessibility Toolbar 2012
  7. Web Developer Toolbar for Firefox and Chrome
  8. Page Speed Extension for Firefox/Firebug
  9. When can I use...
  10. FindMeByIP - CSS3 & HTML5 Browser Support
  11. THE HTML5 TEST – How Well Does Your Browser Support HTML5?
  12. HTML5 Please - Use the new and shiny responsibly
  13. Browserscope
  14. IE Developer Tools User Interface Reference
  15. IETester   (see how HTML5 pages are handled by older browsers)
  16. Cross Browser Testing. Pick an OS - Pick a Browser - Test website
  17. User Agent Switcher
  18. Show Slow
  19. Use Firebug in Any Browser
  20. loads.in

Resources

Books

Students Company's Home Pages

Webucator

 

 


** 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.dhark.info
Last updated: 20 June 2017

 

© 2011, 2012, 2013, 2014, 2015, 2016, 2017 David J. Hark