Getting Started with CSS

Getting Started with CSS

Introduction

CSS (Cascading Style Sheets) is what makes websites visually appealing. It controls layout, colors, fonts, and responsiveness. Many developers struggle with CSS because they jump straight into frameworks without understanding the fundamentals.

I started by building responsive websites using pure CSS—no libraries or frameworks. This practice helped me develop a structured approach to writing CSS, which I still follow today.

If you want to master CSS, start by:

  • Practicing by building components (cards, navbars, buttons).
  • Implementing them in real projects to handle selector conflicts.
  • Understanding how CSS works under the hood before using frameworks.

Let’s break it down step by step.



Why is CSS Important?

  • Defines the visual design and layout of web pages.
  • Makes websites responsive for different screen sizes.
  • Improves user experience with animations and interactivity.
  • Helps in maintaining clean and scalable styling.



CSS Learning Roadmap

1. Ways to Write CSS

There are three ways to apply CSS to your HTML:

Inline CSS (Least Recommended)

CSS is written directly inside an element using the style attribute.

<p style="color: blue; font-size: 18px;">Hello, World!</p>
  • Good for quick fixes.
  • Hard to maintain.
Internal CSS

CSS is written inside a <style> tag in the HTML <head>.

<style>
  p {
    color: blue;
    font-size: 18px;
  }
</style>
  • Useful for small projects.
  • Not scalable for large applications.
External CSS (Best Practice)

CSS is written in a separate .css file and linked to the HTML document.

<link rel="stylesheet" href="styles.css">
  • Best practice for scalability and maintainability.

2. Understanding CSS Selectors

Selectors are how CSS targets HTML elements.

Basic Selectors
/* Targets all <p> elements */
p {
  color: blue;
}
/* Targets an element with a specific class */
.button {
  background-color: red;
}
/* Targets an element with a specific ID */
#main-title {
  font-size: 24px;
}
Advanced Selectors
  • Child Selector (>): Targets direct children.
    .container > p { color: green; }
  • Descendant Selector (space): Targets all nested elements.
    .container p { color: green; }
  • Adjacent Sibling Selector (+): Targets the next element.
    h1 + p { font-weight: bold; }
  • Attribute Selector: Targets elements with a specific attribute.
    input[type="text"] { border: 1px solid black; }



Folder Structure & Writing Organized CSS

To keep styles organized and maintainable, I follow this folder structure:

/static  
 ├── /css  
 │    ├── variables.css  
 │    ├── style.css  
 ├── /js  
 ├── /images  
 ├── /videos

1. variables.css (Reusable Styles & Resets)

This file contains:

  • CSS Resets (removes default browser styles).
  • Global Variables (colors, fonts, spacing).
  • Reusable Classes (buttons, sections, etc.).

Example:

/* Imports */
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* Variables */
:root {
  /* Fonts */
  --sans-serif: "Lato", sans-serif;
  --serif: "Playfair Display", serif;

  /* Colors */
  --primary: #04a0f6;
  --secondary: #fe183c;
  --tertiary: #107df7;
  --dark: #0f082c;
  --dark-alt: #4b4856;
  --light: #ffffff;
  --light-alt: #e9f2f7;

  /* Shadow */
  --shadow: 0 0 30px 0 #b8b8b82e;
}

/* Default */
* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-color: var(--light) transparent;
  scrollbar-width: thin;
}

/* Background */
.bg-primary {
  background: var(--primary) !important;
}

/* Color */
.text-primary {
  color: var(--primary) !important;
}

/* Section */
.section {
  width: 100%;
  padding: 70px 0;
  background: var(--light);
  position: relative;
}

/* Headings */
.heading {
  font-size: 35px;
  font-weight: 600;
  color: var(--dark);
  position: relative;
  margin-bottom: 30px;
  letter-spacing: 0.5px;
}

/* Button */
.button {
  padding: 15px 30px;
  color: var(--light);
  background: var(--primary);
  font-size: 16px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

2. style.css (Page-Specific Styles)

In this file, I structure styles hierarchically, starting with parent elements and then children.

Example:

/* Header */
.header {
  position: relative;
  width: 100%;
  z-index: 10;
  padding: 10px;
  background: var(--light);
}
.header .inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.header .inner .logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 400px;
  gap: 20px;
}
.header .inner .logo {
  width: 240px;
  display: inline-block;
}
.header .inner .accred {
  width: 65px;
  display: inline-block;
}
  • Keeps styles modular to prevent conflicts.
  • Makes debugging easier by grouping styles logically.



When to Use CSS Frameworks?

Only after mastering core CSS should you start using frameworks.

Popular CSS Frameworks

1. Bootstrap
  • Pre-built components like grids, buttons, modals.
  • Uses a 12-column grid system for responsiveness.
  • Includes utility classes for quick styling.

Example:

<div class="container">
  <h1 class="text-primary">Hello Bootstrap</h1>
</div>
2. Tailwind CSS
  • Utility-first CSS framework.
  • Requires writing styles directly in the class attribute.
  • Great for rapid development.

Example:

<button class="bg-blue-500 text-white px-4 py-2">Click Me</button>
3. CSS-in-JS (Styled Components, Emotion)
  • CSS is written inside JavaScript files.
  • Useful for React, Vue, and other component-based frameworks.

Example (Styled Components in React):

const Button = styled.button`
  background: blue;
  color: white;
  padding: 10px 20px;
`;



SASS & SCSS – Writing More Efficient CSS

Once you are comfortable with CSS, you can take it a step further with SASS (Syntactically Awesome Stylesheets) and SCSS (Sassy CSS). These are CSS preprocessors that add extra features like variables, nesting, mixins, and functions to make styling more efficient and maintainable.

Why Use SASS/SCSS?

  • Variables – Store reusable values like colors, fonts, and spacing.
  • Nesting – Write cleaner and more readable styles.
  • Mixins – Reuse styles without repetition.
  • Partials & Imports – Split styles into multiple files for better organization.

SASS vs. SCSS – What’s the Difference?

  • SASS (older syntax) doesn’t use curly braces {} and semicolons ;.
  • SCSS (newer syntax) is closer to regular CSS and widely used.

Example (SCSS):

// Variables
$primary-color: #007bff;
$font-main: 'Arial', sans-serif;

// Nesting
.header {
  background: $primary-color;
  .logo {
    font-size: 24px;
    font-family: $font-main;
  }
}

// Mixins (Reusable Styles)
@mixin button-style {
  padding: 10px 20px;
  border-radius: 5px;
}

.button {
  @include button-style;
  background: $primary-color;
  color: white;
}

Using SASS/SCSS will help you write cleaner, modular, and scalable styles, making it easier to maintain large projects.



Best Resources to Learn CSS

Here are some of the best YouTube channels to learn CSS:

  1. Kevin Powell – Covers CSS fundamentals and advanced topics.
  2. Web Dev Simplified – Best practices and tutorials.
  3. The Net Ninja – CSS courses for beginners to advanced.
  4. Traversy Media – Covers real-world CSS projects.



Conclusion

CSS is not just about making things look good—it’s about creating a structured, maintainable, and scalable design system.

  • First, learn pure CSS and build real projects.
  • Then, follow a structured approach to writing CSS.
  • Finally, explore frameworks like Bootstrap and Tailwind.
  • Optionally, explore Scss/Sass if you are really into CSS.

Once you master CSS, you’ll write styles efficiently and effectively—no more messy, conflicting styles!

Rahul Yadav

Rahul Yadav

Fullstack Developer