How to Make Your Posts More Colorful

Question

This thread is in response to all of the people who have asked how to add color to our posts.

This is not meant to be an exhaustive study of the use of HTML markup code but merely a brief tutorial to allow everyone to be able to use some of the more useful features in their posts. If you are interested in a more comprehensive understanding of HTML and CSS, I would recommend this website: W3Schools

---

To Add Color

1). Copy the following markup

<a style = "color:blue;">Text Goes Here</a>

2). Insert your desired text in the space that reads "text goes here"

3). If you want to use a different color, all of the primary colors will work in place of "blue."

---

Strikethrough

1). Insert either the "s" or "strike" opening and closing tags around the desired text

<s>This Text Will be Strikethrough</s>

or

<strike>This Text Will be Strikethrough</strike>

---

Font Size

1). Use the following code to make the font size a percentage of the original font

<a style = "font-size:200%;">Double Sized</a>

---

Much of this no longer works on SD in 2015.

wonderful post, thanks Izan:) - 00494d19, Oct 26, 2009

Wow! What an awesome post! I'll make sure to link to it in the reference section. You're the best! - Paralee, Oct 27, 2009

I L-O-V-E this post! I've been feeling like a total digi-betic! - chicasabrosa, Mar 19, 2010

updated the strikethrough reference - Izanoni1, Jul 10, 2010

Great info!Thanks! - Jraider, May 17, 2011

For instruction on putting in a picture see these links http://www.spanishdict.com/answers/226052/lets-practice-putting-in-a-picture-vamos-a-practicar-a-poner-en-una-imagen - sanlee, Jan 6, 2015

http://www.spanishdict.com/answers/270032/how-to-post-an-picture-in-spanish-dict-for-dummies-como-poner-una-imagen-en-su-respuesta-para-dummies- - sanlee, Jan 6, 2015

Some of the html code is being stripped out by the Spanish Dict program that is used to process what we type in the answer box before it is shown as a post. Many of the tips in this article no longer work. - DilKen, May 28, 2015

Answer 1

Attack of the post!

This is with top relative positioning of -185 pixels. - Brett1971, Dec 15, 2009

Hmm. You overwrite my edit button. I can't look at the code. - 0074b507, Dec 16, 2009

It was an experiment. I'll move it back down. - Brett1971, Dec 16, 2009

Answer 2

Very useful thread, and this post is merely to have it added to "My Answers."

Well that is one way of making it accessible.:) - Yeser007, Jun 19, 2011

Good move. Great idea. - JoyceM, Aug 3, 2011

Answer 3

but the main thing I found is that if you play with it here on this site, and don't get it right, it just posts the code and I really want to practice at a place where I can see the results without using this site?

Have you visited www.w3schools.com? When they teach you html, they provide an interactive editor where you can experiment by modifying the code in real time.

You can also download a free HTML editor (I use PageBreeze) and practice your HTML in it. You can switch back and form from Code view to browser view so you can see the effect of your code. Also these editors automatically correct small omissions in code, etc.

Be forewarned, though, how things work in other editors is no guarantee of how they will appear in this site's editor. I just tried creating a table in a thread that used background images in the table's cells. I looked perfect when looking at it in this editor's preview window, but when I actually posted it, it stripped out the background images and wouldn't accept html tags like the one for table headers.

I have no idea why this preview window is not wysiwyg. You can do lots of HTML coding that works in the preview window (a browser window?) that will not post in the server's actual page display.

I believe we had another thread where we were trying to post one of our lesson videos in a reply. It runs fine in the preview screen, but when you actually try to post it, the dispolayed reply will not accept player codes.

The links that you see here are just hyperlinks. You could link to external documents, like style sheets, but it would just display the document and not implement the formatting. I don't think that you can run scripts (like javascript) in these replies.

Great answer Q. As usual. - Izanoni1, Apr 24, 2010

Yep, that's my favorite reference site, as well. They also give you the ability to test each of the codes right there! - territurtle, Jun 19, 2011

Answer 4

Thanks Izanoni,

I am going to study this for awhile and see if I can understand all that has been posted. I am sooo... new at this that it may take me awhile. I went to the css site and it seemed to be fairly simple but the main thing I found is that if you play with it here on this site, and don't get it right, it just posts the code and I really want to practice at a place where I can see the results without using this site? Any ideas?

