Slide Overview

CSS MASTERY

Fonts • Icons • Frameworks

What is CSS?

  • Cascading Style Sheets (CSS3 current)
  • Styling language for web pages
  • Separates content from presentation
  • Controls layout, colors & animations
  • Works with HTML & JavaScript
  • Created in 1996, evolved ever since

CSS Fonts

Typography is 95% of Design

  • Font families & fallback stacks
  • Web fonts & @font-face rule
  • Google Fonts & Adobe Fonts
  • System fonts for performance
  • Variable fonts (single file, multiple styles)

Font Properties

font-family: 'Helvetica', Arial, sans-serif;
font-size: 16px / 1rem / 1.2em;
font-weight: 100-900 / bold / normal;
font-style: italic / oblique / normal;
line-height: 1.5 / 24px;
letter-spacing: 2px / 0.1em;
text-transform: uppercase / lowercase;

Loading Web Fonts

@font-face {
font-family: 'CustomFont';
src: url('font.woff2');
font-weight: 400;
font-display: swap;
}

Font Best Practices

  • Limit to 2-3 font families
  • Use fallback font stacks
  • Optimize font loading
  • Consider variable fonts

CSS Icons

Icons Without Images

  • Pure CSS shapes (::before, ::after)
  • Icon fonts (Font Awesome, Material)
  • SVG icons (scalable & customizable)
  • Unicode symbols (built-in)
  • Modern: SVG sprites & icon systems

Icon Techniques

Pseudo Elements

Borders

Clip Path

Icon Font Libraries

Popular Options

  • Font Awesome
  • Material Icons
  • Feather Icons
  • Ionicons

Advantages

  • Scalable
  • Styleable with CSS
  • Easy to implement
  • Lightweight

CSS Frameworks

Build Faster, Build Better

  • Pre-built components & templates
  • Consistent design systems
  • Responsive grid systems
  • Browser compatibility handled
  • Faster development cycles
  • Customizable & extensible

Major Frameworks

  • Bootstrap - Most popular, component-rich
  • Tailwind CSS - Utility-first approach
  • Foundation - Enterprise & professional
  • Bulma - Modern, flexbox-based
  • Material UI - Google's design system
  • Semantic UI - Human-friendly HTML

Bootstrap

Features

  • 12-column grid
  • Components library
  • JavaScript plugins
  • Responsive utilities
<div class="container">
<div class="row">
<div class="col-md-6">
Content
</div>
</div>
</div>

Tailwind CSS

Utility-First Approach

<div class="flex items-center
justify-between
p-6 bg-blue-500
text-white rounded-lg">
Content here
</div>

Choosing a Framework

  • Project requirements & scope
  • Team experience & learning curve
  • Customization needs
  • Bundle size & performance
  • Community & documentation
  • Long-term maintenance

Modern CSS Features

  • CSS Grid & Flexbox layouts
  • CSS Custom Properties (variables)
  • CSS Animations & Transitions
  • Media Queries (responsive design)
  • Container Queries (new!)
  • CSS Functions (calc, clamp, min/max)

CSS Grid Layout

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
grid-auto-rows: minmax(100px, auto);
}

.item {
grid-column: span 2;
}

CSS Custom Properties

:root {
--primary-color: #EA5455;
--font-size: 16px;
--spacing: 1rem;
}

.button {
background: var(--primary-color);
font-size: var(--font-size);
padding: var(--spacing);
}

CSS Performance

Optimize

  • Minify CSS files
  • Remove unused styles
  • Use CSS variables
  • Lazy load non-critical CSS

Avoid

  • Complex selectors
  • !important overuse
  • Inline styles
  • Too many @imports

Responsive Design

/* Mobile First Approach */
.container {
width: 100%;
padding: 1rem;
}

@media (min-width: 768px) {
.container {
max-width: 720px;
margin: 0 auto;
}
}

CSS Animations

@keyframes slideIn {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}

.animated {
animation: slideIn 0.5s ease-out;
}

CSS & Accessibility

  • Sufficient color contrast (WCAG)
  • Focus states for keyboard navigation
  • Responsive font sizes (rem/em)
  • Avoid animations for motion-sensitive
  • Screen reader friendly styles
  • Skip link patterns

CSS Preprocessors

Popular Tools

  • Sass / SCSS
  • Less
  • Stylus
  • PostCSS

Features

  • Variables
  • Nesting
  • Mixins
  • Functions

Future of CSS

Coming Soon

  • Native CSS Nesting
  • Container Queries everywhere
  • :has() selector (parent selector)
  • Subgrid improvements
  • CSS Houdini (custom properties API)

Learning Resources

Documentation

  • MDN Web Docs
  • CSS-Tricks
  • W3C Specifications
  • Can I Use

Practice

  • CodePen
  • CSS Battle
  • Frontend Mentor
  • Daily UI Challenge

Master CSS

Key Takeaways

  • Typography shapes user experience
  • Icons enhance visual communication
  • Frameworks accelerate development
  • Keep learning & experimenting
  • Accessibility is essential
  • Practice makes perfect!
1 / 25