"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."

How CSS Works with HTML

 CSS (Cascading Style Sheets) is used to style and visually format HTML content. HTML provides the structure of a web page, and CSS controls how that content looks — such as its layout, colors, fonts, spacing, and positioning.

Think of it Like This:

·         HTML is the frame of the webpage.

·         CSS is the styling and cosmetics that make it look nice.

🧠 How It Actually Works (Behind the Scenes)

1.      The browser loads your HTML file.

2.      It sees any CSS rules (inline, internal, or external).

3.      It applies the CSS rules to matching HTML elements.

4.      CSS rules “cascade,” meaning the most specific rule takes effect if there's a conflict.

Types of CSS

CSS (Cascading Style Sheets) has three main types based on how it is applied to HTML documents:

1. Inline CSS

  • Applied directly to an HTML element using the style attribute.
  • Scope: Affects only that specific element.
  • Usage: Quick styling or overrides, but not recommended for maintainability.

2. Internal CSS (Embedded CSS)

  • Placed inside a <style> tag within the <head> section of the HTML document.
  • Scope: Applies to the whole HTML document.
  • Usage: Useful for single-page websites or quick tests.

3. External CSS

  • Written in a separate .css file and linked to the HTML document using a <link> tag.
  • Scope: Applies styles across multiple HTML files.
  • Usage: Best practice for large and maintainable websites.

 

Popular Posts

Setting Up Your First Project Folder and Installing XAMPP or WAMP

    Setting Up Your First Project Folder and Installing XAMPP or WAMP Before you start coding, it’s important to set up your project folder and install a local server like XAMPP or WAMP. These local servers let you run PHP and databases right on your computer, so you can develop websites without needing an internet connection or hosting. Step 1: Installing XAMPP or WAMP XAMPP and WAMP are popular local server solutions for Windows (XAMPP also works on Mac/Linux). XAMPP includes Apache (server), MySQL (database), PHP, and more. WAMP includes Apache, MySQL, and PHP — specifically for Windows. You can download them here: Download XAMPP Download WAMP Follow the installation wizard , accept default options, and complete the setup. Step 2: Locating Your Server’s Root Folder After installation, you need to know where to save your website files so the server can access them. For XAMPP , the root folder is: C:\xampp\htdoc...
Read more

Frontend vs Backend vs Full Stack

  🧠 Frontend vs Backend vs Full Stack – What’s the Difference? If you're just starting your journey in web development, you’ve probably heard terms like frontend , backend , and full stack . But what do they actually mean? Let’s break them down in a simple and beginner-friendly way! 🌐 What is Frontend Development? The frontend is everything you see and interact with on a website. Think of it as the “face” of the website — the layout, design, buttons, colors, menus, images, and text. Frontend developers use three main technologies: ·          HTML – for structure ·          CSS – for styling ·          JavaScript – for interactivity Examples of frontend work: ·          Creating navigation menus ·          Designing contact forms ·   ...
Read more