Also, if I learn to do some of this, can you do an html sheet and save the sheet and then link it to this site? If yes, how? I think they called it an external sheet.

I see on most of the posts a little button that says "link" and I assume the link is for the style sheets in html code or I could be way off base here. Also I received a private message that said to use the edit button to change something in my post but I do not see an edit button so how do you do that?

Sorry I am asking so many questions which I am sure have been asked before but I really would like to understand what this is all about. Oh yes, another thing, is there a difference between html and css?

Gracias!

Hi foxluv...no the link is not for style sheets. I don't believe that it is possible to link to any external style sheets. Also if you are interested in testing out code, all you need is microsoft wordpad or notepad (not MS-Word). - Izanoni1, Apr 24, 2010

You can save these with a .html extension (it helps to save a copy as .txt as well). You can preview your file by opening it with any one of your preferred browsers. You can also download a program called NVU that is available for free at CNET.com. - Izanoni1, Apr 24, 2010

It takes a little practice, but is worthwhile if you are interested in pursuing html as even a mild hobby. I would also follow Qfreed's advice and take advantage of the interactive editor at the w3school website. There is a link posted in the original - Izanoni1, Apr 24, 2010

post at the top of the page, or you can just google it w3schools.com - Izanoni1, Apr 24, 2010

Answer 5

I just wanted to add a link to Webdunce's thread that describes the use of the <pre> tag

Putting an indent of 4 or more spaces activates the pre tag

Nice idea. - 0074b507, Mar 3, 2010

Answer 6

Text rotated (FFox only). Text can be highlighted.

-moz-transform: rotate(30deg); - Brett1971, Dec 16, 2009

Answer 7

Animated background and crosshair cursor. Height tag used to extend image w/out need for more text. Text can extend over the image itself.

These are all bacgrounds around text. I was looking for something like a frame of a certain size with a colored background. This editor doesn't like frames. - 0074b507, Dec 16, 2009

I had thought of using the breaks as you mentioned. May have to go with that. - 0074b507, Dec 16, 2009

It didn't take. Shows up in the preview but not the post. I used "height: ___px" and that stuck - Brett1971, Dec 16, 2009

Credit to Izanoni1 for devising the pg approach. Maybe he can pm it to you - Brett1971, Dec 16, 2009

His approach shown at the top of this page places a solid hex color in the available reply space. It's not an image. Isn't that what you wanted? - Brett1971, Dec 16, 2009

I reduced his text and the blue box shrank. I want a blue box the size of the reply even if there is no text. - 0074b507, Dec 16, 2009

Answer 8

Thanks, Izanoni, this isn't as complicated as I imagined it was!

Answer 9

<html> <head> <style type="text/css"> body {background-image:url ('http://images.blogskins.com/skin_images/254/491/images/paper.gif');} </style> </head>

Answer 10

Help! ---- just when I had thought all is well I have mastered how to edit, use the Tilde and now I have these ancient Hebrew texts to contend with .Ser and estar will be a breeze after thisstrong text**

Answer 11

very cool info

Answer 12

I wondered how to do the strike through and now I see how its it's done.

Answer 13

How do you add flavor?

salt and pepper and cook long enough so that the onions just start to carmelize - Izanoni1, Oct 26, 2009

...Lavish with a few home grown herbs and spices - Izanoni1, Oct 26, 2009

...just a hint of brandy - Izanoni1, Oct 26, 2009

...top it off with a scoop of ice cream - Izanoni1, Oct 26, 2009

...let it marinate in the refrigerator overnight - Izanoni1, Oct 26, 2009

...that's about all I've got - Izanoni1, Oct 26, 2009

... but remember to take the elephant out of the fridge first ;))) - Issabela, Oct 26, 2009

jejejjjejeje, wonderful, issa - 00494d19, Oct 26, 2009

Yes, adding flavor would be nice for my El Paletero game, or at least a scratch-n-sniff. - sagiia, Aug 9, 2010

Answer 14

a style = "color:green;">Gracias

style command are now stripped out upon saving

Answer 15

I'm all thumbs because I tried to use a different font... and failed.

I only have thumbs and the keys on my keyboard keep on shifting position. - ian-hill, Oct 26, 2009