CSS Instead of JavaScript
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>
Try it Yourself »
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>
Try it Yourself »
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>
Try it Yourself »
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>
Try it Yourself »
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>
Try it Yourself »
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.
If the problem is visual, try CSS first.
