DEV Community: Yash Kalbhute

Advanced CSS

Yash Kalbhute — Sat, 28 Jun 2025 09:25:18 +0000

🌀 Advanced CSS – Transitions, Animations, Media Queries & More

Enhance your UI with interactive transitions, responsive layouts, reusable variables, and scalable CSS practices.

🔹 CSS Transitions

CSS transitions create smooth effects when a property changes.

📘 Example:

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

button:hover {
  background-color: green;
}

✅ Output Behavior:

When you hover over the button, the color changes smoothly from blue to green in 0.3 seconds.

<button style="background-color: blue; transition: background-color 0.3s ease;"
        onmouseover="this.style.backgroundColor='green'"
        onmouseout="this.style.backgroundColor='blue'">
  Hover Me
</button>

🔹 CSS Animations with `@keyframes`

Animations allow you to move, fade, rotate, scale, etc. using defined keyframes.

📘 Example:

@keyframes slideIn {
  from { transform: translateX(-100px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.box {
  animation: slideIn 1s ease-in-out forwards;
}

✅ Output:

<div style="animation: slideIn 1s ease-in-out forwards;">
  Sliding in animation!
</div>

🔹 Media Queries (Responsive Design)

Make your website responsive to screen sizes using media queries.

📘 Example:

body {
  background-color: white;
}

@media (max-width: 768px) {
  body {
    background-color: lightgray;
  }
}

✅ Output:

On desktops: white background
On mobile (≤768px): light gray background

🔹 Pseudo-classes & Pseudo-elements

These allow advanced targeting of elements for hover effects, first-child styling, etc.

📘 Pseudo-classes:

a:hover {
  color: red;
}
li:first-child {
  font-weight: bold;
}

📘 Pseudo-elements:

p::first-line {
  font-size: 20px;
  color: navy;
}

p::before {
  content: "👉 ";
}

✅ Output:

<p>This paragraph will have a larger first line and a pointing finger before it.</p>

🔹 CSS Variables (Custom Properties)

CSS variables let you store reusable values, like colors, padding, etc.

📘 Example:

:root {
  --main-color: #ff5722;
  --heading-font: 'Segoe UI', sans-serif;
}

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

✅ Output:

<h1 style="color: #ff5722; font-family: 'Segoe UI', sans-serif;">
  Styled with CSS Variables
</h1>

🔹 Best Practices in CSS

Writing scalable and maintainable CSS is key for team collaboration and long-term projects.

✅ Use BEM Naming Convention

/* Good */
.card__title { }
.card--active { }

/* Bad */
.cardTitleActive { }

✅ Organize CSS Files Logically

/css
  ├── reset.css
  ├── variables.css
  ├── layout.css
  ├── components.css
  └── main.css

✅ Avoid !important

Only use !important as a last resort. Prefer specificity and correct structure.

✅ Summary

In this post, you've mastered:

Smooth transitions and animations with @keyframes
Making your UI responsive with media queries
Targeting elements more precisely using pseudo-classes
Defining reusable variables with --custom-properties
Following best practices for clean, scalable CSS

🧠 Bonus Tip: Combine CSS variables with media queries to create responsive theming.

🧪 Blog powered by Yash Kalbhute with <>DevSync — Building cleaner, smarter UIs one pixel at a time.

CSS Layouts

Yash Kalbhute — Sat, 28 Jun 2025 09:17:37 +0000

💠 Mastering CSS Layouts – Box Model, Flexbox, Grid & Positioning

Learn how to structure your web pages using the box model, layout techniques like Flexbox and Grid, and element positioning with real-world examples.

🔹 Box Model: Margin, Padding, Border

Every HTML element is a box. The CSS Box Model defines how the element’s size and spacing are calculated.

[ Margin ]
[ Border ]
[ Padding ]
[ Content ]

📘 CSS Properties:

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  margin: 30px;
  background-color: #f5f5f5;
}

✅ Output:

<div style="padding: 20px; border: 2px solid black; margin: 30px;">
  I'm a box with padding, margin, and a border.
</div>

margin: space outside the element
border: visible outline
padding: space inside the box
width: sets the content width

🔹 Display Property

The display property determines how elements are visually placed.

Value	Description
`block`	Full width, new line
`inline`	Flows with text, no line break
`inline-block`	Like inline but can set width/height
`flex`	Enables Flexbox layout
`grid`	Enables Grid layout
`none`	Hides the element

📘 Example:

<span style="display: block;">I'm a block span!</span>

This span will behave like a div — occupying full width.

🔹 Flexbox: One-Dimensional Layout

Flexbox arranges elements in a row or column, making spacing and alignment much easier.

📘 Example:

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

<div class="container" style="display: flex; justify-content: space-around;">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

🔑 Common Flex Properties

Property	What it does
`display: flex`	Enables flexbox
`flex-direction`	`row`, `column`, `row-reverse`, `column-reverse`
`justify-content`	Aligns horizontally (main axis)
`align-items`	Aligns vertically (cross axis)
`gap`	Adds spacing between items

🔹 CSS Grid: Two-Dimensional Layout

Grid allows placing elements in both rows and columns.

📘 Example:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

<div class="grid-container" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

🔑 Grid Key Terms

Term	Description
`grid-template-columns`	Defines column sizes
`grid-template-rows`	Defines row sizes
`gap`	Adds spacing between items
`grid-column`, `grid-row`	Span columns/rows

🔹 Positioning in CSS

Positioning allows elements to be placed precisely on the page.

📘 Values:

Value	Behavior
`static`	Default, follows document flow
`relative`	Offset relative to itself
`absolute`	Positioned relative to nearest positioned ancestor
`fixed`	Stays in place on scroll
`sticky`	Scrolls with page, then sticks when reaching top

📘 Example:

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

<div style="position: relative; top: 20px; left: 30px;">
  I’m offset from my original position.
</div>

🔹 Z-Index (Stacking Order)

Controls which elements appear on top when they overlap.

.box1 {
  z-index: 1;
  position: absolute;
}

.box2 {
  z-index: 2;
  position: absolute;
}

Higher z-index = shown in front.

✅ Summary

By mastering these layout systems, you gain full control over how your web pages look and feel:

Understand the Box Model for perfect spacing
Use Flexbox for horizontal/vertical arrangements
Use Grid for responsive two-dimensional layouts
Use position and z-index for layering and exact placement

🧠 Pro Tip: Combine Grid for macro layouts and Flexbox for internal alignments.

Author: Yash Kalbhute

🔧 Built with <>DevSync by Yash— Crafting cleaner UIs and layouts with modern CSS practices.

CSS Fundamentals

Yash Kalbhute — Sat, 28 Jun 2025 09:07:37 +0000

# 🧩 CSS Fundamentals – Selectors, Properties & Basic Styling

**By <>DevSync

A perfect guide for beginners to understand how CSS works with real examples and outputs.

🔹 What is CSS?

CSS stands for Cascading Style Sheets. It defines the presentation of your HTML elements — colors, fonts, layouts, spacing, and more. While HTML gives structure, CSS brings it to life.

🔹 CSS Syntax & Structure

selector {
  property: value;
}

✅ Example:

p {
  color: red;
}

This styles all <p> elements with red text.

🔍 Output:

<p style="color: red;">This is a red paragraph.</p>

🔹 Types of CSS

1. Inline CSS

CSS written directly inside an HTML tag using the style attribute.

<p style="color: green;">I’m styled inline!</p>

2. Internal CSS

CSS written inside a <style> block in the <head> of the HTML document.

<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>

3. External CSS

Linked to an external .css file.

<link rel="stylesheet" href="styles.css">

Inside styles.css:

p {
  color: orange;
}

🔹 CSS Selectors

CSS selectors target HTML elements for styling. Here are the most common types:

Selector	Example	What it Selects
Universal	`*`	All elements
Type	`p`	All `<p>` tags
Class	`.highlight`	Elements with class="highlight"
ID	`#title`	Element with id="title"
Descendant	`div p`	All `<p>` inside `<div>`
Child	`div > p`	Direct `<p>` child of `<div>`
Adjacent Sibling	`div + p`	`<p>` immediately after `<div>`
General Sibling	`div ~ p`	All `<p>` siblings after `<div>`

🔹 Basic Styling Properties

Let’s style text and elements using core CSS properties.

📘 Text Styling

h1 {
  color: purple;
  font-size: 24px;
  font-family: 'Arial', sans-serif;
  text-align: center;
  text-transform: uppercase;
}

✅ Output:

<h1 style="color: purple; font-size: 24px; text-transform: uppercase;">
  CSS is Awesome!
</h1>

📘 Box Styling (Borders, Padding, Margin)

.box {
  border: 2px solid black;
  padding: 10px;
  margin: 20px;
  background-color: #f5f5f5;
}

✅ Output:

<div style="border: 2px solid black; padding: 10px; margin: 20px;">
  I am a styled box!
</div>

📘 Color Styling

body {
  background-color: #e0f7fa;
  color: #333;
}

✅ Output:

This would make your webpage have a light cyan background and dark gray text.

✅ Summary

CSS gives your HTML structure style, spacing, layout, and personality. In this blog, you’ve learned:

What CSS is and how it works
3 Types of CSS usage
Selectors to target elements
Basic styling like fonts, colors, borders, and spacing

🚀 Coming Up Next

In Blog 2(#) we’ll cover the CSS Box Model, layout systems like Flexbox & Grid, and how to position your elements effectively!

Author : Yash Kalbhute

✨ Brought to you by <>DevSync — Building powerful frontend knowledge, one line of CSS at a time.

DEV Community: Yash Kalbhute

Advanced CSS

🌀 Advanced CSS – Transitions, Animations, Media Queries & More

🔹 CSS Transitions

📘 Example:

✅ Output Behavior:

🔹 CSS Animations with @keyframes

📘 Example:

✅ Output:

🔹 Media Queries (Responsive Design)

📘 Example:

✅ Output:

🔹 Pseudo-classes & Pseudo-elements

📘 Pseudo-classes:

📘 Pseudo-elements:

✅ Output:

🔹 CSS Variables (Custom Properties)

📘 Example:

✅ Output:

🔹 Best Practices in CSS

✅ Use BEM Naming Convention

✅ Organize CSS Files Logically

✅ Avoid !important

✅ Summary

CSS Layouts

💠 Mastering CSS Layouts – Box Model, Flexbox, Grid & Positioning

🔹 Box Model: Margin, Padding, Border

📘 CSS Properties:

✅ Output:

🔹 Display Property

📘 Example:

🔹 Flexbox: One-Dimensional Layout

📘 Example:

🔑 Common Flex Properties

🔹 CSS Grid: Two-Dimensional Layout

📘 Example:

🔑 Grid Key Terms

🔹 Positioning in CSS

📘 Values:

📘 Example:

🔹 Z-Index (Stacking Order)

✅ Summary

CSS Fundamentals

🔹 What is CSS?

🔹 CSS Syntax & Structure

✅ Example:

🔍 Output:

🔹 Types of CSS

1. Inline CSS

2. Internal CSS

3. External CSS

🔹 CSS Selectors

🔹 Basic Styling Properties

📘 Text Styling

✅ Output:

📘 Box Styling (Borders, Padding, Margin)

✅ Output:

📘 Color Styling

✅ Output:

✅ Summary

🚀 Coming Up Next

🔹 CSS Animations with `@keyframes`