CSS Styling & Layout

Duration: 35 min

CSS (Cascading Style Sheets) controls the visual appearance of HTML elements. It handles colors, fonts, spacing, positioning, and layout. CSS separates content from presentation, making websites easier to maintain and style.

CSS Selectors

Selectors target HTML elements to apply styles. There are several types:

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

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

/* ID selector */
#header {
  background-color: navy;
}

/* Attribute selector */
input[type="email"] {
  border: 1px solid gray;
}

/* Descendant selector */
div p {
  margin: 10px;
}

/* Child selector */
ul > li {
  list-style: none;
}

/* Pseudo-class selector */
a:hover {
  text-decoration: underline;
}

button:active {
  transform: scale(0.95);
}

The Box Model

Every HTML element is a box with content, padding, border, and margin:

.box {
  /* Content width and height */
  width: 200px;
  height: 100px;
  
  /* Padding: space inside the border */
  padding: 20px;
  
  /* Border: line around the element */
  border: 2px solid black;
  
  /* Margin: space outside the border */
  margin: 30px;
}

The total width = margin + border + padding + width

Colors and Fonts

CSS offers multiple ways to specify colors and style text:

.text {
  /* Colors */
  color: red;                    /* Named color */
  color: #FF0000;                /* Hex color */
  color: rgb(255, 0, 0);         /* RGB */
  color: rgba(255, 0, 0, 0.5);   /* RGBA with transparency */
  
  /* Fonts */
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
  text-decoration: underline;
  letter-spacing: 2px;
}

Display Property

The display property controls how elements are laid out:

/* Block: takes full width, starts new line */
div {
  display: block;
}

/* Inline: flows with text, no width/height */
span {
  display: inline;
}

/* Inline-block: flows with text but accepts width/height */
button {
  display: inline-block;
  width: 100px;
  height: 40px;
}

/* None: hides element */
.hidden {
  display: none;
}

/* Flex: flexible layout */
.container {
  display: flex;
  gap: 10px;
}

/* Grid: two-dimensional layout */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Positioning

The position property controls element placement:

/* Static: default positioning */
.static {
  position: static;
}

/* Relative: positioned relative to normal position */
.relative {
  position: relative;
  top: 10px;
  left: 20px;
}

/* Absolute: positioned relative to nearest positioned parent */
.absolute {
  position: absolute;
  top: 50px;
  right: 20px;
}

/* Fixed: positioned relative to viewport */
.fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

/* Sticky: toggles between relative and fixed */
.sticky {
  position: sticky;
  top: 0;
}

Flexbox Basics

Flexbox is a powerful layout system for one-dimensional layouts:

.flex-container {
  display: flex;
  justify-content: center;      /* Horizontal alignment */
  align-items: center;          /* Vertical alignment */
  gap: 15px;                    /* Space between items */
  flex-wrap: wrap;              /* Wrap items to next line */
}

.flex-item {
  flex: 1;                      /* Equal width */
  min-width: 200px;
}

Grid Basics

CSS Grid is for two-dimensional layouts:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
  grid-template-rows: auto 200px auto;    /* Row heights */
  gap: 20px;
}

.grid-item {
  grid-column: span 2;          /* Span 2 columns */
  grid-row: 1 / 3;              /* Span rows 1 to 3 */
}

Transitions and Transforms

Add smooth animations and transformations:

.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: darkblue;
}

.box {
  transform: rotate(45deg);
  transform: scale(1.2);
  transform: translateX(50px);
  transform: skew(10deg);
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.animated {
  animation: slide 2s infinite;
}