How to handle sizes and strike through text in a div using css

Rowby Goren
Rowby Goren used Ask the Experts™
on
Hello Everybody.

I'd like to know how to tag and style with css and classes etc that includes strike through text, color changes and font size change -- via css stylesheet for an html page.

Here's the graphic that my client sent me -- and now I need to use css to style it via a style sheet, compatible with modern browsers.  See how the bundle price is larger than the other font sizes.  
I assume this all needs to be put into an overall div with perhaps sub divs within it.

Looking foward to your solution-- I can fine-tune the sizes once I get your css framework.

Thanks
Rowby
Need to do this in regular text (not a graphic) using css in a style sheet
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,

I recommend you to use Bootstrap for your CSS as it will resize your page to the width to any device.

You can use del tag
<del>$178</del> 

Open in new window

it equal to

del {
  text-decoration: line-through;
}

Open in new window


Here is doc and examples:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del
and for ins element
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins

To manage font style and color
you just need to create CSS class inside your external css file

.promo {
  font-size: 20px;
  color: red;
}
.price {
  font-size: 15px;
  color: green;
}

Open in new window




then call it in you code
<span class="promo">$178</span>
<span class="price"><del>$199</del></span>

Open in new window


See a live example
https://jsfiddle.net/lenamtl/mzobt20h/

To get great inspiration you can check https://themeforest.net/category/ecommerce

Author

Commented:
Thanks, lenamtl

Looks good.  I will see client tomorrow and finish up and assuming they are ok with it I will award points weds.

Rowby

Author

Commented:
Thanks lenamtl!

Worked great!

Rowby

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial