CSS Cheatsheet

/* Element selector */ p { color: blue; } /* Class selector */ .header { font-size: 24px; } /* ID selector */ #main { width: 100%; } /* Universal selector */ * { margin: 0; padding: 0; } /* Attribute selector */ input[type="text"] { border: 1px solid #ccc; }

/* Descendant selector */ div p { color: red; } /* Child selector */ div > p { font-weight: bold; } /* Adjacent sibling */ h1 + p { margin-top: 0; } /* General sibling */ h1 ~ p { color: gray; }

a:hover { color: red; } a:visited { color: purple; } a:active { color: orange; } input:focus { border: 2px solid blue; } li:first-child { font-weight: bold; } li:last-child { border-bottom: none; } li:nth-child(2n) { background: #f0f0f0; }

p::first-line { font-weight: bold; } p::first-letter { font-size: 2em; } p::before { content: "→ "; } p::after { content: " ←"; } ::selection { background: yellow; }

.box { width: 200px; height: 100px; padding: 20px; border: 5px solid #333; margin: 10px; box-sizing: border-box; /* or content-box */ }

.block { display: block; } .inline { display: inline; } .inline-block { display: inline-block; } .none { display: none; } .flex { display: flex; } .grid { display: grid; } .table { display: table; }

.static { position: static; } .relative { position: relative; top: 10px; } .absolute { position: absolute; top: 0; right: 0; } .fixed { position: fixed; top: 0; left: 0; } .sticky { position: sticky; top: 0; }

.flex-container { display: flex; flex-direction: row; /* or column */ justify-content: center; align-items: center; flex-wrap: wrap; } .flex-item { flex: 1; /* grow shrink basis */ flex-grow: 1; flex-shrink: 1; flex-basis: auto; }

.grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: auto; gap: 10px; grid-template-areas: "header header header" "sidebar main aside" "footer footer footer"; } .grid-item { grid-column: 1 / 3; grid-row: 1; }

.text { font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; /* or 400-900 */ font-style: italic; line-height: 1.5; letter-spacing: 1px; text-align: center; text-decoration: underline; text-transform: uppercase; color: #333; }

.text-effects { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; word-break: break-all; word-wrap: break-word; }

.colors { color: red; /* Named */ color: #ff0000; /* Hex */ color: rgb(255,0,0); /* RGB */ color: rgba(255,0,0,0.5); /* RGBA */ color: hsl(0,100%,50%); /* HSL */ color: hsla(0,100%,50%,0.5); /* HSLA */ }

.backgrounds { background-color: #f0f0f0; background-image: url('image.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; background: #f0f0f0 url('image.jpg') no-repeat center/cover; }

.transition { transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0s; /* Shorthand */ transition: all 0.3s ease 0s; } .button:hover { background: blue; transform: scale(1.1); }

@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } .animated { animation-name: slideIn; animation-duration: 1s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: alternate; /* Shorthand */ animation: slideIn 1s ease 0s infinite alternate; }