Master CSS from zero to expert
CSS allows you to style HTML pages in a simple and organized way, separating presentation from content.
/* Basic style example */
body {
font-family: 'Lato', sans-serif;
background-color: #fefefe;
color: #333;
}
They indicate which elements of the document the styles will be applied to.
/* Tag selector */
p {
color: blue;
}
/* Class selector */
.highlight {
background-color: yellow;
}
/* ID selector */
#main {
font-weight: bold;
}
Describes how elements are represented as rectangles, including content, padding, border, and margin.
/* Box-model example */
.box {
width: 200px;
padding: 10px;
margin: 20px;
border: 2px solid #000;
}
A one-dimensional layout system to distribute elements in flexible containers.
.flex-container {
display: flex;
justify-content: space-around;
align-items: center;
}
.item {
flex: 1;
margin: 10px;
}
A two-dimensional layout system for building more complex layouts.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.item {
background-color: #ddd;
padding: 20px;
}
They bring life and dynamism to elements without needing JavaScript.
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.rotate {
animation: spin 2s linear infinite;
}
Ensures correct display on different devices and screen sizes.
@media (max-width: 600px) {
body {
font-size: 14px;
}
.flex-container {
flex-direction: column;
}
}
Allow you to reuse and change values easily throughout the style sheet.
:root {
--primary-color: #3498db;
--base-padding: 10px;
}
.button {
background-color: var(--primary-color);
padding: var(--base-padding);
}
Let you rotate, scale, translate, or skew elements visually.
.rotated {
transform: rotate(45deg);
}
.scaled {
transform: scale(1.5);
}
Create smooth effects when changing element properties (for example, on hover).
.button {
background-color: #ccc;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #666;
}
Apply graphic effects like blur, grayscale, or saturation.
img {
filter: grayscale(100%);
}
.blurred {
filter: blur(5px);
}
They apply when elements are in a specific state (hover, focus, active, visited, etc.).
a:hover {
color: red;
}
input:focus {
border: 2px solid blue;
}
Create smooth transitions between two or more colors.
.gradient {
background: linear-gradient(to right, red, yellow);
}
.radial {
background: radial-gradient(circle, #ff9900, #ffffff);
}
They can be applied to both elements and text.
.shadow {
box-shadow: 2px 2px 5px grey;
}
.text-shadow {
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
Controls alignment, spacing, transformation, and other typographic properties of text.
.centered {
text-align: center;
}
.uppercase {
text-transform: uppercase;
}
Manages fonts, their style, weight, and more.
.title {
font-family: 'Georgia', serif;
font-weight: 700;
}
.subtitle {
font-style: italic;
}
Controls how images are displayed, their size, and position.
img {
max-width: 100%;
height: auto;
}
.rounded-image {
border-radius: 10px;
}
Apply backgrounds, including images, position, and repetition.
.bg-image {
background-image: url('background.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
Controls the thickness, style, and color of element borders.
.solid-border {
border: 2px solid green;
}
.dotted-border {
border: 2px dotted #999;
}
Customize the style of ordered or unordered lists.
ul {
list-style-type: square;
padding-left: 20px;
}
ol {
list-style-type: decimal-leading-zero;
}
Add or modify borders, spacing, and styles in tables.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
}
Style form elements to improve user experience.
label {
display: block;
margin-bottom: 5px;
}
input[type="text"] {
width: 200px;
padding: 5px;
}
button {
background-color: #3498db;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
}
Consult MDN, W3Schools, CSS-Tricks, CanIUse, JSFiddle, and CodePen to expand your knowledge.
Controls how elements are positioned in the document (static, relative, absolute, fixed, sticky).
.relative-element {
position: relative;
top: 10px;
left: 20px;
}
.fixed-element {
position: fixed;
bottom: 0;
right: 0;
}
Defines what happens when an element's content overflows its container.
.hidden-container {
width: 200px;
height: 100px;
overflow: hidden;
}
Controls the stacking order of positioned elements (relative, absolute, fixed).
.top-layer {
position: absolute;
z-index: 999;
}
Allows you to split content into multiple columns for more fluid text layouts.
.multi-col {
column-count: 3;
column-gap: 20px;
}
Similar to border, but doesn't take up space or modify the element's size.
.highlight {
outline: 2px dashed red;
}
Sets the transparency of an element.
.semi-transparent {
opacity: 0.5;
}
Controls the type of cursor when hovering over an element.
.pointer {
cursor: pointer;
}
.wait {
cursor: wait;
}
Defines how the total width and height of an element are calculated (content-box, border-box).
*, *::before, *::after {
box-sizing: border-box;
}
Controls how whitespace is handled inside an element.
.no-wrap {
white-space: nowrap;
}
Allows you to control the direction of text (horizontal, vertical, etc.).
.vertical-text {
writing-mode: vertical-rl;
}
Lets you perform dynamic math calculations for property values.
.bar {
width: calc(100% - 40px);
margin: 20px;
}
Defines how far the background (color or image) extends (content, padding, or border).
.clip-example {
background-clip: content-box;
background-color: lightblue;
padding: 10px;
border: 5px solid pink;
}
Specifies the background positioning area (border-box, padding-box, content-box).
.origin-example {
background-origin: padding-box;
background-image: url('example.jpg');
}
Determines whether the background image scrolls with the content or remains fixed.
.fixed-background {
background-attachment: fixed;
background-image: url('example.jpg');
}
Controls how replaced content, like images or videos, is resized (cover, contain, fill).
img {
width: 300px;
height: 200px;
object-fit: cover;
}
Sets the position of replaced content inside its container.
img {
object-position: top right;
}
Gives a 3D depth plane to a child element for transformations.
.stage {
perspective: 600px;
}
.object {
transform: rotateY(45deg);
}
Adjusts the origin point of the 3D perspective.
.stage {
perspective: 600px;
perspective-origin: left top;
}
Specifies how 3D elements are nested (flat or preserve-3d).
.container-3d {
transform-style: preserve-3d;
}
Controls the visibility of the back face of an element when rotated in 3D.
.card {
backface-visibility: hidden;
transform: rotateY(180deg);
}
Inverts the colors of an element, useful for dark modes or special effects.
.invert {
filter: invert(100%);
}
Defines a value with a minimum, preferred, and maximum in a single expression.
.clamp-text {
font-size: clamp(1rem, 2vw, 2rem);
}
Mainly used in pseudo-elements (::before, ::after) to insert content.
.note::before {
content: "Notice:";
font-weight: bold;
margin-right: 5px;
}
Gives maximum priority to a property; recommended to use sparingly.
.alert {
color: red !important;
}
Controls scrolling behavior when reaching the boundary of a container (auto, contain, none).
.scrollable {
overscroll-behavior: contain;
height: 200px;
overflow: auto;
}
Allows you to style the scrollbar in WebKit-based browsers.
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #eee;
}
::-webkit-scrollbar-thumb {
background: #888;
}
Controls whether text or elements can be selected by the user.
.no-select {
user-select: none;
}
Defines whether an element can capture pointer events (click, hover, etc.).
.invisible a {
pointer-events: none;
}
Specifies how an element's content should blend with its parent or background.
.blend-mode {
mix-blend-mode: multiply;
}
Advises the browser of likely future changes to the property, optimizing rendering.
.animated {
will-change: transform;
transition: transform 0.5s;
}
Lets you control how content flows around a defined shape.
.custom-shape {
float: left;
shape-outside: circle(50% at 50% 50%);
width: 200px;
height: 200px;
clip-path: circle(50% at 50% 50%);
}