Corporate Training and Placement Center

HTML and CSS Questions

1. <div> vs <span>
o Answer: <div> is a block-level element that creates a new line before and
after it. It is used for structuring the layout. <span> is an inline element that
does not cause line breaks and is used for styling parts of text.
2. Difference between box-sizing: border-box and content-box
o Answer: content-box (default) calculates width/height based only on the
content. border-box includes padding and border in the element's total
width/height, making layout easier.

3. HTML5 Features

Answer: HTML5 introduced elements like <section>, <article>, <nav>,

o
semantic tags, form enhancements (e.g., <input type="date">), <canvas>,
placeholder , required attributes , audio/video support, and APIs like
Geolocation and Web Storage.
4. What is an <iframe>?
o Answer: An <iframe> (inline frame) is an HTML element used to embed
another document within the current HTML document, allowing different web
pages to be displayed within a section of the page.

5. Image vs. Image Map

o Answer: An image is a static file displayed on the web, while an image map
allows different clickable areas (hotspots) of the image to link to different
URLs, typically defined using <map> and <area> elements.

6. Box Model in CSS

o Answer: The CSS box model describes the rectangular boxes generated for
elements in a document tree and includes margins, borders, padding, and the
actual content area.

7. How to make responsive design in CSS?

o Answer: Use flexible grids (e.g., CSS Grid and Flexbox), media queries for
adaptive styles, and relative units (%, em, rem) for sizing elements and layout
adjustments across different screen sizes.

8. CSS Grid vs. Flexbox

o Answer: Flexbox is one-dimensional (either row or column) for laying out

items in a single line flexibly. Grid is two-dimensional, allowing for complex

Address : ByteSplash Training and Placement Center, 4th Floor, No 92/9, PR Layout, Marathahalli, Bengaluru, Karnataka, 560037
Mobile : +91 8660803099 / +91 6301062858 , Email : [email protected]
 Corporate Training and Placement Center
layouts using rows and columns simultaneously. Use display: flex; for
Flexbox and display: grid; for Grid layout.

9. Formatting Tags in HTML

o Answer: Tags like <i> (italic), <b> (bold), <strong> (strong

emphasis), <sup> (superscript), and <sub> (subscript) are used to format the
text in various styles.

10. Meta Tags in HTML

Answer: <meta> tags provide metadata about the HTML document, including
o
keywords for SEO, character set (UTF-8), viewport settings for responsive
design, and descriptions.
11. How to combine 2 columns with rowspan="2"?
o Answer: Use a <table> structure with <td> elements and
apply rowspan="2" to the desired cell, combining it vertically over two rows.
12. display: none vs. visibility: hidden
o Answer: display: none removes the element from the document flow (no
space is occupied). visibility: hidden hides it but maintains its space in
the layout.

13. Block-level Elements in HTML

o Answer: Common block-level elements

include <div>, <p>, <h1> to <h6>, <article>, and <section>, which start on a
new line and take the full width available.

14. How to create an editable dropdown?

o Answer: Use the <datalist> element to create an editable dropdown:

<input list="options"/>
<datalist id="options">
<option value="Option 1">
<option value="Option 2">
</datalist>

15. Example Link

oAnswer: <a href="https://">Click here</a> creates a clickable link

directing to the specified URL.
16. Basic <input> Tag
o Answer: <input /> is a form element allowing users to enter data. Various
types can be specified with type attribute (e.g., text, password).

Address : ByteSplash Training and Placement Center, 4th Floor, No 92/9, PR Layout, Marathahalli, Bengaluru, Karnataka, 560037
Mobile : +91 8660803099 / +91 6301062858 , Email : [email protected]
 Corporate Training and Placement Center
17. Implementing name="gender" in HTML (Checkbox)
o Answer: Use checkboxes with the same name for a group:

<input type="checkbox" name="gender" value="male"> Male

<input type="checkbox" name="gender" value="female"> Female

18. Canvas and SVG

o Answer: <canvas> is an HTML element used for drawing graphics with

JavaScript, while SVG (Scalable Vector Graphics) is an XML-based format for
representing 2D graphics in a vector format.

