Imperial Valley College Faculty Websites

You are here:Instructors»Robert Gallegos»CIS 212»Homework #5
Tuesday, 27 September 2011 11:20

Homework #5

Written by Robert Gallegos
Rate this item
(0 votes)

CIS 212          Fall 2011         Homework 5                                                  Date handed out: 09/26/2011

Reading Assignment:
9 Expanding your Vocabulary: Styling with fonts and colors
10 With Elements: The Box Model

Note: Your answers must be turned in handwritten (no typed responses will be accepted).

Homework due at beginning of class on Monday October 3rd:

  1. A lot of the CSS ____________________ are dedicated to helping you style text.
     
  2. Using CSS, you can control typeface, style, ____________________ and even the decorations that are put on your text.

  3. Customize the  ____________________ in your pages with the font-family property.

  4. In CSS, fonts are divided into “____________________   ____________________” from which you can specify the fonts you’d like used in each element of your page. (Two words)

  5. Only certain fonts are ____________________ installed on most computers, so you need to be careful in your font choices.

  6. Control the size of your fonts with the ____________________ - ____________________ property. (Two words)

  7. Add ____________________ to your text with the color property.

  8. Affect the ____________________ of your fonts with the font-weight property.

  9. Add even more style to your text with the ____________________ - ____________________ property.

  10. Using the ____________________ - ____________________ property you can decorate your text with decorations including overlines, underlines, and line–throughs.

  11. There are five font families: ____________________, ____________________, ____________________, ____________________, and ____________________.

  12. Keep in mind that ____________________ on your machine may differ from what is available to your users.

  13. The ____________________ family is made up of fonts that have constant width characters.

  14. ____________________ fonts have an elegant, traditional look, while sans-serif fonts have a very clean and readable look.

  15. These fonts are usually not widely available and are ____________________ used for serious Web designs.

  16. Usually your font-family specification contains a list of ____________________ fonts, all from the same family.

  17. Always put a generic font family name at the end, like “____________________”, “sans-serif”, “cursive”, or “monospace”.

  18. If none of the specific fonts can be found, just use whatever the ____________________ considers its default “sans-serif” font.

  19. The ____________________ - ____________________ property gives you a way to create a list of preferred fonts. (Two words)

  20. You’ll see ____________________ on most PC’s. And ____________________ on most Macs. ____________________ is common on both. And if all else fails, we have the default ____________________.

  21.  Because font-family is an ____________________ property, all elements on the page are now using a sans-serif font,

  22. How do I specify a font with multiple words in the name, like Courier New?
    _______________________________________________________________________________________________________________________________________________________________________.

  23. Yes     or      No     The font-family property is really a set of alternative fonts?

  24. The unfortunate thing about fonts is that you can’t control what fonts are on your ____________________ computers.

  25.  The best you can do is to create a list of fonts that are most appropriate for your pages and then hope the user has one of those  ____________________ installed.

  26. You can specify your font size in  ____________________ just like the pixel dimensions you used for images.

  27. Sett5ng a f6nt to 14 pixels high means that there will be 14 pixels between the ____________________ part of the letters and the highest.

  28. A font size specified as a percentage tells the font how big it should be ____________________ to another font size.

  29. You can also specify sizes using “em”, which , like percentage, is another ____________________ unit of measure. (NOTE: DO NOT CONFUSE THIS ATTRIBUTE WITH THE EM ELEMENT TO EMPHASIS TEXT IN A PARAGRAPH!)

  30. With em you don’t specify a ____________________ percentage, instead you specify a scaling factor. (NOTE: DO NOT CONFUSE THIS ATTRIBUTE WITH THE EM ELEMENT TO EMPHASIS TEXT IN A PARAGRAPH!)

  31. There’s one more way to specify font sizes: ____________________.

  32. You can specify a font size as xx-small, x-small, small, medium, large, x-large, or xx-large and the browser will translate these keywords into ____________________ values using defaults that are defined in the browser.

  33. Keep in mind, however, that the keywords aren’t always defined the same way in every browser, and that users can ____________________ them if they want.

  34. By defining your fonts relative to the body font size, it’s really easy to change the font sizes in your____________________ page simply by changing the body font size.

  35. Internet Explorer does ____________________ support text scaling when the font size is specified using pixels.

  36. Yes     or      No      By defining a font size in the <body> element, I’m somehow defining a default size for the page?

  37. Yes     or     No      Do we really need to worry about users resizing their browser fonts?

  38. <h1> is 200% of the default body text font size, <h2> is 150%, <h3> is 120%, <h4> is 100%, <h5> is 90%, and <h6> is ____________________%.

  39. The ____________________-____________________ property allows you to control how bold the text looks.

  40. You can also go the other way. If you have an element that is set to bold by default, or is inheriting bold from a parent, then you can remove the bold style like this:
    ____________________: ____________________;

  41. It’s a good idea to combine properties into one ____________________ like this to avoid duplication.

  42. You can add an italic style to your text in CSS using ____________________-____________________ property.

  43. Not all fonts support the italic style, so what you get instead is called____________________ text.

  44. You can use the font-style property to get oblique text too, like this:
    ____________________-____________________: ____________________;

  45. Web colors are specified in terms of how much red, green and blue make up the ____________________.

  46. You certainly can use color names all you like, butt CSS defines the names of only ____________________ colors.

  47. ____________________ ____________________, which is shorthand for describing the red, green and blue components of the color. (Two words)

  48. Let’s say you want to specify the color “silver” as the background color of a body element; here’s how you write that is CSS:
                body {
                            ____________________-____________________: ____________________;
                }

  49. You can also specify a color as the amount of ____________________, ____________________, and ____________________. (Three words)

  50. Each set of two digits of a hex code just represents the red, green and blue ____________________ of the color.

  51. Each set of two digits represent a number from 0 to ____________________.

  52. Computer scientist decided they could represent all 255 values with the help of some letters too ____________________ through ____________________. (Two letters)

  53. The first thing you need to know about hex codes is that they aren’t based on ten digits (0 to 9) – the are based on ____________________ digits.

  54. Unless you have a special set of users that you know have a limited color displays, you can pretty much count “web-safe colors” as a thing of the ____________________.

  55. The most important is to use colors with high contrast for the text and the ____________________ to aid readability.

  56. I’ve seen hex codes like #cb0; what does that mean?
    ____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

  57. Yes      or       No      So if I have two different rules for an <em>, and one specifies overline and the other underline, will they be added together so I get both?

  58. The color property really controls the ____________________ color of an element, so it controls the text and the border color, although you can give the border its own color with the border-color property.

  59. Font-sizes are usually specified using px, em, %, or ____________________.

  60. To do advanced Web ____________________ you really need to know your building materials.

  61. Remember, this <link> element tells the browser to look for an external ____________________  ____________________ . (Two words)

  62. Increasing the line height of your text can improve ____________________.

  63. We’re going to adjust the line height of the text on the entire page so that there’s more vertical space between each line. To do that we add a ____________________ - ____________________ property in the body rule. (Two words)

  64. As you might have guessed, the line-height property allows you to specify the amount of ____________________ space between each line of your text.

  65. The space between lines is known as “____________________” in the publishing industry.

  66. The box model. It’s how CSS sees elements. CSS treats every single element as if it were represented by a ____________________.

  67. All ____________________are treated as boxes: paragraphs, headings, block quotes, lists, lists items, and so on.

  68. Even inline elements like <em> and links are treated by CSS as ____________________.

  69. Your going to be able to control every aspect of the box with ____________________.

  70. The ____________________ area holds the element’s content. It’s typically just big enough to hold the content.

  71. Notice that the content has no ____________________ between the content and the edge of this box.

  72. ____________________ is optional, so you don’t have to have it, but you can use padding to create visual whitespace between the content and the border of the box.

  73. Using CSS, you’re going to be able to control the ____________________ of the padding around the entire content area, or even control the padding on any one side (top, right bottom, or left).

  74. The ____________________ surrounds the padding and, because it takes the form of a line around your content, borders provide visual separation between your content and other elements on the same page.

  75. The ____________________ is also optional and surrounds the border.

  76. If two ____________________ are next to each other, the margins act as the space in between them.

  77. What’s the difference between padding and margin?
    _______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________.

  78. Yes      or      No       Do you need to have padding to have a border or a margin?

  79. So other than size, it sounds like I can’t really style padding and margins?
    _______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________.

  80. Remember, a ____________________will allow you to style this paragraph independently of the other paragraph.

  81. CSS has a ____________________ property that you can use to set the same padding for all four sides of the content.

  82. Notice that the ____________________ color is under both the content and the padding. But it doesn’t extend into the margin.

  83. Margins are easy to add using CSS. Like padding, you can specify the margin as a ____________________ or in ____________________.

  84. If you’re adding an image to the background of an element, there is another way. Using CSS, you can add a background image to any element using the ____________________-____________________ property. (two words)

  85. Yes       or       No       Is the background-image a replacement for the <img> element?

  86. The background-image property has a very ____________________ purpose, which is to set the background image of an element.

  87. An <img> element, on the other hand, is used to include an image that has a more ____________________ role in the page, like a photo of a logo.

  88. There is a ____________________-____________________ value for the background-repeat property.

  89. Browsers position a background image in the top, left of the element, which is where we want it, but let’s also add a ____________________-____________________ property just to give it a try.

  90. The background-position property sets the position of the image and can be specified in ____________________ or as a ____________________, or by using ____________________ like top, left, right, bottom, and center.

  91. By default, a background image is “____________________”, or repeated over and over to fill the background space. The background-repeat property controls how this ____________________ behaves.

  92. ____________________ allows you to add visual space around the content area.

  93. For padding, margins, and even borders, ____________________ has a property for every direction: top, right, bottom, and left.

  94. ____________________  ____________________ here -  if you switch the order, then you’ll set the padding for the left side first, and then the general padding property will set all sides back to 25 pixels, including the left side! (two words)

  95. If you need more visual space around ____________________ area itself, use padding, as opposed to if you want space between elements or the sides of the page, in case use ____________________.

  96. There are ____________________ border styles available, from a solid line to dotted lines to ridges and grooves.

  97. The boeder-width property controls the ____________________ of the border.

  98. The border-color property sets the  ____________________ of the border.

  99. Just like margins and padding you can specify border style, width, or color on any side (top, right, bottom, or  ____________________.

100.    Classes are meant to be used for styles that you want to reuse with  ____________________ elements.
        

101.    Basically all you need to know is that you use a  ____________________ when you want to use a style
         with more than one element.
        

102.    The  ____________________ attribute is strictly used for naming unique elements.
        

103.    ____________________ names must start with a letter and ne followed by only letters and digits. No
         spaces or special characters are  ____________________.
        

104.    An element can’t have multiple ids, and you can’t have more than one element on a 
         ____________________ with the same id.
        

105.    Yes       or        No        Can an element have an id and also belong to a class?
        

106.    The only difference between class and id is that an id selector should match  ____________________
         ____________________ element in a page, (Two words)
        

107.    In your ____________________  you can specify more than one style sheet.
        

108.    ____________________   ____________________! A style sheet can override the styles in the style
         sheets linked above it.
        

109.    There is an optional attribute for the <link> element called ____________________, that you can use to
         specify the kinds of devices your style files are intended for.
        

110.    Yes      or       No       I can set up different style sheets for different devices?