CSS

What is CSS?

CSS (Cascading Style Sheets) is a style sheet used for describing the presentation of a document written in a markup language like HTML. CSS describes how elements should be rendered on screen. It is one of the core technologies of the World Wide Web, alongside HTML and JavaScript.

Simple Analogy

Think of CSS like a fashion designer for a website:

• HTML: Like a mannequin - it provides the basic structure

• CSS: Like a fashion designer who:
  • Picks the colors and patterns (colors, backgrounds)
  • Decides the size and fit (dimensions, spacing)
  • Chooses the accessories (borders, shadows)
  • Creates different looks for different occasions (media queries)
  • Maintains a consistent style guide (CSS variables)

Key Concepts

• Selectors: Patterns used to select the element(s) you want to style
• Properties: The actual styles you want to apply (color, size, position, etc.)
• Values: The specific settings for each property
• Grid: A two-dimensional layout system for arranging items in rows and columns
• Media Queries: Rules for applying different styles based on device characteristics

Example

/* Basic styling */
.website-header {
  background-color: #2c3e50;
  color: white;
  padding: 20px;
  font-family: Arial, sans-serif;
}

/* Responsive design */
@media (max-width: 768px) {
  .website-header {
    padding: 10px;
    font-size: 14px;
  }
}

/* Modern layout with Flexbox */
.content-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

/* Hover effects */
.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: #2980b9;
}