KrishnaVandanu

Web X-Ray Goggles

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><h2><br />Getting Started</h2><br />If you've never used the <a class="zem_slink" href="http://en.wikipedia.org/wiki/Goggles" rel="wikipedia nofollow" target="_blank" title="Goggles">goggles</a> before, you should start out with the <a href="http://toolness.github.com/hackasaurus-parable/">Parable of The Hackasaurus</a>.<br /><br /><h2><br />Reference</h2><br />Here's the bookmarklet: <b><span style="color: blue;"><span style="background-color: #f4cccc;"><a href="javascript:(function(){var%20script=document.createElement('script');script.src='http://webxray.hackasaurus.org/webxray.js';script.className='webxray';document.head.appendChild(script);})();" id="bookmarklet-link">Web X-Ray Goggles</a>.</span></span></b><br /><br /><br /><br /><br /><br /><br /><br />Note that if you're on a <a class="zem_slink" href="http://en.wikipedia.org/wiki/Mobile_browser" rel="wikipedia nofollow" target="_blank" title="Mobile browser">mobile browser</a>, you may need to manually create a bookmark to the following <a class="zem_slink" href="http://en.wikipedia.org/wiki/Uniform_resource_locator" rel="wikipedia nofollow" target="_blank" title="Uniform resource locator">URL</a>:<br /><br /><br /><br /><textarea style="height: 47px; width: 100%;">javascript:(function(){var<br /> <br />script=document.createElement('script');script.src='http://webxray.hackasaurus.org/webxray.js';script.className='webxray';document.head.appendChild(script);})();

Once the goggles are activated, you can press H for help.

Troubleshooting

If the goggles don't seem to be working, try running the test suite. Then report a bug and be sure to mention whether the test suite failed.

Web X-Ray Goggles

Getting StartedIf you've never used the goggles before, you should start out with the Parable of The Hackasaurus.ReferenceHere's the bookmarklet: Web X-Ray Goggles.Note that if you're on a mobile brow…

Web X-Ray Goggles

<div dir="ltr" style="text-align: left;" trbidi="on"><h2>Getting Started</h2>If you've never used the <a class="zem_slink" href="http://en.wikipedia.org/wiki/Goggles" rel="wikipedia nofollow" target="_blank" title="Goggles">goggles</a> before, you should start out with the <a href="http://toolness.github.com/hackasaurus-parable/">Parable of The Hackasaurus</a>.<br /><h2>Reference</h2>Here's the bookmarklet: <b><span style="color: blue;"><span style="background-color: #f4cccc;"><a href="javascript:(function(){var%20script=document.createElement('script');script.src='http://webxray.hackasaurus.org/webxray.js';script.className='webxray';document.head.appendChild(script);})();" id="bookmarklet-link">Web X-Ray Goggles</a>.</span></span></b><br /><br /><br /><br />Note that if you're on a <a class="zem_slink" href="http://en.wikipedia.org/wiki/Mobile_browser" rel="wikipedia nofollow" target="_blank" title="Mobile browser">mobile browser</a>, you may need to manually create a bookmark to the following <a class="zem_slink" href="http://en.wikipedia.org/wiki/Uniform_resource_locator" rel="wikipedia nofollow" target="_blank" title="Uniform resource locator">URL</a>:<br /><br /><textarea style="height: 47px; width: 100%;">javascript:(function(){var   script=document.createElement('script');script.src='http://webxray.hackasaurus.org/webxray.js';script.className='webxray';document.head.appendChild(script);})();

Once the goggles are activated, you can press H for help.

Troubleshooting

If the goggles don't seem to be working, try running the test suite. Then report a bug and be sure to mention whether the test suite failed.

Web X-Ray Goggles

HB Hex Color Code Generator

…

14 Mar 2013

