DEV Community

Abdul Rahman
Abdul Rahman

Posted on • Originally published at blog.abdulrdeveloper.me

Chai aur CSS — From Basics to Modern Features

#css #webdev #frontend #beginners

CSS stands for Cascading Stylesheet. Cascading means overwriting. The stylesheet is just for styling. When overwriting the style of an element, CSS first checks the specificity and then the line order.

Specificity and Priority

The style with the highest specificity wins. If two rules have the same specificity, the one written last wins.

p { color: blue; }          /* lowest priority — tag name */
.class { color: blue; }     /* medium priority — class */
#id { color: blue; }        /* high priority — ID */
/* inline style in HTML tag — highest priority */
Enter fullscreen mode Exit fullscreen mode

Same element, same specificity → last rule wins:

p {
  color: red;
}

p {
  color: blue;   /* This will apply */
}
Enter fullscreen mode Exit fullscreen mode 
<p>Hello world</p>
Enter fullscreen mode Exit fullscreen mode

Same element → higher priority selector wins:

p {
  color: red;        /* element selector — lowest */
}

.highlight {
  color: green;      /* class selector — higher */
}

#special {
  color: blue;       /* ID selector — highest */
}
Enter fullscreen mode Exit fullscreen mode 
<p id="special" class="highlight">Hello world</p>
Enter fullscreen mode Exit fullscreen mode

Font 

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Sets prioritized fonts */
font-size: 1rem;       /* Sets text size, responsive with rem */
font-weight: bold;     /* or 100–900 for thickness control */
font-style: italic;    /* Makes text italic */
Enter fullscreen mode Exit fullscreen mode

Responsive Font with clamp:

font-size: clamp(16px, 4vw, 24px);
Enter fullscreen mode Exit fullscreen mode
  • Minimum: 16px — font will never go below this
  • Preferred: 4vw — 4% of the viewport width
  • Maximum: 24px — font will never go above this

If screen is large, font is large. If screen is small, font is small. You can adjust these values based on your needs.

Text 

text-align: center;          /* Aligns text in the center */
letter-spacing: 0.15em;      /* Adjusts space between characters */
text-decoration: underline;  /* Adds underline/overline/line-through */
word-spacing: 0.25em;        /* Sets spacing between words */
line-height: 1.5;            /* Sets vertical spacing between lines */
text-transform: uppercase;   /* Converts text to uppercase */
Enter fullscreen mode Exit fullscreen mode

Background 

background: linear-gradient(...);    /* Adds gradient */
background-image: url("path");       /* Adds image */
background-position: center;         /* Positions background image */
background-size: cover;              /* Scales image to cover element */
background-blend-mode: multiply;     /* Blends background layers */
background-clip: text;               /* Clips background to text */
Enter fullscreen mode Exit fullscreen mode

Border and Outline 

border: 2px solid #000;              /* Adds border with size, style, color */
border-radius: 15px;                 /* Rounds corners */
outline: 2px dashed red;             /* Adds outline outside element box */
border-image: url(border.png) 30 round; /* Uses image as border */
Enter fullscreen mode Exit fullscreen mode

Box Model 

margin: 10px 20px 10px 20px;   /* Outer spacing */
padding: 5px 10px 5px 10px;    /* Inner spacing */
width: 100%;                    /* Element width */
height: fit-content;            /* Height based on content */
Enter fullscreen mode Exit fullscreen mode

Box-Sizing and Overflow 

box-sizing: border-box;   /* Includes padding/border in total size */
overflow: hidden;          /* Hides overflow */
overflow-x: scroll;        /* Scroll horizontally */
overflow-y: auto;          /* Scroll vertically as needed */
aspect-ratio: 16/9;        /* Keeps width:height ratio */
object-fit: cover;         /* Scales image/video to fill box */
Enter fullscreen mode Exit fullscreen mode

Always use box-sizing: border-box — without it, padding and border add to the element's width and break your layout.

Colors 

color: #333;                    /* Text color */
opacity: 0.8;                   /* Element transparency */
color: hsl(200, 80%, 40%);     /* HSL color format */
Enter fullscreen mode Exit fullscreen mode

Positioning 

position: relative;   /* Sets positioning context */
z-index: 10;          /* Stacking order */
Enter fullscreen mode Exit fullscreen mode

CSS Variables — Set Primary and Secondary Colors

You can define colors in :root using CSS variables and reuse them anywhere in the stylesheet. This is widely used in modern CSS.

