In this hands-on course, James Williamson demonstrates the concepts
that form the foundation of Cascading Style Sheets (CSS), including
styling text, adding margins and padding, and controlling how images
display. The course also explores the tools needed to work with CSS, the
differences between embedded and external styles, how to use selectors
to target elements, and what to do when styles conflict.
Uploaded.net
Topics include:
- Exploring default styling
- Writing a selector
- Setting properties
- Working with common units of measurement, including ems and pixels
- Structuring HTML correctly
- Understanding the cascade and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Styling container elements
- Working with RGB vs. HSL values
- Styling drop shadows
Table of content
- Introduction
- Welcome
- Using the exercise files
- CSS Basics
- Exploring default styling
- CSS authoring tools
- CSS syntax
- Writing a selector
- Setting properties
- Common units of measurement
- Inline styles
- Embedded styles
- Using external style sheets
- Checking for browser support
- Dealing with browser inconsistencies
- Targeting Page Content
- Structuring HTML correctly
- Element selectors
- Class selectors
- ID selectors
- Using classes and IDs
- Element-specific selectors
- The universal selector
- Grouping selectors
- Descendent selectors
- Child selectors
- Adjacent selectors
- Attribute selectors
- Pseudo-class selectors
- Dynamic pseudo-class selectors
- Structural pseudo-class selectors
- Nth-child selectors
- Pseudo-element selectors
- Targeting page content: Lab
- Targeting page content: Solution
- Resolving Conflicts
- What happens when styles conflict?
- Understanding the cascade
- Using inheritance
- Selector specificity
- The !important declaration
- Reducing conflicts through planning
- Resolving conflicts: Lab
- Resolving conflicts: Solution
- Basic Text Formatting
- Setting a font family
- Using @font-face
- Setting font size
- Font style and font weight
- Transforming text
- Using text variants
- Text decoration options
- Setting text color
- Writing font shorthand notation
- Controlling text alignment
- Letter and word spacing
- Indenting text
- Adjusting paragraph line height
- Controlling the space between elements
- Basic text formatting: Lab
- Basic text formatting: Solution
- Styling Container Elements
- Understanding the box model
- Controlling element spacing
- Controlling interior spacing
- Margin and padding shorthand notation
- Adding borders
- Defining element size
- Creating rounded corners
- Background properties
- Using background images
- Controlling image positioning
- Using multiple backgrounds
- Background shorthand notation
- Styling container elements: Lab
- Styling container elements: Solution
- Working with Color
- Color keyword definitions
- Understanding hexadecimal notation
- Using RGB values
- Using HSL values
- Working with opacity
- Using RGBa and HSLa
- Styling drop shadows
- CSS gradients
- Working with color: Lab
- Working with color: Solution
- Conclusion
- Additional resources
No comments:
Post a Comment