code tricks for more post freedom

by - 4/25/2015 07:46:00 am

Computer code is fascinating! I often wished I knew PHP and Javascript, which is essential to build interactive and fully-functional websites. *sigh*. But I will tell you some tips using my limited high school knowledge of HTML and CSS, which are the languages to basic web structure and design!

There are multiple ways to do this, but I'm going to teach you one way that I find is easiest to understand.


We could do a custom size!

Or...

this custom colour text thing using colours that can't be found in the standard colour kit.

Or even a custom highlighter!


Step 1: Click the HTML button next to Compose.

Step 2: If you want to edit your text, start by finding the text your going to edit. Then add <span> to the front of it, and </span> to the end. For example:

If "Let's learn some HTML and CSS!" is the text you want to edit, you'd do this


Step 3: After the word 'span' at the start, add the following inside the brackets:

style="font-size: 12px"  if you want to change the size of the text
style="color: #FF6347"  if you want to change the colour of the text (spelt without a u)
style="background-color: #FF6347"  if you want to change the background colour of the text (spelt without a u)

...make sure you leave a space after 'span'!

Like so:


Adding that code will result in: Let's learn some HTML and CSS! This colour is also known as tomato. Pretty!

This is basically all you need to do. In style="font-size: 12px", change the 12 to any number to get the size you want (px means pixels). For the other two, change the values after the to get your desired colour. Colours can be picked at www.colorpicker.com. Colours can also be in RGB values, or as words (e.g. you could do style="color: aqua"). Colour names can be found here: www.w3schools.com/cssref/css_colornames.asp


(optional) Step 4:  You can do multiple things to your text (such as highlighting AND changing the text colour) by adding a semicolon after the rule inside the quotation marks. Let me show you:


See how I've added a semicolon after background-color: deeppink, then proceeded to write color: aquamarine? It's almost like separating items in a list in English grammar!

Let's learn some HTML and CSS!

Ta da! And you're done!

Try it out next time you do a post, or make a Text or HTML/Javascript widget and practise your new coding skills!

You May Also Like

11 comments

  1. I don't usually use any colours outside of black for my posts (unless it's a link), but knowing how to customise the text size more is very helpful! Thanks :)

    ReplyDelete
  2. So so helpful. Thank you for this. <3

    ReplyDelete
  3. Actually, I believe text size can be customised directly from the toolbar XD Still, a little HTML is really useful, especially when working in the text gadgets that don't have that toolbar! I prefer to use heading tags myself, so that I can change it with the design at any time (and less thinking for every heading XD).

    Hope to see more code tricks like this -- I'm learning coding on the fly, so hearing someone else's opinion is great!

    ReplyDelete
    Replies
    1. Text size is avaliable but it's very limited; there's only a couple of sizes (I think maybe 5?) avaliable. :) It's definitely useful in text gadgets!

      I'm glad you found it helpful, good luck with your coding! I'm currently trying to learn Javascript but it's nothing like HTML or CSS so I kind of suck atm. :')

      Delete
  4. Great post! Over my blogging years, I've learned the basics of HTML, but I'm still so inexperienced with it. I really enjoyed seeing these tricks.

    Also, I just wanted to say that this is my first time visiting your blog and I love your design! Your blog button is so pretty!

    ReplyDelete
    Replies
    1. I'm pretty inexperienced too. Glad to know you liked the post!

      And thank you. For a second I was confused because I just changed the design and removed the blog button, but I suppose you mean my previous design. :)

      Delete
  5. um, life saver alert! Jo this is brilliant! You should consider doing more of these:)

    ReplyDelete
  6. This is epic. I SUCK at all things html. Like really really badly...but I'm tempted to see if this works on wordpress. xD

    ReplyDelete

Make sure you want to publish your comment! The delete option isn't working for some reason--will be fixed soon.