HTML Color Picke

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><br /><link href="http://www.htmlcodes.me/color/color_picker/css/screen.css" rel="stylesheet" type="text/css"></link> <br /><script src="http://www.htmlcodes.me/color/color_picker/js/ddcolorposter.js" type="text/javascript"></script> <br /><script src="http://www.htmlcodes.me/color/color_picker/js/YAHOO.js" type="text/javascript"></script> <br /><script src="http://www.htmlcodes.me/color/color_picker/js/log.js" type="text/javascript2"></script> <br /><script src="http://www.htmlcodes.me/color/color_picker/js/color.js" type="text/javascript"></script> <br /> <br /><script src="http://www.htmlcodes.me/color/color_picker/js/event.js" type="text/javascript"></script> <br /> <br /><script src="http://www.htmlcodes.me/color/color_picker/js/dom.js" type="text/javascript"></script> <br /><script src="http://www.htmlcodes.me/color/color_picker/js/animation.js" type="text/javascript"></script> <br /><script src="http://www.htmlcodes.me/color/color_picker/js/dragdrop.js" type="text/javascript"></script> <br /> <br /><script src="http://www.htmlcodes.me/color/color_picker/js/slider.js" type="text/javascript"></script> <br /><script type="text/javascript"> <br /> <br /> var hue;<br /> var picker;<br /> //var gLogger;<br /> var dd1, dd2;<br /> var r, g, b;<br /> <br /> function init() {<br />  if (typeof(ygLogger) != "undefined")<br />   ygLogger.init(document.getElementById("logDiv"));<br />  pickerInit();<br />  ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"<br />  ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"<br />  ddcolorposter.fillcolorbox("colorfield3", "colorbox3") //PREFILL "colorbox1" with hex value from "colorfield1"<br />    }<br /> <br />    // Picker ---------------------------------------------------------<br /> <br />    function pickerInit() {<br />  hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);<br />  hue.onChange = function(newVal) { hueUpdate(newVal); };<br /> <br />  picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector",<br />    0, 180, 0, 180);<br />  picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };<br /> <br />  hueUpdate();<br /> <br />  dd1 = new YAHOO.util.DD("pickerPanel");<br />  dd1.setHandleElId("pickerHandle");<br />  dd1.endDrag = function(e) {<br />   // picker.thumb.resetConstraints();<br />   // hue.thumb.resetConstraints();<br />        };<br /> }<br /> <br /> executeonload(init);<br /> <br /> function pickerUpdate(newX, newY) {<br />  pickerSwatchUpdate();<br /> }<br /> <br /> <br /> function hueUpdate(newVal) {<br /> <br />  var h = (180 - hue.getValue()) / 180;<br />  if (h == 1) { h = 0; }<br /> <br />  var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);<br /> <br />  document.getElementById("pickerDiv").style.backgroundColor =<br />   "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";<br /> <br />  pickerSwatchUpdate();<br /> }<br /> <br /> function pickerSwatchUpdate() {<br />  var h = (180 - hue.getValue());<br />  if (h == 180) { h = 0; }<br />  document.getElementById("pickerhval").value = (h*2);<br /> <br />  h = h / 180;<br /> <br />  var s = picker.getXValue() / 180;<br />  document.getElementById("pickersval").value = Math.round(s * 100);<br /> <br />  var v = (180 - picker.getYValue()) / 180;<br />  document.getElementById("pickervval").value = Math.round(v * 100);<br /> <br />  var a = YAHOO.util.Color.hsv2rgb( h, s, v );<br /> <br />  document.getElementById("pickerSwatch").style.backgroundColor =<br />   "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";<br /> <br />  document.getElementById("pickerrval").value = a[0];<br />  document.getElementById("pickergval").value = a[1];<br />  document.getElementById("pickerbval").value = a[2];<br />  var hexvalue = document.getElementById("pickerhexval").value =<br />   YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);<br />   ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)<br /> }<br /></script>  <br /><br /><br /><br /><table style="background-color: #ffffcc;"> <br /><tbody><br /><tr> <br /><td style="vertical-align: top;"><div><br /><form><br /><b>Choosing Multiple Colors</b> (optional)<br /><br />Choose/compare up to 3 colors. Click in a field below, then select a color from the color picker... Try it!<br /><br />Color 1: # <input id="colorfield1" onfocus="ddcolorposter.echocolor(this, 'colorbox1')" size="6" type="text" /> <span class="colorbox" id="colorbox1">____</span> <br /><br />Color 2: # <input id="colorfield2" onfocus="ddcolorposter.echocolor(this, 'colorbox2')" size="6" type="text" /> <span class="colorbox" id="colorbox2">____</span><br /><br />Color 3: # <input id="colorfield3" onfocus="ddcolorposter.echocolor(this, 'colorbox3')" size="6" type="text" /> <span class="colorbox" id="colorbox3">____</span> <br /></form><br /></div><br /></td> <br /><td style="vertical-align: top;"><div class="dragPanel" id="pickerPanel" style="left: 1px; top: 1px;"><br /><h4 id="pickerHandle"><br /> </h4><br /><div id="pickerDiv" style="background-color: red;"><br /><img alt="" id="pickerbg" src="http://www.htmlcodes.me/color/color_picker/img/pickerbg.png" /> <br /> <br />              <br /><br /><div id="selector" style="left: 0px; top: 0px;"><br /><img src="http://www.htmlcodes.me/color/color_picker/img/select.gif" /></div><br /></div><br /><div id="hueBg"><br /><div id="hueThumb" style="left: 0px; top: 0px;"><br /><img src="http://www.htmlcodes.me/color/color_picker/img/hline.png" /></div><br /></div><br /><div id="pickervaldiv"><br /><form name="pickerform" onsubmit="return pickerUpdate()"><br /><br /><br />R <input id="pickerrval" maxlength="3" name="pickerrval" size="3" type="text" value="0" /> <br />                H <input id="pickerhval" maxlength="3" name="pickerhval" size="3" type="text" value="0" /> <br />                <br /><br />G <input id="pickergval" maxlength="3" name="pickergval" size="3" type="text" value="0" /> <br />                S <input id="pickersval" maxlength="3" name="pickergsal" size="3" type="text" value="0" /> <br />                <br /><br />B <input id="pickerbval" maxlength="3" name="pickerbval" size="3" type="text" value="0" /> <br /> <br />                V <input id="pickervval" maxlength="3" name="pickervval" size="3" type="text" value="0" /> <br />                <br /><br /><br /><br /># <input id="pickerhexval" maxlength="6" name="pickerhexval" size="6" style="font-size: 18px; font-weight: bold;" type="text" value="0" /> <br />                </form><br /></div><br /><div id="pickerSwatch" style="background-color: white;"><br /></div><br /></div><br /></td> <br /></tr><br /></tbody></table><br /><h2><br /> </h2><br />In HTML, you can specify color using its RGB value (using either hex or RGB notation), or by its color name. <br /><br />The HTML color picker below makes it easy to choose colors for your website. <br /><br />To use the HTML color picker:<br /><br /><ol style="list-style-position: inside;"><br /><li>Use the slider on the right to change the hue.</li><br /><li>Click anywhere in the large square to pick a color.</li><br /><li>Once you're happy with the color, copy the hexadecimal value from the bottom field (the series of 6 digits/letters in <b>bold</b> (for example <b>#FFFFFF</b>).</li><br /></ol><br /><h2><br /> </h2><br /><h2><br />Color Code Examples</h2><br />Here are some quick examples of the code needed to apply color to your HTML documents. More about <a href="http://www.htmlcodes.me/color/html-color-codes.cfm">HTML color codes here</a>.<br /><br /><div style="float: left; margin: 15px; width: 180px;"><br />To specify text color:<br /><br /><textarea class="example" onclick="this.focus();this.select()">color:#ff0000;<br />

