4.4. The XBlock Stylesheets#

This section of the tutorial walks through the CSS file, thumbs.css, that is part of the Thumbs XBlock in the XBlock SDK.

If you completed the steps in Build an XBlock: Quick Start, you can find this file locally at xblock_development/xblock-sdk/sample_xblocks/thumbs/static/css/thumbs.css.

In the XBlock CSS file, you define the styles that are added to the fragment that is returned by the view method to be displayed by the runtime application.

.upvote, .downvote {
  cursor: pointer;
  border: 1px solid #888;
  padding: 0 .5em;
}
.upvote { color: green; }
.downvote { color: red; }

The styles in thumbs.css are referenced in the XBlock HTML file.