Chapter 13

  1. If all block level HTML elements (div, h1, p, ul, ol, li, and so on) have their own default boxes, what CSS properties do you use to control the size of their boxes?

    Pixels, percentages, or ems will control the size (height and width) of boxes.

    Example:

    blahblahblah

    div.box { height: 300px; width: 300px; background-color: purple;}

    p { height: 75%; width: 75%; background-color: yellow;}

  2. In your own words describe how the min-width and max-width properties work and why you might need to use them. (Hint: they are used extensively in the "Responsive" flexible grid page designs you will be learning.)

    The minimum and maximum width properties are most important for handheld devices, so that a designer can control how small or wide a box can shrink or stretch while maintaining readability and style.

    Example:

    “Picture” Art created using Ipad

    td.description { min-width: 450px; max-width: 650px; text-align: left; padding: 5px; margin: 0px;}

  3. Accurately describe how the border, margin, and padding effect box size and display. Write them in numbered order from the inner-most to the outer-most.

    Padding is the white space between the border and the text.

    The border (sometimes invisible) keeps the boxes separated from each other.

    The margin is the space located on the outside of the border.

  4. Write an example CSS rule that would turn an unordered list of links into a horizontal navigation bar. Hint: you'll need to use the display CSS property.
    • home
    • products
    • Services
    • about

    li { display: inline; margin-right: 10px; }

    li.coming-soon { display: none;}

Chapter 16

  1. Write example CSS rule that would add a background image to your entire web page. For the URL part of the rule give me a relative path where "photo.jpg" is in a "assets" or "images" folder/directory.

    body { background-image: url (“images/cosmos-being-2.jpg”);}

  2. Write an example CSS rule using the shorthand form of background to give a fixed attachment to the center bottom of the page. Hint: take your first example and add attachment and position properties in the shorthand format.

    body { background-image: url(“images/logo.gif”); background-repeat: no-repeat; background-position: center bottom;}

  3. Home