CSS - Cascading Style Sheets

Master the art of styling your web pages

150+ Properties
Responsive Design
Animations

🎨 What is CSS?

CSS (Cascading Style Sheets) is the language that describes how HTML elements should be displayed on screen, paper or other media. It controls the layout, colors, fonts and visual effects of a web page.

Without CSS

Simple Title

Normal text without style.

→

With CSS

Elegant Title

Text with an attractive style.

📝 Syntax of CSS

h1 {
color : blue ;
font-size : 32px ;
}
Selector

Selects the HTML elements the styles will be applied to

Property

The feature you want to change (color, size, margin, etc.)

Value

The specific value for the property (blue, 32px, center, etc.)

🎯 CSS Selectors

Selectors by Element

Selects elements by their tag HTML

p { color: red; }

Selectors by Class

Selects elements with a specific class

.destacado { background: yellow; }

Selectors by ID

Selects a unique element by its ID

#header { height: 100px; }

Selectors by Attribute

Selects elements with a specific attribute

input[type="text"] { border: 1px solid; }

Pseudo-clases

Selects elements in a specific state

a:hover { color: blue; }

Combinators

Combines selectors for greater specificity

div > p { margin: 0; }

HTML Example:

<div id="container">
    <h1 class="titulo">Title</h1>
    <p class="destacado">Highlighted paragraph</p>
    <p>Normal paragraph</p>
    <a href="#">Link</a>
    <input type="text" placeholder="Type something">
</div>

Result:

Title

Highlighted paragraph

Normal paragraph

Link

✨ Main Properties

This text will change based on the selected properties. Try it!

p { color: #3498db; font-size: 16px; font-weight: normal; }
margin
border
padding
content

Background demo area

📱 Responsive Design

Box 1
Box 2
Box 3

Media Queries:

/* Mobile First */
.container {
    width: 100%;
}

/* Tablet */
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        width: 970px;
    }
}

🎭 Animations and Transitions

Animate me!
/* Animación de rebote */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
}

.elemento {
    animation: bounce 1s infinite;
}

🔧 Application Methods

CSS External

.css Separate file linked in the HTML

<link rel="stylesheet" href="estilos.css">

✅ Advantages:

  • Reusable
  • Maintainable
  • Cacheable

CSS Internal

Styles inside the <style> tag in the HTML

<style> p { color: red; } </style>

✅ Advantages:

  • Quick to implement
  • Useful for single pages

CSS Inline

Styles directly on elements with the style

<p style="color: blue;">Texto</p>

✅ Advantages:

  • High specificity
  • Useful for dynamic styles

🛠️ Tools and Resources

🖌️ Preprocessors

  • SASS/SCSS: Variables, mixins, nesting
  • Less: Similar to SASS with different syntax
  • Stylus: Flexible syntax and powerful

📚 Frameworks CSS

  • Bootstrap: Most popular framework
  • Tailwind CSS: CSS utility-first
  • Bulma: Modern and based on Flexbox

🔍 Development Tools

  • Browser DevTools: Inspect and modify CSS
  • CSS Grid Generator: Visual tools for Grid
  • Flexbox Froggy: Game to learn Flexbox

💪 Practice Area

CSS Editor:

Result:

Style me!

💡 Tips for Mastering CSS

Mobile First

Start designing for mobile and then scale up for larger screens

CSS Variables

Use variables (custom properties) to keep things consistent

Specificity

Avoid !important and understand how the cascade works

Performance

Minimize CSS and use properties that don't cause repaint