Style Guide

We paid a lot of attention to getting the basics of our typography right in the new WordPress Blog theme. The purpose of this page is to help determine what default settings are with CSS and to make sure that all possible elements are included. For example we looked at headings. Lovely headings.

Heading Two Formatting

Dropcap can be added by wrapping the first letter of the first word in a span tag with the CSS class of “dropcap”. Instead of using the body text font, we use the display font from our titles. This also ties the two elements together if the display font works well with the body text.openers. You can also use a purely decorative font. There are thousands of decorative typefaces, and most of them aren’t appropriate for use in a book’s body text.

Blockquotes are a great way to display and format quotations. Insert beautiful quotes using the “quote” button from the visual editor. To add an author just wrap its name in a cite tag.
John Doe

Are you still making bulleted and numbered lists by manually typing bullets or numbers at the beginning of each line? In the 21st century, this is a task no one should be doing by hand.

Heading Three

This tag styles large blocks of code.

code, kbd, tt, var, samp, pre {
    font: 15px/1.9 "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
}

Tables are useful for lay­outs where text needs to be po­si­tioned side-by-side or float­ing at spe­cif­ic lo­ca­tions on the page. If mak­ing these is frus­trat­ing with the usu­al lay­out tools, try us­ing a table.

Two Column Layout

Image Styles

Mauris facilisis aliquam ante eu lobortis. Proin mollis elementum vehicula. Vestibulum porta eu nulla a imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed a urna laoreet, finibus tellus ut, maximus tellus. Nulla facilisi. Suspendisse et sollicitudin quam.

The image above happens to be a centered full-width example.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dolor lacus, dapibus non ultrices ut, venenatis at dolor. Nam eros urna, sagittis eu lorem vel, ultrices viverra diam. Vivamus tincidunt libero ut feugiat tristique. Aliquam ultricies urna egestas arcu malesuada, quis tempor eros malesuada. Quisque tempus a elit vel tristique. Cras a risus gravida, dictum tortor quis, aliquet velit. Nulla eget rutrum dui. Nulla augue nisl, eleifend eu hendrerit id, facilisis at mauris. Pellentesque id lobortis nunc. In mattis neque mattis cursus sollicitudin. Maecenas lobortis erat eu velit tempus, quis mattis enim suscipit.

The image above happens to be a left thumb example.

Suspendisse et est dapibus, tempus orci ac, accumsan lectus. Duis eu pharetra tortor. Nullam sagittis porttitor tempus. Vestibulum ac congue felis. In libero metus, venenatis ut cursus sit amet, ullamcorper at elit. Aliquam nec augue dictum, luctus felis et, vestibulum velit. Quisque varius, neque tristique lacinia rhoncus, metus elit pulvinar augue, ac faucibus nulla mauris quis ipsum. Donec ac ante mattis, faucibus massa at, iaculis quam. Quisque pulvinar laoreet diam in efficitur. Nullam ac lobortis nisl, at iaculis sapien. Mauris bibendum orci a lacus dictum posuere. Mauris egestas vitae dui vel hendrerit. Duis eu elit risus. Nulla hendrerit ante nec turpis lacinia ultricies.

The image above happens to be a right medium example.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dolor lacus, dapibus non ultrices ut, venenatis at dolor. Nam eros urna, sagittis eu lorem vel, ultrices viverra diam. Vivamus tincidunt libero ut feugiat tristique. Aliquam ultricies urna egestas arcu malesuada, quis tempor eros malesuada. Quisque tempus a elit vel tristique. Cras a risus gravida, dictum tortor quis, aliquet velit. Nulla eget rutrum dui. Nulla augue nisl, eleifend eu hendrerit id, facilisis at mauris. Pellentesque id lobortis nunc. In mattis neque mattis cursus sollicitudin. Maecenas lobortis erat eu velit tempus, quis mattis enim suscipit.

Vestibulum quis tortor rhoncus, cursus neque in, consequat lacus. Duis purus risus, pellentesque a nunc ultricies, placerat mollis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc dapibus sollicitudin velit eu sagittis. Proin condimentum cursus nibh sed congue. Donec porttitor, turpis hendrerit faucibus vehicula, ligula nibh commodo libero, maximus viverra lorem ipsum in nisi. Proin id rutrum lorem. Maecenas auctor gravida diam vitae convallis. Proin ligula sapien, tincidunt vitae mattis eget, consequat vitae arcu.