CHS Web Design Track

1 The Environment and the Tools

MULTIPLE CHOICE

  1. Unlike an external style sheet, a(n) _____ style sheet is applied only to the web page in which it is placed.
    1. linked
    2. internal
    3. embedded
    4. integrated
  2. Inline styles are styles applied directly to specific elements using the style attribute <element style=“property: value”> content </element> where element is the Hypertext Markup Language (HTML) element and _____ define the styles that are applied directly to that element.
    1. property: value
    2. element
    3. element style
    4. style
  3. If two style rules have equal specificity, and thus equal importance, then the one that is defined _____ in the style sheet is the one used.
    1. last
    2. first
    3. second
    4. third
  4. An additional factor in how an element is rendered is that properties are passed from a parent element to its children in a process known as _____.
    1. style portioning
    2. style indexing
    3. style inheritance
    4. style link
  5. Many web browsers include _____ tools to make it easier for designers to locate the source of a style that has been applied to a specific page element.
    1. designer
    2. planner
    3. developer
    4. creator
  6. Identify the correct syntax for adding comments in style sheets.
    1. <!--comment‐->
    2. /..comment
    3. //comment//
    4. /*comment*/
  7. Which of the following rules defines character encoding in every Cascading Style Sheets (CSS) document?
    1. @charset=“encoding”
    2. @charset “encoding”;
    3. &char=“encoding”;
    4. &char “encoding”;
  8. The _____ statement must always come before any other style rules in a style sheet.
    1. @import
    2. @embed
    3. !import
    4. !embed
  9. The Cascading Style Sheets (CSS) @rule that imports an external style sheet file located at ur1 is _____.
    1. @import url(url);
    2. @import “url”;
    3. @import prefix url
    4. @import
