DEV Community: Raj

JavaScript Function

Raj — Fri, 11 Sep 2026 05:16:44 +0000

A function is a block of code that we create to perform a particular task.

Instead of writing the same code again and again we can write it once inside a function and call the function whenever we need it.

Example

javascript
function greet() {
console.log("Hello Raj");
}

greet();

How it works

function greet()
↓
Function is created
↓
Code is written inside {}
↓
greet()
↓
Function is called
↓
"Hello Raj" is printed

Why do we use functions?

Functions help us to:

Reuse code
Avoid writing the same code again
Keep code clean and organized
Make programs easier to understand
Perform a specific task whenever needed

Function with Parameters

We can also send information to a function.

javascript
function greet(name) {
console.log("Hello " + name);
}

greet("Raj");
greet("Kumar");

Output:

Hello Raj
Hello Kumar

Herename is called a parameter.

The value "Raj" is called an argument.

**
Function with Return**

A function can also return a value.

javascript
function add(a, b) {
return a + b;
}

let result = add(10, 20);

console.log(result);

Output:

Here return sends the result back from the function.

CSS :root Selector

Raj — Tue, 08 Sep 2026 05:25:46 +0000

What is :root?
:root in CSS. At first I was confused about why we use :root instead of simply writing CSS normally.

In :root represents the main element of a webpage. It is commonly used to store CSS variables that we want to use throughout our website.

Why do we use :root?

The main reason is to keep our commonly used values in one place.

Example

instead of writing the same colors again and again, we can create a variable:

:root {
--bg-main: #ffffff;
--text-main: #1a1a1a;
--accent: #6200ee;
}

Then we can use those variables anywhere in our CSS:

body {
background-color: var(--bg-main);
color: var(--text-main);
}

button {
background-color: var(--accent);
}

How does it work?

The :root section stores the values.

The --bg-main, --text-main and --accent names are CSS variables.

When we use var(--accent), CSS takes the value stored inside --accent.

So the basic flow is:

:root → Store values → var() → Use values

Example

This becomes especially useful when creating a website with different color.

For example, we can have one set of variables for a colors and another set for a colors.

:root {
--bg-main: white;
--text-main: black;
--accent: purple;
}

Later we can change these values for a colors.

This makes our CSS easier to manage because we don't have to change every element individually.

JavaScript vs TypeScript What’s the Difference?

Raj — Wed, 02 Sep 2026 05:58:42 +0000

JavaScript and TypeScript are both widely used in web development and they are closely related. The main difference is how they handle data types and errors.

What is JavaScript?

JavaScript is a dynamically typed programming language. We don't need to specify the type of a variable when declaring it. JavaScript is flexible and can run directly in web browsers, which makes it popular for building interactive websites and web applications.

What is TypeScript?

TypeScript is a superset of JavaScript developed by Microsoft. It adds static typing, which allows developers to specify whether a variable should be a number, string, boolean, or another type. This helps developers find errors earlier while writing the code.

example in JavaScript:

let age = 25;
age = "vijay";

This is allowed because JavaScript is flexible with variable types.

In TypeScript:

let age: number = 25;
age = "vijay"; // Error

Here, TypeScript gives an error because age is defined as a number.

Another important difference is that JavaScript can run directly in the browser, while TypeScript needs to be converted into JavaScript before it can run.

In simple terms, JavaScript provides flexibility while TypeScript adds more structure and type safety. JavaScript is often a good starting point for beginners while TypeScript is especially useful for larger and more complex applications where maintaining clean and reliable code is important.

Why Do Developers Use TypeScript?

One major reason developers use TypeScript is to reduce mistakes in large applications.

Imagine a project has thousands of lines of code and many developers are working on it. Without clear information about what type of data a function expects it can become difficult to understand and maintain the code.

TypeScript can make the code easier to understand by clearly defining the expected types.

example:

function add(a: number, b: number): number {
return a + b;
}

Here we can immediately understand that:

a should be a number.
b should be a number.
The function returns a number.

This can make large projects easier to maintain.

Why do we Convert String to Number and Number to String in a Calculator?

Raj — Fri, 28 Aug 2026 04:52:01 +0000

In calculator we use:

const input = document.getElementById("display");

Here display is the input element where the calculator values are shown.

1. Why do we use String for user input?

When the user clicks number buttons we need to join the digits together.

For example:

currentValue += value;

If the user clicks:

5 → 0

We need:

"5" + "0" = "50"

So, we keep the entered value as a String.

