Prompting AI for CSS Styling
CSS transforms plain HTML into something visually appealing. Modern CSS is powerful — you can create responsive layouts, smooth animations, and professional designs without any external libraries.
CSS Fundamentals
CSS works through selectors and properties:
/* Selector targets elements */
.project-card {
/* Properties define appearance */
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
Selectors can target elements (h1), classes (.project-card), IDs (#header), or combinations. Properties control everything from colors to layout to animations.
Modern Layout With Flexbox and Grid
Two CSS features handle most layout needs:
Flexbox arranges items in a row or column with flexible spacing:
.nav-links {
display: flex;
gap: 20px;
justify-content: space-between;
}
Grid creates two-dimensional layouts:
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
That grid code creates columns that automatically adjust — three columns on wide screens, two on medium, one on mobile.
Prompting AI for Styles
Describe the visual style you want:
Create CSS for my portfolio page with:
- Clean, modern design with lots of whitespace
- Color scheme: dark blue (#1a365d) and light gray (#f7fafc)
- Sans-serif font using system fonts
- Responsive layout that works on mobile and desktop
- Project cards in a grid that wraps on smaller screens
- Smooth hover effects on buttons and links
- Fixed navigation that stays at top when scrolling
Keep it simple and maintainable. Add comments explaining sections.
Be specific about colors, fonts, and behaviors. "Modern" means different things to different people — concrete details get better results.
Responsive Design
Responsive CSS adapts to different screen sizes using media queries:
/* Default styles for mobile */
.hero-content {
padding: 20px;
}
/* Larger screens */
@media (min-width: 768px) {
.hero-content {
padding: 60px;
max-width: 800px;
}
}
Ask AI to include responsive styles, then test by resizing your browser window.
Reviewing Generated CSS
Check that the CSS:
- Uses relative units (
rem,%) more than fixed pixels for flexibility - Includes hover and focus states for interactive elements
- Has media queries for different screen sizes
- Is organized logically with comments
If something doesn't look right, describe the problem: "The project cards are too close together on mobile. Add more spacing for screens under 600px wide."