What Do You Know About HTML And CSS? Trivia Questions Quiz

Reviewed by Editorial Team
The ProProfs editorial team is comprised of experienced subject matter experts. They've collectively created over 10,000 quizzes and lessons, serving over 100 million users. Our team includes in-house content moderators and subject matter experts, as well as a global network of rigorously trained contributors. All adhere to our comprehensive editorial guidelines, ensuring the delivery of high-quality content.
Learn about Our Editorial Process
| By Catherine Halcomb
Catherine Halcomb
Community Contributor
Quizzes Created: 1442 | Total Attempts: 6,630,300
| Attempts: 281
SettingsSettings
Please wait...
  • 1/38 Questions

    What is the difference between HTML and CSS?

    • HTML deals with the content of the site and CSS handles the form
    • CSS is a markup language unlike HTML
    • CSS handles the function of the site and HTML the form
    • There is no difference
Please wait...
About This 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!

What Do You Know About HTML And CSS? Trivia Questions Quiz - Quiz

Quiz Preview

  • 2. 

    In CSS and HTML colors are displayed by combining these three shades of light?

    • Cyan, magenta, yellow

    • Violet, orange, green

    • Red, green, blue

    • Magenta, green, blue

    Correct Answer
    A. Red, green, blue
    Explanation
    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:

  • 3. 

    Which is the correct CSS syntax?

    •  { body:color=black; }

    •  body:color=black;

    •  body { color: black; }

    •  { body;color:black; }

    Correct Answer
    A.  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:

  • 4. 

    How do you refer to an element inside of an element?

    • The parent's family

    • The child

    • The antecedent

    • The second outer element

    Correct Answer
    A. The child
    Explanation
    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:

  • 5. 

    What is the correct CSS syntax for making all the < p > elements bold?

    •  p { text-size:bold; }

    •  p { font-weight:bold; }

    •  < p style="text-size:bold;"

    •  < p style="font-size:bold;" >

    Correct Answer
    A.  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:

  • 6. 

    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>

    • #warning { }

    • Warning { }

    • .warning { }

    • P { }

    Correct Answer
    A. .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:

  • 7. 

    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?

    • Font-size

    • Text-size

    • Font-height

    • Text-style

    Correct Answer
    A. Font-size
    Explanation
    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:

  • 8. 

    How do you select elements with the class of "muppets"?

    • *muppets

    • .muppets

    • #muppets

    • Muppets>

    Correct Answer
    A. .muppets
    Explanation
    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:

  • 9. 

    What is the purpose of a class?

    • To give multiple elements the same style

    • To give paragraphs the same style

    • To group together all the span tags

    • To have another element other than id

    Correct Answer
    A. To give multiple elements the same style
    Explanation
    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:

  • 10. 

    Which of the following selects all elements with the class "cats-siamese" ?

    • #cats-siamese

    • Cats-siamese

    • .cats-siamese

    • < cats-siamese >

    Correct Answer
    A. .cats-siamese
    Explanation
    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:

  • 11. 

    The text-transform property can be used to...

    • Make the text bigger

    • Make the text bold

    • Change the text to italic

    • Make the text uppercase

    Correct Answer
    A. Make the text uppercase
    Explanation
    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:

  • 12. 

    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?

    •  < style src=“drogon.css" href="drogon.css" >

    •  < stylesheet >drogon.css< /stylesheet >

    •  < link rel="stylesheet" type="text/css" href="drogon.css" >

    •  < link src="css" type="stylesheet" a href ="drogon.style" >

    Correct Answer
    A.  < 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:

  • 13. 

    Which position property will affix the element to the browser's window?

    • Fixed

    • Relative

    • Absolute

    • Sticky

    Correct Answer
    A. Fixed
    Explanation
    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:

  • 14. 

    How do you select an element with the id of "elmo"?

    • *elmo

    • .elmo

    • #elmo

    • Elmo>

    Correct Answer
    A. #elmo
    Explanation
    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:

  • 15. 

    In CSS, how would you select all the <p> tags on a page?

    • P { }

    • #p { }

    • .p { }

    • { }

    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:

  • 16. 

     How do you make each word in a text start with a capital letter?

    •  text-transform:uppercase

    •  You can't do that with CSS

    •  text-transform:capitalize

    • Text-change: initalize

    Correct Answer
    A.  text-transform:capitalize
    Explanation
    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:

  • 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} 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?

    •  border-width:10px 20px 5px 1px;

    •  border-width:10px 1px 5px 20px;

    •  border-width:10px 5px 20px 1px;

    •  border-width: 5px 20px 10px 1px;

    Correct Answer
    A.  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:

  • 18. 

    How do you display hyperlinks without an underline?

    •  a { decoration:no-underline; }

    •  a { text-decoration:no-underline; }

    •  a { text-decoration:none; }

    •  a { underline:none; }

    Correct Answer
    A.  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:

  • 19. 

    How do you group more than one selector?

    • Separate each selector with a comma

    • Separate each selector with a curly bracket

    • Separate each selector with a space

    • Separate each selector with an asterick

    Correct Answer
    A. Separate each selector with a comma
    Explanation
    Remember adding a default style to html, body { padding:0; margin:0; border:0; }?

    Rate this question:

  • 20. 

    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?

    • Text-color: red;

    • Font-color: red;

    • Color: red;

    • Text-decoration: color(‘red’);

    Correct Answer
    A. 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:

  • 21. 

    What does CSS stand for?

    • Colorful Style Sheets

    • Creative Style Sheets

    • Computer Style Sheets

    • Cascading Style Sheets

    Correct Answer
    A. Cascading Style Sheets
    Explanation
    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:

  • 22. 

    Which HTML tag is used to define an internal stylesheet?

    • < script >

    • < style >

    • < css >

    • < stylesheet >

    Correct Answer
    A. < 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:

  • 23. 

    How do you select all p elements inside a div element?

    • Div + p

    • Div p

    • Div.p

    • .div#p

    Correct Answer
    A. Div p
    Explanation
    div + p is an adjacent sibling selector .div is not a class by itself

    Rate this question:

  • 24. 

    Which of the following is true about IDs?

    • IDs are designed for single elements

    • IDs have more specificity than classes

    • An element with an id can be invoked

    • All of the above

    Correct Answer
    A. All of the above
    Explanation
    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:

  • 25. 

    An element's padding is specified as "1px 2px 3px 4px". Which value represents the left side of the element?

    • 1px

    • 2px

    • 3px

    • 4px

    Correct Answer
    A. 4px
    Explanation
    Measurements proceed clockwise from the upper left for padding, margins and borders.

    Rate this question:

  • 26. 

    What is the name of the property that is used to define the special state of an element?

    • Syntax

    • Selector

    • Pseudo-class

    • :selection

    Correct Answer
    A. Pseudo-class
    Explanation
    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:

  • 27. 

    I want to center my text I can use which property to do this?

    • Centering

    • Margin: 0 auto

    • Text-align

    • Float: middle

    Correct Answer
    A. Text-align
    Explanation
    The text-align property can be used to center the text.

    Rate this question:

  • 28. 

    Which of the following has the right order and names for the four kinds of links?

    • Link, Visit, Hover, Active.

    • Link, Mouseup, Active, Hover.

    • Link, Visited, Hover, Active

    • Visit, Link, Hover, Active

    Correct Answer
    A. Link, Visited, Hover, Active
    Explanation
    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:

  • 29. 

    Will repeat-y will make the background image repeat side to side?

    • True

    • False

    Correct Answer
    A. False
    Explanation
    x is horizontal axis, y is vertical axis

    Rate this question:

  • 30. 

    What is the default value of the position property?

    • Left

    • Relative

    • Static

    • Absolute

    Correct Answer
    A. Static
    Explanation
    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:

  • 31. 

    Which of the following would add a comment to the CSS?

    • */ I am a comment /*

    • < !-- I am a comment -- >

    • // I am a comment //

    • /* I am a comment */

    Correct Answer
    A. /* I am a comment */
    Explanation
    // can add a single line comment by itself but does not have a closing //

    Rate this question:

  • 32. 

    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  >

    • Ol span div p

    • Span

    • Div span

    • Div div p span

    Correct Answer
    A. Div div p span
    Explanation
    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:

  • 33. 

    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 >  

    • When the mouse hovers over the text or the < a> tag

    • As long as the page is open

    • The cursor won't change unless you write code for it

    • When the mouse hovers over the div tag

    Correct Answer
    A. When the mouse hovers over the text or the < a> tag
    Explanation
    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:

  • 34. 

    Which box-sizing value forces any padding and border-width values into the width and height of an element?

    • Element

    • Auto

    • Border-box

    • Padding-box

    Correct Answer
    A. Border-box
    Explanation
    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:

  • 35. 

    Which of the following selects all elements with both "gallery" and "sculpture" classes?

    • .gallery + .sculpture

    • .gallery.sculpture

    • .(.gallery, .sculpture)

    • None of the above

    Correct Answer
    A. .gallery.sculpture
    Explanation
    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:

  • 36. 

    Which one of these will select nephew? < div class="aunt" > < div class="cousin" >   < div class="nephew" > ...< /div > < /div > < /div >

    • .aunt .nephew

    • .aunt + .nephew

    • .aunt>.nephew

    • .aunt.nephew

    Correct Answer
    A. .aunt .nephew
    Explanation
    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 cousin

    Rate this question:

  • 37. 

    If I use box-size:border-box what will happen?

    • My boxes will have default border styling of 1px solid grey

    • My boxes will grow bigger when I add padding to them

    • My background images will be contained in the box

    • Padding will not control the size of my boxes

    Correct Answer
    A. Padding will not control the size of my boxes
    Explanation
    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:

  • 38. 

    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?

    • Inline styles specified by the user in the HTML

    • The stylesheet created by the author of the page

    • A default style from the server

    • The browser's default styles

    Correct Answer
    A. A default style from the server
    Explanation
    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:

Quiz Review Timeline (Updated): Mar 21, 2023 +

Our quizzes are rigorously reviewed, monitored and continuously updated by our expert board to maintain accuracy, relevance, and timeliness.

  • Current Version
  • Mar 21, 2023
    Quiz Edited by
    ProProfs Editorial Team
  • Oct 19, 2017
    Quiz Created by
    Catherine Halcomb

Recent Quizzes

HTML & CSS Quiz 2019 HTML & CSS Quiz 2019
HTML & CSS Script HTML & CSS Script
Web Page Design Test: Quiz! Web Page Design Test: Quiz!
web page chapter 2 web page chapter 2
Trivia Quiz: How much do you know about HTML and CSS? Trivia Quiz: How much do you know about HTML and CSS?
Intro to Web Design and Development Intro to Web Design and Development

Popular Topics

Back to Top Back to top
Advertisement
×

Wait!
Here's an interesting quiz for you.

We have other quizzes matching your interest.