create
counter

Feature: The Newbie’s Guide to Book Blogging Part 2 – The CSS

the-newbies-guide-to-book-blogging_part-2_the-css

Style your Blog with CSS

One most definite way to stand out from all the other book blogs out there is to make your blog design unique. Style it the way you want, whether it be professional or simple, busy owned colour full, it’s really up to you.

There are a lot of options to make your blog look unique. Want to learn how to make those cool looking pullquotes? Use the blockquote element. Do you want to shift a book cover to the right and have the text flow around it? Use the align element. These are just some of the basic code snippets you need to make your blog posts look polished.

Note: I’m teaching you the basics of CSS. The web community is just learning how to use CSS3, and from what I’ve seen it’s incredibly powerful.


What is CSS?

CSS stands for Cascading Style Sheets. CSS is a simple way to define all HTML elements across a web site. There are different ways to include CSS in your design. They are external style sheets, internal style sheets, and inline styling.


External style sheet

External style sheets is a way to manage all your CSS styling in one file, which is linked directly from the head element. All you do is declare your CSS in ONE file, and it will render all your pages in one go. Easy peasy.

EXAMPLE


<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Internal style sheet

Internal style sheets are styled within the single HTML file like so:

EXAMPLE


<head>
<style type="text/css">
body {
background-image:url ('http://booknerd.ca/wp-content/uploads/2012/08/bg_books_green.jpg');
}
</style>
</head>

Inline style

Inline styling includes contain the relevant CSS property. This method is not supposed to be used but some people use it anyway. It’s how I learned CSS and it was easier to use when designing a page, but then sites would span hundreds of pages and the inline styling was rendered useless.

EXAMPLE


<p style="color: #000; font-weight: bold">This is a sentence</p>

Background

You can apply a background to your entire blog, by setting the background. Or you can style your headers, your paragraphs and even your divs.

HTML


body {
background-image:url ('http://booknerd.ca/wp-content/uploads/2012/08/bg_books_green.jpg');
}

Text Styling

Set your font, size, weight, and alignment.

HTML


h1 {text-decoration:underline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:overline;}


Result


This h1 is underlined


This h2 has a line-through it


This h3 has no underline



Text Alignment

Set the property to center, right, left or justify (which fills up the text across the line). You can use this property to any HTML tag.

HTML


h1 {text-align:center;}
h1 {text-align:left;}
h1 {text-align:right;}
p {text-align:justify;}

Result

This h1 is aligned to the center

This h1 is aligned to the left

This h1 is aligned to the right

Jelly-o icing faworki candy. Chupa chups gingerbread gummies tiramisu halvah liquorice ice cream muffin wypas. Pie bear claw candy canes cookie donut muffin chupa chups. Fruitcake pie gummies gummies marzipan pastry cupcake. Dessert jelly beans tiramisu. Chupa chups tiramisu lollipop candy tootsie roll. Jelly-o biscuit donut caramels tootsie roll caramels halvah. Cake cookie gummi bears soufflé. Jelly beans ice cream dragée marzipan caramels fruitcake. Ice cream bonbon powder marzipan tootsie roll cake. Wafer jelly tiramisu caramels chocolate bar bonbon wafer. Jelly-o topping tart. Sesame snaps brownie faworki apple pie. Sweet roll cookie gingerbread bonbon fruitcake.


Sizes

You can set the sizes of your fonts by pixels or em. em is used to incorporate older browsers like Internet Explorer. 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.

HTML


p {font-size:24px;}
p {font-size:1.5em;}

Result

Chocolate bar sweet roll gummi bears cupcake candy canes candy bear claw. Muffin gummi bears sesame snaps caramels chupa chups chocolate bar cookie apple pie. Gummies sesame snaps halvah marshmallow.

Chocolate bar sweet roll gummi bears cupcake candy canes candy bear claw. Muffin gummi bears sesame snaps caramels chupa chups chocolate bar cookie apple pie. Gummies sesame snaps halvah marshmallow.


Transform

Set the property to transform in all uppercase letter, all lowercase letters, and capitlize the start of each word.

HTML


p {text-transform:uppercase;}
p {text-transform:lowercase;}
p {text-transform:capitalize;}