This makes it easy to enter multiple digits like:

5 → 0 → 2

Result:

"502"

2. Why do we convert String to Number?

When we perform a calculation JavaScript must treat the values as numbers.

For example:

"50" + "2"

Since both are Strings JavaScript joins them together:

"502"

But we actually want:

50 + 2 = 52

Therefore before calculation we convert the String into a Number:

const leftOperand = Number(previousValue);
const rightOperand = Number(currentValue);

Now:

Number("50") → 50
Number("2") → 2

So JavaScript can perform the actual mathematical calculation:

50 + 2 = 52

Why do we convert Number back to String? **

After calculation the result is a Number.

For example:

currentValue = leftOperand + rightOperand;

The result is:

This is a Number.

We convert it back to String using:

currentValue = currentValue.toString();

Now:

52 → "52"

We do this because our currentValue is used again for handling the calculator's displayed/input value.

Simple Flow

We use String while entering digits convert String to Number when performing calculations and convert the result back to String so it can continue to be handled as the calculator's input/display value.

JavaScript Control Flow Statements

Raj — Thu, 27 Aug 2026 04:23:34 +0000

Control flow statements in JavaScript control the order in which code is executed. These statements allow you to make decisions, repeat tasks, and jump between parts of a program based on specific conditions.
JavaScript if Statement

The if statement executes a block of code only if a specified condition is true.
if_statement

const age = 18;

if (age >= 18) {

console.log("You are an adult.");

}

Checks if age is greater than or equal to 18.
Logs "You are an adult." if the condition is true.

JavaScript if...else Statement

The if...else statement provides an alternate block of code to execute if the condition is false.
if_else_statement

const score = 40;

if (score >= 50) {

console.log("You passed.");

} else {

console.log("You failed.");

}

It will log "You passed." if the score is 50 or more.
Otherwise, logs "You failed."

JavaScript if...else if...else Statement

The if...else if...else statement is used when you want to handle multiple conditions.
if_else_if_else_statement

const temp = 25;

if (temp > 30) {

console.log("It's hot.");

} else if (temp >= 20) {

console.log("It's warm.");

} else {

console.log("It's cold.");

}

Checks if the temperature is greater than 30, logs "It's hot."
If not, checks if it's between 20 and 30, logs "It's warm."
Otherwise, logs "It's cold."

JavaScript Switch Statement

The switch statement evaluates an expression and executes a block of code based on matching cases. It provides an alternative to long if-else chain.
switch_statement

const day = "Monday";

switch (day) {

case "Monday":

    console.log("Start of the week.");

    break;

case "Friday":

    console.log("End of the workweek.");

    break;

default:

    console.log("It's a regular day.");

}

Checks the value of day and matches it to a case.
Logs "Start of the week." if day is "Monday".
Logs "End of the workweek." if day is "Friday".
Logs "It's a regular day." if no cases match.

Note: Without break, execution continues to the next case statements (fall-through behavior).

JavaScript Looping Statements

Looping statements are used to execute a block of code repeatedly based on a condition.
1. JavaScript for Loop

The for loop is used when the number of iterations is known.

for (let i = 1; i <= 3; i++) {

console.log(i);

}

Initializes a counter, checks condition, and updates it in each iteration.
Executes the block until the condition becomes false.

2. JavaScript while Loop

The while loop runs as long as the condition is true.

let i = 1;

while (i <= 3) {

console.log(i);

i++;

}

Checks the condition before each iteration.
Executes the block only if the condition is true.

3. JavaScript do...while Loop

The do...while loop executes the block at least once, even if the condition is false.

let i = 1;

do {

console.log(i);

i++;

} while (i <= 3);

Executes the block first, then checks the condition.
Ensures at least one execution.

Ternary Operator or Conditional Operator

In some programming languages, a ternary operator is used to assign a value to a variable based on a condition.
ternary_operator_or_conditional_operator

let a = 10;

console.log(a === 5 ? "a is equal to 5" : "a is not equal to 5");

let a = 10; assigns the value 10 to variable a.
a === 5 ? ... : ... checks if a is strictly equal to 5.
Returns "a is equal to 5" if true.
Returns "a is not equal to 5" if false.

Uses of Control Flow Statements

Control flow statements are backbone in programming for

Decision-Making: To execute specific blocks of code based on conditions (e.g., if, if...else).
Branching: To exit loops or skip iterations (break, continue).
Looping: To repeat tasks (for, while, do...while).
Switching: To handle multiple conditions effectively (switch).

