Introduction to CSS Training Courseware (CSS101)

This course provides learners with a comprehensive understanding of the essential concepts and techniques involved in using CSS to design modern, responsive, and visually appealing websites. The course begins with a crash course in CSS, followed by in-depth exploration of topics such as fonts, colors, text, borders, backgrounds, positioning, and more. The course also covers advanced CSS techniques like transforms, transitions, layouts, and media queries. With a strong emphasis on practical exercises and hands-on learning, students will gain valuable experience applying their new skills to real-world projects.

Publisher: Webucator

Benefits

Visual Consistency: CSS ensures that the design of a website remains consistent across multiple pages, making it easier for users to navigate and interact with the site.
Responsive Design: CSS allows for the creation of responsive designs that adapt to different devices and screen sizes, ensuring an optimal user experience for all visitors.
Separation of Content and Presentation: CSS separates the visual presentation from the content, making it easier to maintain and update websites without affecting the underlying HTML structure.
Efficiency: CSS reduces duplication of code, making websites faster to load and more efficient to maintain.
Accessibility: By using CSS, web developers can create accessible websites that cater to users with disabilities, ensuring a more inclusive online experience.
Customization: CSS allows for easy customization of website designs, enabling developers to create unique and personalized experiences for users.
Browser Compatibility: CSS ensures that websites render correctly across different browsers, reducing the likelihood of display issues and improving the overall user experience.

PowerPoint Presentation

This course includes a PowerPoint presentation that maps to the manual and to the labs:

Full Lab Environment Add-On

Enhance and simplify your classes by providing an unparalleled learning platform that requires no setup. Your trainers and students can dive straight into a fully-prepared lab environment with just a click. This seamless integration means no time wasted on installations or configurations, allowing trainers and students to focus solely on the task at hand. The lab comes pre-loaded with all the necessary tools and resources, ensuring a smooth, hassle-free learning experience.

Outline

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
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
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
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
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
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
Display and Visibility
1. display
2. visibility
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
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
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
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
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
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
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

Required Prerequisites

HTML

License

Length: 3 days | $105.00 per copy
Labs: Add-on available | $38.22 per lab
View Lab Details

License Request More Information Download Sample Copy Request Trainer Evaluation Copy

What is Included?

Student Manual
Student Class Files
PowerPoint Presentation
Labs (optional add-on)

Courseware Tracks

This course is included in the following tracks: