Meeting 5
Understanding CSS Boxes
5.1 Homework Discussion
Maria: Let me show you our homework . This is the HTML portion of the code:
<body>
<ul>
<li><a href="#">Donec molestie leo magna</a></li>
<li><a href="#">Nunc lacinia nisi sed</a></li>
<li><a href="#">Pellentesque egestas</a></li>
</ul>
<h1>Lorem Ipsum 2015</h1>
<p>
Lorem ipsum dolor sit amet, ...
... lacinia congue <a href="#">mauris</a> eget ullamcorper.
</p>
<table>
<tr>
<th></th>
<th class="underline"><a href="#">2015</a></th>
<th class="underline">2016</th>
<th class="underline">2017</th>
</tr>
<tr>
<th>Egestas</th>
<td>10,763</td>
<td>12,723</td>
<td>18,012</td>
</tr>
...
<caption>
<span class="tablenum">Table 1:</span>
Cras eget odio id tortor porttitor congue eu quis erat.
</caption>
</table>
</body>
71
And th e rules that w e used:
table {
border-top: 2px solid;
border-bottom: 2px solid;
border-collapse: collapse;
}
th, td {
padding-left: 5px;
padding-right: 5px;
}
th {
text-align: left;
}
td {
text-align: right;
}
th.underline {
border-bottom: 1px solid;
text-align: center;
}
caption {
font-style: italic;
}
.tablenum {
font-style: normal;
font-weight: bold;
}
a {
text-decoration: none;
color: gray;
}
ul {
list-style-type: none;
}
h1, li a {
font-variant: small-caps;
}
We had no trouble with the ho mework, but when we wanted to carry out some ideas
of our own we weren’t th at successful.
Professor: Very good indeed. I’m also glad to hear that there is material left to discuss,
but first things first. I’m quite inter ested in your rea soning about why you did thing s
the way you did. I think that’s important.
Mike: The first thing that we weren’t able to produce with the sole use of element
selectors was the line under the year s in the table. So we devised a class for under-
lining the <td> elements, simply by producing a bottom bord er. We had to u se the
border-collapse property in order to get rid of the spaces between the cells. With
those spaces, the line under the years was inter rupted.
72 Meeting 5. Understanding CSS Boxes
Professor: I’m sorry to interrupt you, but the name of your underlin e cla ss could
have been better chosen. It does not r eflect the semantic meaning but it spe aks of
presentation. You heard ab out that the last time. A better name would be, for example,
horizontal to denote that th is is a horizontal header. Please continue.
Mike: Then there is a table number, for which there’s no special HTML element. So
we simply used the generic <span> element and applied a class to it, which we named
tablenum.
Maria: We’re particu la rly proud of the last of the rules. We noticed that the heading as
well as the list of the links above are all presented in small caps. So we constructed a
group selector with two selectors: an ord inary element selector (h1) and a descendant
selector (li a) specifying to style only the <a> elements within the <li> elements.
Professor: Splendid ! There is, however, one tiny detail that you overlooked. There
could be other lists in a document that weren’t navigation bars but no rmal lists. If they
contained links, those links would appear in small cap s as well.
You could rewrite your last rule to read something like this:
h1, .navbar a {
font-variant: small-caps;
}
And th e corresponding HTML portion as:
<ul class="navbar">
<li><a href="#">Donec molestie leo magna</a></li>
<li><a href="#">Nunc lacinia nisi sed</a></li>
<li><a href="#">Pellentesque egestas</a></li>
</ul>
Note that it doesn’t really matter whether you start your descendant selector with
an <li> or <ul > element because an <ul > element ca n contain only <li> elements
anyway.
What’s mo re, you could even use the <nav> HTML5 element, which is used for cr e-
ating a navigation section on a page, as a wr apper arou nd the < ul> element. Like
this:
<nav>
<ul>
<li><a href="#">Donec molestie leo magna</a></li>
<li><a href="#">Nunc lacinia nisi sed</a></li>
<li><a href="#">Pellentesque egestas</a></li>
</ul>
</nav>
And th e CSS portion:
5.1. Homework Discussion 73
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.