Regular practice of SSLC IT Theory Questions and Class 10 IT Chapter 5 Make the Web Look Stylish Questions and Answers Notes prepares students for objective and descriptive examinations.
Class 10 IT Chapter 5 Question Answer
SSLC IT Chapter 5 Theory Questions
InText Questions and Answers
Question 1.
What are the differences between the two webpages shown below? List them.
Answer:
| Sample 1 | Sample 2 |
| Texts in same colour | Text in different colours |
| No background colour | Background color for the page |
| Single column layout | Two-column layout for products |
| Default font style and size | Custom font size and style is used |
| No spacing between sections | Proper spacing and alignment |
Question 2.
<h2>Featured Products</h2> <div> <h3>Hand-made soaps</h3> <img src=“ soaps.png”> <p>Beautiful hand-made soaps made by our students. Each piece is one-of-a-kind!<br>PriceRs.40</p> </div>
<h2style= “color:#0000FF;”>Featured Products</h2> <div style=“background-colOT:#9FE2BF;”> <h3 style=“text-align:center;color:#A569BD;”>Hand-made soaps</h3> <img src=“soaps.png”> <p style=“text-align:center;background- color:#FFD700;color:#333333;fonr-weight:bold;”>Beautifiil hand-made soaps made by our students. Each piece is one-of-a-kind!<br>Price Rs.40</p> </div>
Find the styles given to each HTML element/tag and complete the tables given below.
Answer:
| Tag/Element | Style Code |
| <h2……..>Featured
Products</h2> |
style= “color:#0000FF;” |
| <div> | style=“background-color:#9FE2BF;” |
| <h3……..>Hand-made
Soaps</h3> |
style=“text-align:center;color:#A569BD;” |
| <p……..>Beautiful hand-made soaps……..</p> | style=“text-align:center;background- color :#FFD700;color:#333333;font- weighfcbold;” |
| Style | Property | Value |
| Align the text to the centre | text-align: | center; |
| Adjust the thickness of the font | font-weight: | bold; |
| Set the background colour of an element | background-color: | #FFD700; |
| Set the colour of the text | color: | #0000FF ;,#A569BD |
Question 3.
List the characteristics of the internal cascading style compared to the inline cascading style in the table.
Answer:
| Inline Cascading Style | Internal Cascading Style |
| Each tag needs to be styled everytime. | Need to style a tag once. |
| Codes are getting complicated. | Code becomes more organized. |
| Codes are getting longer. | Code is shorter and easier to manage. |
| Hard to reuse styles. | Easy to reuse styles for multiple tags. |
| Not suitable for large projects. | Suitable for medium-sized web pages or projects. |
Class 10 IT Chapter 5 Let’s Assess
Question 1.
Which style feature is used to bring the text in a webpage to the centre of the page?
a) color: #a569bd;
b) font-family: Gentium Basic;
c) text-align: center;
d) font-weight: bold;
Answer:
c) text-align: center;
Question 2.
<h3 style=”text-align:center;color:#a569bd;”>Hand-made Notebooks</h3>
Which cascading style is used in this line?
a) Inline
b) Internal
c) External
d) Outline
Answer:
a) Inline
Question 3.
While using external cascading style sheet, which tag can be used to include the stylesheet in an HTML page?
a) rel
b) type
c) css
d) link
Answer:
d) link
Std 10 IT Chapter 5 Extended Activities
Question 1.
Create a webpage using CSS to promote the sale of native products and home-grown vegetables cultivated in your ward.
Answer:
<!DOCTYPE html>
<html>
<head>
<title>Local Products</title>
<style>
body {
font-family: Arial;
background-color: #f2fff0;
text-align: center;
}
h1 {
color: green;
}
.item {
border: 1 px solid #cce5cc;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
</style>
</head>
<body>
<h1>Native Products & Home-Grown Vegetables</h1>
<p>Support your local farmers. Buy fresh and healthy products from your own ward!</p>
<div class= "item”>
<h2>Organic Tomatoes</h2>
<p>Fresh and juicy - ₹30/kg</p>
</div>
<div class= "item”>
<h2>Pure Honey</h2>
<p>Natural forest honey - ₹ 250/500ml</p>
</div>
<div class=”item”>
<h2>Green Leaves</h2>
<p>Daily harvested - ₹10/bunch</p>
</div>
</body>
</html>
Question 2.
The text below is intended for designing a webpage to publish school news but is incomplete. Copy this code into a text editor, apply suitable styles, and enhance the appearance of the webpage.
<html> <head> <title>GHSS Alappuzha - School News</title> </head> <body> <div> <h1>Welcome to GHSS Alappuzha - School News</h1> <p>Stay updated with the latest events, achievements, and announcements !</p> </div> <div> <h2>Sports Day Highlights</h2> <h3>Exciting Moments from the Field</h3> <p>Our Annual Sports Day was a thrilling success, with students competing in various events such as races, football, and long jump. Here are the key highlights of the day.</p> </div> <div> <h2>School Kalolsavam Highlights</h2> <h3>Amazing Performances by Our Students</h3> <p>This year’s School Kalolsavam displayed incredible talent from our students.Various artforms were showcased, leaving everyone amazed at the creativity on display.</p> </div> </body> </html>
Answer:
SSLC IT Make the Web Look Stylish Questions and Answers
Question 1.
What does CSS stand for?
(a) Creative Style Sheets
(b) Computer Style Sheets
(c) Cascading Style Sheets
(d) Colorful Style Sheets
Answer:
(c) Cascading Style Sheets
Question 2.
Which tag is used to link an external CSS file in HTML?
(a) <style>
(b) <link>
(c) <css>
(d) <script>
Answer:
(b) <link>
Question 3.
Which attribute is used for Inline CSS?
(a) style
(b) css
(c) class
(d) id
Answer:
(a) style
Question 4.
What is the correct file extension for a CSS file?
(a) .html
(b) .css
(c) .script
(d) .txt
Answer:
(b) .css
Question 5.
Which part of the HTML document contains internal CSS?
(a) <body>
(b) <footer>
(c) <head>
(d) <title>
Answer:
(c) <head>
Question 6.
Which of the following is NOT a valid CSS color value?
(a) red
(b) #00ff00
(c) rgb(255,0,0)
(d) color:green
Answer:
(d) color:green
Question 7.
Which property is used to change the back ground color in CSS?
(a) bgcolor
(b) background-color
(c) color
(d) text-color
Answer:
(b) background-color
Question 8.
Which CSS property is used to change text size?
(a) text-size
(b) font-style
(c) font-size
(d) text-style
Answer:
(c) font-size
Question 9.
What does the “C” in CSS stand for?
(a) Cascading
(b) Computer
(c) Code
(d) Color
Answer:
(a) Cascading
Question 10.
Which CSS type allows styles to be reused across multiple pages?
(a) Inline CSS
(b) Internal CSS
(c) External CSS
(d) HTML
Answer:
(c) External CSS
Question 11.
Which selector targets all paragraph tags in CSS?
(a) #p
(b) .p
(c) p
(d) <p>
Answer:
(c) p
Question 12.
What is the correct syntax to make text bold using CSS?
(a) font-weight: bold;
(b) text-style: bold;
(c) font-style: bold;
(d) text-weight: bold;
Answer:
(a) font-weight: bold;
Question 13.
Which property is used to center text?
(a) align
(b) text-align
(c) center
(d) font-align
Answer:
(b) text-align
Question 14.
Which CSS property adds space inside an element’s border?
(a) margin
(b) padding
(c) border-spacing
(d) spacing
Answer:
(b) padding
Question 15.
Which property is used to set the font style to italic?
(a) font-type
(b) font-style
(c) style
(d) text-style
Answer:
(b) font-style
Question 16.
To apply a style to all elements of a page, which selector is used?
(a) *
(b) #all
(c) .all
(d) page
Answer:
(a) *
Question 17.
What symbol is used to denote an ID selector in CSS?
(a) . (dot)
(b) # (hash)
(c) * (asterisk)
(d) @ (at)
Answer:
(b) # (hash)
Question 18.
What symbol is used for class selectors?
(a) #
(b) @
(c) .
(d) &
Answer:
(c) .
Question 19.
How do you write a comment in CSS?
(a) // comment
(b) <!— comment —>
(c) /* comment */
(d) ## comment
Answer:
(c) /* comment */
Question 20.
Which of the following is a valid CSS rule?
(a) p = “color: blue”;
(b) p {color: blue;}
(c) p: color blue;
(d) p-> color = blue
Answer:
(b) p {color: blue;}
Question 21.
Which of the following applies style only to one specific element?
(a) Inline CSS
(b) External CSS
(c) Internal CSS
(d) Universal selector
Answer:
(a) Inline CSS
Question 22.
What is the default text alignment in HTML?
(a) center
(b) right
(c) justify
(d) left
Answer:
(d) left
Question 23.
How many types of CSS are there?
(a) 1
(b) 2
(c) 3
(d) 4
Answer:
(c) 3
Question 24.
Which property is used to change the text color?
(a) text-color
(b) font-color
(c) color
(d) style-color
Answer:
(c) color
Question 25.
Which of the following is a valid inline CSS syntax?
(a) <hl style=”color=red;”>Heading</hl>
(b) <hl css=”color:red;”>Heading</hl>
(c) <hl style=”color:red;”>Heading</hl>
(d) <hl style-color:red;>Heading</hl>
Answer:
(c) <hl style=”color:red;”>Heading</hl>
Question 26.
Match the following HTML tags with their purpose:
a) <link>
b) <style>
c) style=””
i) Inline styling
ii) External CSS
iii) Internal CSS
(a) a – ii, b – iii, c – i
(b) a – i, b – ii, c – iii
(c) a – iii, b – i, c – ii
(d) a – ii, b – i, c – iii
Answer:
(a) a – ii, b – iii, c – i
Question 27.
Which of the following is not a type of CSS?
(a) Inline
(b) Internal
(c) External
(d) Intermediate
Answer:
(d) Intermediate
Question 28.
What does <link rel=”stylesheet” href =”style.css”> do?
a) Adds an image
b) Embeds JavaScript
c) Links an external CSS
d) Applies inline CSS
Answer:
c) Links an external CSS
Question 29.
Which is the correct way to apply internal CSS?
(a) Inside <html> tag
(b) Inside <body> tag
(c) Inside <head> using <style>
(d) After <title> using <css>
Answer:
(c) Inside <head> using <style>
Question 30.
Match the CSS selector with its meaning:
(a) #id
(b) .class i
(c) p
i) Element with specific class
i) Specific tag
iii) Element with specific id
(a) a – iii, b – i, c – ii
(b) a – ii, b – iii, c – i
(c) a – i, b – ii, c – iii
(d) a – iii, b – ii, c – i
Answer:
(a) a – iii, b – i, c – ii
Question 31.
Choose the correct CSS syntax for changing font size to 20px:
(a) font-size:20;
(b) font-size=”20px”
(c) font:20px;
(d) font-size:20px
Answer:
(d) font-size:20px
Question 32.
Which of the following is a correct class selector in CSS?
(a) #title {}
(b)@title{}
(c) .title{}
(d) title: {}
Answer:
(c) .title{}
Question 33.
Identify the correct HTML structure using internal CSS.
(a) <stylexhead>p {colorrred;} </head></style>
(b) <head><style>p {color:red;}</style></head>
(c) <body><style>p {color:red;} </style></body>
(d) <style>head {p {colonred;} }</style>
Answer:
(b) <head><style>p {color:red;}</style></head>
Question 34.
Write the full form of HTML.
(a) Hyper Text Mark up Language
(b) Hyper Tool Mark up Language
(c) Hyper Tool Model Link
(d) High Text Mark Language
Answer:
(a) Hyper Text Mark up Language
Question 35.
What is the class name of the code belftw:
p.cyan
{
color :#faebd7;
}
(a) cyan
(b) P
(c) color
(d) None of these
Answer:
(a) cyan
(Select two correct answers from the options)
Question 36.
Which of the following are valid types of CSS?
(a) Internal CSS
(b) Static CSS
(c) External CSS
(d) Interactive CSS
(e) Inline CSS
Answer:
(a) Internal CSS & (c) External CSS
Question 37.
Which tags are used to apply internal CSS in an HTML document?
(a) <head>
(b) <body>
(c) <css>
(d) <style>
(e) <link>
Answer:
(a) <head> & (d) <style>
Question 38.
Which of the following are correct CSS properties to change text appearance?
(a) color
(b) font-size
(c) background-style
(d) width
(e) font-weight
Answer:
(a) color & (b) font-size
Question 39.
Which options refer to valid ways to apply CSS in HTML?
(a) Using a <script> tag
(b) Using a <style> tag
(c) Linking a .css file using <link>
(d) Writing CSS inside a comment
(e) Applying CSS using style attribute
Answer:
(b) Using a <style> tag & (c) Linking a .css file using <link>
Question 40.
Which of the following are correct inline CSS usages?
(a) <hl style=”font-size:20px;”>Title</hl>
(b) <hl style=”size=20;”>Title</hl>
(c) <p style=”color:blue;”>Text</p>
(d) <div css=”color:red;”>Box</div>
(e) <span style=”font-weight:bold;”>Bold</span>
Answer:
(a) <hl style=”font-size:20px;”>Title</hl> & (c) <p style=”color:blue;”>Text</p>
Question 41.
Which of the following selectors are used in CSS?
(a) #id
(b) .class
(c) >tag
(d) ::element
(e) =style
Answer:
(a) #id & (b) .class
Question 42.
Which CSS properties help in spacing around elements?
(a) padding
(b) margin
(c) color
(d) spacing
(e) float
Answer:
(a) padding & (b) margin
Question 43.
Which of the following can be values for the position property in CSS?
(a) static
(b) absolute
(c) visible
(d) fixed
(e) float
Answer:
(a) static & (b) absolute
Question 44.
Which are valid external CSS file names?
(a) styles.css
(b) main.style
(c) format.html
(d) theme.css
(e) layouttxt
Answer:
(a) styles.css & (d) theme.css
Question 45.
Which tags belong in the <head> section for styling?
(a) <style>
(b) <link>
(c) <script>
(d) <body>
(e) <div>
Answer:
(a) <style> & (b) <link>
Question 46.
Which of the foltowing HTML tags can be styled using CSS?
(a) <p>
(b) <img>
(c) <table>
(d) <style>
(e) <link>
Answer:
(a) <p> & (c) <table>
Question 47.
Which options are used to center-align text using CSS?
(a) text-align: center;
(b) align-text: center;
(c) display: center;
(d) margin: auto;
(e) justify-content: center;
Answer:
(a) text-align: center; & (d) margin: auto;
Question 48.
Which values are valid for display property in CSS?
(a) block
(b) inline
(c) float
(d) none
(e) center
Answer:
(a) block & (b) inline
Question 49.
Which of the following are advantages of using CSS?
(a) Reusability
(b) Increases loading time
(c) Easier maintenance
(d) Replaces HTML
(e) Makes webpage stylish
Answer:
(a) Reusability & (c) Easier maintenance
Question 50.
What CSS values make text bold and italic?
(a) font-weight: bold;
(b) font-style: italic;
(c) text-transform: bold;
(e) style: bold-italic;
Answer:
(a) font-weight: bold; & (b) font-style: italic;
Question 51.
Which of the following are correct class selectors in CSS?
(a) .box
(b) #box
(c) box.
(d) .heading
(e) class:heading
Answer:
(a) .box & (d) .heading
Question 52.
Which of the following can be placed inside the <style> tag?
(a) CSS selectors and rules
(b) JavaScript functions
(c) Inline CSS
(d) Media queries
(e) HTML tags
Answer:
(a) CSS selectors and rules & (d) Media queries
Question 53.
Which two attributes are mandatory in <link> for linking CSS?
(a) href
(b) type
(c) rel
(d) src
(e) name
Answer:
(a) href & (c) rel
Question 54.
Which colors could apply to the paragraph, based on CSS specificity?
(a) blue
(b) red
(c) green
(d) violet
(e) All of the above
Answer:
(b) red & (c) green
SSLC IT Chapter 5 Notes
Class 10 IT Chapter 5 Make the Web Look Stylish Notes
HTML
HTML is used to create webpages and stands for Hyper Text Markup Language. A website is made up of many connected webpages. HTML uses tags and attributes to make pages look better. To avoid repeating the same code on different pages, we use CSS (Cascading Style Sheets), which helps save time and memory by storing common styles in one place.
Styles
Style instructions consist of two parts: the property of the style and its corresponding value. For example, the instruction in the style attribute of the h2 tag is color:#0000FF; Here, color represents the property of the tag element, and #0000FF is the value assigned to that property. A colon (:) is used to separate the property from its value, and a semicolon (;) is added at the end to complete the instruction.
CSS (Cascading Style Sheets)
CSS was introduced by the World Wide Web Consortium (W3C) in 1996. The idea was proposed by Haakon Wiam Lee and Bert Bos.
CSS stands for Cascading Style Sheets. It is used to style webpages by separating design elements like colors, fonts, and layout from the actual content. Instead of repeating the same styles on every webpage, all the styles can be written once in a separate file with a .css extension. This file can be linked to a webpage using a single line of code.
1. Inline CSS: It is written directly within an HTML tag using the style attribute. It applies the style to only that specific element.
Example:
<p style=”color: blue; font-size: 18px;”>This is inline CSS.</p>
2. Internal CSS: It is the method of adding styles for HTML elements within the <style> tag in the <head> section of the same file. Style instructions are given inside the {} brackets within the <style> tag.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<p>This is internal CSS.</p>
</body>
</html>
3. External CSS: It is written in a separate .css file. This file is linked to the HTML document using the <link> tag. It can be used to style multiple webpages.
Example:
style.css
P{
color: red;
font-size: 22px;
}
HTML file:
<IDOCTYPE html>
<html>
<head>
<link rel= ’’stylesheet ”href= ’’style.css ’’>
</head>
<body>
<p>This is external CSS.</p>
</body>
</html>
Type Selectors
Type selectors are styles that are intended to be applied to tags on a webpage. They are of two types:
1. Element Selector: An element selector targets HTML elements by their tag name (like p, h1, div, etc.) and applies styles to all those elements in the document.
Syntax:
element_name {
property : value;
{
Example:
P {
color : green ;
}
2. Class Selector: A class selector is used to style specific elements by assigning them a class name. It starts with a dot (.) followed by the class name.
Syntax:
.classname{
property : value ;
}
Example:
.highlight {
background-color : yellow ;
}
Cascading Style Order
If an element has more than one cascading style, the order of precedence determines which style is applied. If the same element is given styles externally, internally, and inline, the browser’s priority for choosing the style is given below.