Chocolate bar sweet roll gummi bears cupcake candy canes candy bear claw. Muffin gummi bears sesame snaps caramels chupa chups chocolate bar cookie apple pie. Gummies sesame snaps halvah marshmallow.
Chocolate bar sweet roll gummi bears cupcake candy canes candy bear claw. Muffin gummi bears sesame snaps caramels chupa chups chocolate bar cookie apple pie. Gummies sesame snaps halvah marshmallow.
Chocolate bar sweet roll gummi bears cupcake candy canes candy bear claw. Muffin gummi bears sesame snaps caramels chupa chups chocolate bar cookie apple pie. Gummies sesame snaps halvah marshmallow.


Span

A span element can make a certain word styled in one manner.

HTML


<span style="color: blue; font-weight: bold;">This text is blue and bolded</span> while the rest of the paragraph is not.

Result

This text is blue and bolded while the rest of the paragraph is not.


Div

The div element identifies the structure of a document. We can use div containers to break up different parts of an HTML document. But in a book blog’s case, we use divs to style book descriptions with the selector element.

Selectors

There are two different selectors id, and class. id refers to one specific style for one element. It starts off with a “#.” Class refers to one specific style for several elements. It starts off with a “.”

The best way to use an id selector is when you want to highlight the book description and its details. I defined the id selector as “summary,” added 15 pixels of spacing around the entire div container, set the background colour, and added a one pixel dashed border that was coloured. So in reality once you set the CSS in your style sheet, all you have to do is use ;<;/div>; in all your blog posts and it will be set from here on out. If you want to edit the styling, open up the CSS file and change the settings. Save the CSS and it will automatically update each blog post with the new stylings.

Code for the CSS

Note: I am using an external style sheet. It’s good practice to do so!


#summary {
padding:15px;
background:#f5ffe2;
border: 1px dashed #8e8e8e;
}

Code for the blog post


<div id="summary">
<p style="text-align: center;"><strong>Author:</strong>
C.J. Hill</p>
<p style="text-align: center;"><strong>Publication Date:</strong>
August 28, 2012</p>
<p style="text-align: center;"><strong>Publisher:</strong>
<a href="http://harpercollins.ca" target="_blank">HarperCollins Publishers</a></p>
<p style="text-align: center;"><strong>Format:</strong>
Hardcover, 368 pages</p>
<p style="text-align: center;"><strong>Price:</strong>
CAD $19.99</p>
<p style="text-align: center;"><strong>Source:</strong>
A copy was provided by <a href="http://harpercollins.ca" target="_blank">Harper Collins Canada</a> for review</p>
<p style="text-align: center;"><strong>Buy:</strong>
<a href="http://www.amazon.ca/Erasing-Time-C-J-Hill/dp/0062123920/" target="_blank"><img title="btn_amazon" src="http://booknerd.ca/wp-content/uploads/2012/02/btn_amazon.jpg" alt="Amazon" width="93" height="30" border="0" /></a> <a href="http://www.chapters.indigo.ca/books/Erasing-Time-C-J-Hill/9780062123923-item.html" target="_blank"><img title="btn_chapters-indigo" src="http://booknerd.ca/wp-content/uploads/2012/02/btn_chapters-indigo.jpg" alt="chapters.indigo.ca" width="123" height="30" /></a></p>
<p style="text-align: center;"><strong>Add:</strong>
<a href="http://www.goodreads.com/book/show/13015019-erasing-time" target="_blank"><img title="btn_goodreads" src="http://booknerd.ca/wp-content/uploads/2012/02/btn_goodreads.jpg" alt="GoodReads" width="111" height="30" /></a></p>
<hr /><h1>Description</h1>
When twins Sheridan and Taylor wake up 400 years in the future, they find a changed world: domed cities, no animals, and a language that's so different, it barely sounds like English. And the worst news: They can't go back home.
The twenty-fifth-century government transported the girls to their city hoping to find a famous scientist to help perfect a devastating new weapon. The same government has implanted tracking devices in the citizens, limiting and examining everything they do. Taylor and Sheridan have to find a way out of the city before the government discovers their secrets. To complicate matters, the moblike Dakine has interest in getting hold of them too. The only way for the girls to elude their pursuers is to put their trust in Echo, a guy with secrets of his own. The trio must put their faith in the unknown to make a harrowing escape into the wilds beyond the city.
Full of adrenaline-injected chases and heartbreaking confessions, "Erasing Time" explores the strength of the bonds between twins, the risks and rewards of trust, and the hard road to finding the courage to fight for what you believe in.

</div>

Result

spellbound_cara-lynn-shultz_cover

