Introduction to CSS

CSS3 Logo


Modern browsers have terrific support for all commonly used CSS features, which means that it is no longer necessary to teach the types of CSS tricks and hacks that had to be used in the past to make pages look the same across browsers. This CSS course provides a thorough introduction to CSS as it is used in web design today.

Instructor:

David J. Hark
P. O. Box 201 Shepherdstown, WV 25443-0201
Home/Office: 304-876-2607
Cell: 304-283-2130
dhark@fred.net

Webucator:

Students:

Crash Course in CSS

  1. Benefits of Cascading Style Sheets
    1. Cascading Style Sheets home page
    2. You'd be better at css if you knew how it worked
    3. Going Places with HTML and CSS
    4. CSS for Beginners: What is CSS and How to Use it in Web Development?
    5. Semantic HTML, CSS Selectors & Specificity
    6. CSS Accessibility Features
    7. CSS Snapshot 2018
    8. MDN web docs: CSS
    9. Alexis Deveria: Can I Use?
    10. css3.info: browser support for CSS3
    11. Wikipedia: comparison of layout engines
    12. Web Devout: Web browser CSS support
    13. CSS Units
    14. CSS values and units MDN

CSS Fonts

  1. font-family
    1. Specifying by Font Name
    2. Specifying Font by Category
    3. Make Sure You're Using Web-Safe Fonts
  2. @font-face
    1. Getting Fonts
    2. CSS Fonts Module Level 3
    3. Font Squirrel Free Font Utopia
      1. Webfont Generator
  3. font-size
    1. Relative font-size Terms
    2. Best Practices
  4. font-style
    1. font-style
  5. font-variant
  6. font-weight
  7. line-height
  8. font
  9. Exercise: Styling Fonts

Color and Opacity

  1. About Color and Opacity
    1. Applying color to HTML elements using CSS
      1. Things that can have color
      2. Color picker tool
  2. Color and Opacity Values
    1. Color Keywords
    2. RGB Hexadecimal Notation
    3. RGB Functional Notation
    4. HSL Functional Notation
  3. color
  4. opacity
  5. Exercise: Adding Color and Opacity to Text

CSS Text

  1. letter-spacing
  2. text-align
  3. text-decoration
  4. text-indent
  5. text-shadow
  6. text-transform
  7. white-space
  8. word-break
  9. word-spacing
  10. Exercise: Text Properties

Borders, Margins, and Padding

  1. The CSS Basic Box Model
    1. CSS Box model   Image       CSS Box | ImageCSS.com
  2. Introduction to using Google Chrome DevTools with CSS
    1. Chrome DevTools
    2. Chrome DevTools Overview
    3. Edit the DOM
  3. Padding
  4. Margin
  5. Border
    1. border-width
    2. border-style
    3. border-color
    4. border-radius
  6. box-sizing
  7. box-shadow
    1. Box-shadow generator
  8. Outline
  9. Exercise: Borders, Margin, and Padding

Backgrounds

  1. background-color
  2. background-image
    1. <gradient>
  3. background-repeat
  4. overflow
  5. background-attachment
  6. background-position
    1. Keywords
    2. Coordinates
  7. Creating a "hint" Class
  8. background-size
  9. background-origin
  10. background-clip
  11. Modifying the "hint" Class
  12. background
  13. Exercise: Backgrounds

Display and Visibility

  1. display
  2. visibility
  3. 3D CSS buttons
    1. A Complete Guide to Links and Buttons
    2. CSS Library Links & Buttons
    3. 50+ Nice Clean CSS Tab-Based Navigation Scripts

Pseudo-classes and Pseudo-elements

  1. Pseudo-classes
    1. List of ISO 639-1 codes
    2. Try CSS Selector
  2. Styling Links with Pseudo-classes
    1. Pseudo Classes
  3. Styling Tables and Articles with Pseudo-classes
    1. :nth-child()
  4. Pseudo-elements
    1. content
      1. Replaced element
    2. Using CSS counters
  5. Using Pseudo-elements
  6. Selector Reference
  7. 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

