Next, you are going to add styles to change the size and appearance of the text.
Add a new styling rule in styles.css to set the font size for the body element.
To do this, you will use a different type of selector – an element selector – by simply using the element’s name.
body {
font-size: 10px;
}
.thumbnail-title {
display: block;
margin: 0;
padding: 4px 10px;
background: rgb(96, 125, 139);
color: rgb(202, 238, 255);
}
This styling rule sets the body element’s
font-size to 10px.
You will rarely use element selectors in your stylesheets, because you will not often want to apply the exact same styles to every occurrence of a particular tag. Also, element selectors limit your ability to reuse styles; using them means that you may end up retyping the same declarations throughout your stylesheets. This is not great for maintenance if you need to alter those styles.
But, in this case, targeting the body element is
exactly the right amount of specificity. There can be only one <body>
element, and you will not be reusing its styles.
Save styles.css and check out your web page in Chrome (Figure 3.9).
Your headline and thumbnail titles have gotten smaller. You may – or may not – have expected this.
While the headline is directly within the body element where you declared the font-size property,
the thumbnail titles are not.
They are nested several levels deep.
However, many styles, including font size,
are applied to the elements specified by the styling rule
as well as the descendants of those elements.
The structure of your document can be described using a tree diagram, as in Figure 3.10. Representing your elements as a tree is a good way to visualize the DOM.
An element contained within another element is said to be its descendent.
In this case, your spans are all descendents of the body (as well as the ul and their respective li), so they inherit the body’s font-size style.
In the DevTools’ DOM tree view, locate and select one of the span elements.
In the styles pane, notice the boxes labeled Inherited from a, Inherited from li, and
Inherited from ul.
These three areas, as indicated, show styles inherited at each level from the user agent stylesheet.
Under Inherited from body, you can see that the font-size property has been inherited from the
style set for the body element in styles.css (Figure 3.11).
What if a different font size were set at another level, such as the ul?
Styles from the closer ancestor take priority, so a font size set in styles.css for the ul would override one set for the body and a font size set for the span element itself would override them both.
To see this, click on the ul element in the DOM tree view.
This will allow you to try out styles on the fly.
The styles you add here will be immediately reflected in the web page view, but will not be added to your actual project files.
At the top of the styles pane in the elements panel, you will see a section labeled elements.style.
Click anywhere in between the curly braces of the elements.style, and the DevTools will give you a prompt (Figure 3.12).
Start typing font-size, and the DevTools will suggest possible completions (Figure 3.13).
Choose font-size, then press the Tab key. Enter a large value, such as 50px, and press Return.
You may need to scroll the page, but you will see that the ul’s font-size has overridden the body’s (Figure 3.14).
Not all style properties are inherited – border, for example, is not.
To find out whether a property is inherited, refer to the property’s MDN reference
page.
Back in styles.css, update your declaration block for the
.thumbnail-title class to override the body’s
font-size and use a larger font.
body {
font-size: 10px;
}
.thumbnail-title {
display: block;
margin: 0;
padding: 4px 10px;
background: rgb(96, 125, 139);
color: rgb(202, 238, 255);
font-size: 18px;
}
For elements of the class .thumbnail-title, you changed the font size to 18 pixels.
Save styles.css and admire your thumbnail titles in Chrome (Figure 3.15).
They look good, but the user agent stylesheet is adding underlines to the
.thumbnail-title elements. This is because you
wrapped them (along with the .thumbnail-image
elements) with an anchor tag, making them inherit the underline style.
You do not need the underlines, so you are going to remove them by changing the
text-decoration property for the anchor tags in a new
styling rule in styles.css.
What selector should you use for this rule?
If you are confident that you want to remove the underlines from the thumbnail titles as well as any other anchor elements in Ottergram, you can simply use an element selector:
a {
/* style declaration */
}
(The text between the /* */ indicators is a CSS
comment.
Code comments are ignored by the browser; they allow the developer to
make notes in the code for future reference.)
If you think you might use anchors for another purpose (and will want to style them differently), you can pair the element selector with an attribute selector, like this:
a[href]{
/* style declaration */
}
This selector would match any anchor element with an href
attribute. Of course, anchor elements generally do have href
attributes, so that might not be targeted enough to match only the
thumbnail images and titles. To make an attribute selector more
precise, you can also specify the value of the attribute, like this:
a[href="#"]{
/* style declaration */
}
This selector would match only those anchor elements whose
href attribute has a value of #.
By the way, you can also use attribute selectors, with or without values, on their own, such as:
[href]{
/* style declaration */
}
As it happens, Ottergram is a fairly simple project and you will not, in fact, be using anchor tags for anything other than the thumbnails and their titles. It is therefore safe to use an element selector, and you should do so because it is the most straightforward solution with the right amount of specificity.
Add the new style declaration to styles.css:
body {
font-size: 10px;
}
a {
text-decoration: none;
}
.thumbnail-title {
...
}
Save your file and check your browser. The underlines are gone and your thumbnail titles are nicely styled (Figure 3.16).
Note that you should not remove the underlines from links that are in normal text – text that is not an obvious heading, title, or caption. The underlining of linked text is an important visual indicator that users have come to expect. You did it here because the thumbnails do not require the same visual cues. Users will reasonably expect them to be clickable.
In the rest of the chapter, you will use class selectors to style the thumbnail images, the unordered list of images, the list items (which include the thumbnail images and their titles), and, finally, the header.
Go ahead and add class names to the h1, ul, li, and img
elements in index.html so they are ready as you need them.
...
</head>
<body>
<header>
<h1>ottergram</h1>
<h1 class="logo-text">ottergram</h1>
</header>
<ul>
<ul class="thumbnail-list">
<li>
<li class="thumbnail-item">
<a href="#">
<img src="img/otter1.jpg" alt="Barry the Otter">
<img class="thumbnail-image" src="img/otter1.jpg" alt="Barry the Otter">
<span class="thumbnail-title">Barry</span>
</a>
</li>
<li>
<li class="thumbnail-item">
<a href="#">
<img src="img/otter2.jpg" alt="Robin the Otter">
<img class="thumbnail-image" src="img/otter2.jpg" alt="Robin the Otter">
<span class="thumbnail-title">Robin</span>
</a>
</li>
<li>
<li class="thumbnail-item">
<a href="#">
<img src="img/otter3.jpg" alt="Maurice the Otter">
<img class="thumbnail-image" src="img/otter3.jpg" alt="Maurice the Otter">
<span class="thumbnail-title">Maurice</span>
</a>
</li>
<li>
<li class="thumbnail-item">
<a href="#">
<img src="img/otter4.jpg" alt="Lesley the Otter">
<img class="thumbnail-image" src="img/otter4.jpg" alt="Lesley the Otter">
<span class="thumbnail-title">Lesley</span>
</a>
</li>
<li>
<li class="thumbnail-item">
<a href="#">
<img src="img/otter5.jpg" alt="Barbara the Otter">
<img class="thumbnail-image" src="img/otter5.jpg" alt="Barbara the Otter">
<span class="thumbnail-title">Barbara</span>
</a>
</li>
</ul>
...
By adding class names to these elements, you have given yourself targets for the styles you will be adding.
We favor class selectors over other kinds of selectors, and you should, too. You can write very descriptive class names that make your code easy to develop and maintain. Also, you can add multiple class names to an element, making them a flexible and powerful tool for styling.
Be sure to save index.html before moving on.