CSS MCQ

1) CSS stands for -

✅ Cascade style sheets
✅ Color and style sheets
✅ Cascading style sheets
✅ None of the above

Explanation: CSS, short for Cascading Style Sheet, is employed for styling HTML elements. It is a prevalent language in web development, alongside HTML and JavaScript, aiding designers in applying visual styles to HTML elements.

2) Which of the following is the correct syntax for referring the external style sheet?

✅ <style src = example.css>
✅ <style src = "https://placehold.co/400x300/3498db/ffffff?text=Sample+Image" >
✅ <stylesheet> example.css </stylesheet>
✅ <link rel="stylesheet" type="text/css" href="example.css">

Explanation: An external style sheet is typically employed when alterations are needed across various pages. It employs the <link> tag on each page, and the <link> tag must be inserted within the head section.

3) The property in CSS used to change the background color of an element is -

✅ bgcolor
✅ color
✅ background-color
✅ All of the above

Explanation: The background-color attribute is employed to define the background hue of a specific element. The backdrop of an element encompasses the entire dimensions, encompassing the padding and border while excluding the margin.

4) The property in CSS used to change the text color of an element is -

✅ bgcolor
✅ color
✅ background-color
✅ All of the above

Explanation: The color attribute within CSS is employed to define the color of elements in HTML. Usually, it is utilized to designate the text color of an element. Within CSS, color values are employed to specify the color. Additionally, this attribute can be applied to set the color of borders and other ornamental features.

5) The CSS property used to control the element's font-size is -

✅ text-style
✅ text-size
✅ font-size
✅ None of the above

Explanation: The font-size attribute within CSS is employed to define the dimensions and scale of the font. It impacts the text dimensions within an element. By default, it is set to medium and can be assigned to any element on the webpage.

6) The HTML attribute used to define the inline styles is -

✅ style
✅ styles
✅ class
✅ None of the above

If you intend to utilize inline CSS, you must apply the style attribute to the appropriate tag. Inline CSS serves as a means to embed style rules directly within an HTML element. While this approach offers a way to incorporate styles, it does come with certain limitations compared to external style sheets. Therefore, it is recommended to exercise caution when employing inline CSS.

7) The HTML attribute used to define the internal stylesheet is -

✅ <style>
✅ style
✅ <link>
✅ <script>

The internal style sheet is employed to apply a distinctive style to an individual document. It is specified within the <style> section of the HTML page.

8) Which of the following CSS property is used to set the background image of an element?

✅ background-attachment
✅ background-image
✅ background-color
✅ None of the above

The background-image attribute is employed to designate an image as the background of a particular element. Typically, the image will span the full width and height of the element unless specified otherwise.

9) Which of the following is the correct syntax to make the background-color of all paragraph elements to yellow?

✅ p {background-color : yellow;}
✅ p {background-color : #yellow;}
✅ all {background-color : yellow;}
✅ all p {background-color : #yellow;}

The background-color attribute in CSS is employed to alter the background color of an element. To set all paragraph elements' background color to yellow, the appropriate syntax is: p {background-color : yellow;}.

10) Which of the following is the correct syntax to display the hyperlinks without any underline?

✅ a {text-decoration : underline;}
✅ a {decoration : no-underline;}
✅ a {text-decoration : none;}
✅ None of the above

The text-decoration property within CSS is employed to embellish the text's content by incorporating lines beneath, above, or through it. This property determines how decorative lines are presented on the text. To remove the underline from hyperlinks, you should use the following syntax: a {text-decoration: none;}.

11) Which of the following property is used as the shorthand property for the padding properties?

✅ padding-left
✅ padding-right
✅ padding
✅ All of the above

Explanation: The CSS padding attribute is employed to specify the gap between the content of an element and its border. It allows for adjusting the padding on the top, bottom, left, and right sides individually through distinct properties. Utilizing the shorthand padding attribute enables simultaneous alteration of all padding properties in one go.

12) The CSS property used to make the text bold is -

✅ font-weight : bold
✅ weight: bold
✅ font: bold
✅ style: bold

Explanation: The font-weight attribute controls the thickness and boldness of the font. It determines the heaviness of the text. The weight options vary based on the font-family employed by the web browser.

