how to put color on a webpage

change the color

all that is needed to change the background color of a webpage is to add the bgcolor attribute to the body tag in this example the bgcolor is set to pale blue (hex #0099FF), but feel free to pick a different color from the paintbox (opens in a new window)
for a list of named colors like red/blue click here (opens in a new window)
<HTML> <HEAD> <TITLE>my first web page</TITLE> </HEAD> <BODY bgcolor="#0099FF"> <script type="text/javascript" src="https://i5.plug.it/cmp/iub_conf_virgilio.js"></script> <script type="text/javascript" src="//cdn.iubenda.com/cs/tcf/stub-v2.js"></script> <script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script> <script src='https://i.plug.it/cmp/qciol.min.js' async="true"></script>  This is my very first webpage, aint i clever?  <script> if(window.location === window.parent.location){ // Static Queue Snippet ! function(t, n) { t[n] = t[n] || { nlsQ: function(e, o, c, r, s, i) { return s = t.document, r = s.createElement("script"), r.async = 1, r.src = ("http:" === t.location.protocol ? "http:" : "https:") + "//cdn-gl.imrworldwide.com/conf/" + e + ".js#name=" + o + "&ns=" + n, i = s.getElementsByTagName("script")[0], i.parentNode.insertBefore(r, i), t[n][o] = t[n][o] || { g: c || {}, ggPM: function(e, c, r, s, i) { (t[n][o].q = t[n][o].q || []).push([e, c, r, s, i]) } }, t[n][o]}}} (window, "NOLBUNDLE"); // SDK Initialization var nSdkInstance = NOLBUNDLE.nlsQ("PB5B22873-917B-4051-B606-5FC6EBC80FFD", "nlsnInstance"); // Content Metadata var nielsenMetadata = { type: 'static', assetid: ( location.hostname + location.pathname + location.search ).replace( /([^\w]|_)+/g, '-' ).replace( /^-+|-+$/g, '' ) || 'homepage', section: 'VirgilioCommunity_BRW' }; // Event 'staticstart' Call nSdkInstance.ggPM("staticstart", nielsenMetadata); } </script> <script defer="defer" type="text/javascript" src="https://i.plug.it/iplug/js/lib/mtx/xoom/injection.js"></script>  <script src="//i.plug.it/iplug/js/lib/iol/analytics/data/xoomer-virgilio-it/tracking_xoomer-virgilio-it.min.js"></script> <script src="//i.plug.it/iplug/js/lib/iol/analytics/engine/IOL.Analytics.Tracking.min.js"></script> <script type="text/javascript">var iat = new IOL.Analytics.Tracking.Engine();iat.send();</script> <noscript> <img src="//italiaonline01.wt-eu02.net/215973748390194/wt.pl?p=315,virgilio.web.community.xoom.noscript&cg1=virgilio&cg2=web&cg3=community&cg4=xoom&cg5=noscript&cg7=virgilio.web.community.xoom.noscript" height="1" width="1" alt=""> </noscript>   <script async src="https://www.googletagmanager.com/gtag/js?id=G-XMSS6LZ541"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XMSS6LZ541'); </script> </body> </HTML>

adding bgcolor to the body tag
the bgcolor can be added as a hex number
<body bgcolor=#0099FF>
or as a named color
<body bgcolor="blue">

change the text color

all that is needed to change the text color of a webpage is to add the text attribute to the body tag in this example the text is set to yellow (hex #FFFF00)
pick a different color from the paintbox (opens in a new window)

<HTML>
<HEAD>
<TITLE>my first web page</TITLE>
</HEAD>
<BODY bgcolor="#0099FF" text="#FFFF00"><!-- begin iubenda /common.virgilio.it/doc_root/community/cmp/iubenda_xoom_virgilio.html -->
    <script type="text/javascript" src="https://i5.plug.it/cmp/iub_conf_virgilio.js"></script>
    <script type="text/javascript" src="//cdn.iubenda.com/cs/tcf/stub-v2.js"></script>
    <script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>
    <script src='https://i.plug.it/cmp/qciol.min.js' async="true"></script>
<!-- end iubenda /common.virgilio.it/doc_root/community/cmp/iubenda_xoom_virgilio.html -->

This is my very first webpage, aint i clever?

<!-- BEGIN /community/tracking/nielsen-dcr-static-browser-sdk-virgilio-and-more-for-xoom.html -->
<script>
if(window.location === window.parent.location){    
    // Static Queue Snippet
    ! function(t, n) {
        t[n] = t[n] || {
            nlsQ: function(e, o, c, r, s, i) {
                return s = t.document, r = s.createElement("script"), r.async = 1, r.src =
                    ("http:" === t.location.protocol ? "http:" : "https:") + "//cdn-gl.imrworldwide.com/conf/" +
                    e + ".js#name=" + o + "&ns=" + n, i = s.getElementsByTagName("script")[0],
                    i.parentNode.insertBefore(r, i), t[n][o] = t[n][o] || {
                        g: c || {},
                        ggPM: function(e, c, r, s, i) {
                            (t[n][o].q = t[n][o].q || []).push([e, c, r, s, i])
                        }
                    }, t[n][o]}}}
    (window, "NOLBUNDLE");

    // SDK Initialization
    var nSdkInstance = NOLBUNDLE.nlsQ("PB5B22873-917B-4051-B606-5FC6EBC80FFD", "nlsnInstance");
    // Content Metadata 
    var nielsenMetadata = {
        type: 'static', 
        assetid: ( location.hostname + location.pathname + location.search ).replace( /([^\w]|_)+/g, '-' ).replace( /^-+|-+$/g, '' ) || 'homepage',
        section: 'VirgilioCommunity_BRW' 
    }; 

  // Event 'staticstart' Call
  nSdkInstance.ggPM("staticstart", nielsenMetadata);    
}
</script>

<script defer="defer" type="text/javascript" src="https://i.plug.it/iplug/js/lib/mtx/xoom/injection.js"></script>

<!-- IOL Analytics -->
<script src="//i.plug.it/iplug/js/lib/iol/analytics/data/xoomer-virgilio-it/tracking_xoomer-virgilio-it.min.js"></script>
<script src="//i.plug.it/iplug/js/lib/iol/analytics/engine/IOL.Analytics.Tracking.min.js"></script>
<script type="text/javascript">var iat = new IOL.Analytics.Tracking.Engine();iat.send();</script>
<noscript>
    <img src="//italiaonline01.wt-eu02.net/215973748390194/wt.pl?p=315,virgilio.web.community.xoom.noscript&cg1=virgilio&cg2=web&cg3=community&cg4=xoom&cg5=noscript&cg7=virgilio.web.community.xoom.noscript" height="1" width="1" alt="">
</noscript>
<!-- /IOL Analytics -->

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XMSS6LZ541"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XMSS6LZ541');
</script>






<!-- END /community/tracking/nielsen-dcr-static-browser-sdk-virgilio-and-more-for-xoom.html --></body>
</HTML>

add a background image

it's just as simple to add a background image to the webpage all that needs to be done is add the background attribute to the body tag
<body bgcolor=#0099FF text="#FFFF00" background="bluetile.jpg">
you can save the image to disk if you want to see it tiled on your webpage
just rightclick on it and select 'save image as' from the popup

This is the blue tile, the bgcolor attribute is also included in the body tag. It is essential that the background color of the page is similar in color to the background image, because some users surf with images turned off.
If we ommited the bgcolor attribute users with images turned off would find reading yellow text on a default white background a dire strain

this is yellow text on the blue background

this is yellow text on the blue background image

« back | html tutorial | next »
//if the user is using IE 4+ if (document.all) document.write('click here to bookmark this site!') else document.write('press Ctrl and D to bookmark this page')
home
html tutorial css tutorial javascript webmaster articles link exchange

html tutorial

make money
from your website