DEV Community: Raj

HTML & CSS Mock Interview Questions & Answers Part 3

Raj — Fri, 21 Aug 2026 05:54:40 +0000

21. What is the tag?

The tag, or anchor element, is the fundamental HTML element used to create hyperlinks that connect web pages, documents, files, and external web locations together. It allows users to jump across the web by clicking text, buttons, or images wrapped inside the anchor tag. Anchors require the href attribute to specify the destination URL, page fragment, email address (mailto:), or telephone number (tel:). Beyond basic navigation, anchors support accessibility and performance parameters such as rel="noopener noreferrer" and downloading triggers using download.

22. What is the href attribute?

The href (Hypertext Reference) attribute is the critical property required on anchor tags () that specifies the target URL destination of the link. Without an href attribute, an tag functions merely as a placeholder anchor rather than an active clickable hyperlink. The value of href can be an absolute web address (https://...), a relative local path (/about.html), a page section ID anchor (#section-id), or a protocol link (mailto: or tel:). It tells the browser exactly where to route the user when the element is clicked.

23. How do you open a link in a new tab?

You open a link in a new tab by adding the target="_blank" attribute to the anchor () tag. Whenever a user clicks a link configured with target="_blank", the browser opens the destination URL in a brand-new tab or window instead of replacing the current page. For security and performance reasons, you should always combine target="_blank" with rel="noopener noreferrer". This prevents the newly opened external page from accessing your origin page's window.opener object, protecting your website from potential tab-nabbing security vulnerability attacks.

24. What is the tag?

The tag is a self-closing void element used to embed raster or vector graphics directly into an HTML page document. Rather than inserting image pixels directly into the code, it creates an inline visual frame that fetches and renders the visual asset from an external path. It requires the mandatory src attribute to locate the image and an alt attribute to provide alternative text for accessibility. Modern tags also support high-resolution responsive switching using srcset and performance optimizations like loading="lazy".

25. What is the purpose of the src attribute?

The src (source) attribute defines the exact file path or URL location of the media asset that an , , <iframe>, or <audio>/<video> element should fetch and render. If the path provided in the src attribute is broken, invalid, or blocked by CORS security policies, the browser will fail to display the asset and fall back to alternative content. The src path can be an absolute web address pointing to an external domain or a relative file directory path pointing to your local web server storage.

26. What is the purpose of the alt attribute?

The alt (alternative text) attribute provides a plain-text description of an image for accessibility, performance, and SEO purposes. If an image fails to load due to a poor network connection or broken src path, the browser displays the alt text in place of the image. More importantly, screen readers read the alt attribute aloud to visually impaired users, allowing them to comprehend the visual content. Including descriptive alt text also helps search engine crawlers index your image content for relevant web search queries.

27. What is the difference between an absolute URL and a relative URL?

An absolute URL specifies the complete, full web address of a resource, including the protocol, domain name, and file path (e.g., <a href="https://example.com/images/logo.png">https://example.com/images/logo.png</a>). A relative URL, on the other hand, specifies a path relative to the current working document's directory without including protocol or domain names (e.g., ../images/logo.png). Absolute URLs are used when linking to external websites across different servers, while relative URLs are preferred for linking internal pages within the same website because they remain functional regardless of domain or hosting changes.

28. What is an HTML list?

An HTML list is a structured set of tags used to group related items together in an organized, readable list format. HTML provides three primary types of lists: Unordered Lists (<ul>) for bulleted items, Ordered Lists (<ol>) for numbered/sequential items, and Description Lists (<dl>) for key-value terms and definitions. Each list container holds individual list items defined by <li> tags (or <dt>/<dd> tags for description lists). HTML lists help organize content logically, improve visual scannability, and provide structured semantic trees for screen readers.

29. What is the difference between <ul> and <ol>?

The key difference between <ul> and <ol> lies in the semantic order and default styling of their list items. A <ul> (Unordered List) is used when the chronological order of items does not matter, and browsers display bullet points by default. An <ol> (Ordered List) is used when sequence, step-by-step priority, or ranking is important, and browsers automatically precede items with incrementing numbers, letters, or roman numerals. Both use <li> tags for their items, but <ol> implies that altering the item sequence changes the actual meaning of the content.

30. What is the <li> tag?

The <li> (List Item) tag is used to wrap every individual item or entry inside an unordered list (<ul>), an ordered list (<ol>), or a menu (<menu>). It must always be nested as a direct child inside a list container to maintain valid HTML markup and accessibility tree structure. Inside an <li> tag, you can place raw text, inline formatting, links, images, or even nest an entirely new sub-list to create multi-level menus. Its visual bullet or numeric marker is automatically rendered by the parent list container type.

HTML & CSS Mock Interview Questions & Answers Part 2

Raj — Thu, 20 Aug 2026 05:58:48 +0000

11. Why do we use the viewport meta tag?

The viewport meta tag, typically written as , is essential for creating responsive web designs that look great on all device screens. By default, mobile browsers attempt to render desktop pages at a wide virtual viewport (often 980px), zooming out and making text unreadably small. This meta tag instructs mobile browsers to set the page viewport width equal to the physical screen width of the device and initializes the zoom scale to 100%. Without it, CSS media queries and responsive units cannot scale properly on mobile devices.
**

What is an HTML element?**

An HTML element is an individual component of an HTML document that defines structure, content, or semantics within the Document Object Model (DOM). It typically consists of a opening tag (e.g.,

), content placed inside, and a corresponding closing tag (e.g.,

). Elements can also contain attributes within their opening tag to customize behavior or styling. Some elements are "void" or "self-closing" (such as or ), meaning they do not take text content or a separate closing tag.

13. What is an HTML attribute?

An HTML attribute is a special key-value pair added inside an element's opening tag to configure its behavior, provide metadata, or modify how it functions. Attributes follow a name="value" format (such as id="main", class="btn", or href="index.html") and extend the basic capability of the tag. They can control link destinations, image sources, input constraints, accessibility roles, or CSS styling references. Almost all HTML elements support global attributes like id, class, style, title, and data-* attributes.

14. What is the difference between an element and an attribute?

An element represents the entire structural unit in HTML, including the opening tag, enclosed content, nested child elements, and closing tag (e.g., Click Here). An attribute, on the other hand, is a configuration property placed inside the element's opening tag to define additional details or properties (e.g., href="link.html"). In short, an element forms the actual structural building block of the page, while an attribute modifies or defines the characteristics and behavior of that building block.

15. What is the difference between

and ?

The primary difference lies in their visual layout behavior and display properties:

is a block-level element, while is an inline element. A creates a section divider that automatically starts on a new line and spans 100% of the parent width, making it ideal for grouping large layout blocks. Conversely, a wraps smaller portions of text or elements inline without breaking the natural text flow onto a new line. Furthermore, respects all top/bottom margins and dimensions, whereas inline elements only respect horizontal margins.

16. What are heading tags?

Heading tags in HTML consist of six levels ranging from

down to

, used to establish an organized document hierarchy and outline structure for web content. The

element represents the most important main title on the page, while

represents the lowest sub-heading level. Using heading tags in a logical, non-skipping order creates a clear visual structure for reading and enables screen reader users to navigate sections easily. Search engine crawlers also heavily rely on headings to understand the main topic and structure of your page.

17. What is the difference between

and

?

The difference between

and

comes down to their visual size default and, more importantly, their semantic hierarchy and weight. The

tag is the highest-level heading that represents the single primary title or main topic of a web page, rendered largest by default browsers. In contrast,

is the lowest-level heading, rendered in the smallest text size, and used for deep sub-sections or minor details. From an SEO and accessibility perspective,

carries the greatest importance, while

carries the least structural weight.

18. What is the

tag used for?

The

tag represents a paragraph of text in an HTML document and is the standard element for displaying structural body copy. Browsers automatically add vertical white space (margins) before and after every

tag to visually separate blocks of text for readable paragraph formatting. It is a block-level element, meaning it starts on a fresh line and spans the full available width of its parent container. You should avoid putting other block-level elements (like

or headings) inside a

tag to keep DOM markup valid.

19. What is the
tag?

The
tag is a void (self-closing) element used to insert a single manual line break within text content without starting a new paragraph. It forces any text or inline content following it to move directly onto the next line while keeping everything inside the same logical block or element. Unlike creating a new

tag,
does not add extra vertical margins or paragraph spacing between the lines. It is primarily used when line breaks are a structural part of the content, such as in physical addresses, poetry, or signatures.

20. What is the

tag?

The

tag stands for Horizontal Rule and is a self-closing semantic element used to represent a thematic break or transition between topics within a page. Visually, browsers default to rendering a horizontal line across the container width to create a distinct section separator. In modern semantic HTML5, it is used to denote a shift in scene, a change of thought, or a transition in an article's narrative flow. While CSS can customize or remove its line style completely, its semantic meaning as a thematic divider remains intact.

HTML & CSS Mock Interview Questions & Answers Part 1

Raj — Wed, 19 Aug 2026 20:58:20 +0000

1. What is HTML?

HTML stands for HyperText Markup Language, and it is the foundational standard markup language used to structure content on the World Wide Web. It provides the essential building blocks and structural skeleton for web pages by wrapping raw text, images, and forms inside descriptive tags. Unlike programming languages, HTML contains no logic or variables; instead, browsers read these markup tags to parse and render content into a visible web page. It works alongside CSS for visual presentation and JavaScript for dynamic client-side interactivity.

2. What does HTML stand for?

HTML stands for HyperText Markup Language, where each word defines a core concept of web architecture. "HyperText" refers to interconnected documents containing links (hyperlinks) that allow users to jump seamlessly from one page or resource to another. "Markup" refers to the system of structural tags used to annotate text, media, and interactive elements to define their purpose. "Language" signifies the standardized syntax and grammar rules understood and processed by every modern web browser globally.

3. What is the basic structure of an HTML document?

The basic structure of an HTML document begins with a <!DOCTYPE html> declaration, followed by the root element containing the entire document. Inside the root, it is divided into two main sections: the and the . The section holds document metadata, character encoding, the page title, and external resource links that are not directly visible on the page. The section contains all rendered visual elements like headings, paragraphs, images, forms, and scripts that users directly see and interact with.

4. Why do we use <!DOCTYPE html>?

We use <!DOCTYPE html> as an essential instruction to the browser, placed at the very top of the document before any other code. Its primary purpose is to inform the web browser which version of HTML the page is written in so it can render content correctly. In modern web development, declaring <!DOCTYPE html> ensures the browser runs in Standards Mode rather than Quirks Mode. Without this declaration, browsers may attempt to emulate older legacy behaviors, causing rendering glitches and layout inconsistencies across different browsers.

5. What is the purpose of the tag?

The tag serves as the absolute root element of an HTML document, enclosing every single piece of content on the web page except the <!DOCTYPE> declaration. It acts as the master container that tells the browser where the HTML content begins and ends. It typically holds crucial global attributes, such as lang="en", which define the primary language of the document. Every other tag, including and , must be properly nested as direct children inside this root element to maintain a valid Document Object Model (DOM) tree.

6. Why do we use lang="en"?

We use the lang="en" attribute inside the tag to explicitly declare English as the primary language of the web document. This is vital for accessibility, as screen readers rely on it to select the correct pronunciation rules, voice synth engines, and accent patterns for visually impaired users. Additionally, search engines use language attributes to properly index pages and display them to users searching in specific languages. It also assists automatic translation tools and spellcheckers in handling page text correctly without user intervention.

7. What is the purpose of the tag?

The tag is a non-visual container used to hold important metadata, document configuration, and resource declarations for the web page. It includes critical information such as character set declarations (), page title (

), viewport configurations for responsiveness, and social media tags. Furthermore, it is where external assets like CSS stylesheets, web fonts, favicon icons, and JavaScript files are linked or preloaded. Nothing rendered directly inside the <head> appears on the page body, but it fundamentally controls how the page behaves and presents itself. 8. What is the purpose of the <body> tag? The <body> tag contains all the visible visual content and structural elements of an HTML document that users see and interact with in their browser viewport. This includes structural containers, headings, body text, image galleries, audio/video media, navigation links, buttons, and interactive forms. There can only be one <body> element per HTML document, positioned directly after the <head> tag inside the root <html> element. Modern web applications manipulate the contents of the <body> element dynamically using JavaScript to create interactive user interfaces. 9. What is the <title> tag? The <title> tag is a required metadata element located inside the <head> section that defines the official title of the web document. This title is displayed directly on the browser tab or window, helping users identify and navigate between multiple open tabs easily. It is also the primary title text shown in search engine results pages (SERPs) and serves as the default name when a user bookmarks a website. A well-crafted title is crucial for Search Engine Optimization (SEO) and overall user experience. 10. Why do we use <meta charset="UTF-8">? We use <meta charset="UTF-8"> to set the character encoding of the HTML document to UTF-8, which stands for UCS Transformation Format 8-bit. UTF-8 is the universal standard encoding for the modern web because it supports almost every written character, symbol, digit, and emoji across all global human languages. Declaring this tag prevents the browser from displaying garbled or broken text characters (often referred to as mojibake) when handling international text or special symbols. It should always be placed high up in the <head> section to ensure early parsing.

HTML CSS Selector

Raj — Fri, 14 Aug 2026 04:27:46 +0000

An HTML CSS Selector is a pattern used in CSS to target and select the specific HTML element(s) you want to style. It acts as the bridge between your HTML markup and your CSS styles.

1. What is the "Select All" Selector?
The "Select All" selector in CSS is known as the Universal Selector. It is written using an asterisk ().
Definition
The universal selector () matches every single HTML element on the page (or within a specific scope).
/* Selects ALL elements on the page */

{ margin: 0; padding: 0; box-sizing: border-box; }

Common Use Case: It is most frequently used in CSS resets to clear default margins/paddings and set box-sizing: border-box globally across all elements.

2. Categories of CSS Selectors (With Examples)
CSS selectors fall into 5 main types:
Type 1: Basic Selectors

Universal Selector (*): Targets all elements.
- Example: * { box-sizing: border-box; }
Element / Tag Selector: Targets elements by their HTML tag name.
- Example: p { color: blue; } (Selects all
  tags)
Class Selector (.): Targets elements with a specific class attribute.
- Example: .btn { padding: 10px; } (Selects , , etc.)

ID Selector (#): Targets a single element with a specific id attribute.

Example: #header { background: black; } (Selects )

Group Selector (,): Selects multiple elements sharing the same styles.

Example: h1, h2, p { font-family: sans-serif; }

Type 2: Combinator Selectors
Combinators define the relationship between two or more selectors.
*** Descendant Selector (space)**: Matches all child/grandchild elements inside a parent.

Example: div p { color: gray; } (All

inside a

) *** Child Selector (>)**: Matches only direct children.

Example: ul > li { list-style: none; } (Only

directly inside
- Example: h1 + p { font-weight: bold; } (The
  right after an
  
  ). ** General Sibling Selector (~)*: Matches all elements that follow a specified element at the same level.
- Example: h1 ~ p { line-height: 1.5; } (All
  tags following an
  
  )
Type 3: Attribute Selectors
Selects elements based on the presence or value of an attribute.
Type 4: Pseudo-Class Selectors
Targets an element based on its state or position. Starts with a single colon (:).
*** State Pseudo-classes:**
- :hover — When mouse hovers over an element.
- :focus — When an input receives focus.
- :active — When an element is being clicked. *** Positional Pseudo-classes:**
- :first-child — The first child of a container.
- :last-child — The last child of a container.
- :nth-child(n) — Selects elements based on a formula (e.g., :nth-child(even) or :nth-child(3)).
Type 5: Pseudo-Element Selectors
Targets a specific part of an element. Starts with double colons (::).
- ::before — Inserts content before the element's content.
- ::after — Inserts content after the element's content.
- ::placeholder — Styles the placeholder text of an .
- ::selection — Styles the text highlighted/selected by the user. 3. Difference Between Key Selectors
1. Specificity Quick Cheat Sheet
When two selectors apply to the same element, CSS decides which style wins using Specificity:

what's difference between the meta viewport and @media screen min-width

Raj — Thu, 13 Aug 2026 05:06:11 +0000

meta viewport and media screen are different things. They both help with responsive design, but they work at different levels.

1. Meta viewport

This is written inside the HTML :

It tells the browser how to set up the webpage's viewport on mobile devices.
width=device-width → make the webpage width equal to the device's screen width.
initial-scale=1.0 → start at normal zoom (100%).
"How should the browser display my webpage on the device?"

2. @media screen

This is CSS:
@media screen and (max-width: 600px) {
body {
background: lightblue;
}
}
It tells CSS:

"If the screen width is 600px or less, apply these styles."

"When the screen has this size, change my design."

3. min-width / max-width
For example:
@media screen and (min-width: 768px) {
.box {
width: 500px;
}
}
Here:
min-width: 768px → apply CSS when screen width is 768px or greater.
max-width: 600px → apply CSS when screen width is 600px or smaller.

Easy difference

Simple example:

<style>
    @media screen and (max-width: 600px) {
        .box {
            width: 100%;
        }
    }
</style>

Remember this :

Meta viewport controls how the browser displays the page on the device, while a media query checks the screen size and applies different CSS styles.
So, width=device-width is NOT the same as @media screen and (min-width). One controls the viewport setup; the other controls CSS styling based on conditions.

What is box-sizing in CSS?

Raj — Tue, 11 Aug 2026 05:54:59 +0000

What is box-sizing in CSS?

Box-sizing is used to control how the width and height of an element are calculated.

There are two main values:

content-box:
The width and height apply only to the content. Padding and border are added outside.
border-box:
The width and height include the content, padding, and border.

For example, if I give "width: 200px" and use "border-box", the total width of the box will remain 200px, including padding and border.

So, I mostly use "border-box" because it makes the layout easier to control.

Can You Install Multiple Operating Systems on One Laptop?

Raj — Mon, 10 Aug 2026 05:54:50 +0000

Can You Install Multiple Operating Systems on One Laptop?
Have you ever wondered if you can run Windows, Ubuntu, and Arch Linux all on the same laptop?
absolutely!
You are not forced to use only one operating system. While most laptops come with just Windows, you can actually install as many as you want.
Dual-Boot and Multi-Boot Explained Simply
Dual-Boot: When you install two operating systems on your laptop (for example, Windows and Linux). When you turn on your computer, a small menu asks you which one you want to use.
Multi-Boot: When you install three or more operating systems on the same laptop (like Windows, Ubuntu, and Arch Linux all together).
Is There a Limit?
Technically, there is no limit!
You can install 3, 4, or even 5 operating systems on one laptop. The only limits are:
Hard Disk Space: Every operating system needs its own storage space. If your laptop storage is full, you cannot add a new one.
Storage Management: You must be careful while dividing your hard drive.
How Does It Work?
Partitioning: You divide your laptop storage into different parts. One part is for Windows, another part is for Linux, and so on.
Boot Manager: When you turn on your laptop, a menu appears on the screen. You just click the operating system you want to use. (Remember: You can only use one operating system at a time).
Important Things to Remember
Install Windows First: If you want both Windows and Linux, always install Windows first. Windows can sometimes hide or delete other operating system menus if you install it later.
Take a Backup: Before you change your hard disk partitions, always copy your important photos and files to a pen drive or Google Drive. Safety first!
Hardware: You can install many operating systems, but your laptop should have a good processor and enough RAM to run them smoothly.
What do you think? Are you ready to try a dual-boot or multi-boot setup on your laptop? Let me know in the comments!

Resume vs Cv

Raj — Wed, 05 Aug 2026 05:57:25 +0000

When to Use a Resume
Corporate and Private Sector Jobs: Standard for business, tech, marketing, and general employment.
Length and Focus: Short, punchy, 1-to-2-page summary tailored to a specific job.
Customization: Frequently updated and tweaked for each individual job application.
When to Use a CV (Curriculum Vitae)
Academic and Research Roles: Required for higher education, scientific research, fellowships, and medical fields.
Length and Focus: Comprehensive, multi-page record detailing your entire academic and professional history.
Content: Includes exhaustive lists of publications, grants, presentations, and teaching experience.
The simplest way to think about it: A resume is a concise highlight reel of your career tailored for a specific job, while a CV is a detailed, chronological record of your entire academic and professional history.

The Resume (The "Highlight Reel")

What it means: Résumé comes from French for "summary."
What's inside: Contact info, a quick summary/objective, tailored work experience highlighting specific achievements, key skills, and brief education details.
Why it exists: Hiring managers spend about 6 seconds on an initial scan. A resume cuts out the fluff so they can quickly see if you fit this exact role.

The CV (The "Full Biography")

What it means: Curriculum Vitae comes from Latin for "course of life."
What's inside: Everything. Full employment history, degrees, research projects, publications, presentations, grants, teaching experience, honors, and professional affiliations.
Why it exists: Academia, research institutes, and scientific organizations need to evaluate your total scholarly output and long-term depth, not just your recent sales targets.
The Regional Trap to Watch Out For
Depending on where you are applying, the words might be used interchangeably even if the documents are distinct:
In the US and Canada: Resume = corporate job search document (1–2 pages). CV = academic/research/medical document (long).
In the UK, Europe, New Zealand, and parts of Asia: The word "CV" is used to refer to what Americans call a resume. If a UK company asks for a "CV" for a regular corporate job, send a 2-page tailored document, not a 10-page academic bio.
In Australia: "Resume" and "CV" are used almost synonymously in the corporate world for a short 2-page summary.

HTML picture tag

Raj — Mon, 03 Aug 2026 18:40:45 +0000

Why do we use the tag?
We use the tag to display different images for different screen sizes. This helps improve website performance by loading the most suitable image for the user's device.

Why do we resize images?
If we use a large image, such as 1500px, and only shrink it with CSS, a mobile phone still downloads the full-size image. This makes the website slower and uses more internet data. Resizing images helps pages load faster.

**How do we use the tag?

Wrap the images inside a tag.
**
Add a tag for desktop or tablet (for example, min-width: 900px).

Add another tag for smaller devices (for example, min-width: 600px).

Finally, add an tag as the fallback image. If none of the conditions match, the browser displays the image.

This version sounds more like a real person explaining the concept in an interview, rather than reading from documentation.

CSS Grid

Raj — Thu, 30 Jul 2026 14:28:32 +0000

CSS Grid is a CSS layout system that helps you arrange HTML elements into rows and columns.
Instead of placing items one after another, CSS Grid lets you organize them like boxes in a table. This makes it much easier to build clean and responsive web page layouts.
Example
imagine placing different objects on those tiles:

A chair on Tile 1
A table on Tile 2
A lamp on Tile 3
A bed on Tile 4

Each object has its own space.

CSS Grid works in exactly the same way.

Your webpage is divided into boxes called grid cells, and each HTML element is placed inside one of those boxes.
Creating Your First Grid

Let's create a simple grid with six boxes.

HTML

1
2
3
4
5
6

Here, the .container holds six child elements.

CSS
.container{
display: grid;
grid-template-columns: 100px 100px 100px;
gap: 10px;
}

.container div{
background: lightblue;
padding: 20px;
text-align: center;
}
Some common examples include:

YouTube video layouts

For example, the YouTube homepage displays videos like this:

Each video card sits inside its own grid cell.

What are HTML tags

Raj — Mon, 27 Jul 2026 03:59:49 +0000

HTML tags are hidden keywords enclosed in angle brackets (< > ) and that instruct web browsers how to format and display content.

They act as the structural blueprint for web pages, transforming raw text into structured paragraphs, headers, links, and multimedia elements.

Anatomy of an HTML Tag

Most HTML tags work in pairs:
an opening tag to signal the start of an element, and a closing tag (which includes a forward slash / ) to signal the end. Together with the content inside, they form an HTML element.

is the opening tag.

This is a paragraph element. is the content.

Core Categories of HTML Tags

HTML features over 100 specialized tags. They generally fall into the following core functional groups.
**

Root & Structure Tags**

These tags establish the primary document hierarchy and skeleton.
: The root container that wraps all page content.
: Contains hidden document metadata, links to external stylesheets, and character settings.

: Sets the clickable text displayed in the browser tab. <body> : Houses all visible elements presented directly to the user. 2. Text Formatting Tags These tags give layout structure and emphasis to standard text elements <h1> to <h6>: Definitive headings ranging from highest importance (<h1>) down to lowest (<h6>). : Organizes blocks of text into individual paragraphs. / : Applies bold formatting to visually emphasize words. / : Italicizes text for alternative tone or emphasis 3. Content Layout & Grouping Tags These tags arrange blocks of information to build complete layouts <div>: A generic block-level container used to group elements together for styling. : An inline container used to style small sections of text within a block. <ul> and <ol> : Starts an unordered (bulleted) or ordered (numbered) list layout. <li>: Marks an individual list item inside a parent list layout **4. Inline Media & Interactive Tags** These elements require extra technical data (called attributes) to connect external files or web location. <a href="url"> : Creates a hyperlink that connects to another destination. <img src="image.jpg">: Embeds an external graphic file directly onto the screen layout. **Paired vs. Self-Closing Tags** While most tags wrap around text, certain elements do not enclose content. These are known as self-closing (or void) tags and do not use a separate closing tag. Paired Tags: ..., <h1>...</h1>, <div>...</div> Self-Closing Tags: <img> (inserts an image), (forces a line break), and <hr> (inserts a horizontal rule line)

Css Flex

Raj — Mon, 20 Jul 2026 15:26:19 +0000

What is Flex in CSS?
Flex (Flexbox) is a CSS layout system that makes it easy to arrange items in a row or column. It allows you to align, size, and distribute space between items inside a container.Flexbox helps create responsive and flexible web layouts with less code.

How does Flex work?

Flex works with two parts:

Flex Container – The parent element.
Flex Items – The child elements inside the parent.

First make the parent a flex container:

.container {
display: flex;
}

Example:

Box 1
Box 2
Box 3