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
- Start with a mobile-first approach
- Use flexible grid systems (e.g., Flexbox, CSS Grid)
- Optimize images for different screen sizes
- Test on various devices and browsers
- Consider performance implications
- Use responsive typography
body {
font-size: calc(16px + 0.5vw);
}
Note: Combining these techniques creates robust, adaptable layouts
Questions?
Week 3 - Cascading Style Sheets
By kayashaolu
Week 3 - Cascading Style Sheets
Course Website: https://www.ischool.berkeley.edu/courses/info/253a
- 150