Author:
C.J. Hill

Publication Date:
August 28, 2012

Publisher:
HarperCollins Publishers

Format:
Hardcover, 368 pages

Price:
CAD $19.99

Source:
A copy was provided by Harper Collins Canada for review


Description

When twins Sheridan and Taylor wake up 400 years in the future, they find a changed world: domed cities, no animals, and a language that’s so different, it barely sounds like English. And the worst news: They can’t go back home.

The twenty-fifth-century government transported the girls to their city hoping to find a famous scientist to help perfect a devastating new weapon. The same government has implanted tracking devices in the citizens, limiting and examining everything they do. Taylor and Sheridan have to find a way out of the city before the government discovers their secrets. To complicate matters, the moblike Dakine has interest in getting hold of them too. The only way for the girls to elude their pursuers is to put their trust in Echo, a guy with secrets of his own. The trio must put their faith in the unknown to make a harrowing escape into the wilds beyond the city.

Full of adrenaline-injected chases and heartbreaking confessions, “Erasing Time” explores the strength of the bonds between twins, the risks and rewards of trust, and the hard road to finding the courage to fight for what you believe in.


Blockquote

You can style your blockquote element the same way you styled your book summary.

Code for the CSS

Note: I am using an external style sheet. It’s good practice to do so!

#quote {
padding:15px;
background:#e2ffe9;
border: 1px dotted #8e8e8e;
}

Code for the blog post


<div id="quote">"He whispers, "You have no idea how much I've thought about you. How many times I've dreamt"-he takes a tight breath- "how many times I've dreamt about being this close to you." He moves to run a hand through his hair before he changes his mind. Looks down. Looks up. "God, Juliette, I'd follow you anywhere. You're the only good thing left in this world."―Adam (Shatter Me by Tahereh Mafi)</div>

Result

“He whispers, “You have no idea how much I’ve thought about you. How many times I’ve dreamt”-he takes a tight breath- “how many times I’ve dreamt about being this close to you.” He moves to run a hand through his hair before he changes his mind. Looks down. Looks up. “God, Juliette, I’d follow you anywhere. You’re the only good thing left in this world.”―Adam (Shatter Me by Tahereh Mafi)

Check out the rest of the series:

5 Comments

  1. Pingback: Feature: The Newbie's Guide to Book Blogging Part 2 - The Basics

  2. Pingback: Feature: The Newbie's Guide to Book Blogging Part 1

  3. Jenn

    September 15, 2012 at 1:49 AM

    Thank you, thank you, thank you! I am absolutely terrible with HTML, CSS, JAVA or any other computer language. This was a big help.

  4. Jenn@OwlReadIt

    August 29, 2012 at 10:41 PM

    Ok, after banging my head for a couple hours I was having difficulty and asked my programmer husband for help. I had accidentally deleted one of the *sigh*

    Now my posts will be pretty though. After I go through and fix them all… D:

    I just need to teach my cobloggers this now..lol

    Thank you soo much!!

  5. Pingback: booknerd | Feature: The Newbie’s Guide to Book Blogging Part 2 – The HTML

  6. Jenn@OwlReadIt

    August 24, 2012 at 2:25 PM

    I’ve been wondering how people get the boxes arouns the synopsis and such! Thanks 🙂

  7. Leeanna

    August 24, 2012 at 2:21 PM

    I apologize if you covered this and I missed it. I use self-hosted WordPress, and feedburner, but my entries aren’t styled in the feed. I use span classes for headings, and they show up as normal text, so I thought that could be it, but my blockquotes don’t show up either. No CSS is in the feed.

    I thought you couldn’t style feedburner, but then I saw yours looks perfect in my google reader.

    Oh, doh. A possible solution just hit me — do you have a stylesheet for your rss feed?

    • Giselle

      August 24, 2012 at 4:01 PM

      Hi Leanna! Thanks for reading the post. I use an external style sheet in all my blog posts. Maybe you use inline style sheets and that’s why it doesn’t work. They strip most of the CSS automatically. Sometimes my posts don’t appear properly in Google Reader either.

  8. Pingback: booknerd | Feature: The Newbie’s Guide to Book Blogging Part 2 – The Tutorials

  9. Pingback: booknerd | Feature: The Newbie’s Guide to Book Blogging Part 2 – The Resources

Leave a Reply

Your email address will not be published.

CommentLuv badge

%d bloggers like this: