How do I edit the CSS of one blog post but not oth

Question

I recently created my own blog using Google's Blogger.

When I have completed reading a particular book, I have a Book's I Read Section where I would like to have a static 5 Star Rating System in place of some kind. Perhaps with CSS, I can target each book so I will be able to display from 1 to 5 Stars for the visitor to see.

I'm not sure how to edit the CSS of individual blog posts so I can target these specific read books, if that's the best method, and would like any tips in creating an image which I could specify how much of the 5 stars should be displayed (like 100% for 5 Stars, 80% for 4 Stars, 60% for 3 Stars, etc.)?

Answer 1

This method does NOT use JavaScript, jQuery, CSS or CSS3.

To clarify: It uses plain ASCII Code to provide the STAR requirements.

Solid Star: ★
ASCII Code for Solid Star: ★

Outline Star: ☆
ASCII Code for Outline Star: ☆

Live DEMO Follows (sorry jsFiddle!):

---

Book Title: A Trip To The Dentist
Book Author: Yin Pain & Lord Howard Hurts
Star Rating: ★☆☆☆☆

---

---

Book Title: Chest Pain
Book Author: I. Coffalot
Star Rating: ★★☆☆☆

---

---

Book Title: Dealing With Skunks
Book Author: Stan Back
Star Rating: ★★★☆☆

---

---

Book Title: Real Eyes Realize Real Lies
Book Author: I.C. You
Star Rating: ★★★★☆

---

---

Book Title: Spots On The Wall
Book Author: Who Flung Poo
Star Rating: ★★★★★

---

HTML markup for above:

Book Title: A Trip To The Dentist<br />
Book Author: Yin Pain & Lord Howard Hurts<br />
Star Rating: &#9733;&#9734;&#9734;&#9734;&#9734;<br />

Book Title: Chest Pain<br />
Book Author: I. Coffalot<br />
Star Rating: &#9733;&#9733;&#9734;&#9734;&#9734;<br />

Book Title: Dealing With Skunks<br />
Book Author: Stan Back<br />
Star Rating: &#9733;&#9733;&#9733;&#9734;&#9734;<br />

Book Title: Real Eyes Realize Real Lies<br />
Book Author: I.C. You<br />
Star Rating: &#9733;&#9733;&#9733;&#9733;&#9734;<br />

Book Title: Spots On The Wall<br />
Book Author: Who Flung Poo<br />
Star Rating: &#9733;&#9733;&#9733;&#9733;&#9733;<br />

★☆☆☆☆   ★★☆☆☆   ★★★☆☆   ★★★★☆   ★★★★★   

Optional: Use CSS font properties to change star size, color, and background to customize it!

Answer 2

Use a jQuery Star Rating Plugin.
See 2nd-half for CSS only method.

Here's a screenshot from the jQuery Star Rating Plugin. The Database Integration Tab has more plugin examples and you can always search for more jQuery Star Plugins HERE if you need that.

Screenshot:

Reference:

jsFiddle Demo for jQuery Star Rating Plugin

Screenshot of jsFiddle jQuery Star Rating Demo:

Minimal HTML markup that the jQuery Star Rating Plugin uses (extremely configurable):

<span class="bookFiveStar">
  <input name="book002" type="radio" class="star" disabled="disabled"/>
  <input name="book002" type="radio" class="star" disabled="disabled"/>
  <input name="book002" type="radio" class="star" disabled="disabled" checked="checked"/>
  <input name="book002" type="radio" class="star" disabled="disabled"/>
  <input name="book002" type="radio" class="star" disabled="disabled"/>
</span>

---

Above and below are TWO very different solutions for this Answer.

---

Use a Pure CSS Rating System without jQuery plugin or JavaScript.
See 1st-half above for jQuery Star Rating Plugin method.

Reference image used was from hot-linkable imageshack.us and is shown below.
Dimensions are width:98px; and height:143px; and image type is jpg.

     

Reference:

jsFiddle Demo for Pure CSS Star Rating

Screenshot of jsFiddle Pure CSS Demo:

Minimal HTML:

<div class="starsCSS">
  <img class="stars3" title="3 Stars" src="http://img366.imageshack.us/img366/6441/stars.jpg" alt="Star Rating Image" />
</div>

Complete CSS:

/* This class name configures and positions the 6 star image block. */
.starsCSS{
  /* The width of the star block uses the entire star.jpg width */
  width: 98px;
  /* The height of the star block is LIMITED to 23px, i.e. 1 star row. */
  height: 23px;
  /* This overflow:hidden will ensure only 1 row is ever seen, when aligned properly.
  /* That said, later below different classname uses margin-top negitive offset to align. */
  overflow: hidden;
  /* The placement of the star block is relative to other elements. Adjust px here. */
  position: relative;
  top: 10px;
  left: 155px;
  /* Simple light blue border is provided for the image./
  /* Your cusom star image may be a .png with transparency so remove this setting. */
  border: 2px solid DodgerBlue;
}

/* This CSS Selector consists of classname .starsCSS that has 'img tag'. */
/* This rule will set original image width and original image height for stars.jpg file. */
.starsCSS img{
  width: 98px;
  height: 143px;
}

/* These 6 classes will position the image so that only the relevant "star row" is seen for .starsCSS */
/* Technically, this first class .stars1 is not needed since nothing changes. */
/* Note stars.jpg is used full width (98px), therefore it's 1 column. */
/* Use margin-left with negative value if your custom image.jpg has 2 or more columns */
/* IF stars.jpg was double in width then "margin-left: -98px;" will hide first column */
.stars1{
  margin-top: 0px;
}
/* Reference Image: 143px height divide by 6 star rows = 23.833333px per row. */
/* Hence, star.jpg image is not perfect and it's rounded to 24px per row instead */
/* Since 1 star row is 24px high, classname .stars2 will offset that to get to next row. */
/* That said, the value needs to be negitive since entire image is shifted up (offset). */
/* The class .starsCSS will now show the second star row! */
.stars2{
  margin-top: -24px; /* Shift up star row 1 */
}
.stars3{
  margin-top: -48px; /* Shift up star rows 1 and 2 */
}
.stars4{
  margin-top: -72px; /* Shift 3 rows of stars out of view (24 x 3 = 72 )  */
}
.stars5{
  margin-top: -96px; /* Shift 4 rows of stars out of view */
}
.stars6{
  margin-top: -120px; /* Shift 5 rows of stars out of view */
}

Answer 3

You can change the CSS of a specific tag using the style attribute:

<span class="stars" style="width: 80px"></span>

The .stars class could look like this:

background: url(stars.png) repeat-x;

Where stars.png is a 20px wide image, then repeated on the x dimension 4 times (80px) for 4 stars. 5 stars would be 100px width, etc.

---

The general idea above is realized in this jsFiddle Demo, complete with tutorial comments.

Reference:

jsFiddle Demo featuring Repeatable Star Rating CSS Demo

Screenshot: