Web Technologies (HTML CSS) syllabus
HTML (HyperText Markup Language)
1. Introduction
HTML stands for HyperText Markup Language.
It is the standard language used to create web pages and display them in web browsers.
HTML describes the structure of a webpage.
HTML uses tags and attributes to define elements.
It is not a programming language, it is a markup language.
HTML files have extension .html or .htm.
Explanation:
<!DOCTYPE html> → Declares the document as HTML5.
<html> → Root element of HTML document.
<head> → Contains metadata, title, CSS links, etc.
<title> → Page title shown in browser tab.
<body> → Contains visible content.
2. Structure of an HTML Document
Part Description
<!DOCTYPE html> Defines HTML version
<html> Root tag
<head> Contains title, meta info, CSS links
<title> Title of the page
<body> Page content like text, images, links
3. HTML Elements and Tags
HTML Element: Everything from start tag to end tag.
Example: <p>This is paragraph</p>
HTML Tag: Keyword inside angle brackets.
Example: <p> or </p>
Two Types:
1. Container Tag → Needs closing tag (<p>...</p>)
2. Empty Tag → No closing tag (<br>, <hr>, <img>)
4. HTML Attributes
Attributes give additional information about HTML elements.
They are always written in start tag and in name="value" format.
Example:
<img src="[Link]" alt="Company Logo" width="200" height="200">
<a href="[Link] target="_blank">Visit PNINFOSYS</a>
Common Attributes:
Attribute Description
src Source of image
alt Alternate text
href Hyperlink reference
Attribute Description
target Where to open link
width, height Size of image
style Inline CSS
id, class For styling or JS
5. Headings in HTML
HTML provides 6 levels of headings:
<h1> (largest) → <h6> (smallest)
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Small Heading</h3>
6. Paragraphs and Line Breaks
<p>This is a paragraph.</p>
<br> <!-- Inserts a line break -->
<hr> <!-- Horizontal line -->
7. Text Formatting Tags
Tag Description Example
<b> Bold text <b>Bold</b>
<i> Italic text <i>Italic</i>
<u> Underline <u>Underline</u>
<sup> Superscript X<sup>2</sup>
<sub> Subscript H<sub>2</sub>O
<mark> Highlight text <mark>Important</mark>
8. HTML Lists
Unordered List (Bullets):
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Ordered List (Numbered):
<ol type="A">
<li>Front-End</li>
<li>Back-End</li>
</ol>
Definition List:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
9. HTML Links (Anchor Tag)
<a href="[Link] target="_blank">Visit PNINFOSYS</a>
Attributes:
href → link address
target="_blank" → open in new tab
10. HTML Images
<img src="[Link]" alt="PNINFOSYS Logo" width="200" height="150">
Attributes:
src → image path
alt → alternate text
width / height → size
11. HTML Tables
Used to display data in rows and columns.
<table border="1">
<tr>
<th>Name</th>
<th>Course</th>
</tr>
<tr>
<td>Ravi</td>
<td>Web Design</td>
</tr>
</table>
Tags:
<table> → Table container
<tr> → Table row
<th> → Table header
<td> → Table data
12. HTML Forms
Used for user input.
<form action="[Link]" method="post">
Name: <input type="text" name="username"><br>
Email: <input type="email" name="email"><br>
<input type="submit" value="Send">
</form>
Input Types:
text, password, email, radio, checkbox, file, submit
13. HTML5 Semantic Elements
Tag Purpose
<header> Top section of page
<footer> Bottom section
<nav> Navigation links
<section> Group of related content
<article> Independent content
Tag Purpose
<aside> Sidebar info
<main> Main content area
<figure> / <figcaption> Images with captions
14. Multimedia Tags
Tag Use
<audio> Play sound
<video> Play video
<source> Specify media file
Example:
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
</video>
CSS (Cascading Style Sheets)
1. Introduction
CSS is used to design and style web pages created with HTML.
It controls color, font, layout, spacing, and animations.
CSS stands for Cascading Style Sheets.
CSS files have extension .css.
It separates content (HTML) from design (CSS).
2. Ways to Add CSS
Type Description Example
Inline Inside HTML <p
Type Description Example
tag style="color:red;">Hello</p>
Inside
Internal <style> in <style>p{color:blue;}</style>
<head>
In separate <link rel="stylesheet"
External
CSS file href="[Link]">
3. CSS Syntax
selector {
property: value;
}
Example:
p {
color: blue;
font-size: 18px;
}
4. CSS Selectors
Selector Example Description
Element p {} Selects all <p>
#main Selects element with
ID
{} id="main"
Selects elements with
Class .box {}
class="box"
h1, p
Group Select multiple
{}
Universal * {} Select all
5. CSS Properties
Type Description Example
Property Description Example
color Text color color: red;
background-
background- Background
color:
color color yellow;
font-family:
font-family Font style
Arial;
font-size:
font-size Font size
20px;
Text text-align:
text-align
alignment center;
Space
margin margin: 10px;
outside
padding:
padding Space inside
10px;
border: 1px
border Adds border
solid black;
6. CSS Box Model
Every HTML element is a rectangular box
containing:
1. Content
2. Padding
3. Border
4. Margin
div {
width: 200px;
padding: 10px;
border: 2px solid blue;
margin: 20px;
}
Type Description Example
7. CSS Positioning
Value Description
static Default position
relative Relative to itself
absolute Relative to parent
fixed Fixed on screen
sticky Sticks while scrolling
8. CSS Display
Value Description
block Takes full width
inline Only needed width
inline-block Inline + block mix
none Hides element
CSS Flexbox (Layout)
Flexbox helps to align and distribute space
among items.
.container {
display: flex;
justify-content: center;
align-items: center;
}
10. Responsive Web Design
Used to make websites mobile-friendly using media queries.
@media (max-width: 600px) {
body { background-color: lightblue; }
11. Difference Between HTML and CSS
HTML CSS
Defines structure Defines style
Uses tags Uses selectors
Focus on content Focus on presentation
No design control Full design control
Example: <p> Example: p{color:red;}
12. Importance of HTML & CSS
Together, they form the foundation of web development.
HTML builds the structure, CSS adds the design.
Used in every website, mobile UI, and web apps.
Easy to learn, beginner-friendly, and essential for front-end careers.
HTML Advanced Concepts
1. HTML5 New Features
HTML5 introduced new tags and APIs that made web pages more powerful and multimedia-
rich.
New Semantic Elements:
Tag Description
<header> Top section of a webpage
<footer> Bottom section (copyright etc.)
<nav> Navigation menu
Tag Description
<section> Defines a section of content
<article> Independent, self-contained content
<aside> Sidebar or advertisement area
<main> Main content area
<figure> Image with caption
<figcaption> Caption for the image
<header>
<h1>Welcome to PNINFOSYS</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Courses</a>
<a href="#">Contact</a>
</nav>
<section>
<article>
<h2>About HTML5</h2>
<p>HTML5 is the latest version with new semantic tags.</p>
</article>
</section>
<footer>
<p>© 2025 PNINFOSYS</p>
</footer>
2. Multimedia in HTML5
HTML5 allows embedding audio and video directly in the webpage without plugins.
Example (Video):
<video controls width="400">
<source src="intro.mp4" type="video/mp4">
Your browser does not support video tag.
</video>
<audio controls>
<source src="music.mp3" type="audio/mp3">
Your browser does not support audio tag.
</audio>
3. HTML Forms – Advanced Inputs
Input Type Description
text Single line text
email Email validation
number Numeric input
date Date picker
color Color chooser
range Slider
file File upload
password Hidden characters
radio Select one option
checkbox Select multiple options
submit Submit form
<form>
Name: <input type="text"><br>
Email: <input type="email"><br>
DOB: <input type="date"><br>
Favorite Color: <input type="color"><br>
<input type="submit" value="Send">
</form>
4. HTML Iframes
Iframe is used to embed another webpage inside a page.
<iframe src="[Link] width="600"
height="400"></iframe>
5. HTML Meta Tags
Meta tags are placed in the <head> section to provide info about the webpage.
<meta charset="UTF-8">
<meta name="description" content="Web Designing Course
by PNINFOSYS">
<meta name="keywords" content="HTML, CSS, PNINFOSYS,
Gwalior">
<meta name="author" content="Vikas Jain">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
CSS Advanced Concepts:
1. CSS Units
Unit Meaning Example
px Pixels (fixed) width: 200px;
% Percentage (relative) width: 50%;
em Relative to parent font-size font-size: 2em;
rem Relative to root font-size font-size: 1.5rem;
vh / vw Viewport height/width height: 100vh;
2. CSS Colors
Named colors: red, blue, green
RGB: rgb(255, 0, 0)
HEX: #ff0000
RGBA: rgba(255, 0, 0, 0.5) (with transparency)
3. CSS Gradient
Used to create smooth color transitions.
Linear Gradient:
background: linear-gradient(to right, red, yellow);
background: radial-gradient(circle, red, yellow, green);
4. CSS Borders & Shadows
div {
border: 2px solid blue;
border-radius: 10px;
box-shadow: 5px 5px 10px gray;
}
5. CSS Pseudo-Classes
Pseudo-classes define special states of elements.
Selector Description
:hover When mouse is over element
:active When element is clicked
Selector Description
:focus When input is focused
:first-child First element of a parent
:last-child Last element
button:hover {
background-color: green;
color: white;
}
6. CSS Pseudo-Elements
Used to style specific parts of an element.
Selector Description
::before Content before element
::after Content after element
::first-letter First letter
::first-line First line
p::first-letter {
font-size: 30px;
color: red;
}
7. CSS Float and Clear
Float is used to position elements side by side.
img {
float: left;
margin-right: 10px;
}
div { clear: both; }
8. CSS Flexbox
Flexbox is a modern layout system for aligning and distributing space.
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
Property Description
display: flex Enables flex container
justify-content Horizontal alignment
align-items Vertical alignment
flex-direction Row / column layout
flex-wrap Wrap items to next line
9. CSS Grid
CSS Grid is used for 2D layouts (rows + columns).
.grid-container {
display: grid;
grid-template-columns: 200px 200px 200px;
gap: 10px;
}
10. CSS Transitions & Animations
Transitions create smooth effects when property values change.
Example (Transition):
div {
width: 100px;
height: 100px;
background: blue;
transition: background 1s;
}
div:hover {
background: red;
}
@keyframes moveBox {
from { left: 0; }
to { left: 200px; }
}
.box {
position: relative;
animation: moveBox 2s infinite alternate;
}
11. CSS Overflow
Controls content when it exceeds its container.
Value Description
visible Default
hidden Hides overflow
scroll Always shows scrollbar
auto Scrolls when needed
12. CSS Z-Index
Used to control overlapping elements (higher value = front).
img { position: absolute; z-index: 2; }
p { position: absolute; z-index: 1; }
CSS Opacity & Filters
img {
opacity: 0.7;
filter: grayscale(100%);
}
14. CSS Variables
Used to store reusable values
:root {
--main-color: #3498db;
}
h1 {
color: var(--main-color);
}
15. CSS Best Practices
Keep external CSS in a separate file
Use classes instead of inline styles
Use semantic HTML for SEO
Test website on multiple devices
Always use responsive units (%, em, rem, vh, vw)
6. HTML + CSS Real World Relation
Task HTML CSS
Create structure <div>, <header>, <footer> —
Add design — background-color, font-size
Make responsive <meta viewport> @media query
Add navigation <nav>, <a> hover, active
Layout control <div> flex, grid
17. Viva / Interview Questions
1. What is the difference between HTML and HTML5?
2. What are semantic tags?
3. What are the types of CSS?
4. Explain box model in CSS.
5. Difference between id and class.
6. What is z-index?
7. How is responsive design implemented?
8. What is difference between Flexbox and Grid?
9. What are pseudo-classes in CSS?
10. How to link CSS file in HTML?
HTML & CSS Interview Questions with Answers
HTML Interview Questions & Answers
1. What is HTML?
Answer:
HTML stands for HyperText Markup Language. It is used to create the structure of a webpage
using various tags and elements.
2. What are HTML tags?
Answer:
HTML tags are keywords enclosed in angle brackets ( < >) used to define elements.
Example: <p>This is a paragraph</p>
3. What is the difference between HTML and HTML5?
Answer:
HTML HTML5
Older version Latest version
No multimedia support Supports <audio>, <video>
Uses <div> for structure Uses semantic tags like <header>, <footer>
Limited storage Has localStorage & sessionStorage
4. What are semantic tags?
Answer:
Semantic tags clearly describe their meaning — like <header>, <footer>, <article>, <nav>.
They improve SEO and code readability.
5. What is the difference between block and inline elements?
Block Elements Inline Elements
Start on a new line Do not start a new line
Take full width Take width as per content
Example: <div>, <p>, <section> Example: <span>, <a>, <b>
6. What is the purpose of the <head> tag?
Answer:
The <head> tag contains metadata like title, styles, scripts, and links.
7. What is the difference between <id> and <class>?
Attribute Used For Uniqueness
id Unique element Only once per page
class Group of elements Can be used multiple times
8. What are the types of lists in HTML?
1. Ordered List <ol>
2. Unordered List <ul>
3. Description List <dl>
9. What is the use of <iframe> tag?
Answer:
It is used to embed another webpage within the current page.
Example:
<iframe src="[Link]
10. What are HTML entities?
Answer:
HTML entities are used to display reserved characters.
Example:
< = <
> = >
© = ©
11. What are meta tags?
Answer:
Meta tags provide information about the webpage to browsers and search engines.
Example:
<meta name="description" content="Learn Web Designing at PNINFOSYS">
12. What are form elements in HTML?
Answer:
<input>, <textarea>, <select>, <option>, <button>, <label>, <fieldset>
13. What is the difference between <div> and <span>?
<div> <span>
Block-level element Inline element
Used for grouping large sections Used for small inline sections
14. What is the purpose of <doctype html>?
Answer:
It defines the document type and version of HTML.
In HTML5: <!DOCTYPE html>
15. What is the use of the <link> tag?
Answer:
It links external resources like CSS files.
Example:
<link rel="stylesheet" href="[Link]">
16. How to make a hyperlink in HTML?
<a href="[Link] PNINFOSYS</a>
17. How to open a link in a new tab?
<a href="[Link] target="_blank">Open in new tab</a>
18. What are attributes in HTML?
Answer:
Attributes provide extra information about elements.
Example:
<img src="[Link]" alt="image">
19. What is localStorage and sessionStorage?
Answer:
Both are used to store data on the browser.
localStorage: Permanent storage
sessionStorage: Cleared when tab is closed
20. What is difference between <script> and <noscript>?
<script> defines JavaScript code
<noscript> defines alternate content if JS is disabled
CSS Interview Questions & Answers
21. What is CSS?
Answer:
CSS (Cascading Style Sheets) is used to design and style HTML elements like color, layout, and
fonts.
22. What are the types of CSS?
1. Inline CSS — Inside HTML tag
2. Internal CSS — Inside <style> tag
3. External CSS — In a separate .css file
23. What is the syntax of CSS?
selector {
property: value;
}
Example:
h1 { color: red; }
24. What is the difference between relative and absolute positioning?
Relative Absolute
Moves relative to its original position Moves relative to nearest positioned ancestor
Keeps space in layout Removed from normal flow
25. What is the CSS box model?
Answer:
Every element is a box consisting of:
Content → Padding → Border → Margin
26. What is z-index in CSS?
Answer:
It controls the stacking order of elements (higher value = in front).
27. What is the difference between display: none and visibility: hidden?
Property Effect
display: none Element is removed from layout
visibility: hidden Element is invisible but space remains
28. What is Flexbox in CSS?
Answer:
A modern layout system to arrange elements horizontally or vertically.
Example:
.container {
display: flex;
justify-content: space-between;
}
29. What is CSS Grid?
Answer:
A 2D layout system for creating rows and columns easily.
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
}
30. What is the difference between padding and margin?
Property Description
Padding Space inside the border
Margin Space outside the border
31. What are pseudo-classes in CSS?
Answer:
They define a special state of an element.
Example:
a:hover { color: red; }
32. What are pseudo-elements in CSS?
Answer:
They style specific parts of an element.
Example:
p::first-letter { font-size: 25px; }
33. What is the use of opacity in CSS?
Answer:
It sets transparency of an element.
Example: opacity: 0.5;
34. What is the difference between position: fixed and sticky?
Fixed Sticky
Stays in same place even on scroll Sticks after a scroll threshold
35. What is overflow in CSS?
Answer:
It controls what happens when content overflows a box.
Values: visible, hidden, scroll, auto
36. What are media queries in CSS?
Answer:
Used to make websites responsive.
Example:
@media (max-width: 600px) {
body { background: lightblue; }
}
37. What is the use of float property?
Answer:
It is used to position elements side by side.
38. What is transition in CSS?
Answer:
It creates smooth animation between state changes.
Example:
div {
transition: background 1s;
}
div:hover {
background: red;
}
39. What is animation in CSS?
Answer:
Used for more complex effects with keyframes.
Example:
@keyframes move {
from { left: 0; }
to { left: 200px; }
}
40. What is cursor property in CSS?
Answer:
It changes the mouse cursor style.
Example: cursor: pointer;
41. What is calc() in CSS?
Answer:
It performs calculations for dynamic values.
Example: width: calc(100% - 50px);
42. What is clip-path in CSS?
Answer:
It is used to create shapes by clipping elements.
Example:
clip-path: circle(50%);
43. What is transform property?
Answer:
Used to rotate, scale, move elements.
Example:
transform: rotate(45deg);
44. What are CSS variables?
Answer:
Custom properties that store values for reuse.
Example:
:root {
--main-color: blue;
}
h1 {
color: var(--main-color);
}
45. What is the use of important! in CSS?
Answer:
Forces the property to override other declarations.
Example: color: red !important;
46. What is outline in CSS?
Answer:
Similar to border but doesn’t affect layout.
Example: outline: 2px solid red;
47. What is the use of background-attachment: fixed?
Answer:
It makes the background image stay fixed while scrolling.
48. How can you center a div horizontally?
Answer:
div {
margin: 0 auto;
width: 50%;
}
49. What is difference between inline, block, and inline-block?
Display Type Description
inline No new line, can’t set height/width
block Starts on new line
inline-block Same line but allows height/width
50. What are CSS selectors?
Answer:
Selectors are patterns used to select HTML elements.
Examples:
p → element selector
.class → class selector
#id → id selector