Single Choice Question

  1. Which organization is responsible for the creation of the World Wide Web?
    1. Apple
    2. W3C
    3. Google
    4. IEEE
  2. The following is a list of CSS selectors. Which one is not a valid selector?
    1. .class
    2. #id
    3. :hover
    4. :active
  3. The newest version of CSS is
    1. CSS3
    2. CSS2
    3. CSS1
    4. CSS4
  4. What is the correct way to select all <a> elements with a class of "external"?
    1. a.external
    2. .external
    3. a.external
    4. .external
  5. To select the first <li> element within a <ul> with an ID of "myList", which of the following is correct?
    1. ul#myList li:first-child
    2. ul#myList li:first
    3. ul#myList li:first-of-type
    4. ul#myList li:first-element
  6. About CSS, which statement is correct?
    1. CSS is a style sheet language
    2. CSS is a programming language
    3. CSS is a markup language
    4. CSS is a scripting language
  7. About the selector, which following statement is NOT correct?
    1. Selector is a way to select an element in a document.
    2. ID select can be applied to any element
    3. Class select can select multiple elements
    4. Class select can select multiple elements
  8. What is the correct way to select the first <p> element within a <div> with an ID of "content"?
    1. #content p:first-child
    2. #content p:first
    3. #content p:first-of-type
    4. #content p:first-element
  9. How do you select all <p> elements within a specific <div> with an ID of "content"?
    1. #content p
    2. .content p
    3. p #content
    4. p.content
  10. What is the purpose of the !important rule in CSS?
    1. To make the rule more visually appealing
    2. To override specificity and apply the rule regardless of other declarations
    3. To add emphasis to comments in CSS
    4. To make the CSS file run faster
  11. How do you target all <li> elements that are direct children of a <ul>?
    1. ul > li
    2. ul li
    3. li ul
    4. > ul li
  12. How do you apply a class to an HTML element using CSS?
    1. .className
    2. #className
    3. class="className" (in HTML)
    4. className=""
  13. What is the difference between id and class selectors in CSS?
    1. IDs can be used multiple times on a page, while classes can only be used once.
    2. IDs are more specific than classes and can only be used once per page.
    3. There is no difference; they can be used interchangeably.
    4. Classes are more specific than IDs and should be used for global styles.
  14. About ways to use CSS, which statement is correct?
    1. Inline CSS is the best way to style a web page.
    2. Embedded styles has the highest priority than inline styles.
    3. External style sheet file takes highest priority.
    4. Embedded or inline style sheets only affect the document they are embedded in.
  15. About comment in CSS, which option is correct
    1. <!--comment out a single line-->
    2. //comment
    3. /** comment */
    4. /* comment */
  16. Selector `p[lang~="fr"]` selects
    1. All <p> elements with a lang attribute
    2. All paragraph elements whose lang attribute has a value of exactly "fr"
    3. All paragraph elements whose lang attribute contains the word "fr".
    4. All <p>
  17. What is the correct explanation of `ul.menu>li#first`?
    1. It selects one <li> element with an id attribute of "first" that are direct children of a <ul> element with a class attribute of "menu".
    2. It selects all <li> elements with a class attribute of "first" that are direct children of a <ul> element with an id attribute of "menu".
    3. It selects all <li> elements with an id `first`
    4. It selects one item which has the id "first" and descendant in one unordered list which has class "menu"
  18. The selector 'h1 + p' means
    1. Select the <p> elements only if both the <h1> and <p> elements share the same parent in the document tree and <h1> is immediately precedes the <p> element
    2. Select the <h1> elements only if both the <h1> and <p> elements share the same parent in the document tree and <p> is immediately precedes the <h1> element
    3. Select the <p> elements only if both the <h1> and <p> elements share the same parent in the document tree and <p> is immediately precedes the <h1> element
    4. Select the <h1> elements only if both the <h1> and <p> elements share the same parent in the document tree and <h1> is immediately precedes the <p> element
  19. The major function of CSS is
    1. To add style to a web page
    2. To describe the content of a web page
    3. To make it more functional
    4. To make it more interactive
  20. Which following CSS style has correct syntax
    1. h1{color:blue; text-align:center}
    2. h1:color{blue}; text-align{center}
    3. h1{color=blue; text-align=center}
    4. h1?color=blue&text-align=center
  21. In CSS style `h1{color:blue}`, `h1` means
    1. Attribute
    2. Value
    3. Selector
    4. Element
  22. To get the element of HTML document: `<p id="first" class="header">content</p>`, the wrong selector is
    1. p
    2. p.header
    3. p#first
    4. p.header #first`
  23. The correct way to import external style sheet is
    1. <link rel="stylesheet" type="text/css" href="mystyle.css">
    2. <like src="mystyle.css">
    3. <style href="mystyle.css">
    4. <style src="mystyle.css" type="text/css">
  24. The tag used to set the internal style sheet among the following options is
    1. <style>
    2. <title>
    3. <script>
    4. <head>
  25. The tag that can be used to import an external style sheet among the following options is
    1. <link>
    2. <style>
    3. <script>
    4. <title>

