daily pastebin goal
23%
SHARE
TWEET

Basic HTML

Kpierce578 Feb 17th, 2019 68 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. How to make text Bold
  2. <b>Your Text Goes Here</b>
  3.  
  4. How to Italicize text
  5. <i>Your Text Goes Here</i>
  6.  
  7. Underlining Text
  8. <a style="text-decoration:underline;">Your Text Goes Here</a> <p style="text-decoration:underline;">Your Text Goes Here</p>
  9.  
  10. Over-lining Text Text
  11. <a style="text-decoration:overline;">Your Text Goes Here</a> <p style="text-decoration:overline;">Your Text Goes Here</p>
  12.  
  13. Striking Through Text
  14. <a style="text-decoration:line-through;">Your Text Goes Here</a> <p style="text-decoration:line-through;">Your Text Goes Here</p>
  15.  
  16. Changing Text Color
  17. <a style="color:#HEXCODE;">Your Text Goes Here</a> <p style="color:#HEXCODE;">Your Text Goes Here</p>
  18.  
  19. Adding Background Color to Text
  20. <a style="background-color:#HEXCODE;">Your Text Goes Here</a> <p style="background-color:#HEXCODE;">Your Text Goes Here</p>
  21.  
  22. Adding Background Image to Text
  23. <a style="background-image:url(IMAGEURL);">Your Text Goes Here</a> <p style="background-image:url(IMAGEURL);">Your Text Goes Here</p>
  24.  
  25. Adding a Border Around Text
  26. <a style="border:SIZEpx STYLE #HEXCODE;">Your Text Goes Here</a> <p style="border:SIZEpx STYLE #HEXCODE;">Your Text Goes Here</p>
  27.  
  28. Examples of possible border styles include dotted, dashed, solid, double, ridge, groove, inset, and outset.
  29.  
  30. You can also modify borders individually by using border-left, border-right, border-top and border-bottom instead of border.
  31.  
  32. Changing Text Alignment
  33. <p style="text-align:ALIGNMENT;">Your Text Goes Here</p>
  34. (left, right, or center)
  35.  
  36. Changing Paragraph Width
  37. <p style="width:SIZEpx;">Your Text Goes Here</p>
  38.  
  39. Centering Paragraphs
  40. <p style="margin:auto;">Your Text Goes Here'</p>
  41.  
  42. Changing Text Font
  43. <a style="font-family:FONTNAME;">Your Text Goes Here</a> <p style="font-family:FONTNAME;">Your Text Goes Here</p>
  44. (Only basic, web-friendly fonts will work)
  45.  
  46. Changing Text Size
  47. <a style="font-size:SIZEpx;">Your Text Goes Here</a> <p style="font-size:SIZEpx;">Your Text Goes Here</p>
  48.  
  49. Combining Codes
  50. To combine codes, you simply need to combine the parts within the quotation marks of the style code (except for bold and italics, which need to be placed directly around the text you want to be bold or italicized).
  51.  
  52. For an example, we want to make text that is pure red, in the verdana font, and bold. To do this, we will take the individual parts
  53.  
  54. font-family:verdana;
  55.  
  56. and
  57.  
  58. color:#FF0000;
  59.  
  60. and put them side by side inside the quotation marks of the style code. To make the text bold, we will put the open bold tag <b> right before what we want our text to say and the close bold tag </b> right after our text but before the </a>
  61.  
  62.  
  63. This gives us: <a style="font-family:verdana;color:#FF0000;"> <b>Your Text Goes Here</b> </a> <p style="font-family:verdana;color:#FF0000;"> <b>Your Text Goes Here</b> </p>
  64.  
  65.  
  66. Please note that if you are changing the alignment of the text as well as other attributes of the text, you will need to use the <p style=""> </p> code rather than the <a style=""> </a> code, as using the latter will cause the alignment to not show up. If you also wanted to center the text above, you would need to change the code to the following:
  67.  
  68.  
  69. <p style="text-align:center;font-family:verdana;color:#FF0000;"><b>Your Text Goes Here</b></p>
  70.  
  71. Links and Images
  72. How to post a link
  73. <a href="Link URL Goes Here">What you want the link to say goes here</a>
  74.  
  75. How to post an image
  76. <img src="Image URL Goes Here">
  77.  
  78. How to resize an image
  79. <img src="Image URL Goes Here" width="FIRSTNUMBER" height="SECONDNUMBER">
  80.  
  81. How to add mouse-over text to an image
  82. <img src="Image URL Goes Here" title="Mouseover text goes here">
  83.  
  84. Mouse-over text will appear when someone viewing your image hovers their cursor over it.
  85.  
  86. How to post an image that links to a page
  87. <a href="Link URL Goes Here"><img src="Image URL Goes Here"></a>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top