mdxtools

Tool Categories

📊 Calculations✍ī¸ Text & Writing🔧 Utilities🎨 Image & Design⚡ Generators🔄 Converters

Quick Links

Privacy PolicyTerms of Service

CSS Cheat Sheet

Complete CSS properties reference guide

CSS Cheat Sheet

Quick reference guide for CSS properties and selectors. Click the copy button to copy any command.

107
Total Commands
107
Filtered Results

Selectors

CommandCopyDescription
*Universal selector
elementElement selector
.classClass selector
#idID selector
element.classElement with class
element, elementMultiple selectors
element elementDescendant selector
element > elementChild selector
element + elementAdjacent sibling
element ~ elementGeneral sibling
[attribute]Attribute selector
[attribute="value"]Attribute with value
:hoverHover pseudo-class
:activeActive pseudo-class
:focusFocus pseudo-class
::beforeBefore pseudo-element
::afterAfter pseudo-element

Display

CommandCopyDescription
display: blockBlock display
display: inlineInline display
display: inline-blockInline-block display
display: flexFlexbox display
display: gridGrid display
display: noneHide element

Position

CommandCopyDescription
position: staticDefault positioning
position: relativeRelative positioning
position: absoluteAbsolute positioning
position: fixedFixed positioning
position: stickySticky positioning
top: 0Top position
right: 0Right position
bottom: 0Bottom position
left: 0Left position
z-index: 10Z-index stacking

Box Model

CommandCopyDescription
width: 100pxSet width
height: 100pxSet height
max-width: 100%Maximum width
min-height: 100vhMinimum height
margin: 10pxAll margins
padding: 10pxAll padding
border: 1px solid blackBorder shorthand
box-sizing: border-boxInclude padding in width

Colors

CommandCopyDescription
color: redText color
background-color: blueBackground color
opacity: 0.5Opacity
color: rgb(255, 0, 0)RGB color
color: rgba(255, 0, 0, 0.5)RGBA color with alpha
color: #ff0000Hex color
color: hsl(0, 100%, 50%)HSL color

Typography

CommandCopyDescription
font-family: Arial, sans-serifFont family
font-size: 16pxFont size
font-weight: boldFont weight
font-style: italicFont style
text-align: centerText alignment
text-decoration: underlineText decoration
text-transform: uppercaseText transform
line-height: 1.5Line height
letter-spacing: 2pxLetter spacing
word-spacing: 5pxWord spacing

Background

CommandCopyDescription
background-image: url("image.jpg")Background image
background-repeat: no-repeatNo repeat
background-position: centerBackground position
background-size: coverCover background
background-attachment: fixedFixed background
background: linear-gradient(to right, red, blue)Linear gradient

Borders

CommandCopyDescription
border-width: 2pxBorder width
border-style: solidBorder style
border-color: blackBorder color
border-radius: 10pxRounded corners
border-top: 1px solid blackTop border only

Shadows

CommandCopyDescription
box-shadow: 2px 2px 5px rgba(0,0,0,0.3)Box shadow
text-shadow: 1px 1px 2px blackText shadow

Transforms

CommandCopyDescription
transform: translate(10px, 20px)Move element
transform: rotate(45deg)Rotate element
transform: scale(1.5)Scale element
transform: skew(10deg, 20deg)Skew element
transform-origin: centerTransform origin

Transitions

CommandCopyDescription
transition: all 0.3s easeTransition all properties
transition-property: opacityTransition property
transition-duration: 0.5sTransition duration
transition-timing-function: ease-inTiming function
transition-delay: 0.2sTransition delay

Animations

CommandCopyDescription
@keyframes animationName { }Define keyframes
animation: name 2s infiniteAnimation shorthand
animation-name: slideInAnimation name
animation-duration: 2sAnimation duration
animation-iteration-count: infiniteAnimation iteration

Flexbox

CommandCopyDescription
justify-content: centerJustify content
align-items: centerAlign items
flex-direction: columnFlex direction
flex-wrap: wrapFlex wrap
flex: 1Flex grow

Grid

CommandCopyDescription
grid-template-columns: repeat(3, 1fr)Grid columns
grid-template-rows: 100px autoGrid rows
grid-gap: 10pxGrid gap
grid-column: span 2Column span
grid-row: span 2Row span

Overflow

CommandCopyDescription
overflow: hiddenHide overflow
overflow: scrollScroll overflow
overflow: autoAuto overflow
overflow-x: hiddenHide horizontal overflow

Visibility

CommandCopyDescription
visibility: hiddenHide element (keeps space)
visibility: visibleShow element

Cursor

CommandCopyDescription
cursor: pointerPointer cursor
cursor: not-allowedNot-allowed cursor
cursor: moveMove cursor

Media Queries

CommandCopyDescription
@media (max-width: 768px) { }Mobile media query
@media (min-width: 768px) { }Desktop media query

All operations are performed locally in your browser. No data is sent to any server.

About CSS Cheat Sheet

This section will contain detailed, SEO-friendly content about the CSS Cheat Sheet.

In the future, this content will be managed through a headless CMS, allowing you to:

  • Add detailed explanations about how to use this tool
  • Include examples and use cases
  • Provide tips and best practices
  • Add FAQs and troubleshooting guides
  • Update content without touching the code

How to Use

Step-by-step instructions for using the CSS Cheat Sheet will appear here. This content will be fully customizable through the admin panel.

Features

Key features and benefits of this tool will be listed here. All content is editable via the CMS.