CSS PROPERTIES

THESE ARE JUST EXAMPLES WITH DESCRIPTIONS

 BASIC STYLES

background-color: #000000; /* Sets background color of an element */

color: #FFFFFF; /* Sets text color */

font-family: Arial, sans-serif; /* Sets font style */

font-size: 16px; /* Sets the size of the text */

font-weight: bold; /* Sets text to bold */

text-align: center; /* Aligns text to the center */

line-height: 1.5; /* Sets spacing between lines */

BORDER & BOX

border: 2px solid #FFFFFF; /* Sets border width, style, and color */

border-radius: 10px; /* Rounds the corners of an element */

padding: 20px; /* Adds space inside the border */

margin: 10px; /* Adds space outside the border */

box-shadow: 0px 0px 10px #FFFFFF; /* Adds shadow around an element */

SIZE

width: 300px; /* Sets element width */

height: 200px; /* Sets element height */

max-width: 100%; /* Restricts maximum width */

min-height: 100px; /* Ensures a minimum height */

DISPLAY & POSITION

display: block; /* Sets display type */

position: relative; /* Allows absolute children */

top: 10px; /* Moves element 10px down */

left: 10px; /* Moves element 10px right */

overflow: hidden; /* Hides overflow content */

z-index: 10; /* Controls stacking order */

BACKGROUND

background-image: url("https://example.com/image.jpg"); /* Sets a background image */

background-size: cover; /* Ensures background image covers area */

background-repeat: no-repeat; /* Prevents image repetition */

background-position: center; /* Centers the background image */

CURSOR

cursor: url("https://example.com/cursor.cur"), auto; /* Sets a custom cursor */

cursor: url("https://downloads.totallyfreecursors.com/cursor_files/candypink.ani"), url("https://downloads.totallyfreecursors.com/thumbnails/candypink.gif"), auto !important;

TRANSITION & ANIMATION

transition: all 0.3s ease-in-out; /* Smooth transition for changes */

animation: myAnim 1s infinite; /* Applies CSS animation */

@keyframes myAnim {

  0% { opacity: 0; transform: scale(0.8); }

  100% { opacity: 1; transform: scale(1); }

}

TEXT STYLES

text-decoration: none; /* Removes underline on links */

text-transform: uppercase; /* Makes text uppercase */

letter-spacing: 1px; /* Adds spacing between letters */

text-shadow: 2px 2px 4px #000000; /* Adds shadow to text */

white-space: nowrap; /* Prevents text from wrapping */

word-break: break-word; /* Breaks long words if necessary */

direction: rtl; /* Sets text direction (right-to-left) */

font-style: italic; /* Makes text italic */

font-variant: small-caps; /* Displays text in small capital letters */

LIST STYLES

list-style: none; /* Removes bullets from lists */

list-style-position: inside; /* Moves bullet inside content */

list-style-type: square; /* Changes bullet shape */

FLEX & GRID

display: flex; /* Uses Flexbox layout */

justify-content: center; /* Centers content horizontally */

align-items: center; /* Centers content vertically */

flex-direction: column; /* Stacks children vertically */

display: grid; /* Uses Grid layout */

grid-template-columns: 1fr 2fr; /* Sets grid column widths */

gap: 10px; /* Sets space between grid items */

EXTRA POSITIONING

right: 0; /* Positions element from the right */

bottom: 0; /* Positions element from the bottom */

float: left; /* Floats element to the left */

clear: both; /* Prevents floating conflicts */

EFFECTS

transform: rotate(5deg); /* Rotates the element */

filter: blur(2px); /* Applies blur effect */

mix-blend-mode: screen; /* Defines how an element blends with background */

backface-visibility: hidden; /* Hides element's back side during transforms */

clip-path: circle(50%); /* Clips element into a circular shape */

UI & SCROLLING

pointer-events: none; /* Disables mouse interactions */

user-select: none; /* Prevents text selection */ IDK

resize: both; /* Allows element to be resized */

scroll-behavior: smooth; /* Enables smooth scrolling */ IDK

TABLE STYLES

border-collapse: collapse; /* Merges table borders */

table-layout: fixed; /* Fixes column width behavior */

caption-side: bottom; /* Positions table caption below table */

ADVANCED ANIMATION

animation-delay: 0.2s; /* Delays animation start */

animation-duration: 2s; /* Length of animation */

animation-iteration-count: infinite; /* Repeats animation forever */

animation-timing-function: ease-in-out; /* Smooth animation timing */

MISC SOME OF THESE MAY BE BROKEN!

box-sizing: border-box; /* Includes padding & border in total size */

outline: none; /* Removes focus outline */

will-change: transform; /* Optimizes performance for changes */

caret-color: pink; /* Changes text input cursor color */

scrollbar-width: thin; /* Slim scrollbar for Firefox */

scrollbar-color: #FF69B4 #000; /* Custom scrollbar color */

EXTRA CURSORS

cursor: crosshair; /* Crosshair cursor */

cursor: grab; /* Grab cursor (for draggable items) */

cursor: url("https://cur.cursors-4u.net/sports/spo-3/spo267.cur"), auto; /* Custom sports cursor */

Working example cursor only works on PC!

-----------‐------------------‐------------------‐------------------‐------------------‐------------------‐-

cursor: url("https://downloads.totallyfreecursors.com/cursor_files/candypink.ani"), url("https://downloads.totallyfreecursors.com/thumbnails/candypink.gif"), auto !important;

-----------‐------------------‐------------------‐------------------‐------------------‐------------------‐-

VISIBILITY & OPACITY

opacity: 0.8; /* Sets transparency level */

visibility: hidden; /* Hides element without removing it */

display: none; /* Completely removes element from view */