further will be added from ict book
Q.What is the full form of CSS and HTML?
Q. How do you link CSS to an HTML page? What are the advantages/disadvantages of each method?
Answer: There are three main ways to link CSS to an HTML page:
External Stylesheet (Most Common & Recommended):
o HTML: <link rel="stylesheet" href="style.css"> (put in the <head>
section)
o Advantages:
Separation of concerns (HTML for structure, CSS for style).
Easier to maintain and update styles across multiple pages.
Faster page loading after the first visit (CSS file is cached).
o Disadvantages: Requires an extra HTTP request to fetch the CSS file.
Internal Stylesheet:
o HTML:
HTML
<head>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
</style>
</head>
o Advantages:
Useful for single-page applications or when styles are specific to one page.
No extra HTTP request.
o Disadvantages:
Mixes HTML and CSS, making the HTML file larger and less organized.
Less efficient for multiple pages as styles aren't reusable.
Inline Styles:
o HTML: <p style="color: red; font-size: 16px;">This is a red
paragraph.</p>
o Advantages:
Quick and easy for small, specific style changes.
Highest specificity (overrides external/internal styles for that specific
element).
o Disadvantages:
Strongly mixes HTML and CSS, leading to messy and unmaintainable
code.
Not reusable.
Breaks the principle of separation of concerns.
Q. Explain the CSS Box Model and its components.
Answer: Every HTML element is treated as a rectangular box by the browser, and the CSS Box
Model describes how these boxes are rendered. It consists of four main components (from
innermost to outermost):
Content: The actual content of the element (text, images, etc.). Its dimensions are
defined by width and height.
Padding: The space between the content and the border. It adds space inside the element.
Controlled by padding properties (e.g., padding-top, padding-right, padding-
bottom, padding-left, or shorthand padding).
Border: A line that surrounds the padding and content. Controlled by border properties
(e.g., border-width, border-style, border-color, or shorthand border).
Margin: The space outside the border, creating space between elements. Controlled by
margin properties (e.g., margin-top, margin-right, margin-bottom, margin-left, or
shorthand margin).
Q. What is the full form of <div>? how does it work? Explain with example.
The full form of <div> in HTML is "division" or "section".
📘 Explanation:
The <div> tag stands for "division" or "section".
It is a container element used to group together HTML elements so they can be styled
with CSS or manipulated with JavaScript.
It does not add any styling by itself; it is purely a block-level container.
✅ Example:
Html
<div>
<h2>This is a heading inside a div</h2>
<p>This is a paragraph inside a div</p>
</div>
You can use CSS like:
Css
div {
background-color: lightgray;
padding: 20px;
}
This would style the entire section enclosed in the <div> tag.
Q1: How to change the background color of a webpage to blue?
body {
background-color: blue;
}
Q2: How to make all paragraph text red?
p {
color: red;
}
Q3: How to set the font size of all headings (h1) to 24 pixels?
h1 {
font-size: 24px;
}
Q4: How to add 10 pixels padding inside a div?
div {
padding: 10px;
}
Q5: How to center a block element horizontally?
div {
width: 200px;
margin: 0 auto;
}
Q6: How to add a solid black border around images?
img {
border: 1px solid black;
}
Q7: How to change the color of links when hovered?
a:hover {
color: green;
}
Q8: How to make the text bold?
p {
font-weight: bold;
}
Q9: How to hide an element?
.hidden {
display: none;
}
Q10: How to check CSS is applied correctly in browser?
Use browser developer tools (Right click → Inspect).
Look for the Styles panel.
Html+css
Q. What will be the output the following code?
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
</style>
</head>
<body>
<p>This text will appear in red.</p>
</body>
</html>
Output:
The paragraph text will be displayed in red.
Q. Center Text and Change Font Size
What will be the output the following code?
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
font-size: 36px;
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
</body>
</html>
Output:
The heading will be centered and shown in 36px font size.
Add Background Color and Padding.
Q. What will be the output the following code?
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightblue;
padding: 20px;
</style>
</head>
<body>
<div>This box has a light blue background and padding.</div>
</body>
</html>
Output:
A box with light blue background and spacing (padding) around the text.
Q.Hover Effect on Button
What will be the output the following code?
<!DOCTYPE html>
<html>
<head>
<style>
button:hover {
background-color: green;
color: white;
}
</style>
</head>
<body>
<button>Hover Over Me</button>
</body>
</html>
Output:
When you move the mouse over the button, it turns green with white text.
Q.
xternal CSS Link (Best Practice)
HTML (index.html):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>This is styled using an external CSS file</h2>
</body>
</html>
//CSS (style.css):
h2 {
color: navy;
font-family: Arial;
}
Output:
The <h2> text appears in navy color using the Arial font.
extra questions from book will be added.
Short:
Which property is used to change the background color of an element?
a) color
b) background-color
c) bgcolor
d) background-style
Answer: b) background-color
How do you make the text bold in CSS?
a) font-weight: bold;
b) text-style: bold;
c) font-style: bold;
d) text-weight: bold;
Answer: a) font-weight: bold;
Which CSS property controls the text size?
a) font-style
b) text-size
c) font-size
d) text-style
Answer: c) font-size
How can you add a 10-pixel margin around an element?
a) margin: 10px;
b) padding: 10px;
c) border: 10px;
d) space: 10px;
Answer: a) margin: 10px;
What is the correct CSS syntax to select all <p> elements?
a) p {}
b) .p {}
c) #p {}
d) *p {}
Answer: a) p {}
Which property is used to change the font color of an element?
a) text-color
b) font-color
c) color
d) fg-color
Answer: c) color
How do you center a block element horizontally using CSS?
a) margin: auto;
b) text-align: center;
c) align: center;
d) float: center;
Answer: a) margin: auto;
How do you apply styles only when the mouse hovers over an element?
a) :hover
b) :mouseover
c) :mousehover
d) :onhover
Answer: a) :hover
Which property is used to control the space between the content and the border of an
element?
a) margin
b) padding
c) border-spacing
d) spacing
Answer: b) padding
Which of the following CSS properties is used to hide an element?
a) visibility: hidden;
b) display: none;
c) opacity: 0;
d) all of the above
Answer: d) all of the above