19. Web Storage in HTML5

o Answer: HTML5 introduced localStorage, sessionStorage, and cookies for

storing data on the client's browser. localStorage persists until explicitly
deleted, while sessionStorage lasts only for the session.

20. LocalStorage vs. SessionStorage vs. Cookies

o Answer:
▪ localStorage: Can hold up to 5-10MB indefinitely.
▪ sessionStorage: Similar to localStorage but only lasts for the
session.
▪ Cookies: Limited to 4KB, used for server side communication and can
have expiration dates.

21. Cookies

oAnswer: A small piece of data sent to the browser by the server, limited to
around 4KB in size, used for storing user's session information.
22. Using <video> and <audio> Tags
o Answer: Use <video src="file.mp4" controls> and <audio
src="audio.mp3" controls> to embed media with controls for playback.

23. Geolocation API

o Answer: The Geolocation API allows access to the user's location:

javascript

navigator.geolocation.getCurrentPosition((position) => {
console.log(position.coords.latitude, position.coords.longitude);
});
24. Check Online Status with navigator.onLine

Address : ByteSplash Training and Placement Center, 4th Floor, No 92/9, PR Layout, Marathahalli, Bengaluru, Karnataka, 560037
Mobile : +91 8660803099 / +91 6301062858 , Email : [email protected]
 Corporate Training and Placement Center
o Answer: navigator.onLine returns a boolean indicating whether the browser
is online or offline:

console.log(navigator.onLine); // true or false

25. Types of CSS

o Answer: There are three types of CSS:

▪ Internal CSS: Defined within <style> tags in the HTML document.
▪ External CSS: Linked via a separate .css file using <link>.
▪ Inline CSS: Applied directly on HTML elements using
the style attribute.

26. CSS Specificity

o Answer: Specificity determines which CSS rule is applied. It is calculated in

the following order:
a. Inline styles (highest)
b. IDs
c. Classes, attributes, and pseudo-classes
d. Elements and pseudo-elements (lowest)
27. Using <link> and <script> Tags
o Answer: Use <link rel="stylesheet" href="styles.css"> to add CSS
and <script src="script.js"></script> to include JavaScript in your
HTML.
28. Font Size Conversion: 1rem to pixels
o Answer: 1rem equals the font size of the root element (typically
16px); vw (viewport width) and vh (viewport height) are relative units based
on the viewport size.

29. CSS Box Model

o Answer: Margin, border, padding, and content determine the total size of an
element, e.g.,

box-sizing: border-box; /* Padding and border included in the element's

total width and height */

30. Class and ID Selectors

o Answer: Use . for class selectors (e.g., .classname) and # for ID selectors
(e.g., #idname) in CSS. Example of linear gradient:

background: linear-gradient(to right, #FF5733, #C70039);

Address : ByteSplash Training and Placement Center, 4th Floor, No 92/9, PR Layout, Marathahalli, Bengaluru, Karnataka, 560037
Mobile : +91 8660803099 / +91 6301062858 , Email : [email protected]
 Corporate Training and Placement Center
31. Sibling Selectors: ~ and +
o Answer:
▪ + selects the immediate next sibling.
▪ ~ selects all subsequent siblings.
Example:

css

.class1 + .class2 { /* styles */ }

.class1 ~ .class2 { /* styles */ }
32. Pseudo-class Selectors: :hover and :active
o Answer: :hover applies styles when the user hovers over an element,
and :active applies styles when the element is being clicked.

33. Understanding the Box Sizing

o Answer: The total calculated width and height of a box can be determined by
the following:

content width + padding + border = total width

34. Overflow Properties: overflow-x, overflow-y
o Answer: These properties manage content overflow in the horizontal and
vertical directions, respectively. Common values
include visible, hidden, scroll, and auto.

Address : ByteSplash Training and Placement Center, 4th Floor, No 92/9, PR Layout, Marathahalli, Bengaluru, Karnataka, 560037
Mobile : +91 8660803099 / +91 6301062858 , Email : [email protected]