Views uses a wide array of CSS classes on all of its content to ensure that you can easily and accurately select exactly the content you need in order to manipulate it with CSS. Typically, every view is wrapped in a div with the name of the view as part of its class (for all these examples, we will assume the name of the view is myview), as well as the generic class 'view':
<div class="view view-myview"> ... </div>In your CSS, you can modify all views:
div.view { border: 1px solid black; }Or just your view:
div.view-myview { background: yellow; }By default, the general view template also provides the following classes to easily style other areas of the view:
div.view-myview div.view-header { /* make the header stand out */ font-size: 120%; font-weight: bold; } div.view-myview div.view-footer { /* Make the footer less important */ font-size: 80%; font-style: italic; color: #CCC; }In the above example, we whimsically made the header bold and in a bigger font, and the footer smaller, italicized, and greyish.
.view-myview th { color: red; /* make all headers red */ } .view-myview .views-field-title { font-weight: bold; /* Make the 'title' field bold */ } .view-myview td.views-field-body { font-size: 60%; /* Make the text in the body field small */ }