Introduction to CSS Training (CSS101)

This course provides a comprehensive introduction to CSS (Cascading Style Sheets), a cornerstone technology used to style and layout web pages. It is designed for beginners and intermediate web developers who want to enhance their ability to create visually appealing and responsive websites.

The course starts with a crash course in CSS, covering the benefits of using CSS, the structure of CSS rules, and how to apply styles using selectors and combinators. You'll learn about the precedence of selectors, how browsers render pages, and the importance of CSS resets and normalizers. The module also covers the different ways to apply CSS, including external stylesheets, embedded stylesheets, and inline styles, with practical exercises to reinforce these concepts.

Next, the course dives into CSS Fonts, where you'll explore various font properties like font-family, @font-face, font-size, and more. You'll practice styling fonts and learn how to control the appearance of text with different font properties.

The Color and Opacity module introduces you to color values, opacity settings, and how to apply them to text and other elements, followed by a section on CSS Text, where you will learn to manipulate text alignment, decoration, spacing, and more. Exercises in these sections will help you solidify your understanding by applying these styles in practical scenarios.

In Borders, Margins, and Padding, you will get to grips with the CSS box model, understanding how padding, margins, and borders affect element layout. You'll also explore advanced properties like box-sizing and box-shadow, with exercises that focus on mastering these concepts.

The Backgrounds section teaches you how to control background colors, images, and other related properties like background-size and background-position. You will also learn to create classes and apply these properties through hands-on exercises.

Display and Visibility will cover how elements are displayed on the page, the difference between display and visibility properties, and how to control the visibility of elements within your web designs.

Pseudo-classes and Pseudo-elements are explored next, where you will learn to style elements based on their state or position in the document tree. You'll practice styling links, tables, articles, and other elements using these advanced selectors.

The course also covers Styling Tables with CSS, providing a review of HTML table elements and attributes, followed by practical lessons on applying CSS properties to tables for enhanced visual appeal.

Positioning elements on a page is a critical skill, and this course covers Normal Flow, the position property, z-index, and how to use float and clear for layout purposes. Exercises will help you practice positioning elements effectively.

Transforms and Transitions introduce you to dynamic styling techniques that allow you to animate elements and create smooth transitions. You'll practice using these properties to enhance the interactivity of your web pages.

The Layouts module covers advanced layout techniques including Flexbox, Grid, and multi-column layouts. You'll learn how to create responsive and flexible layouts that adapt to different screen sizes and devices.

In CSS Lists as Hierarchical Navigation, you'll learn to create navigation menus using CSS, including horizontal, vertical, drop-down, and fly-out menus. Exercises will guide you through building these navigation structures.

Finally, the Media Queries section teaches you how to create responsive designs that adapt to different devices and screen sizes. You'll explore breakpoints, Font Awesome integration, and targeting print with media queries.

By the end of this course, you'll have a strong foundation in CSS, equipped with the knowledge and skills to style and layout web pages effectively, create responsive designs, and enhance user experience through advanced CSS techniques.

1. Crash Course in CSS
   1. Benefits of Cascading Style Sheets
   2. CSS Rules
      1. CSS Comments
   3. Selectors
      1. Type Selectors
      2. Class Selectors
      3. ID Selectors
      4. Attribute Selectors
      5. The Universal Selector
      6. Grouping
   4. Combinators
      1. Descendant Combinators
      2. Child Combinators
      3. General Sibling Combinators
      4. Adjacent Sibling Combinators
   5. Precedence of Selectors
   6. How Browsers Style Pages
   7. CSS Resets
   8. CSS Normalizers
   9. External Stylesheets, Embedded Stylesheets, and Inline Styles
      1. External Stylesheets
      2. Embedded Stylesheets
      3. Inline Styles
   10. Exercise: Creating an External Stylesheet
   11. Exercise: Creating an Embedded Stylesheet
   12. Exercise: Adding Inline Styles
   13. <div> and <span>
   14. Exercise: Divs and Spans
   15. Media Types
   16. Units of Measurement
       1. Absolute vs. Relative Units
       2. Pixels
       3. Ems and Rems
       4. Percentages
       5. Other Units
   17. Inheritance
       1. The inherit Value
2. CSS Fonts
   1. font-family
      1. Specifying by Font Name
      2. Specifying Font by Category
   2. @font-face
      1. Getting Fonts
   3. font-size
      1. Relative font-size Terms
      2. Best Practices
   4. font-style
   5. font-variant
   6. font-weight
   7. line-height
   8. font
   9. Exercise: Styling Fonts
3. Color and Opacity
   1. About Color and Opacity
   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
4. 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
5. Borders, Margins, and Padding
   1. The CSS Basic Box Model
   2. Introduction to using Google Chrome DevTools with CSS
   3. Padding
   4. Margin
   5. Border
      1. border-width
      2. border-style
      3. border-color
      4. border-radius
   6. box-sizing
   7. box-shadow
   8. Exercise: Borders, Margin, and Padding
6. Backgrounds
   1. background-color
   2. background-image
   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
7. Display and Visibility
   1. display
   2. visibility
8. Pseudo-classes and Pseudo-elements
   1. Pseudo-classes
   2. Styling Links with Pseudo-classes
   3. Styling Tables and Articles with Pseudo-classes
      1. :nth-child()
   4. Pseudo-elements
      1. content
   5. Using Pseudo-elements
9. Styling Tables with CSS
   1. A Review of HTML table Elements and Attributes
      1. Spanning Columns and Rows
   2. CSS Properties and Styling Tables
      1. table-layout
      2. border-collapse
   3. Exercise: Styling a Table Exercise
10. Positioning
    1. Normal Flow
    2. position
       1. Positioning with top, bottom, left, and right
    3. z-index
    4. float and clear
       1. float
       2. clear
       3. float, clear, and ::after
    5. Exercise: Positioning
11. Transforms and Transitions
    1. transition
       1. transition-property
       2. transition-duration
       3. transition-timing-function
       4. transition-delay
       5. transition
    2. transform
       1. Rotation
       2. Scale
       3. Skew
       4. Translate
    3. Exercise: Transforms and Transitions
12. Layouts
    1. Introduction to Flexible Box Layout Module
       1. Some Flexbox Properties
    2. Introduction to Grid Layout
       1. Some Grid Properties
    3. Multi-column Layout
    4. Exercise: Layouts
13. CSS Lists as Hierarchical Navigation
    1. Exercise: Basic Vertical Navigation Bars
    2. Dynamic Drop-down and Fly-out Navigation Bars
    3. Exercise: Basic Drop-down Menu
    4. Exercise: Basic Fly-out Menu
    5. Exercise: CSS List Menus
14. Media Queries
    1. What Are Media Queries?
       1. Breakpoints
       2. Media Types
       3. Syntax
    2. Font Awesome
       1. Finding and Using Icons
    3. Exercise: Breakpoints
    4. Exercise: Targeting Print

Each student receives a comprehensive set of materials, including course notes and all class examples.

Experience in the following is required for this CSS class: