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 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 */
}

<p>Hello world</p>

Same element, → higher‑priority selector wins

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

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

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

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

CSS CheatSheet :

• Font :

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 :

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

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

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

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

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

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

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

• Positioning

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: ;

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 .

  

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 .

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 :

/* 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.

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.

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.

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

Control specific item width:

  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.

  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:

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

Animations & Transitions

Animation

@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 :

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