SyntaxStudy
Sign Up
Home CSS Reference

CSS Reference

48 entries — click any item for full details and examples

Box Model

Name Description
box-sizing Defines how the total width and height of an element is calculated. border-box includes padding and border.
margin Sets the margin area on all four sides of an element. Accepts length, percentage, or auto.
padding Sets the padding area on all four sides of an element. Unlike margin, it cannot be negative.
width / height Sets the width and height of an element. Accepts px, %, em, rem, vw, vh, or auto.
overflow Specifies what to do when content overflows its block-level container.

Layout

Name Description
display Defines the display behavior of an element. One of the most fundamental CSS properties.
position Specifies how an element is positioned in a document. Combined with top, right, bottom, left.
z-index Controls the stacking order of positioned elements. Higher values appear in front.
float Specifies that an element should be placed along the left or right side of its container.

Flexbox

Name Description
flex-direction CSS3 Defines the direction flex items are placed in the flex container along the main axis.
justify-content CSS3 Aligns flex items along the main axis. Controls distribution of space between and around items.
align-items CSS3 Aligns flex items along the cross axis (perpendicular to the main axis).
flex-wrap CSS3 Specifies whether flex items should wrap onto multiple lines when they overflow the container.
flex CSS3 Shorthand for flex-grow, flex-shrink, and flex-basis. Controls how a flex item grows and shrinks.
gap (flexbox) CSS3 Sets the spacing between flex items. Replaces the margin hack for flex gaps.

CSS Grid

Name Description
grid-template-columns CSS3 Defines the number and size of columns in a grid container.
grid-template-areas CSS3 Defines named grid areas. Items are placed by referencing area names with grid-area.
grid-column / grid-row CSS3 Specifies a grid item's size and location by referencing specific grid lines.

Typography

Name Description
font-family Specifies the font for text. Always include fallback fonts and a generic family.
font-size Sets the size of the font. Prefer rem units for accessibility-friendly scaling.
font-weight Sets the weight (boldness) of the font. Numeric values range from 100 (thin) to 900 (black).
line-height Sets the height of a line box. Unitless values (like 1.5) are recommended for better scaling.
text-align Sets the horizontal alignment of inline content inside a block element.
text-decoration Sets the appearance of decorative lines on text. Can combine line, color, style, and thickness.
text-transform Controls the capitalization of text without changing the underlying HTML.
letter-spacing Sets the horizontal spacing between characters (tracking).

Colors & Backgrounds

Name Description
color Sets the foreground color of text content and text decorations.
background Shorthand for all background properties: color, image, repeat, position, size, and more.
background-size Sets the size of background images. cover fills the element; contain fits the entire image.
opacity Sets the opacity of an element. 0 is fully transparent, 1 is fully opaque. Affects all children.
CSS Variables (custom properties) CSS3 Custom properties that store reusable values. Defined with -- prefix and used with var().

Borders & Effects

Name Description
border Shorthand for border-width, border-style, and border-color. Can be set per side.
border-radius CSS3 Rounds the corners of an element's border. A value of 50% creates a circle.
box-shadow CSS3 Adds shadow effects around an element. Supports multiple comma-separated shadows.
text-shadow CSS3 Adds shadow effects to text. Supports multiple comma-separated shadows.
filter CSS3 Applies graphical effects like blur, brightness, and color shifts to an element.

Transitions

Name Description
transition CSS3 Shorthand for smooth transitions between CSS property values. Triggered by state changes.
transition-timing-function CSS3 Specifies the speed curve of a transition effect.

Animations

Name Description
animation CSS3 Shorthand for all animation properties. Requires a @keyframes rule defining the animation.
@keyframes CSS3 Defines the intermediate steps in a CSS animation sequence.

Transforms

Name Description
transform CSS3 Applies 2D or 3D transformations. Multiple functions can be chained together.

Other

Name Description
cursor Specifies the type of cursor to display when hovering over an element.
visibility Shows or hides an element without removing it from the document flow (unlike display: none).
@media (Media Queries) CSS3 Applies CSS rules based on device properties like screen width, height, or orientation.
:root pseudo-class Matches the root element of the document (same as html but with higher specificity). Ideal for CSS variables.
pseudo-classes Keywords added to selectors that specify a special state or position of the element.
::before / ::after Pseudo-elements that insert virtual elements before or after an element's content.
object-fit CSS3 Specifies how an <img> or <video> should be resized to fit its container.