True or False Question

  1. Inline style has the highest priority than embedded style.
    True
  2. External style sheet has the highest priority than embedded style.
    False
  3. ID selector can select more elements than class selector.
    False
  4. A descendant selector is used to select only those elements that are the direct children of some element.
    False
  5. A child selector is used to select all those elements that are the children of some element.
    True
  6. A CSS comment begins with /*, and ends with */.
    True
  7. You can write CSS once and then reuse same sheet in multiple HTML pages.
    True
  8. CSS5 is the latest version of the CSS specification which provides many new styling features.
    False

Definition of Term

  1. CSS
    Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. CSS is used to control the style of a web document in a simple and easy way.
  2. Selector
    A CSS selector is a pattern to match the elements on a web page. The style rules associated with that selector will be applied to the elements that match the selector pattern. Selectors are one of the most important aspects of CSS as they allow you to target specific elements on your web page in various ways so that they can be styled
  3. Style
    In CSS, the term "style" (样式) refers to the set of rules that define how HTML elements should be displayed on a web page. It's essentially the visual presentation and layout instructions you apply to the structure defined by HTML. A "style" is typically made up of one or more declarations, where each declaration consists of a property and a value.

Short Answer

  1. What are functions of CSS?
    • Apply same style rules on multiple elements
    • Control the presentation of multiple pages of a website with a single style sheet
    • Present the same page differently on different devices
    • Style dynamic states of elements such as hover, focus, etc. that isn't possible otherwise
    • Change the position of an element on a web page without changing the markup
    • Alter the display of existing HTML elements
    • Transform elements like scale, rotate, skew, etc. in 2D or 3D space
    • Create animations and transitions effects without using any JavaScript
    • Create print friendly version of your web pages
  2. Why we should learn CSS well?
  3. Explain ways to use CSS.
    Inline styles — Using the style attribute in the HTML start tag < h1 style="color:red; font size:30px;">This is a heading< /h1>
    Embedded styles — Using the < style> element in the head section of a document < head>< style>< /style>< /head>
    External style sheets — Using the < link> element, pointing to an external CSS file < link rel="stylesheet" href="css/style.css">
  4. Compare with other ways, what are the benefits of using linking external style sheet?
    可以被复用;容易修改编辑;provide browser cache advantages;可以影响不止一个文件
  5. What are the rules to override any style sheet.
    Any inline style sheet takes highest priority. So, it will override any rule defined in < style>...< /style> tags or rules defined in any external style sheet file. Any rule defined in external style sheet file takes lowest priority, and rules defined in this file will be applied only when higher priority CSS are not applicable.
  6. What are the main parts of a style.
    Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like < h1> or < table> etc.
    Property − A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc.
    Value − Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc.
  7. Try to specify major selectors in CSS.(at least 5)
    • tag selector
    • class selector
    • ID selector
    • Descendant selector
    • attribute selector
    • grouping selector
    • child selector
  8. Try to compare with the id selector and class selector.
    Class can be reused in the page. ID can only appear once in the page, so it can't be reused. If multiple elements need to use the same style and need to refer to your CSS repeatedly to reduce the workload and code amount, use class as much as possible. In the module with large page, use ID to distinguish different modules.Since ID is the only one in the page, it is more useful for JavaScript in the page