13) Can negative values be used in the padding property?

It's uncertain.

It's possible.

When utilizing the padding property, it's important to note that negative values are prohibited.

14) Which of the following property is used as the shorthand property of margin properties?

✅ margin-left
✅ margin-right
✅ margin
✅ None of the above

Explanation: The CSS Margin attribute is employed to specify the area surrounding elements. Each margin (top, bottom, left, and right) can be adjusted individually through distinct properties. Employing the shorthand margin property enables simultaneous modification of all margin attributes collectively.

15) The CSS property used to specify the transparency of an element is -

✅ opacity
✅ filter
✅ visibility
✅ overlay

The CSS opacity attribute is utilized to define the level of transparency for a specific element. Put simply, it determines the level of clearness for the image.

16) Which of the following is used to specify the subscript of text using CSS?

✅ vertical-align: sub
✅ vertical-align: super
✅ vertical-align: subscript
✅ None of the above

In CSS, the vertical-align attribute is employed to adjust text to be superscript or subscript. The "sub" value of the vertical-align property is utilized for creating subscript text in CSS. Subscripted text is displayed in a reduced font size and positioned half a character below the regular baseline. This feature is commonly applied when writing chemical equations or formulas like H2O, H2SO4, and so on.

17) Which of the following CSS property is used to specify the space between every letter inside an element?

✅ alpha-spacing
✅ character-spacing
✅ letter-spacing
✅ alphabet-spacing

The letter-spacing attribute in CSS functions to manage the gap between each letter within a specific element or text block. It defines the spacing arrangement among the characters of the text, allowing adjustments to expand or reduce the distance between them.

18) The CSS property used to specify whether the text is written in the horizontal or vertical direction?

✅ writing-mode
✅ text-indent
✅ word-break
✅ None of the above

The writing-mode CSS attribute determines if the text is oriented vertically or horizontally. It determines the layout direction of text lines, either vertically or horizontally, influencing the flow of content on the webpage.

19) Which of the following syntax is correct in CSS to make each word of a sentence start with a capital letter?

✅ text-style : capital;
✅ transform : capitalize;
✅ text-transform : capital;
✅ text-transform : capitalize;

The CSS property text-transform gives us the ability to modify the text case, enabling us to manage text capitalization. When set to "capitalize," this property alters the initial letter of every word to uppercase, excluding the first letter following a number.

20) How to select the elements with the class name "example"?

✅ example
✅ #example
✅ .example
✅ Class example

The class selector chooses HTML elements that have a particular class attribute assigned to them. It is indicated by a period (.) followed by the class name. Class names must not begin with a number.

21) Which of the following is the correct syntax to select all paragraph elements in a div element?

✅ div p
✅ div#p
✅ div ~ p

The CSS descendant selector is employed to target elements that are descendants of a specific element, denoted by a single space. The term "descendant" signifies being nested at any level within the DOM tree.

22) Which of the following is the correct syntax to select the p siblings of a div element?

✅ div + p
✅ div p
✅ div ~ p

Explanation: The general sibling selector employs the tilde (~) symbol to separate elements. It allows for selecting a set of elements that have the same parent element. When written as div ~ p, it will target paragraph elements that are siblings of the div element.

23) The CSS property used to draw a line around the elements outside the border?

✅ border
✅ outline
✅ padding
✅ line

The "outline" attribute in CSS allows you to add a supplementary border around an element for visual emphasis, functioning akin to the CSS border attribute. Implementing it is straightforward, just like adding a border.

24) Which of the following CSS property is used to add shadows to the text?

✅ text-shadow
✅ text-stroke
✅ text-overflow
✅ text-decoration

Explanation: The CSS property text-shadow is responsible for adding shadow effects to text. It allows for multiple shadows to be applied to the text by accepting a comma-separated list of shadow values. This property enables the implementation of one or multiple shadow effects on the content of an element.

25) Which of the following is not a value of the font-variant property in CSS?

✅ normal
✅ small-caps
✅ large-caps
✅ inherit

Explanation: The CSS font-variant property determines the font variant to apply to an element, with options including normal and small-caps.

