HTML and CSS Reference
In-Depth Information
differently. We can break out common styles for a list, such as each list item's
size and its common child elements' positions in a ''global'' list class, which can
be overridden using specificity.
First, create the global style for lists.
.list {
margin: 0;
padding: 0;
li {
padding: 10px;
overflow: hidden;
height: 82px;
display: block;
border-bottom: 1px solid #CCCCCC;
background: #FFFFFF;
.preview-image {
float: left;
width: 60px;
height: 82px;
text-align: center;
margin-right: 10px;
}
}
}
The
.list
style will provide a framework for all lists to be styled upon. This is a
good way to design your web applications if you know that a particular design
component may be used multiple times, but not necessarily look the same. You
could create just a movie-list style and then override it using specificity, but
there could be certain CSS styles that you don't want in your new style, which
will mean extra code to reset them. Add the SASS style in the previous code
snippet just below the deck style in the
css/partials/_layout.scss
SASS file.
Recompile the SASS file and reload the web app in your mobile browser and
search for a movie. The results should look like Figure 8-3.
