Imagine you’ve built a toy house with blocks. Now, you want to paint it, add curtains, and make it pretty. That’s what CSS does for websites! This article provide you a complete question answer from Basics About CSS Class XI IT, CBSE
Websites have content like text and pictures. But how should it all look? What color? How big? That’s where CSS comes in. CSS is like the paint and decorations for a website. It makes websites colorful, stylish, and easy to read. Just like how you’d decorate your room to make it cozy and pretty, we use CSS to decorate websites.
So, in short, CSS makes our websites look good!
Why do we use CSS? What are its basic advantages? (all the question are from CSS Class XI IT)
Answer: CSS, or Cascading Style Sheets, is used to style and layout web pages. Its advantages include:
- Separation of content and design.
- Site-wide consistency.
- Reusability and reduced duplication.
- Enhanced user experience through responsive design.
- Efficient page loading.
What are the ways in which you can use CSS in your HTML document?
Answer: There are three ways:
- Inline styles
- Internal (or embedded) style sheets
- External style sheets
What are inline style sheets?
Answer: Inline style sheets refer to CSS styles that are applied directly on individual elements in the HTML using the style attribute.
How are internal style sheets used?
Answer: Internal style sheets are defined within the <style> tag in the <head> section of an HTML document.
Does the use of CSS save time?
Answer: Yes, CSS saves time. By using external or internal style sheets, you can apply styles to multiple elements or entire pages at once, eliminating the need to style each element individually.
How are external style sheets used?
Answer: External style sheets are saved in a separate .css file. This file is linked to the HTML document using the <link> tag in the <head> section.
State the difference between inline, internal, & external style sheets?
Answer:
- Inline: Applied to individual elements using the
styleattribute. - Internal: Defined within the
<style>tag in the<head>of the HTML. - External: Stored in a separate .css file and linked to the HTML.
Why are universal and type selectors used?
Answer: Universal selectors apply styles to all elements on a page, while type selectors apply styles to all elements of a particular type.
What do we do when we have to apply a style rule to a particular element only when it lies inside a particular element?
Answer: Use descendant selectors. For example, div p { color: red; } styles only the paragraphs (p) that are inside a div.
Explain the id selector. (all the question are from CSS Class XI IT)
Answer: The id selector targets an element with a specific id attribute. It’s represented with a #. For example, #header { background-color: blue; } targets the element with id="header".
Can we define multiple style rules?
Answer: Yes, you can define as many style rules as needed in CSS to style your document.
What are the rules to override any style sheet? (all the question are from CSS Class XI IT)
Answer: Style precedence in CSS follows this order: inline styles, internal style sheets, external style sheets. Additionally, !important can be used to give priority to a specific rule.
How are the color codes represented in a style sheet?
Answer: Colors can be represented using:
- Named colors, e.g.,
red. - Hexadecimal, e.g.,
#FF0000. - RGB values, e.g.,
rgb(255, 0, 0). - RGBA values for transparency, e.g.,
rgba(255, 0, 0, 0.5).
How do we select a background attachment? (all the question are from CSS Class XI IT)
Answer: Use the background-attachment property. Values can be scroll, fixed, or local.
Can we set the text direction? If yes then how?
Answer: Yes, using the direction property. Values can be ltr (left-to-right) or rtl (right-to-left).
Is RGB() property supported by all browsers?
Answer: Yes, the rgb() property is widely supported by all modern web browsers. It’s a fundamental part of CSS that allows designers and developers to define colors using red, green, and blue components. The broad acceptance and implementation of this property in browsers makes it a reliable choice for web design and development.
Unit 2 HTML Class XI IT Exercise Question Answer | CBSE
CSS Interview Questions and Answers
Below are 50 multiple-choice questions (MCQ) about the basics of CSS suitable for Interview, along with their respective answers:
- What does CSS stand for?
- A. Computer Style Sheets
- B. Cascading Style Sheets
- C. Colorful Style Sheets
- D. Computerized System Styles
- Answer: B. Cascading Style Sheets
- Which tag is used in HTML to link to an external CSS file?
- A.
<link> - B.
<stylesheet> - C.
<style> - D.
<css> - Answer: A.
<link>
- A.
- Which HTML attribute is used to define styles inline?
- A.
stylesheet - B.
styles - C.
css - D.
style - Answer: D.
style
- A.
- How can you add a comment in a CSS file?
- A. //This is a comment//
- B. –This is a comment–
- C. /*This is a comment*/
- D. <!–This is a comment–>
- Answer: C. /*This is a comment*/
- Which property is used to set the font size?
- A.
text-size - B.
font-style - C.
text-style - D.
font-size - Answer: D.
font-size
- A.
- Which CSS property changes the background color of an element?
- A.
background-color - B.
color - C.
bgcolor - D.
background - Answer: A.
background-color
- A.
- What does the CSS ‘margin’ property define?
- A. The spacing between the content of an element and its border
- B. The spacing around elements
- C. The thickness of the element’s border
- D. The opacity of the element
- Answer: B. The spacing around elements
- Which of these is NOT a valid color value in CSS?
- A.
red - B.
#FF0000 - C.
rgb(255,0,0) - D.
color(255,0,0) - Answer: D.
color(255,0,0)
- A.
- What is the default value of the
positionproperty?- A.
fixed - B.
relative - C.
absolute - D.
static - Answer: D.
static
- A.
- Which property is used to control the wrapping of lines?
- A.
white-space - B.
wrap-text - C.
line-wrap - D.
text-wrap - Answer: A.
white-space
- A.
- Which of these is NOT a CSS pseudo-class?
- A.
:first-child - B.
:second-item - C.
:hover - D.
:not - Answer: B.
:second-item
- A.
- What does the CSS
displayproperty with the valuenonedo?- A. Makes the element transparent
- B. Reduces the size of the element to zero
- C. Hides the element
- D. Makes the element a block-level element
- Answer: C. Hides the element
- Which of these is a correct way to apply multiple classes to an HTML element?
- A.
<div class="class1, class2"> - B.
<div class="class1 class2"> - C.
<div class=".class1 .class2"> - D.
<div class="class1+class2"> - Answer: B.
<div class="class1 class2">
- A.
- How is a class selector represented in CSS?
- A.
$classname - B.
classname{} - C.
.classname - D.
#classname - Answer: C.
.classname
- A.
- How is an ID selector represented in CSS?
- A.
$idname - B.
idname{} - C.
.idname - D.
#idname - Answer: D.
#idname
- A.
- Which property is used to add rounded corners to an element?
- A.
border-radius - B.
border-corner - C.
round-corner - D.
curve-edge - Answer: A.
border-radius
- A.
- What unit is NOT used to define font sizes in CSS?
- A.
px - B.
em - C.
dm - D.
rem - Answer: C.
dm
- A.
- Which CSS property is used to set the horizontal alignment of text?
- A.
text-align - B.
text-horizontal - C.
text-style - D.
align-text - Answer: A.
text-align
- A.
- What is the default value of the
z-indexproperty?- A.
0 - B.
auto - C.
1 - D.
-1 - Answer: B.
auto
- A.
- Which property can be used to set the space between the characters of text?
- A.
letter-spacing - B.
text-spacing - C.
character-gap - D.
font-spacing - Answer: A.
letter-spacing
- A.
- The CSS
flexboxlayout is most appropriate for:- A. Positioning items in a one-dimensional layout
- B. Creating a grid of items
- C. Styling text
- D. Creating animations
- Answer: A. Positioning items in a one-dimensional layout
- To apply styles to an element when the mouse is over it, which pseudo-class should be used?
- A.
:hover - B.
:mouseover - C.
:focus - D.
:click - Answer: A.
:hover
- A.
- Which of the following values of the
overflowproperty will not hide any overflowing content?- A.
visible - B.
scroll - C.
hidden - D.
auto - Answer: A.
visible
- A.
- The CSS
box-sizingproperty with the valueborder-boxdoes what?- A. Includes padding and border in the total width/height
- B. Excludes padding and border from the total width/height
- C. Adds extra space for the border
- D. None of the above
- Answer: A. Includes padding and border in the total width/height
- Which of the following is NOT a valid value for the
displayproperty?- A.
inline - B.
block - C.
circle - D.
flex - Answer: C.
circle
- A.
- Which property is used to set the stacking order of positioned elements?
- A.
order - B.
z-order - C.
z-level - D.
z-index - Answer: D.
z-index
- A.
- The
!importantrule in CSS is used to:- A. Comment out code
- B. Make an animation more important
- C. Give a style rule higher importance than other defined rules
- D. Make a text important
- Answer: C. Give a style rule higher importance than other defined rules
- What is the correct syntax to select all
<p>elements inside a<div>element in CSS?- A.
p + div - B.
div p - C.
div > p - D.
p.div - Answer: B.
div p
- A.
- Which of the following is NOT a CSS property used to manage space inside an element?
- A.
border - B.
padding - C.
margin - D.
volume - Answer: D.
volume
- A.
- Which of the following CSS properties will NOT affect the position of an element?
- A.
border - B.
float - C.
position - D.
left - Answer: A.
border
- A.
- The property used to specify the space between cells in a table is:
- A.
border-spacing - B.
cell-gap - C.
cell-spacing - D.
table-gap - Answer: A.
border-spacing
- A.
- Which of the following is NOT a valid border style in CSS?
- A.
dotted - B.
wavy - C.
dashed - D.
solid - Answer: B.
wavy
- A.
- Which CSS unit is relative to the root font size of the document?
- A.
em - B.
px - C.
rem - D.
pt - Answer: C.
rem
- A.
- Which property allows you to create a shadow effect around an element’s frame?
- A.
box-shadow - B.
border-shadow - C.
frame-shadow - D.
element-shadow - Answer: A.
box-shadow
- A.
- Which CSS method allows for multiple backgrounds on an element?
- A. Using the
multi-backgroundproperty - B. Applying multiple
background-imageproperties - C. Comma separating values in the
background-imageproperty - D. Using the
backgroundsproperty - Answer: C. Comma separating values in the
background-imageproperty
- A. Using the
- What does the
opacityproperty do in CSS?- A. Sets the thickness of an element’s border
- B. Defines the transparency level for an element
- C. Sets the color saturation of an element
- D. Specifies the boldness of a font
- Answer: B. Defines the transparency level for an element
- In a CSS rule, what is the part that gets styled called?
- A. Property
- B. Selector
- C. Method
- D. Argument
- Answer: B. Selector
- Which CSS property helps to animate an element smoothly from one style to another?
- A.
animation - B.
movement - C.
animate - D.
transition - Answer: D.
transition
- A.
- In CSS, which of these is a way to define colors using the Red-Green-Blue system?
- A.
RGB(255, 255, 255) - B.
COLOR(255, 255, 255) - C.
#FFFFFF - D.
COLOR: WHITE - Answer: A.
RGB(255, 255, 255)
- A.
- What is the purpose of the
:afterpseudo-element in CSS?- A. Select elements after the current element
- B. Insert content after the content of an element
- C. Style the text after a specific word
- D. Animate elements after a certain duration
- Answer: B. Insert content after the content of an element
- If you want an element to not be displayed, but still occupy space, which value of the
visibilityproperty would you use?- A.
visible - B.
hidden - C.
none - D.
collapse - Answer: B.
hidden
- A.
- Which of the following CSS properties can have a value of
bold?- A.
font-weight - B.
font-style - C.
text-size - D.
text-weight - Answer: A.
font-weight
- A.
- What does
vhstand for in CSS units?- A. Vertical Height
- B. Very High
- C. Viewport Height
- D. Virtual Horizontal
- Answer: C. Viewport Height
- Which CSS property adjusts the space between lines of text?
- A.
text-space - B.
line-spacing - C.
line-height - D.
text-line - Answer: C.
line-height
- A.
- Which of the following is NOT a valid CSS unit?
- A.
cm - B.
inch - C.
px - D.
em - Answer: B.
inch
- A.
- What is the CSS property to set an image as a background on a web page?
- A.
background-image - B.
background - C.
bgcolor - D.
image-background - Answer: A.
background-image
- A.
- Which property is used to specify whether an element’s box is sized to include padding and border or not?
- A.
box-sizing - B.
box-shape - C.
box-style - D.
box-mode - Answer: A.
box-sizing
- A.
- Which pseudo-class is used to select the first line of an element?
- A.
:first-line - B.
:beginning - C.
:line-start - D.
:start-line - Answer: A.
:first-line
- A.
- Which property can be used to specify the space between words in a text?
- A.
word-spacing - B.
text-gap - C.
text-space - D.
word-gap - Answer: A.
word-spacing
- A.
- What is the correct way to specify a fallback font in CSS?
- A.
font-family: "Times New Roman", Times, serif; - B.
font-family: Times New Roman or Times or serif; - C.
font-family: "Times New Roman" || Times || serif; - D.
font-family: "Times New Roman" > Times > serif; - Answer: A.
font-family: "Times New Roman", Times, serif;
- A.
