Style Guide

You can add an intro­duc­to­ry larg­er size text to your arti­cles by sim­ply wrap­ping a para­graph in a p tag with the CSS class of “intro”. Put sim­ply, larg­er text will usu­al­ly be read before small­er text.

We paid a lot of atten­tion to get­ting the basics of our typog­ra­phy right in the new Word­Press Blog theme. The pur­pose of this page is to help deter­mine what default set­tings are with CSS and to make sure that all pos­si­ble ele­ments are includ­ed. For exam­ple we looked at head­ings. Love­ly headings.

Heading Two Formatting

Drop­cap can be added by wrap­ping the first let­ter of the first word in a span tag with the CSS class of “drop­cap”. Instead of using the body text font, we use the dis­play font from our titles. This also ties the two ele­ments togeth­er if the dis­play font works well with the body text.openers.

We’ve con­sid­ered the needs of cooks that want to start their recipe jour­nal, so we are styled the recipe for­mat in such way that it beau­ti­ful­ly dis­plays the prepa­ra­tion steps.

Pumpkin Pancakes with Apple Compote and Candied Nuts

  • Serv­ings: 4–6
  • Dif­fi­cul­ty: easy
  • Print

Put your recipe here. Tip: use ordered and unordered lists, head­ings, images, and links to improve the look of your recipe. You can also use spe­cial tags to for­mat notes, ingre­di­ents, and directions.

Ingredients


- 1 cup raw shelled nuts
- 14 cup light brown sug­ar
- 2 table­spoons unsalt­ed but­ter
- 2 tea­spoons rose­mary
- 1 tea­spoon flake sea salt
- 12 tea­spoon chili flakes

Directions


1. Line a bak­ing sheet with parch­ment paper and set it aside.
2. Melt the but­ter over medi­um high heat in a large fry­ing pan. Add the brown sug­ar and stir to com­bine.
3. Con­tin­ue cook­ing until the sug­ar melts, about 3 to 5 min­utes, stir­ring every minute.
4. Add the nuts and cook until they are toast­ed and very fra­grant, about 8 min­utes, stir­ring every minute.
5. If the pan begins smok­ing, remove it from the heat and stir it until it stops smok­ing, then place it back over the heat and con­tin­ue stir­ring every minute until the nuts are suf­fi­cient­ly toast­ed.
6. Emp­ty the pan con­tents onto the parch­ment paper-lined bak­ing sheet and spread the nuts mix­ture out even­ly using a spat­u­la. Imme­di­ate­ly sprin­kle with the rose­mary, salt, and chili. Allow to cool to room tem­per­a­ture.
7. Once cooled, break apart any large chunks of nuts into indi­vid­ual nuts and serve.

Tips & Tricks: And the whipped cream round­ed out all the fla­vors and just added a nice and fluffy ele­ment to the dish. YUM. I got all my ingre­di­ents at New Sea­sons Mar­ket, which is a store local to the Pacif­ic North­west area that sells a huge array of deli­cious sea­son­al fresh pro­duce and all-nat­ur­al ingre­di­ents. You can see if there’s a store near you using their find-a-store loca­tor here.

Heading Three

You can also use a pure­ly dec­o­ra­tive font. There are thou­sands of dec­o­ra­tive type­faces, and most of them aren’t appro­pri­ate for use in a book’s body text.

Block­quotes are a great way to dis­play and for­mat quo­ta­tions. Insert beau­ti­ful quotes using the “quote” but­ton from the visu­al edi­tor. To add an author just wrap its name in a cite tag.

Tables are use­ful 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.

TypeFontDescrip­tion
Human­istSabonClose­ly con­nect­ed to calligraphy
Tran­si­tion­alBaskervilleMore abstract and less organic
Mod­ernBodoniNote the thin, straight serifs
Slab SerifClaren­donEgypt­ian type­faces have heavy serifs

To high­light a text, you sim­ply need to wrap it into a <span> with the class “high­light”. This can be done in the Text edi­tor view.

Heading four

Image Styles

Wel­come to image align­ment! The best way to demon­strate the ebb and flow of the var­i­ous image posi­tion­ing options is to nes­tle them snug­gly among an ocean of words. Grab a pad­dle and let’s get started.

The image above hap­pens to be a cen­tered full-width example.

The rest of this para­graph is filler for the sake of see­ing the text wrap around a right aligned image.

As you can see there should be some space above, below, and to the left of the image. The text should not be creep­ing on the image. Creep­ing is just not right. Images need breath­ing room too. Let them speak like you words.
As you can see there should be some space above, below, and to the left of the image. The text should not be creep­ing on the image. Creep­ing is just not right. Images need breath­ing room too. Let them speak like you words.

Let them do their jobs with­out any has­sle from the text. In about one more sen­tence here, we’ll see that the text moves from the right of the image down below the image in seam­less transition.

Don’t let any­one else tell you dif­fer­ent­ly. In just a bit here, you should see the text start to wrap below the left aligned image and set­tle in nice­ly. There should still be plen­ty of room and every­thing should be sit­ting pret­ty. Yeah… Just like that. It nev­er felt so good to be right.

Let them do their jobs with­out any has­sle from the text. In about one more sen­tence here, we’ll see that the text moves from the right of the image down below the image in seam­less transition.

And now we’re going to shift things to the left align. Again, there should be  plen­ty of room above, below, and to the right of the image. Just look at him there… Hey guy! Way to rock that left side. I don’t care what the right aligned image says, you look great.
Don’t let any­one else tell you dif­fer­ent­ly. In just a bit here, you should see the text start to wrap below the left aligned image and set­tle in nice­ly. There should still be plen­ty of room and every­thing should be sit­ting pret­ty. Yeah… Just like that. It nev­er felt so good to be right.

And that’s a wrap, yo! You sur­vived the tumul­tuous waters of align­ment. In just a bit here, you should see the text start to wrap below the right aligned image and set­tle in nice­ly. There should still be plen­ty of room and every­thing should be sit­ting pretty.