To specify background color:

To specify border color:

HTML Color Picke

var hue; var picker; //var gLogger; var dd1, dd2; var r, g, b; function init() { if (typeof(ygLogger) != "undefined") ygLogger.init(document.getElementById("logDiv")); pickerInit(…

HTML Color Picke

<div dir="ltr" style="text-align: left;" trbidi="on">In HTML, you can specify color using its RGB value (using either hex or RGB notation), or by its color name. <br />The HTML color picker below makes it easy to choose colors for your website. <br />To use the HTML color picker:<br /><ol style="list-style-position: inside;"><li>Use the slider on the right to change the hue.</li><li>Click anywhere in the large square to pick a color.</li><li>Once you're happy with the color, copy the hexadecimal value from the bottom field (the series of 6 digits/letters in <b>bold</b> (for example <b>#FFFFFF</b>).</li></ol><link href="http://www.htmlcodes.me/color/color_picker/css/screen.css" rel="stylesheet" type="text/css"></link>  <script src="http://www.htmlcodes.me/color/color_picker/js/ddcolorposter.js" type="text/javascript"></script>  <script src="http://www.htmlcodes.me/color/color_picker/js/YAHOO.js" type="text/javascript"></script>  <script src="http://www.htmlcodes.me/color/color_picker/js/log.js" type="text/javascript2"></script>  <script src="http://www.htmlcodes.me/color/color_picker/js/color.js" type="text/javascript"></script>    <script src="http://www.htmlcodes.me/color/color_picker/js/event.js" type="text/javascript"></script>    <script src="http://www.htmlcodes.me/color/color_picker/js/dom.js" type="text/javascript"></script>  <script src="http://www.htmlcodes.me/color/color_picker/js/animation.js" type="text/javascript"></script>  <script src="http://www.htmlcodes.me/color/color_picker/js/dragdrop.js" type="text/javascript"></script>    <script src="http://www.htmlcodes.me/color/color_picker/js/slider.js" type="text/javascript"></script>  <script type="text/javascript">     var hue;  var picker;  //var gLogger;  var dd1, dd2;  var r, g, b;    function init() {   if (typeof(ygLogger) != "undefined")    ygLogger.init(document.getElementById("logDiv"));   pickerInit();   ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"   ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"   ddcolorposter.fillcolorbox("colorfield3", "colorbox3") //PREFILL "colorbox1" with hex value from "colorfield1"     }       // Picker ---------------------------------------------------------       function pickerInit() {   hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);   hue.onChange = function(newVal) { hueUpdate(newVal); };     picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector",     0, 180, 0, 180);   picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };     hueUpdate();     dd1 = new YAHOO.util.DD("pickerPanel");   dd1.setHandleElId("pickerHandle");   dd1.endDrag = function(e) {    // picker.thumb.resetConstraints();    // hue.thumb.resetConstraints();         };  }    executeonload(init);    function pickerUpdate(newX, newY) {   pickerSwatchUpdate();  }      function hueUpdate(newVal) {     var h = (180 - hue.getValue()) / 180;   if (h == 1) { h = 0; }     var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);     document.getElementById("pickerDiv").style.backgroundColor =    "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";     pickerSwatchUpdate();  }    function pickerSwatchUpdate() {   var h = (180 - hue.getValue());   if (h == 180) { h = 0; }   document.getElementById("pickerhval").value = (h*2);     h = h / 180;     var s = picker.getXValue() / 180;   document.getElementById("pickersval").value = Math.round(s * 100);     var v = (180 - picker.getYValue()) / 180;   document.getElementById("pickervval").value = Math.round(v * 100);     var a = YAHOO.util.Color.hsv2rgb( h, s, v );     document.getElementById("pickerSwatch").style.backgroundColor =    "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";     document.getElementById("pickerrval").value = a[0];   document.getElementById("pickergval").value = a[1];   document.getElementById("pickerbval").value = a[2];   var hexvalue = document.getElementById("pickerhexval").value =    YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);    ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)  } </script>    <br /><table style="background-color: #ffffcc;">  <tbody><tr>  <td style="vertical-align: top;"><div><form><b>Choosing Multiple Colors</b> (optional)<br />Choose/compare up to 3 colors. Click in a field below, then select a color from the color picker... Try it!<br />Color 1: # <input id="colorfield1" onfocus="ddcolorposter.echocolor(this, 'colorbox1')" size="6" type="text" /> <span class="colorbox" id="colorbox1">____</span> <br />Color 2: # <input id="colorfield2" onfocus="ddcolorposter.echocolor(this, 'colorbox2')" size="6" type="text" /> <span class="colorbox" id="colorbox2">____</span><br />Color 3: # <input id="colorfield3" onfocus="ddcolorposter.echocolor(this, 'colorbox3')" size="6" type="text" /> <span class="colorbox" id="colorbox3">____</span>  </form></div></td>  <td style="vertical-align: top;"><div class="dragPanel" id="pickerPanel" style="left: 1px; top: 1px;"><h4 id="pickerHandle"> </h4><div id="pickerDiv" style="background-color: red;"><img alt="" id="pickerbg" src="http://www.htmlcodes.me/color/color_picker/img/pickerbg.png" />                  <br /><div id="selector" style="left: 0px; top: 0px;"><img src="http://www.htmlcodes.me/color/color_picker/img/select.gif" /></div></div><div id="hueBg"><div id="hueThumb" style="left: 0px; top: 0px;"><img src="http://www.htmlcodes.me/color/color_picker/img/hline.png" /></div></div><div id="pickervaldiv"><form name="pickerform" onsubmit="return pickerUpdate()"><br />R <input id="pickerrval" maxlength="3" name="pickerrval" size="3" type="text" value="0" />                  H <input id="pickerhval" maxlength="3" name="pickerhval" size="3" type="text" value="0" />                  <br />G <input id="pickergval" maxlength="3" name="pickergval" size="3" type="text" value="0" />                  S <input id="pickersval" maxlength="3" name="pickergsal" size="3" type="text" value="0" />                  <br />B <input id="pickerbval" maxlength="3" name="pickerbval" size="3" type="text" value="0" />                    V <input id="pickervval" maxlength="3" name="pickervval" size="3" type="text" value="0" />                  <br /><br /># <input id="pickerhexval" maxlength="6" name="pickerhexval" size="6" style="font-size: 18px; font-weight: bold;" type="text" value="0" />                  </form></div><div id="pickerSwatch" style="background-color: white;"></div></div></td>  </tr></tbody></table><h2>Color Code Examples</h2>Here are some quick examples of the code needed to apply color to your HTML documents. More about <a href="http://www.htmlcodes.me/color/html-color-codes.cfm">HTML color codes here</a>.<br /><div style="float: left; margin: 15px; width: 180px;">To specify text color:<br /><textarea class="example" onclick="this.focus();this.select()">color:#ff0000;

