Imperial Valley College Faculty Websites

You are here:Instructors»Robert Gallegos»CIS 212»Homework #6
Tuesday, 11 October 2011 10:00

Homework #6

Written by Robert Gallegos
Rate this item
(0 votes)

CIS 212  Fall 2011 Homework 6               Date handed out: 10/10/2011

Reading Assignment:
11 Advanced Web Construction: divs and spans
12 Arranging Elements: layout and positioning

Note: Your answers must be turned in handwritten, (no typed responses will be accepted). Students can print out the homework and write in their answers.

Homework due at beginning of class on Monday October 17th, 2011.

  1. We can’t use <p> because <p> can’t contain other block elements and the headings and the headings and paragraphs are obviously ____________________ elements.

  2. A <_______> lets you divide your page into logical sections or groupings.  

  3. What’s a ____________________ ____________________ (two words)? It’s just a group of elements that are related on the page.

  4. The common way to do this is to place <div> opening and closing tags around the elements that belong to a
    ____________________ ____________________ (two words).

  5.  Use an id ____________________ to provide a unique label for <div>.

  6. It’s common to ____________________ structure, too.

  7. Yes     or      No       A <div> acts like a container that you can put elements in to keep them all together?

  8. Always keep your ____________________ as simple as possible to get the job done.

  9. Remember that an element can have an id and be in one or more ____________________ at the same time.

  10. A <div> is just a ____________________ element and you can apply any style you want to it.

  11. The <div> is a box like every other element, so, you can ass a border, the border goes around the content, which is all the elements in the ____________________.
  12. The ____________________ property lets you specify the width of the element’s content area.

  13. The width property ____________________ the width for the content area only.

  14. Don’t forget, that you have to include ____________________ the border width, because there is a border on the left and the right.

  15. The width of the content area, the padding, the border, and the margin. All that added together is the width of the entire ____________________. 

  16. The default width for a block element is “____________________”, which means that it will expand to fill whatever space is available.

  17. In general, the height if an element is left at the default, which is ____________________, and the browser expands the content area vertically so all the content is visible.

  18. The default padding on <div> is _______ pixels.

  19. Use text-align on block elements to align the text they ____________________. 

  20. Setting the background-repeat property to repeat-x, will tile the image only on the ____________________ direction.

  21. Text-align will align all ____________________ content in a block element.

  22. The text-align property should be set on block elements only. It has no effect if it’s used directly on inline ____________________ (like <img>).

  23. What does the following rule do?

    #elixirs h2 {
                color: black;


  24. Line-height is a bit special because you can use just a number instead of a relative measure. When you use just a number, you’re telling each element in the <div> to have a line-height of _____ times it’s own font-size, rather than the font-size of the <div>.

  25. If your padding values or margins are the same values on all sides,

                padding-top:              20px;
                padding-right:             20px:
                padding-bottom:        20px;
                padding-left:               20px;

    you can make the shorthand really short:

                padding:                     _____px;

  26. If the top and bottom, as well as the right and left margins are the same,
                margin-top:                  0px;
                margin-right:               20px;
                margin-bottom:          0px;
                margin-left:                20px;
    then you can  use a shorthand.

                margin:                       _____px _____px:

  27. The border shorthand is even more flexible than margins or padding because you can specify them in any other you ____________________.

  28. You can also use shorthand for backgrounds:
                background-color:                  white;
                background-image:                 url (images/cocktail.gif);
                background-repeat:                 repeat-x;
    Like border, values can go in any order in this shorthand.

                background: ____________________  ____________________   ____________________;

  29. Shorthands do have the advantage of reducing the size of your CSS files, and certainly they are more quickly entered because they require less typing. However, when there is a problem, they are a little more difficult to “____________________”.

  30. A <span> gives you a way to create a grouping of ____________________ characters and elements.

  31. As always, you want to mark up your content with the ____________________ that most closely matches the meaning of your content.

  32. Yes     or      No     Can I set properties like width on <span> elements?

  33. If you hold your mouse over a link without clicking, this is called “____________________”.

  34. A ____________________ can be in a few states: it can be unvisited, visited, or in the “hover” state.

  35. The right ordering is generally considered to be link, visited, focus, hover, and then ____________________.

  36. You can style ____________________, but no one ever types them into their XHTML.

  37. Yes     or    No     There are all these classes out there that the browser is adding and removing elements from behind the scenes.

  38. Priority is given first to the author’s style, then to the reader’s styles and then finally to the browser’s default

  39. The browser itself maintains a set of default styles that are used if you don’t define the styles for an ____________________.

  40. We only sort within the author, reader, and browser ____________________.

  41. Yes     or    No     When you sort for specificity, you don’t re-sort everything?

    CHAPTER 12

  42. Flow is what the browser uses to lay out a page of ____________________ elements.

  43. Inline elements are flowered next to each other, ____________________, from top left to bottom right.

  44. If the inline content of each block fits the width of the content area, then it’s placed there; otherwise, more vertical room is made for the content and it’s contained on the next ____________________.

  45. The browser treats margins differently depending on which type of elements is being placed on the ____________________.

  46. When the browser places two block elements on top of each, it collapses their shared margins together. The height of the collapsed margin is the height of the largest ____________________

  47. Whenever you have two vertical margins touching, they will ____________________, even if one element is nested inside the other.

  48. The float property first takes element and floats it as far left or right as it can (based on the value of ____________________).

  49. A requirement for any floating element is that it have a ____________________.

  50. The ____________________ property can be set to either left or right.

  51. When the inline elements are flowed within the block elements, they flow around the borders of the floating ____________________.

  52. When you float an element, you need to move the XHTML for the element directly below the element that you want it to float ____________________.

  53. The problem with setting a width on both the content area and the sidebar us that this doesn’t allow the page to expand and contract correctly because booth have fixed ____________________.

  54. Yes     or      No     The CSS clear property. You cans set this property on an element to request that as the element is being flowed onto the page, no floating content is allowed to be on the left, right, or booth sides of the elements.

  55. Yes     or    No     Can I float to the center?

  56. Yes     or    No     Do margins collapse on floated elements?

  57. Yes     or    No     Can I float an inline element?

  58. Yes     or    No     Is it correct to think about floated elements as elements that are ignored by block elements, while inline elements know they are there?

  59. ____________________  ____________________  expand to fill whatever width we resize the browser to.
  60. ____________________  ____________________  lock the elements down, frozen to the page, so they can’t move at all, and so we avoid a lot of issues that are caused by the window expanding.

  61. The outer “____________________” <div> is always 800 pixels, even when the browser is resized, so we’re effectively frozen the <div> to the page, along with everything inside it.

  62. Jello layouts lock down the width of the content area in the page, but center it in the ____________________.

  63. With “auto” ____________________, the browser figures out the correct  margins are, but also makes sure the left and right margins are the same, so that the content is centered.

  64. A feature of CSS that allows you to precisely position elements on the page. It’s called ____________________   ____________________.

  65. When an element is absolutely positioned, the first thing the browser does is ____________________ it completely form the flow.

  66. Absolutely positioned elements have no ____________________ whatsoever on the other elements.

  67. Each positioned element has a property called a ____________________ that specifies its placement.

  68. What is the default position property set to by default? The default value for positioning is “____________________”.

  69. You can absolutely position any element, block or inline. Just remember that when an element is absolutely positioned, it is removed from the normal flow of the ____________________.

  70. Are there are position property values other than static and absolute? What are they?
    ____________________    ____________________    ____________________    ____________________

  71.  Yes    or      No    Do I have to specify a width for an absolute positioned element just like the floated elements?

  72. Yes     or      No     Do I have to use pixels for positioning?

  73. Yes     or      No     Do I have to know how to use z-indexes ti use absolute positioning?

  74. Using ____________________ positioning you can place it anywhere on the page you want, and since it isn’t in the flow it won’t affect any other element in the page.

  75. If you want to absolutely position an element from the bottom of the page, rather than the browser window, you need to place your element inside an element that ____________________ to the bottom of your page, and is positioned.

  76. With fixed positioning, you specify the position of an element just like you do with absolute positioning, but the position is an offset from the edge of the browser’s ____________________ rather than the page.

  77. Fixed position elements don’t move; they are there fir good as long as the page is ____________________.

  78. Unfortunately, Internet Explorer version 6 (and earlier) doesn’t support fixed ____________________.

  79. Unlike absolute and fixed positioning, an element that is relatively positioned is still part of the flow of the page, but at the last moment, just before the element is displayed, the browser offsets its ____________________.

  80. The browser first flows a relative element onto the page, and only then does it offset where it is ____________________.


Last modified on Tuesday, 11 October 2011 10:10