CS 318: WordPress for March
Your task for March is style your blog with some CSS and write five posts about topics of your choosing. The posts don’t need to be long. Feel free to share poetry, a photo diary, vignettes of your life or someone else’s, baseball commentary, snapshots of your spring break adventures, and so on.
Across your five posts, include images with captions, multiple levels of headings, blockquote environments, and lists. Each post should have some words.
For the style, make your posts look readable by completing the tasks below. Customize the format by entering the Additional CSS menu found on the WordPress administration dashboard.
- Use
border-boxfor all elements’box-sizingproperty. - Enlarge the headers.
- Adding margins and padding to separate the content.
- Center images.
- Use different fonts.
- Add some sort of background.
- Indent
blockquoteelements.
To what selectors does one write these CSS rules? The Blank theme that we are using makes generating specific selectors easier by adding IDs and classes to the HTML that it generates. Right-click on the content you wish to format and click Inspect. In the panel that opens up, find the element’s class or id attribute. Use these for your selectors.
If the element itself has no class or id, search up the hierarchy. For example, each post is embedded within an article element:
<article class="post">
...
</section>
To apply your rules only to elements in your posts, use a descendent selector. For example, we can style only those p elements that are in posts with this structure:
article.content p {
...
}
You are not given exact specifications of how to style the content. Make it look good. If you don’t know what good means, ask a roommate or friend.
This month the styles focus on the content within posts. Next month we will tackle larger organizational issues of your blog, including side panels, the header, and other “glue.”