What Do You Know About HTML And CSS? Trivia Questions Quiz
What do you know about HTML and CSS? Most people get confused when it comes to differentiating between the two and them major difference is that one webpage language while the other is format for the layout of the said webpages. This trivia questions quiz is exactly what you need in order to understand the two much deeper. How about you give it a try and see how well you do!
- 1.
P.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Roboto Light'; color: #000000; -webkit-text-stroke: #000000; background-color: #ffffff} span.s1 {font-kerning: none} Which of the following will turn the selected elements’ text red?
- A.
Text-color: red;
- B.
Font-color: red;
- C.
Color: red;
- D.
Text-decoration: color(‘red’);
Correct Answer
C. Color: red;Explanation
The correct answer is "color: red;". This CSS property sets the color of the text content of the selected elements to red. The other options mentioned, such as "text-color", "font-color", and "text-decoration: color('red')" are not valid CSS properties for changing the color of the text.Rate this question:
-
- 2.
An element's padding is specified as "1px 2px 3px 4px". Which value represents the left side of the element?
- A.
1px
- B.
2px
- C.
3px
- D.
4px
Correct Answer
D. 4pxExplanation
Measurements proceed clockwise from the upper left for padding, margins and borders.Rate this question:
-
- 3.
What is the difference between HTML and CSS?
- A.
HTML deals with the content of the site and CSS handles the form
- B.
CSS is a markup language unlike HTML
- C.
CSS handles the function of the site and HTML the form
- D.
There is no difference
Correct Answer
A. HTML deals with the content of the site and CSS handles the formExplanation
HTML and CSS are both essential components of web development, but they serve different purposes. HTML (Hypertext Markup Language) is responsible for structuring the content of a website, such as text, images, and links. It defines the elements and their arrangement on the page.
On the other hand, CSS (Cascading Style Sheets) is used to control the presentation and appearance of the HTML elements. It handles the formatting, layout, and design aspects of a website, including colors, fonts, spacing, and positioning.
Therefore, the correct answer states that HTML deals with the content of the site (structure) while CSS handles the form (presentation).Rate this question:
-
- 4.
Which of the following selects all elements with the class "cats-siamese" ?
- A.
#cats-siamese
- B.
Cats-siamese
- C.
.cats-siamese
- D.
< cats-siamese >
Correct Answer
C. .cats-siameseExplanation
The correct answer is ".cats-siamese" because the dot (.) is the selector for class in CSS. So, ".cats-siamese" selects all elements with the class "cats-siamese".Rate this question:
-
- 5.
Which of the following selects all elements with both "gallery" and "sculpture" classes?
- A.
.gallery + .sculpture
- B.
.gallery.sculpture
- C.
.(.gallery, .sculpture)
- D.
None of the above
Correct Answer
B. .gallery.sculptureExplanation
The correct answer is ".gallery.sculpture" because the dot (.) is used to select elements with a specific class, and the combination of ".gallery" and ".sculpture" means selecting elements that have both the "gallery" and "sculpture" classes.Rate this question:
-
- 6.
Which one of these will select nephew? < div class="aunt" > < div class="cousin" > < div class="nephew" > ...< /div > < /div > < /div >
- A.
.aunt .nephew
- B.
.aunt + .nephew
- C.
.aunt>.nephew
- D.
.aunt.nephew
Correct Answer
A. .aunt .nepHewExplanation
The correct answer: .aunt SPACE .nephew will select ANY descendent of aunt that is a class of nephew .aunt.nephew would match any element with both classes < div class="aunt nephew" >...< /div > .aunt>.nephew only effects the direct child, the direct child in the example shown is cousinRate this question:
-
- 7.
The text-transform property can be used to...
- A.
Make the text bigger
- B.
Make the text bold
- C.
Change the text to italic
- D.
Make the text uppercase
Correct Answer
D. Make the text uppercaseExplanation
The text-transform property in CSS can be used to change the appearance of the text by transforming it to uppercase. This means that all the letters in the text will be converted to uppercase letters, giving it a capital letter format. This property is useful when we want to display text in a consistent and standardized manner, regardless of how it is originally written.Rate this question:
-
- 8.
Which of the following would add a comment to the CSS?
- A.
*/ I am a comment /*
- B.
< !-- I am a comment -- >
- C.
// I am a comment //
- D.
/* I am a comment */
Correct Answer
D. /* I am a comment */Explanation
// can add a single line comment by itself but does not have a closing //Rate this question:
-
- 9.
P.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Roboto Light'; color: #000000; -webkit-text-stroke: #000000; background-color: #ffffff} span.s1 {font-kerning: none} What is the correct HTML for referring to an external style sheet?
- A.
< style src=“drogon.css" href="drogon.css" >
- B.
< stylesheet >drogon.css< /stylesheet >
- C.
< link rel="stylesheet" type="text/css" href="drogon.css" >
- D.
< link src="css" type="stylesheet" a href ="drogon.style" >
Correct Answer
C. < link rel="stylesheet" type="text/css" href="drogon.css" >Explanation
The correct HTML for referring to an external style sheet is . This code uses the tag with the attributes rel="stylesheet" to specify that it is a style sheet, type="text/css" to indicate the file type, and href="drogon.css" to specify the file name and location.Rate this question:
-
- 10.
Which of the following has the right order and names for the four kinds of links?
- A.
Link, Visit, Hover, Active.
- B.
Link, Mouseup, Active, Hover.
- C.
Link, Visited, Hover, Active
- D.
Visit, Link, Hover, Active
Correct Answer
C. Link, Visited, Hover, ActiveExplanation
The correct order and names for the four kinds of links are "Link, Visited, Hover, Active". This is because when a user interacts with a link, it first appears as a normal link (Link), then if the user has already visited the link, it changes appearance (Visited). When the user hovers over the link, it may have a different appearance (Hover), and when the user clicks on the link, it may have an active state (Active).Rate this question:
-
- 11.
P.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Roboto Light'; color: #000000; -webkit-text-stroke: #000000} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Roboto Light'; color: #000000; -webkit-text-stroke: #000000; min-height: 14.0px} span.s1 {font-kerning: none} The final appearance of a web page is a result of different styling rules. Which one of the following is NOT a source of style information that form the cascade?
- A.
Inline styles specified by the user in the HTML
- B.
The stylesheet created by the author of the page
- C.
A default style from the server
- D.
The browser's default styles
Correct Answer
C. A default style from the serverExplanation
The final appearance of a web page is determined by the combination of different styling rules. These styling rules can come from various sources such as inline styles specified by the user in the HTML, the stylesheet created by the author of the page, and the browser's default styles. However, a default style from the server is not a source of style information that forms the cascade.Rate this question:
-
- 12.
What does CSS stand for?
- A.
Colorful Style Sheets
- B.
Creative Style Sheets
- C.
Computer Style Sheets
- D.
Cascading Style Sheets
Correct Answer
D. Cascading Style SheetsExplanation
CSS stands for Cascading Style Sheets. It is a style sheet language used for describing the look and formatting of a document written in HTML or XML. CSS allows web designers to separate the content of a webpage from its presentation, making it easier to control the layout and appearance of multiple web pages at once. The "cascading" in CSS refers to the ability to define multiple styles for an element and have them cascade or apply in a specific order, allowing for flexibility and customization in web design.Rate this question:
-
- 13.
Will repeat-y will make the background image repeat side to side?
- A.
True
- B.
False
Correct Answer
B. FalseExplanation
x is horizontal axis, y is vertical axisRate this question:
-
- 14.
Which position property will affix the element to the browser's window?
- A.
Fixed
- B.
Relative
- C.
Absolute
- D.
Sticky
Correct Answer
A. FixedExplanation
The correct answer is "fixed". The "fixed" position property will affix the element to the browser's window, meaning that it will stay in the same position even when the user scrolls the page. This can be useful for creating elements that should always be visible, such as navigation bars or headers.Rate this question:
-
- 15.
If I use box-size:border-box what will happen?
- A.
My boxes will have default border styling of 1px solid grey
- B.
My boxes will grow bigger when I add padding to them
- C.
My background images will be contained in the box
- D.
Padding will not control the size of my boxes
Correct Answer
D. Padding will not control the size of my boxesExplanation
When the box-sizing property is set to border-box, the padding will not affect the size of the boxes. Normally, when padding is added to a box, it increases the total size of the box. However, with border-box, the padding is included in the specified width and height of the box. This means that the content area of the box will be reduced to accommodate the padding, keeping the overall size of the box unchanged.Rate this question:
-
- 16.
Which HTML tag is used to define an internal stylesheet?
- A.
< script >
- B.
< style >
- C.
< css >
- D.
< stylesheet >
Correct Answer
B. < style >Explanation
The tag is used to define an internal stylesheet in HTML. It is placed within the section of the HTML document and is used to specify the styling rules for the elements within the document. The tag is used to embed or reference external JavaScript code, while the and tags are not valid HTML tags.Rate this question:
-
- 17.
P.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Roboto Light'; color: #000000; -webkit-text-stroke: #000000; background-color: #ffffff} span.s1 {font-kerning: none} Which CSS property controls the text size?
- A.
Font-size
- B.
Text-size
- C.
Font-height
- D.
Text-style
Correct Answer
A. Font-sizeExplanation
The CSS property "font-size" controls the size of the text. It allows you to specify the desired size of the font in pixels, ems, rems, or other units. By adjusting the value of "font-size", you can make the text appear larger or smaller on the webpage.Rate this question:
-
- 18.
What is the default value of the position property?
- A.
Left
- B.
Relative
- C.
Static
- D.
Absolute
Correct Answer
C. StaticExplanation
The default value of the position property is "static". This means that an element will be positioned according to the normal flow of the document. It will not be affected by the top, bottom, left, right, or z-index properties.Rate this question:
-
- 19.
How do you group more than one selector?
- A.
Separate each selector with a comma
- B.
Separate each selector with a curly bracket
- C.
Separate each selector with a space
- D.
Separate each selector with an asterick
Correct Answer
A. Separate each selector with a commaExplanation
Remember adding a default style to html, body { padding:0; margin:0; border:0; }?Rate this question:
-
- 20.
How do you select an element with the id of "elmo"?
- A.
*elmo
- B.
.elmo
- C.
#elmo
- D.
Elmo>
Correct Answer
C. #elmoExplanation
To select an element with the id of "elmo", you would use the CSS selector "#elmo". The "#" symbol is used to target elements by their id attribute, and "elmo" is the specific id value that you are selecting.Rate this question:
-
- 21.
How do you select elements with the class of "muppets"?
- A.
*muppets
- B.
.muppets
- C.
#muppets
- D.
Muppets>
Correct Answer
B. .muppetsExplanation
To select elements with the class of "muppets", we use the CSS selector ".muppets". The dot (.) represents the class selector in CSS, and by prefixing it with the class name "muppets", we can target and select all elements that have this class assigned to them.Rate this question:
-
- 22.
How do you select all p elements inside a div element?
- A.
Div + p
- B.
Div p
- C.
Div.p
- D.
.div#p
Correct Answer
B. Div pExplanation
div + p is an adjacent sibling selector .div is not a class by itselfRate this question:
-
- 23.
Which box-sizing value forces any padding and border-width values into the width and height of an element?
- A.
Element
- B.
Auto
- C.
Border-box
- D.
Padding-box
Correct Answer
C. Border-boxExplanation
The correct answer is "border-box". This value for the box-sizing property forces any padding and border-width values to be included within the specified width and height of an element. In other words, the total width and height of the element will be calculated by adding the specified width and height values to the padding and border widths. This is useful when you want to ensure that the overall size of an element remains consistent, regardless of any padding or border that may be added.Rate this question:
-
- 24.
P.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Roboto Light'; color: #000000; -webkit-text-stroke: #000000; background-color: #ffffff} span.s1 {font-kerning: none} How do you display a border like this: The top border = 10 pixels The bottom border = 5 pixels The left border = 20 pixels The right border = 1pixel?
- A.
border-width:10px 20px 5px 1px;
- B.
border-width:10px 1px 5px 20px;
- C.
border-width:10px 5px 20px 1px;
- D.
border-width: 5px 20px 10px 1px;
Correct Answer
B. border-width:10px 1px 5px 20px;Explanation
The correct answer is "border-width:10px 1px 5px 20px;". This answer correctly follows the order of specifying the border widths for the top, right, bottom, and left sides respectively. In this case, the top border is 10 pixels, the right border is 1 pixel, the bottom border is 5 pixels, and the left border is 20 pixels.Rate this question:
-
- 25.
How do you display hyperlinks without an underline?
- A.
a { decoration:no-underline; }
- B.
a { text-decoration:no-underline; }
- C.
a { text-decoration:none; }
- D.
a { underline:none; }
Correct Answer
C. a { text-decoration:none; }Explanation
The correct answer is "a { text-decoration:none; }". This CSS code is used to remove the underline from hyperlinks. The "text-decoration" property is used to specify the decoration of text, and setting it to "none" removes any underline.Rate this question:
-
- 26.
What is the correct CSS syntax for making all the < p > elements bold?
- A.
p { text-size:bold; }
- B.
p { font-weight:bold; }
- C.
< p style="text-size:bold;"
- D.
< p style="font-size:bold;" >
Correct Answer
B. p { font-weight:bold; }Explanation
The correct CSS syntax for making all the elements bold is "p { font-weight:bold; }". This is because the "font-weight" property is used to specify the weight or thickness of the font, and the value "bold" makes the text appear in a bold font weight. The other options provided in the question are incorrect.Rate this question:
-
- 27.
Which is the correct CSS syntax?
- A.
{ body:color=black; }
- B.
body:color=black;
- C.
body { color: black; }
- D.
{ body;color:black; }
Correct Answer
C. body { color: black; }Explanation
The correct CSS syntax is "body { color: black; }". In CSS, selectors are used to target specific elements, and in this case, the selector is "body". The curly braces {} are used to enclose the declaration block, which contains the property "color" and its corresponding value "black". This syntax follows the standard CSS syntax for applying styles to the body element.Rate this question:
-
- 28.
What is the name of the property that is used to define the special state of an element?
- A.
Syntax
- B.
Selector
- C.
Pseudo-class
- D.
:selection
Correct Answer
C. Pseudo-classExplanation
A pseudo-class is a property that is used to define the special state of an element. It is used to select and style elements based on their state or position in the document. Pseudo-classes are added to selectors to specify a specific state or condition of an element, such as when it is being hovered over or when it is the first child of its parent.Rate this question:
-
- 29.
In CSS and HTML colors are displayed by combining these three shades of light?
- A.
Cyan, magenta, yellow
- B.
Violet, orange, green
- C.
Red, green, blue
- D.
Magenta, green, blue
Correct Answer
C. Red, green, blueExplanation
In CSS and HTML, colors are displayed by combining red, green, and blue shades of light. This combination of RGB values allows for the creation of a wide range of colors by varying the intensity of each shade. By manipulating the intensity of red, green, and blue, different colors can be achieved, giving web designers and developers the ability to create visually appealing and customized color schemes for their websites.Rate this question:
-
- 30.
In CSS, how would you select all the <p> tags on a page?
- A.
P { }
- B.
#p { }
- C.
.p { }
- D.
{ }
Correct Answer
A. P { }Explanation
The correct answer is "p { }". This is the correct CSS syntax for selecting all the tags on a page. The "p" represents the HTML element selector for paragraphs, and the curly braces {} indicate the block of CSS rules to be applied to the selected elements.Rate this question:
-
- 31.
In CSS, how would you select only the paragraphs with class name "warning"? <p class="warning">Don't do it.</p> <p>Do it.</p> <p class="warning">Nooo, don't do it.</p>
- A.
#warning { }
- B.
Warning { }
- C.
.warning { }
- D.
P { }
Correct Answer
C. .warning { }Explanation
The correct answer is ".warning { }". This is the correct CSS selector to select only the paragraphs with the class name "warning". The "." indicates that it is a class selector, and "warning" is the name of the class that we want to select.Rate this question:
-
- 32.
In the following code when will the cursor change to a pointer? p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 15.0px; font: 13.0px Arial; color: #333333; -webkit-text-stroke: #333333; background-color: #ffffff} span.s1 {font-kerning: none} < div style =“ width:100px;height:100px; " > < a href = “ http://www.google.com ” >Link< /a > < /div >
- A.
When the mouse hovers over the text or the < a> tag
- B.
As long as the page is open
- C.
The cursor won't change unless you write code for it
- D.
When the mouse hovers over the div tag
Correct Answer
A. When the mouse hovers over the text or the < a> tagExplanation
The default behavior from the browser (the user agent stylesheet) is for the cursor to change to a pointer when it is an anchor tag. As the anchor tag is wrapped around the word Link that will also be affected by the anchor tag.Rate this question:
-
- 33.
How do you make each word in a text start with a capital letter?
- A.
text-transform:uppercase
- B.
You can't do that with CSS
- C.
text-transform:capitalize
- D.
Text-change: initalize
Correct Answer
C. text-transform:capitalizeExplanation
The correct answer is "text-transform:capitalize". This CSS property is used to make the first letter of each word in a text start with a capital letter. The "text-transform" property allows for various transformations of text, and "capitalize" specifically targets the first letter of each word.Rate this question:
-
- 34.
What selector combination would you use to style 'oranges'? < div > < div > < p > I like < span > oranges< /span >< /p > < ol > < li > My favorite color is < span > blue< /span >< /li > < /ol > < p >I like < span >grapes< /span >< /p > < /div > < /div >
- A.
Ol span div p
- B.
Span
- C.
Div span
- D.
Div div p span
Correct Answer
D. Div div p spanExplanation
The correct selector combination to style 'oranges' would be div div p span. This combination selects the span element within the p element within the second div element within the first div element.Rate this question:
-
- 35.
What is the purpose of a class?
- A.
To give multiple elements the same style
- B.
To give paragraphs the same style
- C.
To group together all the span tags
- D.
To have another element other than id
Correct Answer
A. To give multiple elements the same styleExplanation
The purpose of a class is to give multiple elements the same style. Classes are used in HTML and CSS to apply a specific style to multiple elements without having to repeat the style for each individual element. By assigning the same class to multiple elements, you can easily apply consistent styling across those elements. This helps in maintaining a uniform design and makes it easier to update the style in one place, rather than modifying each element individually.Rate this question:
-
- 36.
How do you refer to an element inside of an element?
- A.
The parent's family
- B.
The child
- C.
The antecedent
- D.
The second outer element
Correct Answer
B. The childExplanation
When referring to an element inside of another element, it is commonly referred to as "the child". This term is used to describe the relationship between the two elements, where the inner element is considered to be a child of the outer element. This terminology is widely used in programming and web development to describe the hierarchical structure of elements within a document or code.Rate this question:
-
- 37.
Which of the following is true about IDs?
- A.
IDs are designed for single elements
- B.
IDs have more specificity than classes
- C.
An element with an id can be invoked
- D.
All of the above
Correct Answer
D. All of the aboveExplanation
All of the statements mentioned are true about IDs. IDs are designed for single elements, meaning that each element can have a unique ID. IDs have more specificity than classes, which means that if there is a conflict between the two, the styles defined by the ID will take precedence. An element with an ID can be invoked or accessed using JavaScript or CSS to apply specific styles or perform specific actions.Rate this question:
-
- 38.
I want to center my text I can use which property to do this?
- A.
Centering
- B.
Margin: 0 auto
- C.
Text-align
- D.
Float: middle
Correct Answer
C. Text-alignExplanation
The text-align property can be used to center the text.Rate this question:
-
Quiz Review Timeline +
Our quizzes are rigorously reviewed, monitored and continuously updated by our expert board to maintain accuracy, relevance, and timeliness.
-
Current Version
-
Mar 21, 2023Quiz Edited by
ProProfs Editorial Team -
Oct 19, 2017Quiz Created by
Catherine Halcomb
Back to top