CSS Syntax 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 Jayvanburen
J
Jayvanburen
Community Contributor
Quizzes Created: 1 | Total Attempts: 2,177
| Attempts: 2,177
SettingsSettings
Please wait...
  • 1/7 Questions

    What are the main differences between ID and Class

    • Classes are for use with spans and ID's are for use with DIVs
    • ID's are supposed to be only used once per page but Classes can be used multiple times per page, and one element can have more than one Class but should have only one ID
    • Classes should be used only once per page, but ID's can be used as many times as you like on one page
    • ID's are better than Classes
Please wait...
About This Quiz

This is a test of CSS syntax meant as a review for advanced web design students to make sure they've not forgotten anything. Assume that the css you're looking at is in a separate. Css file that is linked correctly to an html page.

CSS Syntax Quiz - Quiz

Quiz Preview

  • 2. 

    DIVs should only use ID's and spans should only use Classes

    • True

    • False

    Correct Answer
    A. False
    Explanation
    This statement is false. In HTML, both DIVs and spans can use either IDs or classes. IDs are typically used to uniquely identify a specific element on a page, while classes are used to group multiple elements together. Both IDs and classes can be used with both DIVs and spans, depending on the specific use case and styling requirements.

    Rate this question:

  • 3. 
    Here we have 4 different blocks of code. Each one contains the text "hello". Which of the following would display without an underline if this rule were in the stylesheet for this page? .leftnav #mylink a {text-decoration:none;} - ProProfs

    Here we have 4 different blocks of code. Each one contains the text "hello". Which of the following would display without an underline if this rule were in the stylesheet for this page? .leftnav #mylink a {text-decoration:none;}

    • A

    • B

    • C

    • D

    • Either a or c

    Correct Answer
    A. A
    Explanation
    The correct answer is "a" because it is the only block of code that matches the CSS rule in the stylesheet, which sets the text-decoration property to none. This rule removes the underline from the text, so only the block of code that matches the rule will display without an underline. The other blocks of code do not have the necessary selectors or properties to remove the underline.

    Rate this question:

  • 4. 

    What does the following mean to the computer? div p {color: #ff0000;}

    • Make text in all divs and all paragraphs in this document be bright red

    • Make the background in all divs that are of the class "p" be bright red

    • Make the text inside any divs inside of any paragraph be bright red

    • Make the text inside any paragraph that is inside any div be bright red

    Correct Answer
    A. Make the text inside any paragraph that is inside any div be bright red
    Explanation
    The given CSS code "div p {color: #ff0000;}" means that the text inside any paragraph that is inside any div should be colored bright red. This selector targets all paragraphs that are nested within a div element and applies the specified color to their text.

    Rate this question:

  • 5. 

    What does the following mean to the computer? div.leftnav a, div.bottomnav a {text-decoration:none;}

    • Make the text inside any anchor tags that are inside either a div with the class "leftnav" or the class "bottomnav" have no text decoration

    • Make an anchor tag that is inside a div with the class "bottomnav" which is inside a div with the class "leftnav" have no text decoration

    • Make the text inside any anchor tags that are inside either a div with the ID "leftnav" or the ID "bottomnav" have no text decoration

    • All of the above

    Correct Answer
    A. Make the text inside any anchor tags that are inside either a div with the class "leftnav" or the class "bottomnav" have no text decoration
    Explanation
    The given CSS code selects all anchor tags that are inside either a div with the class "leftnav" or the class "bottomnav" and applies the style rule "text-decoration:none;" to them. This means that the text inside these anchor tags will not have any text decoration, such as underlining or strikethrough. The code does not specify any IDs, so it is not selecting based on IDs. Therefore, the correct answer is "make the text inside any anchor tags that are inside either a div with the class 'leftnav' or the class 'bottomnav' have no text decoration."

    Rate this question:

  • 6. 
    Look at the following HTML: what is the MOST SIMPLE way that you could make the words "jay's favorite" and only those words red without making any of the other text in the page red as well? - ProProfs

    Look at the following HTML: what is the MOST SIMPLE way that you could make the words "jay's favorite" and only those words red without making any of the other text in the page red as well?

    • Span {color:#ff0000;}

    • Li {color:#ff0000;}

    • Li span {color:#ff0000;}

    • Div ul li span {color:#ff0000;}

    • Li, span {color:#ff0000;}

    Correct Answer
    A. Li span {color:#ff0000;}
    Explanation
    The correct answer is "li span {color:#ff0000;}". This is because the selector "li span" selects the span element that is a descendant of an li element. By applying the CSS rule "color:#ff0000;", only the words "jay's favorite" within the span element inside the li element will be made red, without affecting any other text on the page.

    Rate this question:

  • 7. 

    (this is not strictly about CSS, but what the heck) What is the main difference between a DIV and a SPAN ?

    • Spans are, by default, inline and DIVs are by default Block

    • DIVs are, by default, inline and SPANs are by default Block

    • There is no real difference

    • Spans can be inside DIVs but DIVs are not supposed to go inside spans

    • Both a and d

    Correct Answer
    A. Both a and d
    Explanation
    The main difference between a DIV and a SPAN is that by default, SPANs are inline elements and DIVs are block elements. This means that SPANs are typically used for smaller, inline elements within a block of text, while DIVs are used for larger sections or divisions of content. Additionally, SPANs can be nested inside DIVs, but DIVs are not supposed to be nested inside SPANs. Therefore, the correct answer is "both a and d".

    Rate this question:

Quiz Review Timeline (Updated): Aug 19, 2023 +

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

  • Current Version
  • Aug 19, 2023
    Quiz Edited by
    ProProfs Editorial Team
  • Feb 08, 2009
    Quiz Created by
    Jayvanburen
Back to Top Back to top
Advertisement
×

Wait!
Here's an interesting quiz for you.

We have other quizzes matching your interest.