:root {
  --primary: #C9A84C;
  --secondary: #0A0A0A;
  --text: #E8E3D9;
}

h1 {
  color: var(--primary);
}

body {
  background: var(--secondary);
  color: var(--text);
}
Enter fullscreen mode Exit fullscreen mode

Change the value in one place — it updates everywhere. This is how design systems work.

Flexbox

Flexbox works on two axes inside a container.

  • Main Axis — goes left to right. Controlled by justify-content
  • Cross Axis — goes top to bottom. Controlled by align-items

When you apply display: flex on a container, all items inside move to the start of the main axis.

Flex Direction:

flex-direction: row;     /* Items in a row (default) */
flex-direction: column;  /* Items in a column */
Enter fullscreen mode Exit fullscreen mode

Flex for child items:

flex: 1;   /* Give all extra width to this item */
flex: 2;   /* Take double the extra space compared to flex: 1 */
Enter fullscreen mode Exit fullscreen mode

If you have 5 items and item 1 has flex: 1 and item 2 has flex: 2 — after all items take their natural width, the remaining space is divided into 3 parts. Item 2 gets 2 parts, item 1 gets 1 part.

Order in Flexbox:

order: 1;   /* Moves item to the end — default is 0 for all items */
Enter fullscreen mode Exit fullscreen mode

Higher order number means it comes later. Lower order number means it comes first.

Wrap:

flex-wrap: wrap;          /* Items wrap to next line */
flex-wrap: wrap-reverse;  /* Items wrap in reverse */
Enter fullscreen mode Exit fullscreen mode

All Flexbox Properties:

/* Parent (Container) */
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1rem;

/* Child (Items) */
flex: 1;
align-self: center;
order: 2;
Enter fullscreen mode Exit fullscreen mode

CSS Grid

Control whole container columns:

display: grid;
grid-template-columns: 1fr 1fr 1fr;   /* 3 equal columns */
Enter fullscreen mode Exit fullscreen mode

1fr means 1 fraction of the available space. Three 1fr values = three equal columns.

Control whole container rows:

.grid-container {
  display: grid;
  grid-template-rows: 80px 100px 100px;   /* 3 rows with different heights */
}
Enter fullscreen mode Exit fullscreen mode

Control specific item width:

grid-column: 1 / 4;   /* Covers columns 1, 2, and 3 */
grid-column: 2 / 4;   /* Covers columns 2 and 3 */
Enter fullscreen mode Exit fullscreen mode

Remember — if you have 3 columns, the lines are 4:

| 1 | 2 | 3 |
^   ^   ^   ^
1   2   3   4  ← lines
Enter fullscreen mode Exit fullscreen mode

Always apply this on a specific item, not the whole container.

Control specific item height:

grid-row: 1 / 4;   /* Covers rows 1, 2, and 3 */
grid-row: 2 / 4;   /* Covers rows 2 and 3 */
Enter fullscreen mode Exit fullscreen mode

Same logic — 3 rows = 4 lines. Apply on specific item only.

Media Queries 

@media (max-width: 768px) {
  body {
    font-size: 14px;   /* Applies styles on small screens */
  }
}
Enter fullscreen mode Exit fullscreen mode

max-width: 768px means this style applies when the screen is 768px or smaller — tablets and phones. This is how you make websites responsive without a framework.

Animations and Transitions

Keyframe Animation:

@keyframes slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.element {
  animation: slide 1s ease-in-out infinite alternate;
}
Enter fullscreen mode Exit fullscreen mode

Transition — smooth property changes:

transition: all 0.3s ease-in-out;
Enter fullscreen mode Exit fullscreen mode

Transform:

transform: scale(1.1) rotate(10deg);      /* Scale and rotate */
transform: translate(10px, 20px);          /* Move on X and Y axis */
Enter fullscreen mode Exit fullscreen mode

Modern CSS Features 

scroll-snap-type: x mandatory;   /* Creates snap scrolling */
backdrop-filter: blur(10px);      /* Adds blur behind element */

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }

/* Responsive font size */
font-size: clamp(1rem, 2vw, 1.5rem);
Enter fullscreen mode Exit fullscreen mode

backdrop-filter: blur() is what gives that frosted glass effect you see on modern UIs. scroll-snap-type makes sections snap into place when scrolling — no JavaScript needed.

You can find more of my work at abdulrdeveloper.me
Read more posts at blog.abdulrdeveloper.me

Top comments (0)