CSS3: Introduction

CSS (Cascading Style Sheets) is the style language used to define the visual presentation of HTML documents.

What is CSS3?

CSS3 is the latest evolution of style sheets, introducing advanced features that allow you to create complex layouts, animations and visual effects without needing JavaScript.

Fundamental Selectors

Basic Selectors

/* Element selector */
p { color: blue; }

/* Class selector */
.highlight { background-color: yellow; }

/* ID selector */
#header { font-size: 2rem; }

/* Universal selector */
* { margin: 0; padding: 0; }

Advanced Selectors

/* Descendant selector */
nav ul li a { text-decoration: none; }

/* Direct child selector */
.container > .item { margin: 10px; }

/* Pseudo-classes */
a:hover { color: red; }
li:first-child { font-weight: bold; }
input:focus { border-color: blue; }

/* Pseudo-elements */
p::first-line { font-size: 1.2em; }
h2::before { content: "→ "; }

Flexbox

Flexbox is a one-dimensional layout model perfect for aligning elements in a row or column:

.container {
  display: flex;
  justify-content: center;    /* horizontal alignment */
  align-items: center;        /* vertical alignment */
  gap: 20px;                  /* space between elements */
  flex-wrap: wrap;            /* allows wrapping */
}

.item {
  flex: 1 1 300px;            /* grow, shrink, basis */
}

CSS Grid

CSS Grid is a two-dimensional layout system for complex layouts:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  min-height: 100vh;
}

.header { grid-column: 1 / -1; }
.sidebar { grid-row: 2 / 3; }
.footer { grid-column: 1 / -1; }

CSS Variables (Custom Properties)

:root {
  --primary-color: #3498db;
  --spacing: 16px;
  --font-main: 'Raleway', sans-serif;
}

.button {
  background-color: var(--primary-color);
  padding: var(--spacing);
  font-family: var(--font-main);
}

Media Queries for Responsive Design

/* Mobile first */
.container { padding: 16px; }

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

/* Desktop */
@media (min-width: 1024px) {
  .container { max-width: 1200px; margin: 0 auto; }
}

Preprocessors: Sass/SCSS

Sass (Syntactically Awesome Style Sheets) extends CSS with advanced features:

// Variables
$primary: #3498db;
$spacing: 16px;

// Nesting
.nav {
  background: #333;
  
  ul {
    list-style: none;
    
    li {
      display: inline-block;
      
      a {
        color: white;
        padding: $spacing;
        
        &:hover {
          color: $primary;
        }
      }
    }
  }
}

// Mixin
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
}

Conclusion

CSS3 offers powerful tools for creating modern and responsive layouts. Combined with preprocessors like Sass, it allows you to write more maintainable and organized styles.