26) Which of the following CSS property is used to specify whether the table cells share the common or separate border?

✅ border-collapse
✅ border-radius
✅ border-spacing
✅ None of the above

The border-collapse CSS attribute is employed to define the table cells' borders and determine if they should have individual or merged borders. It offers two primary options: separate and collapse.

27) The CSS property used to make the rounded borders, or rounded corners around an element is -

✅ border-collapse
✅ border-radius
✅ border-spacing
✅ None of the above

The border-radius CSS attribute determines the curvature of corners around an element, tags, or div, creating a rounded border effect. It specifies the radius for each corner of the element.

28) The CSS property used to set the distance between the borders of the adjacent cells in the table is -

✅ border-collapse
✅ border-radius
✅ border-spacing
✅ None of the above

This CSS attribute is employed to define the space between the borders of neighboring cells within a table. It is effective when the border-collapse attribute is configured as separate.

29) Which of the following selector in CSS is used to select the elements that do not match the selectors?

✅ :! selector
✅ :not selector
✅ :empty selector
✅ None of the above

The :not selector in CSS identifies elements that do not match the specified element or selector.

Which one of the options provided is not classified as a type of combinator?

Explanation: CSS Combinators clarifies the relationship between two selectors. There are four types of combinators in CSS that are listed as follows:

✅ General sibling selector (~)
✅ Adjacent sibling selector (+)
✅ Child selector (>)
✅ Descendant selector (space)

31) Which of the following CSS property defines how an image or video fits into container with established height and width?

✅ object-fit
✅ object-position
✅ position
✅ None of the above

Explanation: The object-fit CSS property determines the resizing behavior of images or videos within their container. It dictates the fitting of an element within a predefined width and height of a container and is commonly used for images and videos.

32) Which type of CSS is used in the below code?

Example


<p style = "border:2px solid red;">

✅ Inline CSS
✅ Internal CSS
✅ External CSS
✅ None of the above

If you opt to employ inline CSS, you ought to apply the style attribute to the appropriate tag. Utilizing inline CSS is also a technique for embedding style sheets within an HTML document.

33) Which of the following CSS property specifies the origin of the background-image?

✅ background-origin
✅ background-attachment
✅ background-size
✅ None of the above

Explanation: The background-origin CSS attribute allows us to modify the background image on a webpage by defining the area from where the background position originates. This property will be inactive if the background-attachment value is fixed. It functions akin to the background-clip attribute, with the distinction that it adjusts the background size rather than clipping it.

34) The CSS property used to set the maximum width of the element's content box is -

✅ max-width property
✅ height property
✅ max-height property
✅ position property

The max-width attribute in CSS is employed to establish the highest width of the content box within an element. Essentially, this property ensures that the width of the content box does not exceed the specified max-width value but can be smaller. It acts as a constraint on the element's width, defining the maximum limit it can reach.

35) Which if the following CSS function allows us to perform calculations?

✅ calc function
✅ calculator function
✅ calculate function
✅ cal function

Explanation: The calc function in CSS is a built-in feature that enables us to execute calculations. It is handy for computing various values such as length, percentage, time, numbers, integer frequency, or angles. This function supports basic arithmetic operations like addition (+), multiplication (*), subtraction (-), and division (/).

36) The CSS property used to set the maximum height of the element's content box is -

✅ max-width property
✅ height property
✅ max-height property
✅ position property

The max-height attribute in CSS defines the maximum height of the content box within an element. This property restricts the height of the content box to a specified maximum value, ensuring that it does not exceed this limit. By setting max-height, you establish an upper limit on how tall the element can be.

37) The CSS property used to set the minimum width of the element's content box is -

✅ max-width property
✅ min-width property
✅ width property
✅ All of the above

The min-width attribute establishes the smallest width for the content box of an element. This indicates that the content box can exceed the specified min-width dimension but cannot shrink below it, essentially defining the minimum width limit for the element.

38) Which of the following CSS property is used to represent the overflowed text which is not visible to the user?

✅ text-shadow
✅ text-stroke
✅ text-overflow
✅ text-decoration

