Week 3: CSS

INFO 153A/253A Front End Web Architecture

Kay Ashaolu

CSS Basics

Introduction to CSS

  • Cascading Style Sheets (CSS): The presentation layer
  • Separating structure (HTML) from style (CSS)
  • Why CSS matters:
    • Consistency across pages
    • Easier maintenance
    • Improved user experience
  • CSS evolution: CSS1 → CSS2 → CSS3 → CSS4 (modules)

Implementing CSS

Three methods:

1: Inline CSS (avoid)

  <h1 style="color: red;">Heading</h1>

2: Internal CSS

<style>
  h1 { color: red; }
</style>

3: External CSS (preferred)

<link rel="stylesheet" href="styles.css">
  • Separation of concerns: Keep style separate from structure

CSS Selectors

  • Element selectors: p, div, h1
  • Class selectors: .classname
  • ID selectors: #idname
  • Attribute selectors: [attribute="value"]
  • Pseudo-classes: :hover, :first-child
  • Combinators: descendant (space), child (>), adjacent sibling (+)
  • Specificity: ID > Class > Element

The Box Model

+-----------------------------------+
|              Margin               |
|   +---------------------------+   |
|   |         Border            |   |
|   |   +-------------------+   |   |
|   |   |     Padding       |   |   |
|   |   |   +-----------+   |   |   |
|   |   |   |  Content  |   |   |   |
|   |   |   +-----------+   |   |   |
|   |   +-------------------+   |   |
|   +---------------------------+   |
+-----------------------------------+
  • Content: The actual content of the element
  • Padding: Space between content and border
  • Border: Surrounds the padding
  • Margin: Space outside the border

Layout Techniques

Float-based layouts (older method)

.sidebar { float: left; width: 30%; }
.main-content { float: right; width: 70%; }

Flexbox (modern, one-dimensional)

.container {
  display: flex;
  justify-content: space-between;
}

CSS Grid (modern, two-dimensional)

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Responsive Design

Media queries

@media (max-width: 600px) {
  .container { flex-direction: column; }
}

Fluid grids using percentages
Flexible images: max-width: 100%;
Mobile-first approach
Viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

CSS Preprocessors

  • Sass, Less, Stylus
  • Features:
    • Variables
    • Nesting
    • Mixins
    • Functions
    • Partials and imports

Example (Sass):

$primary-color: #3498db;

.button {
  background-color: $primary-color;
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

CSS Frameworks

  • Bootstrap, Foundation, Tailwind CSS
  • Pros:
    • Rapid development
    • Consistent design
    • Cross-browser compatibility
  • Cons:
    • Bloat
    • Generic look
    • Learning curve
  • Customization options

CSS Architecture

BEM (Block Element Modifier)

.block__element--modifier { }
  • SMACSS (Scalable and Modular Architecture for CSS)
  • ITCSS (Inverted Triangle CSS)
  • CSS Modules
  • Importance of naming conventions and organization

CSS-in-JS

  • Styled-components, Emotion, CSS Modules
  • Benefits:
    • Scoped styles
    • Dynamic styling
    • Colocated with components

Example (styled-components):

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'black'};
`;

CSS Performance Optimization

  • Minification
  • Concatenation
  • Critical CSS
  • Reducing specificity
  • Avoiding expensive properties (e.g., box-shadow, border-radius)
  • Using transform and opacity for animations

CSS Custom Properties (Variables)

:root {
  --primary-color: #3498db;
}

.button {
  background-color: var(--primary-color);
}
  • Scope and inheritance
  • Runtime changes
  • Fallback values

Advanced CSS Techniques

  • CSS Shapes
  • CSS Grid Layout
  • CSS Houdini
  • CSS Containment
  • CSS Scroll Snap

Feature queries:

@supports (display: grid) {
  .container { display: grid; }
}

Future of CSS

  • CSS Nesting
  • CSS Layers
  • Container Queries
  • Subgrid
  • :is() and :where() pseudo-classes
  • Logical Properties

Putting It All Together

  • The role of CSS in modern web architecture
  • Integration with JavaScript frameworks
  • Performance considerations
  • Accessibility and CSS
  • Best practices for maintainable CSS
  • Continuous learning in the ever-evolving web landscape

Responsive Layouts

Responsive Web Design: Foundations

  • Adapting layouts to different screen sizes
  • Key components:
    • Viewport meta tag
    • Fluid widths
    • Media queries
    • Relative units (em, rem)
  • Mobile-first approach

Note: Responsive design is crucial in today's multi-device world

Media Queries: Building Blocks

@media (max-width: 600px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}
  • Allow targeted styles based on device characteristics
  • Syntax: @media [type] and (condition) { ... }
  • Common breakpoints:
    • Mobile: <= 600px
    • Tablet: 601px - 900px
    • Desktop: > 900px

Note: Media queries are the cornerstone of responsive design

Relative Units: em vs rem

Unit Relative To Use Case
em Parent element's font size Component-specific sizing
rem Root element's font size Global, consistent sizing 
html { font-size: 16px; }
.container { font-size: 1.5rem; } /* 24px */
.container p { font-size: 1em; }  /* 24px */

Note: Relative units provide flexibility and maintain proportions across devices

Viewport Units: vh and vw

  • vh: 1% of viewport height
  • vw: 1% of viewport width
.hero {
  height: 100vh;
  width: 50vw;
}
  • Use cases:
    • Full-height sections
    • Responsive typography
    • Fluid layouts

Note: Viewport units offer unique solutions for responsive design challenges

Responsive Design Best Practices

  1. Start with a mobile-first approach
  2. Use flexible grid systems (e.g., Flexbox, CSS Grid)
  3. Optimize images for different screen sizes
  4. Test on various devices and browsers
  5. Consider performance implications
  6. Use responsive typography
body {
  font-size: calc(16px + 0.5vw);
}

Note: Combining these techniques creates robust, adaptable layouts

Questions?