Scribd
Upload
1 views

HTML Css

The document is an HTML and CSS interview preparation guide that covers essential topics such as HTML structure, text formatting, links, lists, images, tables, forms, and CSS basics, including the box model, positioning, flexbox, grid layout, and responsive design. It includes examples and related interview questions with model answers to help candidates prepare effectively. Final tips emphasize the importance of semantic HTML, accessibility, and mastering responsive design techniques.

Uploaded by

makar samer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1 views

HTML Css

The document is an HTML and CSS interview preparation guide that covers essential topics such as HTML structure, text formatting, links, lists, images, tables, forms, and CSS basics, including the box model, positioning, flexbox, grid layout, and responsive design. It includes examples and related interview questions with model answers to help candidates prepare effectively. Final tips emphasize the importance of semantic HTML, accessibility, and mastering responsive design techniques.

Uploaded by

makar samer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

html,css

Last Edited Time @May 25, 2025 6:37 PM

Created By makar samer

Last Edited By makar samer

HTML & CSS Interview Prep Guide

Part 1: HTML Essentials

1. What is HTML?
Answer:

HTML (HyperText Markup Language) is the standard language for structuring


content on the web using elements represented by tags.
Example:

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

Related Interview Questions:

What is the role of the <html> , <head> , and <body> tags?


Modal Answer: <html> wraps the entire document, <head> contains meta-
information, and <body> contains the visible content.

What does <!DOCTYPE html> do?


Modal Answer: It tells the browser to use HTML5 standards for rendering.

html,css 1
2. HTML Headings
Answer:
HTML provides six levels of headings ( <h1> to <h6> ) to organize content
hierarchically.
Example:

<h1>Main Heading</h1>
<h2>Subheading</h2>

Related Interview Questions:

Which heading is most important?


Modal Answer: <h1> is the most important and typically used once per
page.

Are headings used for SEO?


Modal Answer: Yes, headings help search engines understand content
structure.

3. HTML Text Formatting


Answer:
HTML has tags like <b> , <strong> , <i> , <em> , etc., for formatting and semantic
meaning.
Example:

<p><strong>Important</strong> and <b>Bold</b></p>

Related Interview Questions:

Difference between <b> and <strong> ?

Modal Answer: <b> is purely visual; <strong> indicates importance.

Semantic importance of <em> vs <i> ?

Modal Answer: <em> adds emphasis with meaning; <i> is only visual.

4. HTML Links

html,css 2
Answer:

The <a> tag is used to create hyperlinks.


Examples:

Linking to a file:

<a href="docs/file.pdf" download>Download File</a>

Linking to page sections:

<a href="#section">Go to Section</a>


<h2 id="section">Target Section</h2>

Linking to email:

<a href="mailto:user@example.com">Send Email</a>

Related Interview Questions:

What are relative vs absolute links?

Modal Answer: Relative links point to local paths; absolute links use full
URLs.

5. HTML Lists
Answer:

HTML supports ordered ( <ol> ), unordered ( <ul> ), and description lists ( <dl> ).
Example:

<ul>
<li>Apple</li>
<li>Banana</li>
</ul>

Related Interview Questions:

When would you use a description list?

Modal Answer: Use <dl> for key-value pairs, like terms and definitions.

html,css 3
6. HTML Images & Maps
Answer:

Use <img> to embed images, and <map> with <area> for clickable regions.
Example:

<img src="logo.jpg" alt="Logo" usemap="#map1">


<map name="map1">
<area shape="rect" coords="0,0,100,100" href="home.html">
</map>

Related Interview Questions:

How to make responsive images?

Modal Answer: Use CSS max-width: 100% or <picture> element for different
resolutions.

7. HTML Tables
Answer:

Tables are created using <table> , <tr> , <td> , <th> , and can merge cells with
colspan and rowspan .

Example:

<table border="1">
<tr><th>Name</th><th colspan="2">Contact</th></tr>
<tr><td>John</td><td>Email</td><td>Phone</td></tr>
</table>

Related Interview Questions:

How to style tables with CSS?

Modal Answer: Use border , padding , border-collapse , and pseudo-classes like


:nth-child() .

8. HTML Forms
Answer:

html,css 4
Forms use <form> , <input> , <textarea> , <select> , and other elements to collect user
input.

Example:

<form action="submit.php" method="post">


<input type="text" name="username">
<input type="email" name="email">
<textarea name="message"></textarea>
<select name="gender">
<option>Male</option>
<option>Female</option>
</select>
<input type="submit">
</form>

Related Interview Questions:

What are the types of input fields?

Modal Answer: Text, password, email, checkbox, radio, submit, date, etc.

How to validate a form?

Modal Answer: Use HTML5 attributes ( required , type , pattern ) or JavaScript.

Part 2: CSS Essentials

1. CSS Basics
Answer:
CSS styles HTML by selecting elements and applying rules.

Example:

h1 {
color: blue;
font-size: 24px;
}

Related Interview Questions:

Difference between class and ID selectors?

html,css 5
Modal Answer: Classes use .class and can be reused; IDs use #id and must
be unique.

What are the types of CSS?


Modal Answer: Inline, internal ( <style> tag), and external ( .css files).

2. CSS Box Model


Answer:

Each element is a box: content + padding + border + margin .

Example:

div {
width: 100px;
padding: 10px;
margin: 20px;
border: 1px solid black;
box-sizing: border-box;
}

Related Interview Questions:

What does box-sizing: border-box do?

Modal Answer: It includes padding and border in the element’s total width
and height.

3. CSS Positioning
Answer:
Positioning types: static , relative , absolute , fixed , sticky .

Example:

.sticky {
position: sticky;
top: 0;
}

Related Interview Questions:

html,css 6
How does absolute positioning work with respect to the parent?

Modal Answer: It positions the element relative to the nearest positioned


ancestor (non-static).

4. Flexbox & Grid Layout


Answer:
Modern layout systems for responsive designs.

Example (Flexbox):

.container {
display: flex;
justify-content: space-between;
align-items: center;
}

Example (Grid):

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}

Related Interview Questions:

Flexbox vs Grid: When to use which?


Modal Answer: Use Flexbox for one-dimensional layouts and Grid for two-
dimensional.

5. CSS Styling & Backgrounds


Answer:

Style elements with fonts, colors, borders, backgrounds.


Example:

body {
background: linear-gradient(to right, red, blue);

html,css 7
font-family: Arial, sans-serif;
text-align: center;
}

Related Interview Questions:

How to add shadows or gradients?

Modal Answer: Use box-shadow , text-shadow for shadows and linear-gradient ,


radial-gradient for gradients.

6. CSS Transitions and Transforms


Answer:

Transitions animate changes, transforms modify shape/position.


Example:

div {
transition: transform 0.3s ease;
}
div:hover {
transform: scale(1.2);
}

Related Interview Questions:

What's the difference between transform and transition?


Modal Answer: transform changes the element; transition defines how the
change occurs over time.

7. Responsive Design
Answer:
Design that adapts to different screen sizes using media queries and flexible
units.

Example:

@media (max-width: 600px) {


body {

html,css 8
font-size: 14px;
}
}

Related Interview Questions:

Difference between px, em, rem?


Modal Answer: px is fixed, em is relative to parent, rem is relative to root.

What is the viewport meta tag?


Modal Answer: It sets the visible area of a web page on different devices,
crucial for responsive design.

Final Tips:
Practice semantic HTML and accessible forms.

Use browser dev tools for layout debugging.

Combine Flexbox and Grid smartly for layout.

Master media queries for responsive design.

Let me know if you want to go deeper into any of these areas!

html,css 9

You might also like