The text-overflow attribute defines how text that overflows its containing element should be displayed to users. It informs users about content that exceeds the visible area. This feature allows us to choose whether the text should be truncated, indicate with ellipsis, or present a personalized message.

39) The CSS property which is used to define the set the difference between two lines of your content is -

✅ min-height property
✅ max-height property
✅ line-height property
✅ None of the above

The CSS line-height attribute is employed to specify the minimum height of line boxes inside the element. It determines the spacing between consecutive lines of text in your content and specifies the vertical space around inline elements.

40) The CSS property which is used to define the set the difference between two lines of your content is -

✅ min-height property
✅ max-height property
✅ line-height property
✅ None of the above

The CSS line-height attribute is utilized to specify the minimum height of line boxes inside the element. It establishes the spacing between successive lines of text. This property determines the vertical space surrounding inline elements.

41) Which of the following CSS property is used to add stroke to the text?

✅ text-stroke property
✅ text-transform property
✅ text-decoration property
✅ None of the above

The text-stroke property within CSS is employed to append a stroke around the text while also granting options for embellishments. This property specifies the color and thickness of strokes for individual text characters.

42) Which of the following CSS property is used to set the blend mode for each background layer of an element?

✅ background-blend-mode property
✅ background-collapse property
✅ background-transform property
✅ background-origin property

The background-blend-mode attribute in CSS is employed to establish the blending mode for every background layer (image/color) within an element. It specifies the manner in which the background image of an element merges with the background color of the same element. It is possible to merge the background images collectively or merge them with the background color.

43) The CSS property used to specify the transparency of an element is -

✅ Hover
✅ opacity
✅ clearfix
✅ overlay

The CSS opacity attribute is employed to define the level of transparency of a particular element. Essentially, it determines the level of visibility of the image.

44) Which of the following CSS property is used to set the horizontal alignment of a table-cell box or the block element?

✅ text-align property
✅ text-transform property
✅ text-shadow property
✅ text-decoration

The text-align attribute within CSS is employed to specify the horizontal alignment of either a table-cell container or a block-level element. It functions akin to the vertical-align property, albeit in a horizontal orientation.

45) The CSS property which is used to set the text wider or narrower compare to the default width of the font is -

✅ font-stretch property
✅ font-weight property
✅ text-transform property
✅ font-variant property

The font-stretch attribute in CSS enables users to choose between a normal, expanded, or condensed style within a font family. This attribute adjusts the width of the text to be wider or narrower compared to the default width of the font. It is specifically applicable to font families that include width-variant styles.

46) Which of the following CSS property is used to specify the type of quotation mark?

✅ quotes property
✅ z-index property
✅ hyphens property
✅ None of the above

The quotes attribute in CSS determines the style of quotation marks to be applied to quoted text within a document. It dictates the specific quotation marks to be displayed when the content is quoted using the open-quote and close-quote values within the content property.

47) The CSS property used to specify the order of flex item in the grid container is -

✅ order property
✅ float property
✅ overflow property
✅ None of the above

This CSS attribute determines the placement of the flex item within the grid container or flex. It is primarily employed to arrange the flex items in a specific order. It should be noted that this property will be ineffective if the element lacks flexibility.

48) The CSS property used to set the indentation of the first line in a block of text is -

✅ text-indent property
✅ text-stroke property
✅ text-decoration property
✅ text-overflow property

This CSS attribute defines the offset of the initial line within a text block. It determines the horizontal spacing preceding the text lines.

49) Which of the following CSS property creates a clipping region and specifies the visible area of the element?

✅ visibility property
✅ background-clip property
✅ clip-path property
✅ None of the above

The clip-path CSS attribute is employed to establish a clipping region, defining the visible area of an element. Only the contents within this region will be visible, with everything outside of it concealed. Browsers will clip anything outside of the defined region, such as borders, text-shadows, and other elements.

50) The correct syntax to give a line over text is -

✅ text-decoration: line-through
✅ text-decoration: none
✅ text-decoration: overline
✅ text-decoration: underline

Explanation: The text-decoration property in CSS is responsible for embellishing the text content by specifying various decorations such as overlines, underlines, or line-through styles.

Input Required