Neat Programming #2

Changing the colour of individual parts of a line or paragraph

If you want to change the colour of a piece of writing on a page, if this is a full paragraph, inside the <p></p> tags, or a heading style, inside the <h1></h1> tags, you would normally have to live with the fact that it all changes together. In HTML5 we now have a new tag <span>. This will allow us to put in different formatting in the middle of a paragraph or heading line.

If you are creating your website correctly, you should be putting all the formatting into a 'content style sheet', however, the concept is the same whether you put the style information into each HTML page or into a separate style sheet.

I will do this all in one HTML document, you can split this up into a CSS and the webpage.

Type the following into your text editor.

<style type="text/css">

.fontcolour {
color:#ff00ff;
}

</style>

<head>
<title>My font colour test</title>
</head>

<body>
<h1><span class="fontcolour">T</span>his is a test</h1>
</body>

Save this and run it in a browser. You should now have the line 'This is a test' written with the first letter in a different colour, like this example.

You can, of course add in other formatting into the style to make a myriad of different effects.

More content and detail is being added to this site all the time. Check back regularly to see what's new.



Some pictures while you wait


Bury Knowle Park, Headington, Oxford after a severe frost. A robin in a tree after a severe frost. A frosty field. Bury Knowle Park, Headington, Oxford after a severe frost. A blackbird in a tree after a severe frost. A fish nearly frozen.
Pictures taken on the 12th of December 2012, after a severe overnight frost hit most of England.

So, enjoy this trip through my site and please feel free to comment on any part. I may not take any notice, but then, it is my site.

  • All pictures displayed on this site were taken by or are fully owned by me.
  • This site has been upgraded to use HTML5 and should be backward compatible with older browsers. if you think any pages are not displaying correctly contact the site author here.
  • This site uses Java script to maintain compatibility. To view this site correctly, you should allow scripts and ActiveX controls to run.
  • If you don't feel easy or competent changing the security settings and you are willing to trust that my site is not going to harm your computer, then add my site to your trusted sites zone. To stop the Script and ActiveX controls prompt from appearing everytime you access this page, you should also tick the option to 'Allow active content to run in files on My Computer' in the security section of the security tab of the Internet Options dialog box. This can be accessed from the tools menu.
  • Although I have upgraded this site to support the new HTML5, I am still a learner myself. If you have any tips you would like to share with me and the visitors to this site, I will gladly add your contributions to the contributions pages.
  • This site is ranked on URLmetrics

copyright 2012-2013 Stephen Edgington.