Styling Tables with CSS

  1. A Complete Guide to the Table Element
  2. How to Design Complex Web Tables
  3. A Review of HTML table Elements and Attributes
    1. Spanning Columns and Rows
      1. colspan Attribute
      2. rowspan Attribute
  4. CSS Tables
    1. Tables
  5. CSS Properties and Styling Tables
    1. table-layout
    2. border-collapse
    3. Using CSS to Replace JavaScript for Your HTML Table Functionality
    4. Fun with tables
    5. A definition list that looks like a table
  6. Exercise: Styling a Table Exercise

Positioning

  1. Normal Flow
    1. CSS Flow Layout
    2. In Flow and Out of Flow
  2. position
    1. CSS Positioning    W3Schools
    2. CSS Positioning    HTMLGoodies
    3. Absolute vs. Relative - Explaining CSS Positioning
    4. Difference between static and relative positioning
    5. CSS absolute and fixed positioning
    6. Positioning with top, bottom, left, and right
  3. z-index
    1. How z-index Works
    2. Understanding z-index
  4. float and clear
    1. float
      1. All About Floats
    2. clear
      1. CSS Property: clear
      2. How TO - Clear Floats (Clearfix)
    3. CSS: how opposite floats work
    4. ::after
    5. float, clear, and ::after
  5. Exercise: Positioning

Transforms and Transitions

  1. transitions
  2. transition
    1. transition-property
    2. transition-duration
    3. transition-timing-function
      1. <easing-function>
    4. transition-delay
    5. transition
  3. transform
    1. Transform 
    2. Rotation
    3. Scale
    4. Skew
    5. Translate
    6. matrix()
    7. <transform-function>
  4. Exercise: Transforms and Transitions

Layouts

  1. Can I Use
  2. Supporting older browsers
  3. Introduction to Flexible Box Layout Module
    1. A Complete Guide to Flexbox
    2. Some Flexbox Properties
      1. Parent Element (Container)
        1. flex-direction
        2. flex-wrap
        3. flex-flow
        4. justify-content
        5. align-items
        6. align-content
    3. CSS Flexible Box Layout Module Level 1
  4. Introduction to Grid Layout
    1. CSS Grid Layout Module Level 1
    2. CSS Grid Layout Module
    3. CSS Grid Layout
    4. Some Grid Properties
      1. minmax()
      2. repeat()
      3. row-gap (grid-row-gap)
      4. column-gap (grid-column-gap)
    5. The Ultimate CSS Grid Tutorial  ✅
  5. Multi-column Layout
  6. Exercise: Layouts

CSS Lists as Hierarchical Navigation

  1. Exercise: Basic Vertical Navigation Bars
  2. Dynamic Drop-down and Fly-out Navigation Bars
    1. CSS Navigation Bar
    2. CSS Dropdowns
  3. Exercise: Basic Drop-down Menu
  4. Exercise: Basic Fly-out Menu
  5. Exercise: CSS List Menus

Media Queries

  1. What Are Media Queries?
  2. Media Queries
    1. Media Queries
    2. Media Queries  a collection of sites using media queries
    3. How To Use CSS3 Media Queries To Create a Mobile Version of Your Website - Smashing Magazine
    4. How to use CSS3 Orientation Media Queries
    5. Introduction to media queries – Part 1: What are media queries?
    6. Introduction to media queries – Part 2

    1. Breakpoints
      1. The Viewport Metatag
        1. CSS Viewport Units
        2. Using the viewport meta tag to control layout on mobile browsers
        3. A tale of two viewports — part one - QuirksMode
        4. A tale of two viewports — part two - QuirksMode
        5. The Mobile Viewport and Orientation
        6. Configure the Viewport
        7. Viewport Sizes
        8. screensiz.es
    2. Media Types
      1. CSS - Media Types
      2. CSS Media Types
    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. Syntax
  3. Font Awesome
    1. Finding and Using Icons
  4. Exercise: Breakpoints
  5. Exercise: Targeting Print