To specify background color:

To specify border color:

HTML Color Picke

In HTML, you can specify color using its RGB value (using either hex or RGB notation), or by its color name. The HTML color picker below makes it easy to choose colors for your website. To use the HTM…

What can I do with CSS?

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div class="answer_heading"><br /><h2 class="answer-title"><br /></h2><br /></div><br /><div class="article_content article-content-41954" id="article-content-div"><br />You can change almost any aspect of your blog's appearance just by <br />changing the style sheet in your template. Some of the most common <br />things to do are listed here. For more in-depth tutorials and examples, <br />please see <a href="http://www.w3schools.com/css/css_examples.asp">W3 Schools CSS Examples</a> and <a href="http://www.w3.org/MarkUp/Guide/Style">The W3C Introduction to CSS</a>.<br /><br />Our default templates have all the CSS information towards the top, between <code><style></style></code> tags. You'll see a bunch of lines there that look like this:<br /><br /><img height="71" src="http://storage.googleapis.com/support-kms-prod/SNP_3031217_en_v0" width="409" /><br />The highlighted line shows the style that is applied to every <code><h3></code><br /> tag in your blog. What we're going to describe here are some options <br />for how to style it. Any of the pieces of code below can be inserted <br />between the { curly brackets } in the style sheet.<br /><br /><table class="nice-table wide no-stripes"><br /><tbody><br /><tr><br /><th><b>Code</b></th><br /><th><b>Examples</b></th><br /></tr><br /><tr><br /><td colspan="2"><b>Colors</b></td><br /></tr><br /><tr><br /><td><code>color:blue;</code></td><br /><td><span style="color: blue;">This text is blue.</span></td><br /></tr><br /><tr><br /><td><code>background:yellow;</code></td><br /><td><span style="background: yellow;">This has a yellow background.</span></td><br /></tr><br /><tr><br /><td colspan="2">You can insert the names of many common colors here (e.g. red, green, <br />yellow) or you can use hexadecimal codes for a greater range of colors <br />(e.g. #0033AA). For more information on color, please see the <a href="http://www.webreference.com/html/reference/color/">Web Color Reference</a>.</td><br /></tr><br /><tr><br /><td>colspan="2">Borders</td><br /></tr><br /><tr><br /><td><code>border:solid 1px red;</code></td><br /><td><div style="border: solid 1px red;"><br />This has a red border.</div><br /></td><br /></tr><br /><tr><br /><td colspan="2">A border can be solid, dotted or dashed. The width here is specified in <br />pixels (px). Colors can be names or hexadecimal codes. To only do a <br />border on one side, use border-top, border-bottom, border-right, or <br />border-left.</td><br /></tr><br /><tr><br /><td colspan="2"><b>Fonts</b></td><br /></tr><br /><tr><br /><td><code>font-family:"Times New Roman",Serif;</code></td><br /><td><span style="font-family: 'Times New Roman',Serif;">This is in a serif font.</span></td><br /></tr><br /><tr><br /><td><code>font-family:Verdana,Sans-Serif;</code></td><br /><td><span style="font-family: Verdana,Sans-Serif;">This is in a sans-serif font.</span></td><br /></tr><br /><tr><br /><td colspan="2">You can specify a list of font choices. If the first one isn't available<br /> on your reader's computer, the next will be used, and so on. Indicating<br /> "Serif" will use any available serif font.</td><br /></tr><br /><tr><br /><td><code>font-size:24px;</code></td><br /><td><span style="font-size: 24px;">This text is 24 pixels high.</span></td><br /></tr><br /><tr><br /><td colspan="2">The units of size can be pixels (px), points (pt), inches (in) or percent of the default size (%).</td><br /></tr><br /><tr><br /><td><code>font-weight:bold;</code></td><br /><td><span style="font-weight: bold;">This text is bold.</span></td><br /></tr><br /><tr><br /><td colspan="2">Choices are bold and normal.</td><br /></tr><br /><tr><br /><td><code>text-decoration:underline;</code></td><br /><td><span style="text-decoration: underline;">This text is underlined.</span></td><br /></tr><br /><tr><br /><td colspan="2">The text decoration can be set to none, underline, overline, or <br />line-through. This is most commonly used to remove the underlining on <br />links.</td><br /></tr><br /><tr><br /><td><code>text-align:right;</code></td><br /><td><div style="text-align: right;"><br />This text is right aligned.</div><br /></td><br /></tr><br /><tr><br /><td colspan="2">The alignment can be set to left, right, or justify.</td><br /></tr><br /><tr><br /><td colspan="3"><b>Margins and Padding</b></td><br /></tr><br /><tr><br /><td><code>margin:15px;</code></td><br /><td><div style="border: solid 1px gray; margin: 15px;"><br />This has a 15px margin all around.</div><br /></td><br /></tr><br /><tr><br /><td><code>padding:15px;</code></td><br /><td><div style="border: solid 1px gray; padding: 15px;"><br />This has 15px of padding all around.</div><br /></td><br /></tr><br /><tr><br /><td colspan="2">Margin and padding both specify the amount of space around something. <br />The difference is that a margin is outside the border and padding is <br />inside. (The border here is just for illustration.)<br /><br /><br /><br />As with the border, you can specify one side at time with margin-left, padding-top, etc. You can also set all at once with <code>margin:1px 2px 3px 4px;</code> where the order is top, right, bottom, left.</td><br /></tr><br /></tbody><br /></table><br /><br /><br /><b>Notes:</b><br /><br />You can also use inline styles, if you want to do one-time formatting <br />for a specific piece of text in a post. Here is the format to use:<br /><br /><code><span style="color:red;"></code>This text will be red.<code></span></code></div><br /><div class="last-updated"><br />updated<br />03/08/2013<br /></div><br /><a href="http://support.google.com/blogger/bin/answer.py?hl=en&answer=41954#" name="helpful"></a><br /><br /><div class="answer-features nocontent"><br /><div class="rating-parent unsent slider-parent" id="rating-parent"><br />Rate this article:<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><form class="rating-details"><br /><b><b>What could be better?</b> (Optional)</b><br /><br /><br /><div class="feedback-checkbox-container"><br /><label class="feedback-checkbox"><br /><br />Not related to my issue<br /></label><label class="feedback-checkbox"><br /><br />Incomplete information<br /></label><label class="feedback-checkbox"><br /><br />Too much information<br /></label><label class="feedback-checkbox"><br /><br />Too complicated<br /></label><label class="feedback-checkbox"><br /><br />Incorrect information<br /></label><label class="feedback-checkbox"><br /><br />Unclear information<br /></label></div><br /></form><br /><span class="feedback-message"><br />Feedback recorded. Thanks!<br /></span><br /></div><br /><div class="button plus-one"><br /></div><br /></div><br /><div class="survey-invite-green "><br /><a href="http://support.google.com/blogger/bin/request.py?contact_type=survey&v=1" id="surveyLink" target="_blank"><b>Tell us how we're doing -</b> Answer five short questions about your help center experience</a><br /></div><br /><div class="zemanta-pixie"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=5dd1343c-a7b0-40de-a00f-111db10a7abc" /></div><br /></div><br />

