Complete Professional CSS Guide

Master CSS from zero to expert

Introduction to CSS

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;
}

CSS Selectors

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;
}

Box Model

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;
}

Flexbox

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;
}

Grid CSS

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;
}

CSS Animations

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;
}

Responsive Design

Ensures correct display on different devices and screen sizes.

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
  .flex-container {
    flex-direction: column;
  }
}

CSS Variables

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);
}

CSS Transformations

Let you rotate, scale, translate, or skew elements visually.

.rotated {
  transform: rotate(45deg);
}
.scaled {
  transform: scale(1.5);
}

CSS Transitions

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;
}

CSS Filters

Apply graphic effects like blur, grayscale, or saturation.

img {
  filter: grayscale(100%);
}
.blurred {
  filter: blur(5px);
}

CSS Pseudo-classes

They apply when elements are in a specific state (hover, focus, active, visited, etc.).

a:hover {
  color: red;
}
input:focus {
  border: 2px solid blue;
}

CSS Gradients

Create smooth transitions between two or more colors.

.gradient {
  background: linear-gradient(to right, red, yellow);
}
.radial {
  background: radial-gradient(circle, #ff9900, #ffffff);
}

CSS Shadows

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);
}

Text in CSS

Controls alignment, spacing, transformation, and other typographic properties of text.

.centered {
  text-align: center;
}
.uppercase {
  text-transform: uppercase;
}

Typography in CSS

Manages fonts, their style, weight, and more.

.title {
  font-family: 'Georgia', serif;
  font-weight: 700;
}
.subtitle {
  font-style: italic;
}

Images in CSS

Controls how images are displayed, their size, and position.

img {
  max-width: 100%;
  height: auto;
}
.rounded-image {
  border-radius: 10px;
}

Backgrounds in CSS

Apply backgrounds, including images, position, and repetition.

.bg-image {
  background-image: url('background.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Borders in CSS

Controls the thickness, style, and color of element borders.

.solid-border {
  border: 2px solid green;
}
.dotted-border {
  border: 2px dotted #999;
}

Lists in CSS

Customize the style of ordered or unordered lists.

ul {
  list-style-type: square;
  padding-left: 20px;
}
ol {
  list-style-type: decimal-leading-zero;
}

Tables in CSS

Add or modify borders, spacing, and styles in tables.

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
}

Forms in CSS

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;
}

Resources and Tools

Consult MDN, W3Schools, CSS-Tricks, CanIUse, JSFiddle, and CodePen to expand your knowledge.

Position in CSS

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;
}

Overflow in CSS

Defines what happens when an element's content overflows its container.

.hidden-container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

Z-Index in CSS

Controls the stacking order of positioned elements (relative, absolute, fixed).

.top-layer {
  position: absolute;
  z-index: 999;
}

Columns in CSS

Allows you to split content into multiple columns for more fluid text layouts.

.multi-col {
  column-count: 3;
  column-gap: 20px;
}

Outline in CSS

Similar to border, but doesn't take up space or modify the element's size.

.highlight {
  outline: 2px dashed red;
}

Opacity in CSS

Sets the transparency of an element.

.semi-transparent {
  opacity: 0.5;
}

Cursor in CSS

Controls the type of cursor when hovering over an element.

.pointer {
  cursor: pointer;
}
.wait {
  cursor: wait;
}

Box-Sizing in CSS

Defines how the total width and height of an element are calculated (content-box, border-box).

*, *::before, *::after {
  box-sizing: border-box;
}

White-Space in CSS

Controls how whitespace is handled inside an element.

.no-wrap {
  white-space: nowrap;
}

Writing Mode in CSS

Allows you to control the direction of text (horizontal, vertical, etc.).

.vertical-text {
  writing-mode: vertical-rl;
}

Using calc() in CSS

Lets you perform dynamic math calculations for property values.

.bar {
  width: calc(100% - 40px);
  margin: 20px;
}

Background-Clip

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;
}

Background-Origin

Specifies the background positioning area (border-box, padding-box, content-box).

.origin-example {
  background-origin: padding-box;
  background-image: url('example.jpg');
}

Background-Attachment

Determines whether the background image scrolls with the content or remains fixed.

.fixed-background {
  background-attachment: fixed;
  background-image: url('example.jpg');
}

Object-Fit

Controls how replaced content, like images or videos, is resized (cover, contain, fill).

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

Object-Position

Sets the position of replaced content inside its container.

img {
  object-position: top right;
}

Perspective

Gives a 3D depth plane to a child element for transformations.

.stage {
  perspective: 600px;
}
.object {
  transform: rotateY(45deg);
}

Perspective-Origin

Adjusts the origin point of the 3D perspective.

.stage {
  perspective: 600px;
  perspective-origin: left top;
}

Transform-Style

Specifies how 3D elements are nested (flat or preserve-3d).

.container-3d {
  transform-style: preserve-3d;
}

Backface-Visibility

Controls the visibility of the back face of an element when rotated in 3D.

.card {
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

Invert Colors (filter: invert)

Inverts the colors of an element, useful for dark modes or special effects.

.invert {
  filter: invert(100%);
}

Using clamp() in CSS

Defines a value with a minimum, preferred, and maximum in a single expression.

.clamp-text {
  font-size: clamp(1rem, 2vw, 2rem);
}

Content Property (Pseudo-elements)

Mainly used in pseudo-elements (::before, ::after) to insert content.

.note::before {
  content: "Notice:";
  font-weight: bold;
  margin-right: 5px;
}

Using !important

Gives maximum priority to a property; recommended to use sparingly.

.alert {
  color: red !important;
}

Overscroll-Behavior

Controls scrolling behavior when reaching the boundary of a container (auto, contain, none).

.scrollable {
  overscroll-behavior: contain;
  height: 200px;
  overflow: auto;
}

Scrollbar Styling

Allows you to style the scrollbar in WebKit-based browsers.

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #eee;
}
::-webkit-scrollbar-thumb {
  background: #888;
}

User-Select

Controls whether text or elements can be selected by the user.

.no-select {
  user-select: none;
}

Pointer-Events

Defines whether an element can capture pointer events (click, hover, etc.).

.invisible a {
  pointer-events: none;
}

Mix-Blend-Mode

Specifies how an element's content should blend with its parent or background.

.blend-mode {
  mix-blend-mode: multiply;
}

Will-Change

Advises the browser of likely future changes to the property, optimizing rendering.

.animated {
  will-change: transform;
  transition: transform 0.5s;
}

Shape-Outside

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%);
}