🔹 1. What is HTML?
HTML (HyperText Markup Language) is the standard
markup language used to create the structure of web
pages.
🔹 2. Basic HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
📋 Important HTML Tags
Tag Purpose
<html> Root element of HTML page
<head> Contains metadata, title, and links
Tag Purpose
<title> Title shown in browser tab
<body> Contains visible content
<h1>–<h6> Headings (H1 = largest)
<p> Paragraph
<a href=""> Hyperlink
<img src=""> Image
<br> Line break
<hr> Horizontal line
<ul>, <ol>, <li> Lists
<table>, <tr>, <td> Tables
<form> Form for user input
<input> Input field
<button> Button
<div> Generic container (block)
<span> Inline container
<iframe> Embed another webpage
<video>, <audio> Media elements
🧱 HTML Attributes
Attributes add extra information to tags.
<img src="[Link]" alt="Profile Photo" width="200"
height="200">
<a href="[Link]
target="_blank">Visit</a>
Attribute Description
src Source of image/media
href Link URL
alt Alternate text for images
id Unique element identifier
class Group of elements
style Inline CSS
target="_blank" Opens link in new tab
🧱 HTML5 New Features
Feature Description
<header>,
Page structure elements
<footer>
<section>,
Semantic divisions
<article>
<nav> Navigation links
<aside> Sidebar or ads
<audio>, <video> Media support
<canvas> Drawing graphics
Improved input types (email, date,
<form>
range, etc.)
<progress> Progress bar
<localStorage> Client-side storage
💬 Common HTML Interview Questions
1. Difference between HTML & HTML5?
→ HTML5 adds new semantic tags, multimedia
support, and APIs like localStorage.
2. What are semantic tags?
→ Tags that describe meaning of content, e.g.
<header>, <article>, <footer>.
3. Difference between id and class?
→ id is unique; class can be reused multiple times.
4. What is doctype?
→ It defines the HTML version (e.g., <!DOCTYPE
html> for HTML5).
5. What is meta tag used for?
→ To provide metadata (keywords, description,
author, viewport).
🎨 CSS – Cascading Style Sheets
🎯 What is CSS?
CSS is used to style and layout HTML elements (colors,
fonts, spacing, etc.)
🔹 3 Ways to Apply CSS
Method Syntax Usage
Inside the
Inline <p style="color:red;">Text</p>
tag
Inside
Internal <style>p{color:red;}</style>
<head>
Method Syntax Usage
<link rel="stylesheet" Separate
External
href="[Link]"> file
⚙️ CSS Selectors
Selector Example Description
Universal * Applies to all elements
Element p Selects all <p>
ID #title Selects element with id="title"
Class .menu Selects all with class="menu"
Descendant div p All <p> inside <div>
Grouping h1, h2 Applies to multiple selectors
🧱 Common CSS Properties
Property Example Description
color color: blue; Text color
background- background-color:
Background color
color yellow;
font-size font-size: 18px; Text size
Property Example Description
font-weight font-weight: bold; Bold text
text-align text-align: center; Align text
Space outside
margin margin: 10px;
element
Space inside
padding padding: 15px;
element
border: 1px solid
border Border styling
black;
width / height width: 100px; Element size
display display: flex; Layout behavior
Element
position position: absolute;
positioning
float float: right; Float element
Hide overflow
overflow overflow: hidden;
content
🎨 Box Model
Every HTML element is a box made of:
➡ Content → Padding → Border → Margin
div {
width: 200px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}
📱 Responsive Design
Makes your website adapt to all screen sizes.
@media (max-width: 600px) {
body { background-color: lightblue; }
}
⚡ Flexbox & Grid (Modern CSS)
🔹 Flexbox
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
🔹 Grid
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
🧱 CSS Interview Concepts
1. Difference between relative and absolute
position?
→ relative moves an element based on its original
position;
absolute moves based on its nearest positioned
ancestor.
2. What is z-index?
→ Controls stacking order of elements (higher
value = front).
3. Difference between inline, block, and inline-
block?
o Inline: no new line (e.g. <span>)
o Block: takes full width (e.g. <div>)
o Inline-block: same line, but supports
width/height.
4. Pseudo-classes vs Pseudo-elements
o :hover, :focus → pseudo-class (state)
o ::before, ::after → pseudo-element (adds
content)
5. CSS Units
o Absolute: px, cm
o Relative: %, em, rem, vh, vw
6. What is specificity?
→ Defines which CSS rule wins when multiple
apply.
Priority: Inline > ID > Class > Element.
7. Difference between transition and animation?
o Transition: changes happen between two
states.
o Animation: continuous keyframe-based
changes.
🌈 Common CSS Tricks
button:hover {
background-color: #0d6efd;
color: white;
transform: scale(1.1);
transition: 0.3s;
}
🏁 Bonus Quick Revision
HTML → Structure
CSS → Styling
JavaScript → Behavior
Bootstrap → Predefined responsive design
Media Query → For mobile-friendly pages