CSS Review

Instructors: Jess, Carmen, and Eda

Before this session, please:

• Read CSS Review and take notes

During this session, we’ll:

• Review notes

After this session, please:

Instructor notes

Here’s all the CSS topics we’ve learned in this section:

• CSS basics
• Inline, internal, and external CSS
• Working with the width and height properties
• Different types of CSS combinators
• Inline, block, and inline-block level elements
• Margin and padding
• CSS specificity
• Design terminology
• UI design fundamentals
• Design best practices
• Common design tools
• Absolute units
• Relative units
• The calc() function
• User action pseudo-classes
• Input pseudo-classes
• Location pseudo-classes
• Tree-structural pseudo-classes
• Functional pseudo-classes
• Pseudo-elements
• Color theory
• Different ways to work with colors in CSS
• box-shadow property
• Linear and radial gradients
• Best practices for styling inputs
• Using appearance: none for inputs
• Common issues styling datetime-local and color properties
• CSS overflow property
• CSS transform property
• The box model
• Margin collapse
• The content-box and border-box property values
• CSS reset
• CSS filter property
• Introduction to CSS Flexbox and Flex model
• The flex-direction property
• The flex-wrap property
• The justify-content property
• The align-items property
• Introduction to typography
• CSS font-family property
• Web safe fonts
• At-rules and the @font-face at-rule
• Working with external fonts
• text-shadow property
• Color contrast tools
• Accessibility tree
• The max() function
• Best practices with CSS and accessibility
• Hiding content with HTML attributes
• Accessibility issue of the placeholder attribute
• Working with different attribute selectors and links
• Targeting elements with the lang and data-lang attribute
• Working with the attribute selector, ordered list elements and the type attribute
• Working with floats
• Static, relative and absolute positioning
• Fixed and sticky positioning
• Working with the z-index property
• Responsive web design
• Media queries
• Common media breakpoints
• Mobile first approach
• CSS custom properties (CSS variables)
• The @property rule
• CSS Grid basics
• CSS animation basics
• Accessibility and the prefers-reduced-motion media query