media
{
url
}
  10. The @import rule has the same impact as adding multiple _____ elements to a Hypertext Markup Language (HTML) file.
    1. connection
    2. link
    3. contact
    4. integrated
  11. Adding all the three primary colors—red, green, and blue—at maximum intensity produces the color _____, while adding any two of the three primary colors at maximum intensity produces the trio of complementary colors—yellow, magenta, and cyan.
    1. white
    2. blue
    3. lime
    4. black
  12. Yellow has the RGB triplet
    1. (0, 0, 0)
    2. (255, 255, 0)
    3. (0, 255, 255)
    4. (255, 0, 255)
  13. Cascading Style Sheets (CSS) allow RGB values to be entered as
    1. binaries
    2. hexadecimals
    3. WYSIWYG values
    4. RBG values
  14. In the hexadecimal numbering system, the number 16 is expressed as _____.
    1. 1F
    2. F
    3. 10
    4. 1
  15. In the hexadecimal numbering system, the number 21 is expressed as _____.
    1. 1F
    2. F
    3. 15
    4. F1
  16. _____ is the tint of a color and is usually represented by a direction on a color wheel.
    1. Hue
    2. Saturation
    3. Lightness
    4. Darkness
  17. _____ measures the intensity of the chosen color and ranges from 0% (no color) up to 100% (full color).
    1. Hue
    2. Saturation
    3. Lightness
    4. Darkness
  18. Color values using the HSL model are described in Cascading Style Sheets (CSS) 3 using _____.
    1. #redgreenblue
    2. rgb(number)
    3. hsl (hue, saturation, lightness)
    4. hsl (hue, shadow, lightness, opacity)
  19. _____ measures the brightness of a color and ranges from 0% (black) up to 100% (white).
    1. Hue
    2. Saturation
    3. Lightness
    4. Darkness
  20. Graphic designers consider _____ easier to use because it allows them to set the initial color based on hue and then fine-tune the saturation and lightness values.
    1. HTML
    2. CSS
    3. HSL
    4. HTM
  21. _____ defines how solid a color appears.
    1. Clarity
    2. Saturation
    3. Lightness
    4. Opacity
  22. How is background color defined in a Cascaded Style Sheets (CSS) file
    1. @bgcolor “color”;
    2. @background=”color”;
    3. background: color;
    4. background-color: color;
  23. To set the foreground or text color of an element, use the following property:
    1. text: color;
    2. forecolor: color;
    3. color: color;
    4. backcolor: color;
  24. A technique known as _____ places code conforming to older standards before newer properties, providing support for old browsers but still allowing newer standards and techniques to be used by the browsers that support them.
    1. progressive enhancement
    2. opacity enhancement
    3. opacity enhancement
    4. pseudo-class structuring
  25. The color scheme that uses two hues close to one another on the color wheel in which one color is the dominant color and the other is a supporting color used only for highlights and nuance is _____.
    1. triad
    2. tetrad
    3. analogic
    4. monochrome
  26. To direct a style rule to specific elements, _____ can be used to match only those page elements that correspond to a specified pattern.
    1. web fonts
    2. pseudo-classes
    3. descendant elements
    4. selector patterns
  27. A _____ element is an element that contains one or more other elements, which are called child elements.
    1. family
    2. sibling
    3. parent
    4. descendant
  28. Each child element may contain children of its own and so forth down the hierarchy, creating a set of _____ elements that are all descended from a common parent.
    1. descendant
    2. child
    3. parent
    4. sibling
  29. The style rule * {color: blue;} uses the asterisk (*) selector—also known as the _____ selector—to select all elements in a document.
    1. character
    2. text
    3. wildcard
    4. object
  30. _____ selectors are used to select elements based on elements that are adjacent to them in the document hierarchy.
    1. Parent
    2. Child
    3. Sibling
    4. Descendant
  31. Identify a contextual selector that matches any element.
    1. %
    2. *
    3. elem
    4. elem1, elem2, …
  32. Identify an attribute selector used to select an element based on its class value.
    1. class: .intro.elem
    2. elem.class
    3. elem#class
    4. class *elem
  33. Two attributes, _____, are often key in targeting styles to specific elements.
    1. id and char
    2. id and class
    3. id and type
    4. id and elem
  34. Identify an attribute selector that recognizes groups of elements that share a similar characteristic or property.
    1. id
    2. pseudo-element
    3. class
    4. list-style-position
  35. Identify an attribute selector that selects all elem elements whose att attribute begins with text.
    1. elem[att|=”text”]
    2. elem[att^=”text”]
    3. elem[att$=”text”]
    4. elem[att˜=”text”]
  36. Which of the following attribute selectors selects all elem elements whose att attribute ends with text?
    1. elem[att*=”text”]
    2. elem[att^=”text”]
    3. elem[att|=”text”]
    4. elem[att$=”text”]
  37. Identify a generic font group that is a typeface in which each character has the same width.
    1. sans-serif
    2. monospace
    3. fantasy
    4. cursive
  38. A typeface, best used in small doses for decorative page elements, that mimics handwriting with highly stylized elements and flourishes is _____.
    1. serif
    2. monospace
    3. fantasy
    4. cursive
  39. A typeface in which a small ornamentation appears at the tail end of each character is _____.
    1. sans-serif
    2. serif
    3. monospace
    4. fantasy
  40. A general rule for printing is to use _____ fonts for headlines and serif fonts for body text.
    1. fantasy
    2. sans-serif
    3. monospace
    4. cursive
  41. Which of the following is an example of web safe font stacks?
    1. Calibri
    2. Book Antiqua
    3. Bell MT
    4. Verdana
  42. Identify a rule that should be added to a style sheet to access and load a web font.
    1. @font-face
    2. font-style: type;
    3. aside: {font-family}
    4. @charset “utf-8”;
  43. Which of the following browsers supports the web font format “Embedded OpenType”?
    1. Safari
    2. Internet Explorer (IE)
    3. Chrome
    4. Firefox
  44. _____ units are specified in one of five standard units of measurement.
    1. Relative
    2. Absolute
    3. Standard
    4. Uppercase
  45. _____ units express font size according to the size of other objects within a web page.
    1. Absolute
    2. Relative
    3. Standard
    4. Output
  46. A(n) _____ represents a single dot on an output device.
    1. element
    2. icon
    3. link
    4. pixel
  47. The _____ unit is the preferred style unit for web page text because it makes it easy to develop pages in which different page elements have consistent relative font sizes under any device.
    1. in
    2. ft
    3. em
    4. en
  48. Identify a relative unit in which lengths are expressed as a percentage of the width or height of a browser window.
    1. Attribute unit
    2. Viewport unit
    3. rem unit
    4. Absolute unit
  49. Identify a typographic attribute that measures the amount of space between characters.
    1. Tracking
    2. Dithering
    3. Kerning
    4. Pacing
  50. _____ measures the amount of space between words.
    1. Kerning
    2. Tracking
    3. Pacing
    4. Dithering
  51. The default value for both kerning and tracking is _____ pixels.
    1. 8
    2. 0
    3. 2
    4. 5
  52. Extending the first line of text to the left of a text block creates a _____ indent.
    1. tracking
    2. kerning
    3. leading
    4. hanging
  53. Which of the following properties is used to control the casing of text within an element?
    1. font-variant
    2. text-transform
    3. text-align
    4. font-style
  54. Identify a property used to align text horizontally.
    1. text-align: alignment;
    2. align-text: horizontal;
    3. horizontal-align: alignment;
    4. align-text: baseline;
  55. The _____ value of the vertical-align property aligns the bottom of the element with the bottom of the text in a line.
    1. baseline
    2. bottom
    3. text-bottom
    4. sub
  56. Which of the following list styles should be applied to the ol element to display an unordered list with markers as shown below:
    • Home
    • Getting Started
    • Scrapbooking Tips
    • Supply List
    1. ul {list-style-type: none;}
    2. ul {list-style-type: upper-greek;}
    3. ul {list-style-type: circle;}
    4. ul {list-style-type: disc;}
  57. Nested lists can be displayed in a(n) _____ style through the use of contextual selectors.
    1. embedded
    2. outline
    3. hierarchy
    4. tree
  58. The style rule ul {list-style-image: url(redball.png);} displays items from _____ lists marked with the graphic image in the redball.png file.
    1. ordered
    2. unordered
    3. unstructured
    4. structured
  59. Identify a padding property used to set the width of the padding space.
    1. padding: font;
    2. padding: pixel;
    3. padding: style;
    4. padding: size;
  60. Identify a pseudo-class which is the first descendant of the parent that matches the specified type.
    1. :first-of-type
    2. :first-child
    3. :only-of-type
    4. :only-child
  61. A _____ is a classification of an element based on its current status, position, or use in a document.
    1. pseudo-class
    2. pseudo-element
    3. pseudo-text
    4. pseudo-style
  62. Another type of pseudo-class is _____ pseudo-class in which the class can change state based on the actions of a user.
    1. static
    2. dynamic
    3. structured
    4. unstructured
  63. The _____ pseudo-class represents the exact instant in which a link is activated.
    1. link
    2. visited
    3. active
    4. open-quote
  64. Which of the following dynamic pseudo-classes means the link has not yet been visited by a user?
    1. :link
    2. :visited
    3. :active
    4. :hover
  65. The _____ pseudo-class is to be used for a situation in which a user has moved the mouse pointer over a hypertext link prior to clicking the link.
    1. active
    2. root
    3. link
    4. hover
  66. _____, another type of pseudo selector, is an object that exists only in the rendered page.
    1. Pseudo-class
    2. Pseudo-element
    3. Pseudo-object
    4. Pseudo-type
  67. Identify a Cascading Style Sheets (CSS) selector that is used to select pseudo-elements.
    1. element::pseudo-element
    2. element:pseudo-element
    3. element::“pseudo”;
    4. element:“pseudo-element”
  68. Identify the format to add new content before an element with Cascading Style Sheets (CSS).
    1. element:before open-quote;
    2. element::before {content: open-quote;}
    3. element:before text;
    4. element::before {content: text;}
  69. Identify an element used for quoted material.
    1. a
    2. q
    3. wbr
    4. content
  70. Decorative opening and closing quotation marks can be inserted using the _____ property.
    1. label
    2. type
    3. content
    4. deco

    71. Case 3-1 Alex's woodworking shop is trying to design a web page with Cascading Style Sheets (CSS). Alex would like create the new design based on the latest elements and styles from Hypertext Markup Language (HTML) and CSS. He has created a few sample pages:
    home.htm---describes the business and contact
    informationProduct.htm---displays a list of product
    descriptionsCustom.htm---displays a list of custom products

  71. Alex wants to create styles that apply only to the HTML document in which they are created. Help Alex in selecting an appropriate style to be used for this purpose.
    1. External style
    2. Inline style
    3. Embedded style
    4. User-defined
  72. Alex had forgotten to give any style for all of his pages. In this case, identify the style that would be applied to his pages.
    1. User defined style
    2. External style
    3. User agent style
    4. View render style
  73. Alex’s product style rules can be imported into a single file by adding the command _____.
    1. @import url (css.product);
    2. @import url (product.css);
    3. @import css (product.css);
    4. @import (type: css url: product);

    74. Case 3-2 Terry is building a web site and wants to have three main links called Home, Product Info, and Contact Us. She will create a hierarchy of page elements and revise the style sheets.

  74. In this case, the Home page contains two _____ elements.
    1. child
    2. parent
    3. sibling
    4. descendant
  75. Terry has decided to display the text of all h1 headings found within the page header in green. The style rule applied should be _____.
    1. header h1 {shade: green;}
    2. header h1 {green: shade;}
    3. header h1 {green: color;}
    4. header h1 {color: green;}
  76. To apply a style to all elements in a document, Terry should use the _____ selector.
    1. e
    2. f
    3. *
    4. +
  77. If Terry decides to select all elements belonging to the main class, he should use the _____ selector.
    1. .main
    2. p.main
    3. #main.intro
    4. main[href]

    78. Case 3-3 Tim is creating a web page to display his poker club’s set of rules. He has main categories and subcategories along with about a paragraph or more of explanation for each.

  78. Tim should use what type of font for the body text of his page?
    1. serif
    2. monospace
    3. cursive
    4. fantasy
  79. Tim wants to display the subcategories in capital letters but does not want them to appear more important than the main categories, so he small capital letters. Which style should he use?
    1. text-transform
    2. font-transform
    3. font-variant
    4. text-variant
  80. Tim wants to align the top of the element with the top of the font of the surrounding content. Which value of the vertical-align property should he use?
    1. baseline
    2. super
    3. top
    4. text-top

