Complete CSS Tutorial for Beginners

1. What is CSS?

CSS stands for Cascading Style Sheets. It is used to control the layout and presentation of HTML elements. While HTML structures your webpage, CSS designs it.

2. Ways to Apply CSS

There are three main ways to apply CSS:

• Inline CSS – inside the element
• Internal CSS – inside the <style> tag in HTML
• External CSS – using an external .css file

<!-- Inline -->
<p style="color:red;">This is red</p>

<!-- Internal -->
<style>
  p { color: red; }
</style>

<!-- External -->
<link rel="stylesheet" href="style.css">
Copy

3. CSS Syntax

CSS works by selecting HTML elements and applying styles to them using selectors, properties, and values.

selector {
  property: value;
}
Copy

4. CSS Selectors

Select elements in various ways:

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

/* Class Selector */
.box {
  background-color: yellow;
}

/* ID Selector */
#header {
  font-size: 24px;
}

/* Grouping */
h1, h2, h3 {
  color: green;
}
Copy

5. Colors, Backgrounds, and Fonts

You can control appearance using color names, HEX, RGB, and more.

body {
  background-color: #f0f0f0;
  color: #333;
  font-family: Arial, sans-serif;
}

h1 {
  color: #2c3e50;
}
Copy

6. Box Model (Padding, Margin, Border)

Every HTML element is a box, which includes:

• Content
• Padding
• Border
• Margin

.box {
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
}
Copy

7. Positioning & Display

Control how elements are placed.

.relative-box {
  position: relative;
  top: 10px;
  left: 20px;
}

.inline {
  display: inline;
}

.block {
  display: block;
}
Copy

8. Flexbox (Layout Control)

Flexbox makes layout building easy and responsive.

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

9. Grid Layout

CSS Grid is a two-dimensional layout system.

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

10. Pseudo-classes & Pseudo-elements

a:hover {
  color: red;
}

p::first-letter {
  font-size: 200%;
}
Copy

11. Responsive Design with Media Queries

Make your website look good on all devices.

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
Copy

12. CSS Animations

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: slide 2s infinite;
}

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
Copy

13. CSS Best Practices

• Use external CSS for large projects
• Use classes instead of IDs for styling
• Keep your CSS DRY (Don’t Repeat Yourself)
• Organize styles in sections (Layout, Typography, Components)

14. CSS Transitions

CSS transitions let you change property values smoothly (over a given duration).

.box {
  width: 100px;
  height: 100px;
  background: green;
  transition: background-color 0.5s ease;
}

.box:hover {
  background: darkgreen;
}
Copy

15. CSS Transforms

Transforms let you rotate, scale, skew, or translate elements.

.rotate {
  transform: rotate(45deg);
}

.scale {
  transform: scale(1.5);
}
Copy

16. CSS Variables (Custom Properties)

Variables make your CSS more reusable and maintainable.

:root {
  --primary-color: #4CAF50;
  --font-stack: 'Segoe UI', sans-serif;
}

body {
  color: var(--primary-color);
  font-family: var(--font-stack);
}
Copy

17. Introduction to Sass (SCSS)

Sass is a CSS preprocessor that allows variables, nesting, mixins, and more. It compiles to standard CSS.

// SCSS example
$primary-color: #3498db;

body {
  font-family: Arial, sans-serif;
  color: $primary-color;

  h1 {
    font-size: 2em;
  }
}
Copy

Note: To use Sass, you need to compile it using tools like Dart Sass or build tools like Webpack.

18. Final Tips for Mastering CSS

• Practice building real websites with CSS.
• Use browser DevTools to inspect and debug styles.
• Follow a mobile-first and responsive design approach.
• Organize your stylesheets in a modular way.
• Study CSS frameworks (like Bootstrap or Tailwind) to learn faster development techniques.