How do I edit the CSS of one blog post but not others to have a 5 Star Rating System?

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: IC 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

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:

Answer 3

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 */
}