TRUE FALSE

  1. The most common way of accepting user input is through a web form.
  2. User-defined styles can be superseded by external styles, which are the styles that a website author creates and places within a Cascading Style Sheets (CSS) file and links to the page.
  3. The first style sheet interpreted by a browser is the one built into the browser itself.
  4. One advantage of user-defined style sheets is that they make the web more accessible to visually impaired users who may require larger fonts or the absence of clashing color schemes.
  5. User-defined styles are defined by users based on the settings they make while configuring a browser.
  6. Embedded style sheets are created by web page authors and consist of styles that are inserted directly within the body element of a Hypertext Markup Language (HTML) document.
  7. Embedded styles apply to the Hypertext Markup Language (HTML) documents in which they are created and are accessible to other documents in the website.
  8. In every version of Cascading Style Sheets (CSS), one can apply a style rule containing a list of style properties to an element or a group of elements known as a selector.
  9. In addition to the W3C-supported style properties, most browsers supply their own extended library of style properties, known as browser extensions.
  10. Browser extensions are identified through the use of a vendor prefix, which indicates the browser vendor that created and supports the property.
  11. A color value is an alphabetic expression that represents the intensity of the primary colors.
  12. Saturation measures the intensity of the chosen color and ranges from 0% (no color) up to 100% (full color).
  13. Hue values range from 0 to 360, where 0 matches the location of blue on the color wheel, 120 matches red, and 240 matches green.
  14. Cascading Style Sheets (CSS) allow RGB values to be entered as hexadecimal numbers.
  15. Cascading Style Sheets (CSS) 3 introduced opacity to the CSS color models where opacity defines how transparent the color appears.
  16. A generic font describes the general appearance of a typeface and relies on a specific font definition.
  17. Absolute units are units that are fixed in size regardless of the output device and are usually used only with printed media.
  18. The subscript and superscript styles lower or raise text vertically, as well as resize it.
  19. In the context of formatting lists, by default, unordered lists are displayed with numerals while ordered lists are displayed with a solid disc.
  20. The content of a blockquote element is usually placed in quotation marks.

