Learn CSS - Design the Web with Style

Table of Contents

• Introduction to CSS
• CSS Syntax
• Selectors & Specificity
• Colors and Units
• The Box Model
• Positioning and Display
• Flexbox & Grid Layouts
• Responsive Design
• CSS Variables
• Transitions & Animations
• Best Practices
• Mini Project: Stylish Personal Card
• Conclusion

Introduction to CSS

CSS (Cascading Style Sheets) is what gives a webpage its look and feel. While HTML builds the structure, CSS handles design—colors, layouts, spacing, and fonts. It helps create visual hierarchy and responsiveness across devices.

Tip: Think of HTML as the skeleton of a webpage and CSS as its skin and clothing.

---

CSS Syntax

CSS rules follow a simple pattern of selector { property: value; }.

p {
  color: blue;
  font-size: 16px;
}

Note: Each rule ends with a semicolon, and properties are written in lowercase with hyphens.

Selectors & Specificity

Selectors target elements you want to style. Specificity determines which style wins when multiple rules apply.

• p → all paragraphs
• .btn → all elements with class “btn”
• #header → element with id “header”
• div p → all paragraphs inside divs

#title {
  color: teal;
}
.container p {
  color: gray;
}

Tip: Inline styles override internal and external styles unless !important is used — but avoid overusing it.

Colors and Units

CSS supports color keywords, HEX, RGB, RGBA, and HSL formats.

h1 {
  color: #00806e;
  background-color: hsl(180, 40%, 90%);
}

Use flexible units like em, rem, and % for responsive designs.

The Box Model

Each element in CSS is a box composed of:

• Content
• Padding
• Border
• Margin

div {
  margin: 20px;
  padding: 10px;
  border: 2px solid #00806e;
}

Note: Use box-sizing: border-box; to include borders and padding within element width calculations.

Positioning and Display

CSS positioning determines how elements appear on a page:

• static – default
• relative – positioned relative to itself
• absolute – positioned relative to nearest positioned parent
• fixed – stays fixed on screen
• sticky – toggles between relative and fixed

Flexbox & Grid Layouts

Use Flexbox for one-dimensional layouts and Grid for two-dimensional layouts.

Flexbox Example

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Grid Example

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

Responsive Design

Make websites adaptable with media queries:

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

Tip: Design mobile-first, then scale up with larger breakpoints.

CSS Variables

Variables let you reuse values efficiently.

:root {
  --main-color: #00806e;
  --font-size: 16px;
}

h1 {
  color: var(--main-color);
  font-size: var(--font-size);
}

Transitions & Animations

button {
  background: #00806e;
  color: white;
  transition: background 0.3s;
}
button:hover {
  background: #006657;
}

Keyframes Animation

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 1s ease-in;
}

Best Practices

• Keep your CSS modular and well-commented.
• Use external stylesheets for scalability.
• Prefer modern layout systems (Flexbox, Grid).
• Leverage variables for theme consistency.
• Test across devices for responsive behavior.

Mini Project: Stylish Personal Card

Create a simple yet elegant card design using CSS.

<div class="card">
  <img src="profile.jpg" alt="Profile">
  <h3>Jane Doe</h3>
  <p>Frontend Developer</p>
</div>

.card {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}
.card:hover {
  transform: translateY(-5px);
}
.card img {
  width: 100px;
  border-radius: 50%;
}

Conclusion

CSS transforms structure into beauty. From colors to animations, CSS gives websites their unique personality. Continue learning by exploring responsive design, animations, and frameworks like Tailwind or Bootstrap.