# Chai aur CSS

## Introduction

CSS stands for **Cascading Stylesheet**.

*   Cascading is a word that is meant by overwriting.
    
*   The stylesheet is just for styling.
    

While overwriting the style of an element , Cascading first checks the (specificity + line).

* * *

## Specificity and Priority Toppic in CSS :

The style will only apply for highest priority of specificity , if both element are at same priority then 2nd element will overwrite 1st element style .

1.  p { class: blue; } <—- lowest priority (tag name)
    
2.  .class { color: blue; } <—- medium priority
    
3.  #class { color: blue; } ←—- high priority
    
4.  inline style directly in html tag <—— highest priority
    

* * *

**Same element, same specificity → last rule wins**

```css
/* CSS rules flow from UP to Down. When second rule target in
the same element, then the bottom rule override the first rule. */
p {
  color: red;
}

p {
  color: blue;             /* This style will applied */
}
```

```xml
<p>Hello world</p>
```

* * *

**Same element, → higher‑priority selector wins**

```css
p {
  color: red;        /* element selector (lowest) */
}

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

#special {
  color: blue;       /* ID selector (highest because there is no inline style) */
}
```

```xml
<p id="special" class="highlight">Hello world</p>
```

* * *

## CSS CheatSheet :

## **Font :**

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

* * *

## Responsive Font :

```css
font-size: clamp(16px, 4vw, 24px);
```

It keeps responsive font on screen size.

*   Minimum: 16px → Font will never be less then 16px.
    
*   Preferred: 4vw (4% of viewport width) → Normally use the 4% of screen width.
    
    *   If Screen size will be large, then font will be also large.
        
    *   If Screen size will be small, then font will be also small.
        
*   Maximum: 24px → Font size will never be less then 24px.
    
*   You can set these according to your specifications.
    

* * *

## **Text**

```css
text-align: center; /* Aligns text in the center of the line */
letter-spacing: 0.15em; /* Adjusts space between characters */
text-decoration: underline; /* Adds decoration like 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 */
```

* * *

## **Background**

```css
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 */
```

## **Border & Outline**

```css
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 */
```

* * *

## **Box Model**

```css
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 */
```

* * *

## Box-Sizing

```css
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 */
```

## **Colors**

```css
color: #333; /* Text color */
opacity: 0.8; /* Element transparency */
color: hsl(200, 80%, 40%); /* HSL color format */
```

## **Positioning**

```css
position: relative; /* Sets positioning context */
z-index: 10; /* Stacking order */
```

* * *

## FlexBox :

**Container-axis:**  
In a Container, there are 2 axis.

*   First is Main Axis , It goes from left (main start) to right (main end) . And it is controlled by `justify-content: ;`
    
*   Second is Cross-axis , It goes from Top (cross main) to bottom (cross end). Ad It is controlled by `Align-Items: ;`
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769913304686/64f263b9-1bc0-4344-8893-837f1b063531.png align="center")

And when we apply `Display: flex;` on this container, then the whole items inside the container will be come on main axis start.

### **Flex Direction :**

*   `flex-direction : row;` is used to add all items in a row (mostly default)
    
*   `flex-direction:column;` is used to add all items in a column.
    

### **Properties for Child in Flexbox :**

*   You can also add some properties on a specific item in a container, and you can control it.
    
*   `flex-1` is used to add on a specific item , and it\`s means that give all the extra width to this specific item.
    
*   `flex-2` is also used to add a specific item but it will take double space of the extra space .  
    It works like this :  
    If you have 5 items in a container, and you added `flex:1;` on item 1 and `flex:2;` on item 2 , then first of all all items will take his width and the extra remaining width will be divided into 3 parts . 2 parts will be of item 2 and 1 part will be of item 1 .
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769915430661/9b1cf5d9-0c64-48e2-90e9-d44ff075fe94.png align="center")
    

### **Order in Flexbox :**

Using order property , you can adjust/change any item place.  
If you write `order:1;` on item 1 then it\`s priority will be higher then all other items because all items have the default priority of 0 . And if you added 1 on a specific item then it will shift at the end , and it will come after all lowest orders .

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769926898557/6db304dc-196e-4a14-bfc9-486a7f24e2e3.png align="center")

### **Wrap property in Flexbox:**

*   `flex:wrap;` will keep default position and place.
    
*   `flex:wrap-reverse` will do opposite of default position and place.
    

### **Flexbox all Properties :**

```css
/* Parent (Container) */

display: flex; /* Activates flex layout */
flex-direction: row; /* Row direction */
justify-content: space-between; /* Distributes space */
align-items: center; /* Aligns items vertically */
gap: 1rem; /* Space between flex items */

/* Child (items) */

flex: 1; /* Flexible width */
align-self: center; /* Individual alignment */
order: 2; /* Changes visual order */
```

* * *

## Set Primary/Secondary Color in CSS :

You can define colors in the `:root` using css variables and you can reuse them anywhere in the stylesheet just by giving the color reference. It\`s easy and widely used in modern CSS.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769953103903/730cc4da-de4b-47d6-a7b0-04c0a2ddfb23.png align="center")

* * *

## CSS Grid :

### **Control Whole Container coloumn\`s:**

You can control whole container , and you can decide that how many coloumns it should take.

1fr is used to add 1 coloumn and this is how you can add coloumns according to your need.

```css
display: grid;
grid-template-columns: 1fr 1fr 1fr;
```

* * *

### **Control Whole Container Row\`s:**

Grid-row is used to create rows with their different rows height. like in this it will create three rows with their 3 different rows height.

```html
 .grid-container {
 display: grid;
 grid-template-rows: 80px 100px 100px;
```

* * *

### **Control specific item width:**

```css
  grid-column: 1 / 4; /* It will cover ( colomn 1,2 and 3 ) width. */
  grid-column: 2 / 4; /* It will cover ( colomn 2 and 3 ) width. 
And if you make 3 box, the lines will be 4.
     | 1 | 2 | 3 |
     ^   ^   ^   ^
     1   2   3   4   ← lines */
```

And remember that always apply this on a specfic box not on the whole container.

* * *

### **Control specific item height:**

You can control , stretch , minimize, or adjust any row item height in a container.

```css
  grid-row: 1 / 4; /* It will cover ( row 1,2 and 3 ) height. */
  grid-row: 2 / 4; /* It will cover ( rows 2 and 3 ) height. 
And remember that always apply this on a specfic box not on the whole container.
And if you make 3 box, the lines will be 4.
     | 1 | 2 | 3 |
     ^   ^   ^   ^
     1   2   3   4   ← lines */
```

* * *

## **Media Queries:**

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

* * *

## **Animations & Transitions**

### **Animation**

```css
@keyframes slide {
from {
      transform: translateX(-100%); 
     }
  to {
      transform: translateX(0); 
     }
}
.element {
  animation: slide 1s ease-in-out infinite alternate; /* Animates element */
}

transition: all 0.3s ease-in-out;    /* Smoothly animates property changes */
transform: scale(1.1) rotate(10deg); /* Moves, rotates, scales elements */
transform:  translate(10px,20px);    /* use to move element in X-axis,Y-axis direction*/
```

* * *

## **Modern Features in CSS :**

```css
scroll-snap-type: x mandatory; /* Creates snap scrolling */
backdrop-filter: blur(10px); /* Adds blur behind element */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } /* Styles scrollbar */
font-size: clamp(1rem, 2vw, 1.5rem); /* Responsive font size */
```

* * *

You can find more of my work at [abdulrdeveloper.me](https://abdulrdeveloper.me)  
Read more posts at [blog.abdulrdeveloper.me](https://blog.abdulrdeveloper.me)