Plain CSS
Description
Cascading Style Sheets (CSS) is the styling technology of the web. All other styling techniques discussed on this site are built on top of CSS, with the exception of inline styles (which are still heavily inspired by CSS. This page covers "plain" CSS, i.e. CSS without any preprocessing steps or JavaScript integration.
To start using CSS, create a file with the .css extension. Then, write a selector, which identifies one or more elements on the page, followed by the CSS properties you would like to apply to those elements. For example, the CSS
p {
color: red;
margin-bottom: 1.5rem;
}
would make every <p> element have red text and a 1.5rem bottom margin.
Purpose and Use Cases
CSS is your primary tool for styling and positioning content on the web.
The are two ways to bring CSS files into your React application. The most common option is to import the CSS file from your JavaScript:
import './styles/app.css';
though this facility is provided by your bundler (e.g. Webpack) rather than the JavaScript language itself. The other, more traditional method of including CSS files is to add a <link> tag to the <head> of your HTML document:
<head>
<link rel="stylesheet" href="/styles/app.css" />
</head>
Tradeoffs
While CSS has become more powerful over time, e.g. with the introduction of CSS variables (a.k.a. custom properties), it is still somewhat limited compared the other technologies discussed in this section of the site. Some specific drawbacks of plain CSS are:
- CSS is a fairly basic language. It does not have built-in support for advanced concepts like inheritance and mixins which can improve maintainability.
- React components and CSS rules are written in separate files. This can make it harder to keep track of which styles are for which components as your application grows.
- Styles are not scoped to particular React components, so it is easy to accidentally apply styles more broadly than intended.
When Should I Consider Using This?
Plain CSS is an appropriate styling tool for virtually any website, though it's especially useful when:
- You are new to web development and want start with the basics.
- You are working on a relatively small application where the drawbacks of CSS are less likely to be an issue.
- You dislike complex build processes and want to start writing application code immediately.
- Performance is critical. Plain CSS avoids the CPU overhead incurred by CSS-in-JS libraries.
Further Information
- The MDN Web Docs provide extensive documentation on every CSS property.
- BEM is a CSS methodology that helps keep things organized as a codebase grows.
Example
This example shows how to create the following component using React and CSS.
Start by writing your React JSX as usual. Add className props to elements you wish to style — we'll use these class names in our CSS.
export function Card() {
return (
<div className="card">
<div className="card-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<button>OK</button>
</div>
);
}
Now add a CSS file:
/* .card is a selector which targets all elements with className="card" */
.card {
border: 1px solid #ccc;
border-radius: 0.5rem;
padding: 1rem;
max-width: 200px;
/* There are multiple formats for defining colors in CSS. This rule uses
* rgba to make a black shadow that is nearly transparent. */
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
/* Target all `card-content` elements that are within a `card` */
.card .card-content {
margin-bottom: 1rem;
}
/* Target all buttons, regardless of class name */
button {
border: 0;
background-color: #0d6efd;
color: white;
padding: 0.5rem;
font-size: 1rem;
border-radius: 0.25rem;
width: 100%;
}
/* Make the button darker when the user hovers over it */
button:hover {
background-color: #025ce3;
}
Finally, import the CSS file into one of your top-level React files. If you have a file called App.jsx, that's a good place for this!
import './styles.css';