In HTML-first development, CSS is often the second step after HTML.
Many visual effects can be created with CSS instead of JavaScript.
CSS can handle layouts, hover effects, transitions, animations, responsive design, and simple state changes.
Hover Effects
The :hover selector can change an element when the mouse is over it.
Example
<style>
button:hover {
background-color:#059862;
}
</style>
<button>Hover Over Me</button>
Transitions
CSS transitions can animate changes smoothly.
Example
<style>
.box {
width:100px;
height:100px;
background-color:#04AA6D;
transition:width 0.5s;
}
.box:hover {
width:200px;
}
</style>
<div class="box"></div>
Show and Hide Content
CSS can show and hide content using selectors.
This can be useful for simple menus and dropdowns.
Example
<style>
.menu-content {
display:none;
}
.menu:hover .menu-content {
display:block;
}
</style>
<div class="menu">
Menu
<div class="menu-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</div>
</div>
Responsive Layouts
CSS media queries can change the layout for different screen sizes.
This avoids the need for JavaScript-based layout changes.
Example
<style>
.container {
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:16px;
}
@media (max-width:600px) {
.container {
grid-template-columns:1fr;
}
}
</style>
CSS Animations
CSS animations can create repeated movement without JavaScript.
Example
<style>
.spinner {
width:40px;
height:40px;
border:6px solid #ddd;
border-top:6px solid #04AA6D;
border-radius:50%;
animation:spin 1s linear infinite;
}
@keyframes spin {
to { transform:rotate(360deg); }
}
</style>
<div class="spinner"></div>
When CSS Is Enough
CSS is often enough when the change is visual.
Use CSS for colors, sizes, spacing, layout, motion, and simple visibility changes.
Use JavaScript when the page needs logic, data processing, storage, or communication with a server.
Note: If the problem is visual, try CSS first.
