5.
Using CSS in HTML
Q.1. Select the correct option.
i. What is the full form of CSS? [R]
a. Colour Style Sheet b. Creative Style Sheets
c. Cascading Style Sheet d. Cascading Style Script
ii. What is ‘green’ called in the given CSS statement? [U]
h1{color:green; text-align:center; }
a. property b. value
c. declaration d. selector
iii. What is the meaning of the following CSS code? [Ap]
h1 {color: "pink";}
a. All headings will be displayed in pink b. All headings will be
colour. displayed in default colour.
c. A heading defined by h1 will be d. All text in a paragraph will
displayed in pink colour. be displayed in pink colour.
iv. Which of the following correctly links to an external style sheet? [U]
a. <style type="text/css" b. <p style type="text/css"
href="style1.css"/> href="style1.css"/>
c. <link rel="stylesheet" d. Both a. and b.
type="text/css"href="style1.css"/>
v. What is the correct CSS statement to make the background colour of all [U]
paragraph elements blue?
Pg no. 1
5.Using CSS in HTML
a. b. p {background-color :
p {background-color : blue;}
#blue;}
c. all {background-color : blue;} d. all p {background-color :
#blue;}
vi. Which HTML5 semantic tag is used to display content that is related, but
secondary to the main content, like a sidebar?
vii. Which CSS rule would you use to make a paragraph’s text bold and change its
size to 24 pixels?
Q.2. Answer the following question.
i. Observe the following CSS codes and answer the given questions. [Ap]
CSS
Code 1 CSS Code 2
a. Which type of selector is used in the given CSS codes?
Ans: CSS Code 1- ID selector
CSS Code 2- Class selector
b. Which CSS code is used to apply a style to only a single and unique
element in an HTML file?
Ans: CSS Code 1
c. Which code uses class names to find HTML elements for applying
formatting?
Ans: CSS Code 2
Pg no. 2
5.Using CSS in HTML
ii. What is the primary purpose of CSS in web development? How does it [U]
facilitate the styling of HTML pages?
Ans: CSS stands for cascading style sheet. It is used to style HTML
pages. It is the language used to describe the presentation and
formatting of web pages, such as colours, layout, background,
borders, fonts and so on.
iii. What is the purpose of a CSS selector?
Ans. A CSS selector is a method used to select and style specific
HTML elements. It tells the browser which HTML elements should
be selected to apply the CSS rule.
iv. What is the advantage of using an external style sheet over internal style
sheet.
Ans. An external style sheet is ideal for applying the same styles
across multiple web pages.
It saves time because you can define styles once in a separate CSS
file and link it to many HTML files. This makes it easier to update
the style of a whole website by modifying just one CSS file, instead
of changing styles on each page.
Pg no. 3
5.Using CSS in HTML
v. Reena has created a website containing more than ten web pages. She [Ap]
needs to use CSS for styling the web pages. Which type of style sheet
will be most appropriate for her and why?
Ans: An external style sheet allows Reena to define styles in a single file
and maintain consistency across all her web pages. This is
particularly beneficial for maintaining a uniform look and feel
throughout the entire website.
vi. Write the HTML code using internal stylesheet to get the following [An]
output.
Ans: <html>
<head>
<style>
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<p class=uppercase>My name is Rohan. </p>
<p class=lowercase> My name is Rohan. </p>
<p class=capitalize> My name is Rohan. </p>
Pg no. 4
5.Using CSS in HTML
</body></html>
vii. Write a CSS rule to style a table with the following properties:
1. Set the outer border of the table to be 3 pixels.
2. Ensure the borders of the table cells are separated.
3. Add 15 pixels of padding inside each table cell.
Ans. table {
border-width: 3px;
border-collapse: separated;
}
th, td {
padding: 15px;
}
Pg no. 5
5.Using CSS in HTML
viii. Write the CSS code used to display the image ‘flower.jpg’ in the
background of a web page as shown in the given image.
Ans: body
{
background-image: url(“flower.jpg” );
background-repeat: no-repeat; background-
position: right bottom;
}
Pg no. 6
