CSS Quick Reference for React & Regular CSS

Basics

Selectors

• * – Universal selector
• element – Selects all elements of that type (e.g., div)
• #id – Selects element by ID
• .class – Selects elements by class name
• [attribute=value] – Attribute selectors

Combining Selectors

• div p – Descendant selector
• div > p – Direct child selector
• div + p – Adjacent sibling selector
• div ~ p – General sibling selector

Box Model

Property	Description
width	Width of element
height	Height of element
margin	Space outside border
padding	Space between content and border
border	Border around element
box-sizing: border-box	Includes padding and border in width/height

Display & Positioning

Property	Description
display	block, inline, inline-block, flex, grid, none
position	static, relative, absolute, fixed, sticky
z-index	Layer order
overflow	visible, hidden, scroll, auto

Flexbox

Property	Description
display: flex	Enables flex container
justify-content	Aligns items horizontally (start, center, space-between)
align-items	Aligns items vertically (start, center, stretch)
flex-wrap	Wrap items to next line
gap	Space between items

Grid

Property	Description
display: grid	Enables grid layout
grid-template-columns	Defines column structure
grid-template-rows	Defines row structure
gap	Space between items
justify-items	Aligns items horizontally
align-items	Aligns items vertically

Colors & Backgrounds

Property	Description
color	Text color
background	Background color or image
opacity	Transparency (0 to 1)
box-shadow	Shadow effect
background-size	cover, contain, custom sizes

Typography

Property	Description
font-family	Font type
font-size	Text size
font-weight	Boldness
line-height	Line spacing
letter-spacing	Space between letters
text-align	Alignment

Transitions & Animations

Property	Description
transition	Animate property changes
animation	Keyframe animations
transform	Rotate, scale, skew, translate
@keyframes	Define animation frames

Pseudo-classes & Pseudo-elements

Selector	Description
:hover	Mouse hover
:nth-child(n)	Select nth child
::before	Insert content before element
::after	Insert content after element

Media Queries

@media (max-width: 768px) {
body {
background: lightgray;
}
}
    

Common Utilities

Property	Description
visibility	Show or hide element
cursor	Cursor type
user-select	Prevent text selection
pointer-events	Enable or disable pointer events

CSS in React

• Use className instead of class
• Inline Styles: { style: { backgroundColor: 'red' } }
• CSS Modules: import styles from './styles.module.css';
• Styled-components: const Button = styled.button`background: red`;