Posts

"I am Saqib Jahangir. A passionate vlogger, software engineer, and avid traveler with a deep love for exploring the hidden gems of our beautiful planet. With a strong foundation in Application Development, Application Architecture & Database Design and Product Management, I bring over a decade of hands-on experience building secure, scalable, and resilient web applications for a diverse range of industries."

Featured Post

Backgrounds and Borders

  🎨 Backgrounds and Borders In CSS, backgrounds and borders are used to visually style elements and give your web pages structure and aesthetics. 🔲 Background Properties CSS allows you to control the background of an element using several properties: selector {   background-color : #f0f0f0 ; /* Sets background color */   background-image : url ( 'image.jpg' ); /* Sets background image */   background-repeat : no-repeat; /* Prevents image from repeating */   background-position : center center; /* Positions background */   background-size : cover; /* Scales image to cover element */   background-attachment : fixed; /* Fixes background when scrolling */ } Shorthand: background : #f0f0f0 url ( 'image.jpg' ) no-repeat center center / cover fixed; 🧱 Border Properties CSS borders add lines around elements. selector {   border-width : 2px ;         /* Thickness */   border-style ...
Read more

Box Model in CSS

  🧱 Box Model in CSS The CSS Box Model is the fundamental structure that wraps every HTML element. It defines how elements are displayed and how spacing is calculated. Each element is essentially a box consisting of the following areas (from innermost to outermost): 📦 1. Content The actual content like text, images, or other HTML inside the element. width : 200px ; height : 100px ; 📏 2. Padding The space inside the element, around the content. It pushes the content away from the edges of the element. padding : 10px ; /* space between content and border */ 🖼 ️ 3. Border The line surrounding the padding (and content). border : 2px solid black; 📐 4. Margin The space outside the border, creating space between elements. margin : 20px ; /* space between elements */ Visual Representation of the Box Model: |< ----------- Margin ----------->| |   |< -------- Border -------->|   | |   |   |< ----- Padding --...
Read more

Text and Font Styling in CSS

  🎨 Text and Font Styling in CSS CSS provides powerful tools to style text and fonts, allowing developers to control the appearance and readability of web content. Below are the most common properties used for styling text and fonts. ✅ 1. color Defines the color of the text. p {   color : #333333 ; } ✅ 2. font-family Sets the typeface for the text. p {   font-family : Arial, Helvetica, sans-serif; } Tip: Always include fallback fonts in case the primary one isn’t available. ✅ 3. font-size Controls the size of the text. p {   font-size : 16px ; } Common Units: ·          px (pixels) ·          em (relative to parent) ·          rem (relative to root) ·          % (relative to parent) ✅ 4. font-weight Defines the thickness of the text. p...
Read more

CSS Colors and Units

✅ CSS Colors and Units 🎨 CSS Colors CSS allows you to define colors in several formats. Colors are used for text, backgrounds, borders, etc. 🔹 1. Color Names These are predefined color names like: color : red; background-color : navy; 🔹 2. Hexadecimal Values Hex codes represent RGB values in hex format: color : #ff0000 ;     /* red */ background-color : #000080 ; /* navy */ 🔹 3. RGB (Red, Green, Blue) Define the intensity of red, green, and blue (0–255): color : rgb ( 255 , 0 , 0 );   /* red */ 🔹 4. RGBA (with Alpha Transparency) The a stands for alpha (transparency): color : rgba ( 255 , 0 , 0 , 0.5 );  /* semi-transparent red */ 🔹 5. HSL (Hue, Saturation, Lightness) Newer way to define colors: color : hsl ( 0 , 100% , 50% ); /* red */ 🔹 6. HSLA (with Alpha) color : hsla ( 0 , 100% , 50% , 0.5 ); 📏 CSS Units Units are used to measure lengths like width, height, padding, margin, font-si...
Read more

CSS Syntax and Selectors

  ✅ CSS Syntax CSS (Cascading Style Sheets) is used to apply styles to HTML elements. The basic syntax of a CSS rule is: selector {   property: value; } Example: p {   color: blue;   font-size: 16px; } Explanation: p → Selector : targets all <p> elements. color and font-size → Properties . blue and 16px → Values . ✅ CSS Selectors Selectors define which HTML elements the CSS rules apply to. Here are the most common types: 🔹 1. Universal Selector ( * ) Applies to all elements on the page. * {   margin: 0;   padding: 0; } 🔹 2. Element Selector Targets HTML elements directly. css CopyEdit h1 {   text-align: center; } 🔹 3. Class Selector ( .classname ) Targets elements with a specific class. <p class="intro">Welcome</p> .intro {   font-style: italic; } 🔹 4. ID Selector ( #idname ) Targets a specific...
Read more