SHORT ANSWER

  1. _________ styles are added as element attributes within a Hypertext Markup Language (HTML) document and thus apply to that element alone.
  2. Cascading Style Sheets (CSS) support _________, which are numerical expressions that precisely describe colors.
  3. Each color is represented by a set of numbers called a(n) _________ that represents the intensity of its red, green, and blue components.
  4. A(n) _________ number is a number expressed in the base 16 numbering system rather than in the commonly used base 10 system.
  5. The _________ color scheme uses two hues separated by 180° on the color wheel and is the most vibrant, offering the highest contrast and visual interest, but can be misused and might distract users from the page content.
  6. Each child element may contain children of its own and so forth down the hierarchy, creating a set of _________ that are all descended from a common parent.
  7. _________ matches any element in the hierarchy.
  8. To select all elements with the class value run, the _________ attribute selector must be used.
  9. A _________ font describes the general appearance of the characters in a text but does not specify any particular font definition file.
  10. _________ is the art of designing the appearance of characters and letters on a page.
  11. _________ is a typeface without any serif ornamentation.
  12. _________ units are units that are fixed in size regardless of the device rendering the web page.
  13. To cope with the uncertainty about how their pages will be viewed, many web page designers opt to use _________ units, which are expressed relative to the size of other objects within the web page.
  14. The text size is defined using the _________ property.
  15. Since a page designer doesn’t know the exact properties of a user’s device, the common practice is to make the text _________ with all font sizes expressed relative to a default font size.
  16. In the _________ unit, all font sizes are always expressed relative to the font size used in the html element.
  17. _________, a typographic feature, measures the amount of space between lines of text.
  18. _________, a typographic feature, measures the amount of space between words.
  19. Block-level elements like paragraphs or headings or lists follow the structure of the _________ in which the content is enclosed within a series of concentric boxes.

Check Your Answers