Watkins Web 2: Blog

James Muspratt
Aug 30

Quiz: Markup, Selectors, Layout

Part 1: Markup

  1. Circle the markup that would definitely throw a validation error (i.e. you know it’s wrong without needing to see the context in which it appears):
    1. <a id="home link" href="home.html">Home</a>
    2. <li class="item" id="item">A gallon of milk</li>
    3. <h1><strong>My Page<h1></strong>
    4. <img src="photo.jpg" />
    5. <a class="outbound-link news" href="http://nyt.com">New York Times</a>
    6. <h2>Welcome to this <span>Site</span></h2>

Part 2: Selectors

Suppose the following markup appears on a page:

<body>

<div id="wrap">

<h1>My awesome page</h1>

<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="about.html">About</a></li>
</ul>

	<div id="main">
	<p>My name is Joe. I love design.</p>
	<p>When not working for the <span class="caps">CIA</span>, 
		I do <a href="work.html">design work</a>.</p>
	</div> <!-- /main -->

	<div id="sidebar">
		<h2>Useful Links</h2>
		<ul>
		<li><a href="http://joeschmoe.com">Joe Schmoe</a></li>
		<li><a href="http://pentagram.com">Pentagram</a></li>
		<li class="edu"><a href="http://watkins.edu">Watkins</a></li>
		</ul>
	</div> <!-- /sidebar -->

</div> <!-- /wrap -->

</body>
  1. Circle the CSS selector(s) that would successfully target the hyperlinks inside the navigation list and no other links on the page.
    1. ul a
    2. #nav li a
    3. ul li a
    4. ul#nav a
  2. What CSS rule(s) would successfully render “CIA” in small caps?
    1. span#caps {letter-spacing:1px; font:.9em;}
    2. span.caps {letter-spacing:1px; text-size:.9em;}
    3. #caps {letter-spacing:1px; size:.9em;}
    4. .caps {letter-spacing:1px; font-size:90%;}
  3. Circle the CSS declaration(s) that would successfully add top and right margins of 10px each to the targeted element.
    1. margin:0 10px;
    2. margin:10px 10px 0 0;
    3. margin-top:10px; margin-right:10px;
    4. margin:10px 0;
  4. Circle the CSS rule(s) that would successfully add a gray background to the unordered list in the sidebar and inset the text from its edges (so that you can see gray all around the text).
    1. #sidebar ul {background-color:gray; padding:10px;}
    2. ul#sidebar {background-color:gray; padding:10px;}
    3. #sidebar h2 ul {background-color:gray; padding:10px;}
    4. ul #sidebar {background-color:gray; margin:10px;}

Part 3: Layout

Let’s say we want to make main a 400px-wide column on the left and a 300px-wide sidebar to its right, with everything sitting on a gray background.

  1. Circle the CSS rule(s) that would successfully put the “Useful Links” all on a single row, next to each other.
    1. #sidebar ul {list-style:none; float:left;}
      #sidebar li {float:left;}
    2. ul#sidebar ul {list-style:none;}
      ul#sidebar li {display:inline;}
    3. ul .sidebar {list-style:none; float:left;}
      ul .sidebar li {float:left;}
    4. .sidebar {list-style:none;}
      ul li.sidebar {display:inline;}
  2. Circle the rules that — working together — would achieve this layout using the “Opposing Floats” technique.
    1. #wrap {width:700px; background-color:gray;}
    2. div#wrap {width:700px; float:left; background-color:gray;}
    3. div .wrap {width:400px; background-color:gray;}
    4. #main {width:400px; float:left;}
    5. .main {width:400px; float:right;}
    6. #sidebar {width:300px; float:right;}
    7. .sidebar div {width:300px; float:right;}