Bug Life Cycle

Raj — Wed, 26 Aug 2026 03:40:43 +0000

ref :BrowserStack

1. New

The tester finds the problem and creates a bug report.

Example:

"Login button is not working after entering valid username and password."

At this stage the bug status is New.

2. Assigned

The testing lead or QA manager assigns the bug to a developer.

Now the developer is responsible for checking and fixing the problem.

3. Open / Active

The developer starts investigating the bug.

The developer checks:

What is causing the problem?
Can the problem be reproduced?
Which code is causing it?
How can it be fixed?

If the developer believes it is not actually a bug it can instead be marked Rejected Duplicate Deferred or Not a Bug.

4. Fixed

The developer finds the problem and changes the code to fix it.

After fixing it the developer sends the updated application back to the tester.

5. Retest

Now the tester tests the same login problem again.

For example:

Enter username → Enter password → Click Login.

If Login works correctly the tester considers the fix successful.

If Login still doesn't work the bug can be reopened and sent back to the developer.

6. Verified

When the tester confirms that the bug has been successfully fixed the fix is verified.

7. Closed

Finally the tester closes the bug when no further work is required and the problem has been successfully resolved.

Other Bug Statuses

There are also some additional statuses that can happen during the process:

Rejected:
The developer believes the reported issue is not a valid bug.

Duplicate:
The same problem has already been reported in another bug.

Deferred:
The bug is valid but it is low priority so the team decides to fix it in a future release.

Not a Bug:
The reported behavior is actually expected behavior or does not affect the application's functionality.

Easy Flow to Remember

simple example

Bug Life Cycle is the journey of a bug from the time the tester finds it until it is fixed and closed. First the tester reports the bug as New. Then it is Assigned to a developer. The developer investigates it and changes the status to Open. After fixing the problem, it becomes Fixed. The tester then Retests the bug. If the fix works the bug is Verified and Closed. If the problem still exists the bug is Reopened and sent back to the developer.

A Small CSS Mistake That Made Me Waste Time

Raj — Tue, 25 Aug 2026 04:30:57 +0000

Yesterday, I noticed that my background color was not covering the full width.

At first, I was checking the width, padding, margin, and even thinking about adding a border.

Normally, we can use the universal selector * for the basic CSS reset.
In my particular case, I noticed the problem and fixed the body specifically.

So readers should understand both approaches, instead of thinking body { margin: 0; } is the only correct method.

Then I realized the actual problem was the browser's default margin on the body.

In my case
I fixed it by adding:
html,
body {
margin: 0;
padding: 0;
}

After that, my background color covered the full width.
But normally...When starting a new HTML/CSS project, I usually prefer to set the basic reset using the universal selector:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

This resets the default margin and padding for all elements.
So, my case was specifically about the body margin, but as a general project setup, you can use the universal selector to reset the default spacing.

when the real problem is just 8px of default body margin

What difference between java and javascript

Raj — Mon, 24 Aug 2026 15:49:29 +0000

Java and JavaScript are two different programming languages. The names are similar but they are not the same language.

example

Imagine a website like YouTube:

HTML → Creates the structure: buttons, videos, search box.
CSS → Makes it beautiful: colors, size, alignment.
JavaScript → Makes things work: when you click a button, open a menu, search something, play & pause, etc.
Java → Could be used on the server and backend for large applications and business logic.

One important point
For example:

JavaScript → Web interactivity.
Java → Backend / Applications.

OOP Paradigm

The Object-Oriented Programming (OOP) paradigm organizes software design around data (objects) rather than functions and logic.

Prototype

Prototype-based object-oriented programming is a distinct style of object-oriented programming (OOP) where objects inherit behaviors directly from other existing objects (prototypes) instead of from classes.

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:

DEV Community: Raj

JavaScript Function

CSS :root Selector

JavaScript vs TypeScript What’s the Difference?

Why do we Convert String to Number and Number to String in a Calculator?

JavaScript Control Flow Statements

Bug Life Cycle

A Small CSS Mistake That Made Me Waste Time

What difference between java and javascript

Imagine a website like YouTube:

HTML & CSS Mock Interview Questions & Answers Part 3

HTML & CSS Mock Interview Questions & Answers Part 2

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

and

?

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.

HTML & CSS Mock Interview Questions & Answers Part 1

HTML CSS Selector

). ** General Sibling Selector (~)*: Matches all elements that follow a specified element at the same level.

)

). ** *General Sibling Selector (~)**: Matches all elements that follow a specified element at the same level.