What can I do with CSS?

You can change almost any aspect of your blog's appearance just by changing the style sheet in your template. Some of the most common things to do are listed here. For more in-depth tutorials and exam…

10 Mar 2013

What can I do with CSS?

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="answer_heading"><h2 class="answer-title"></h2></div><div class="article_content article-content-41954" id="article-content-div">You can change almost any aspect of your blog's appearance just by  changing the style sheet in your template. Some of the most common  things to do are listed here. For more in-depth tutorials and examples,  please see <a href="http://www.w3schools.com/css/css_examples.asp">W3 Schools CSS Examples</a> and <a href="http://www.w3.org/MarkUp/Guide/Style">The W3C Introduction to CSS</a>.<br />Our default templates have all the CSS information towards the top, between <code><style></style></code> tags. You'll see a bunch of lines there that look like this:<br /><img height="71" src="http://storage.googleapis.com/support-kms-prod/SNP_3031217_en_v0" width="409" />The highlighted line shows the style that is applied to every <code><h3></code> tag in your blog. What we're going to describe here are some options  for how to style it. Any of the pieces of code below can be inserted  between the { curly brackets } in the style sheet.<br /><table class="nice-table wide no-stripes"><tbody><tr><th><b>Code</b></th><th><b>Examples</b></th></tr><tr><td colspan="2"><b>Colors</b></td></tr><tr><td><code>color:blue;</code></td><td><span style="color: blue;">This text is blue.</span></td></tr><tr><td><code>background:yellow;</code></td><td><span style="background: yellow;">This has a yellow background.</span></td></tr><tr><td colspan="2">You can insert the names of many common colors here (e.g. red, green,  yellow) or you can use hexadecimal codes for a greater range of colors  (e.g. #0033AA). For more information on color, please see the <a href="http://www.webreference.com/html/reference/color/">Web Color Reference</a>.</td></tr><tr><td>colspan="2">Borders</td></tr><tr><td><code>border:solid 1px red;</code></td><td><div style="border: solid 1px red;">This has a red border.</div></td></tr><tr><td colspan="2">A border can be solid, dotted or dashed. The width here is specified in  pixels (px). Colors can be names or hexadecimal codes. To only do a  border on one side, use border-top, border-bottom, border-right, or  border-left.</td></tr><tr><td colspan="2"><b>Fonts</b></td></tr><tr><td><code>font-family:"Times New Roman",Serif;</code></td><td><span style="font-family: 'Times New Roman',Serif;">This is in a serif font.</span></td></tr><tr><td><code>font-family:Verdana,Sans-Serif;</code></td><td><span style="font-family: Verdana,Sans-Serif;">This is in a sans-serif font.</span></td></tr><tr><td colspan="2">You can specify a list of font choices. If the first one isn't available  on your reader's computer, the next will be used, and so on. Indicating  "Serif" will use any available serif font.</td></tr><tr><td><code>font-size:24px;</code></td><td><span style="font-size: 24px;">This text is 24 pixels high.</span></td></tr><tr><td colspan="2">The units of size can be pixels (px), points (pt), inches (in) or percent of the default size (%).</td></tr><tr><td><code>font-weight:bold;</code></td><td><span style="font-weight: bold;">This text is bold.</span></td></tr><tr><td colspan="2">Choices are bold and normal.</td></tr><tr><td><code>text-decoration:underline;</code></td><td><span style="text-decoration: underline;">This text is underlined.</span></td></tr><tr><td colspan="2">The text decoration can be set to none, underline, overline, or  line-through. This is most commonly used to remove the underlining on  links.</td></tr><tr><td><code>text-align:right;</code></td><td><div style="text-align: right;">This text is right aligned.</div></td></tr><tr><td colspan="2">The alignment can be set to left, right, or justify.</td></tr><tr><td colspan="3"><b>Margins and Padding</b></td></tr><tr><td><code>margin:15px;</code></td><td><div style="border: solid 1px gray; margin: 15px;">This has a 15px margin all around.</div></td></tr><tr><td><code>padding:15px;</code></td><td><div style="border: solid 1px gray; padding: 15px;">This has 15px of padding all around.</div></td></tr><tr><td colspan="2">Margin and padding both specify the amount of space around something.  The difference is that a margin is outside the border and padding is  inside. (The border here is just for illustration.)<br /><br />As with the border, you can specify one side at time with margin-left, padding-top, etc. You can also set all at once with <code>margin:1px 2px 3px 4px;</code> where the order is top, right, bottom, left.</td></tr></tbody></table><br /><b>Notes:</b><br />You can also use inline styles, if you want to do one-time formatting  for a specific piece of text in a post. Here is the format to use:<br /><code><span style="color:red;"></code>This text will be red.<code></span></code></div><div class="last-updated">updated 03/08/2013 </div><a href="http://support.google.com/blogger/bin/answer.py?hl=en&answer=41954#" name="helpful"></a> <div class="answer-features nocontent"><div class="rating-parent unsent slider-parent" id="rating-parent">Rate this article:              <br /><form class="rating-details"><b><b>What could be better?</b> (Optional)</b><br /><div class="feedback-checkbox-container"><label class="feedback-checkbox"> Not related to my issue </label><label class="feedback-checkbox"> Incomplete information </label><label class="feedback-checkbox"> Too much information </label><label class="feedback-checkbox"> Too complicated </label><label class="feedback-checkbox"> Incorrect information </label><label class="feedback-checkbox"> Unclear information </label></div></form><span class="feedback-message">Feedback recorded. Thanks! </span></div><div class="button plus-one"></div></div><div class="survey-invite-green "><a href="http://support.google.com/blogger/bin/request.py?contact_type=survey&v=1" id="surveyLink" target="_blank"><b>Tell us how we're doing -</b> Answer five short questions about your help center experience</a></div><div class="zemanta-pixie"><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=5dd1343c-a7b0-40de-a00f-111db10a7abc" /></div></div>

What can I do with CSS?

10 Mar 2013