text

Text Generator

Today in this blog we will see how to Create a Custom Text Generator and use it to help change the styles of text on your website. Below is a live demo where you can simply copy the code in one click and paste it into your website. Can give new style.
So use the following text generator. In HTML, text styles are specified using Cascading Style Sheets (CSS). The following text generator automatically generates these properties.

Benefit:-

  • Text font-family is available.
  • Text font-size is available.
  • Text color selection is available.
  • Text background-color selection is available.
  • You can also padding and margin text available.
  • Text alignment set.
  • Can indent Text.
  • Can Apply Text Letter-Spacing
  • Can Apply Text word-Spacing
  • Can Apply Text Line-Height
  • Can Apply Text Text-Decoration
  • Can apply text-transform to Text
  • Can apply Font-Stretch to Text

Note:- Enter the text you want to customize in the Enter text and copy the code by clicking on the code.

Text Generator Live Example

See the Pen by khushal (@mr__khushal) on CodePen.

Text Generator Source Code here is.

To create a text generator we have to follow three steps which are as follows:-

Step1:- Create index.html File.

<!DOCTYPE html>
<html>
<head>
  <!-- Codes by myprograming.com -->
  <meta charset="utf-8">
  <title>Create Custom Text Generator</title>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

<h1 align="center">Create Custom Text Generator</h1>



<form name="TextGenerator" id="TextGenerator">

<table class="TextGenerator">
<tr>
<td class="toolBar" rowspan="2">
<table>
<tr>
<th> Text Basics </th>
</tr>
<tr>
<td>
<div>
<label for="textbody">Enter Text:</label><br>
<textarea name="textbody" id="textbody" maxlength="2000" onkeyup="generateCode();" onclick="this.focus();this.select()" title="Enter the text to be styled.">Enter your text in the textbox and customize the text ...</textarea>
</div>
<div>
<label for="fontfamily">Font-Family:</label>
<select name="fontfamily" id="fontfamily" onchange="generateCode();" style="max-width:150px;">
<option value="inherit"> (Inherit)</option>
<optgroup label="Sans-Serif">
<option value="Arial, sans-serif" style="font-family:Arial, sans-serif"> Arial, Sans-Serif</option>
<option value="'Arial Black', sans-serif" style="font-family:'Arial Black', sans-serif"> Arial Black, Sans-Serif</option>
<option value="Corbel, sans-serif"> Corbel, Sans-Serif</option>
<option value="Geneva, sans-serif"> Geneva, Sans-Serif</option>
<option value="Helvetica, sans-serif" style="font-family:helvetica, sans-serif"> Helvetica, Sans-Serif</option>
<option value="'Lucida Grande', sans-serif"> 'Lucida Grande', Sans-Serif</option>
<option value="Tahoma, sans-serif"> Tahoma, Sans-Serif</option>
<option value="'Trebuchet MS', sans-serif"> Trebuchet MS, Sans-Serif</option>
<option value="Verdana, sans-serif"> Verdana, Sans-Serif</option>
<option value="sans-serif" style="font-family:sans-serif"> Sans-Serif (generic)</option>
</optgroup>

<optgroup label="Serif">
<option value="Baskerville, serif" style="font-family:Baskerville, serif"> Baskerville, Serif</option>
<option value="Garamond, serif" style="font-family:Garamond, serif"> Garamond, Serif</option>
<option value="Georgia, serif" style="font-family:Georgia, Serif"> Georgia, Serif</option>
<option value="'Times New Roman', serif" style="font-family:'Times New Roman', serif"> Times New Roman, Serif</option>
<option value="Palatino, serif" style="font-family:Palatino, serif"> Palatino, Serif</option>
<option value="serif" style="font-family:serif"> Serif (generic)</option>
</optgroup>
<optgroup label="Cursive/Fantasy">
<option value="'Comic Sans MS'" style="font-family:'Comic Sans MS'" selected> Comic Sans MS</option>
<option value="Copperplate" style="font-family:Copperplate"> Copperplate</option>
<option value="cursive" style="font-family:cursive"> Cursive (generic)</option>
<option value="fantasy" style="font-family:fantasy"> Fantasy (generic)</option>
<option value="Papyrus" style="font-family:Papyrus"> Papyrus</option>
<option value="'Brush Script MT'" style="font-family:'Brush Script MT'"> Brush Script MT</option>
</optgroup>
<optgroup label="Monospace">
<option value="Consolas, monospace" style="font-family:Consolas, monospace"> Consolas, Monospace</option>
<option value="Courier, monospace" style="font-family:Courier, monospace"> Courier, Monospace</option>
<option value="'Courier New', monospace" style="font-family:'Courier New', monospace"> Courier New, Monospace</option>
<option value="Monaco, monospace" style="font-family:Monaco, monospace"> Monaco, Monospace</option>
<option value="monospace" style="font-family:monospace"> Monospace (generic)</option>
</optgroup>
</select>
</div>

<div class="textpadding">
<label for="fontsize">Font-Size:</label>
<input name="fontsize" value="25" type="text" size="3" maxlength="3" onkeyup="clearField('fontsize2');generateCode();">
<select name="fontsizemetric" id="fontsizemetric" onchange="generateCode();" style="max-width:70px;">
<optgroup label="Absolute Lengths">
<option value="cm"> Centimeters</option>
<option value="mm"> Millimeters</option>
<option value="in"> Inches</option>
<option value="pt"> Points</option>
<option value="pc"> Picas</option>
<option value="px" selected> Pixels</option>
</optgroup>
<optgroup label="Font-Relative Lengths">
<option value="em" > Em</option>
<option value="ex"> Ex</option>
<option value="ch"> Ch</option>
<option value="rem"> Rem</option>
</optgroup>
<optgroup label="Viewport-Percentage Lengths">
<option value="vw"> Vw</option>
<option value="vh"> Vh</option>
<option value="vmin"> Vmin</option>
<option value="vmax"> Vmax</option>
</optgroup>
<option value="%"> Percent</option>
</select>
<p style="font-weight:bold;">OR
<select name="fontsize2" id="fontsize2" onchange="clearField('fontsize');generateCode();" style="max-width:90%;" title="Clear the font size above to enable this option.">
<option value="" selected disabled> None</option>
<option value="inherit"> (Inherit)</option>
<optgroup label="Absolute Size">
<option value="xx-small"> XX-Small</option>
<option value="x-small"> X-Small</option>
<option value="small"> Small</option>
<option value="medium"> Medium</option>
<option value="large"> Large</option>
<option value="x-large"> X-Large</option>
<option value="xx-large"> XX-Large</option>
</optgroup>
<optgroup label="Relative Size">
<option value="smaller"> Smaller</option>
<option value="larger"> Larger</option>
</optgroup>
</select>
</p>
</div> 

<div class="testsizelist" onclick="generateCode();">
<input name="fontstyle" id="fontstyle" type="checkbox" value=""> <span style="font-style:italic;">Italic</span>
<input name="fontweight" type="checkbox" value=""> <span style="font-weight:bold;">Bold</span>
<input name="fontvariant" id="fontvariant" type="checkbox" value=""> <span style="font-variant:small-caps;">Small Caps</span>
</div>
</td>
</tr>
<tr>
<th>Colors</th>
</tr>
<tr>
<td>
<div class="textpadding">
<label for="textcolor">Text Color:</label>
<input name="textcolor" id="textcolor" value="#330099"  type="color" > 
</div>
<div class="textpadding">
<label for="backgroundcolor">Background:</label>
<input name="backgroundcolor" id="backgroundcolor" value="#2f6060" type="color" >
</div>
</td>
</tr>
<tr>
<th>Padding/Margins</th>
</tr>
<tr>
<td>
<label for="padding">Padding:</label>
<input name="padding" value="25" type="text" size="3" maxlength="3" onkeyup="clearField('paddingmetric');generateCode();">
<select name="paddingmetric" id="paddingmetric" onchange="clearField('padding');generateCode();" style="max-width:70px;">
<option value="inherit"> (Inherit)</option>
<option value="%"> Percent</option>
<optgroup label="Absolute Lengths">
<option value="cm"> Centimeters</option>
<option value="mm"> Millimeters</option>
<option value="in"> Inches</option>
<option value="pt"> Points</option>
<option value="pc"> Picas</option>
<option value="px" selected> Pixels</option>
</optgroup>
<optgroup label="Font-Relative Lengths">
<option value="em" > Em</option>
<option value="ex"> Ex</option>
<option value="ch"> Ch</option>
<option value="rem"> Rem</option>
</optgroup>
<optgroup label="Viewport-Percentage Lengths">
<option value="vw"> Vw</option>
<option value="vh"> Vh</option>
<option value="vmin"> Vmin</option>
<option value="vmax"> Vmax</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>
<label for="margin">Margin:</label>
<input name="margin" value="0" type="text" size="3" maxlength="3" onkeyup="clearField('marginmetric');generateCode();">
<select name="marginmetric" id="marginmetric" onchange="clearField('margin');generateCode();" style="max-width:70px;">
<option value="inherit"> (Inherit)</option>
<option value="auto"> Auto</option>
<option value="%"> Percent</option>
<optgroup label="Absolute Lengths">
<option value="cm"> Centimeters</option>
<option value="mm"> Millimeters</option>
<option value="in"> Inches</option>
<option value="pt"> Points</option>
<option value="pc"> Picas</option>
<option value="px" selected> Pixels</option>
</optgroup>
<optgroup label="Font-Relative Lengths">
<option value="em"> Em</option>
<option value="ex"> Ex</option>
<option value="ch"> Ch</option>
<option value="rem"> Rem</option>
</optgroup>
<optgroup label="Viewport-Percentage Lengths">
<option value="vw"> Vw</option>
<option value="vh"> Vh</option>
<option value="vmin"> Vmin</option>
<option value="vmax"> Vmax</option>
</optgroup>
</select>
</td>
</tr>

<tr>
<th>Alignment/Spacing</th>
</tr>
<tr>
<td>
<div>
<label for="textalign">Alignment:</label>
<select name="textalign" id="textalign" onchange="generateCode();">
<option value="inherit"> (Inherit)</option>
<option value="left"> Left</option>
<option value="center"> Center</option>
<option value="right"> Right</option>
<option value="justify"> Justified</option>
</select>
</div>
<div class="textpadding" title="Indents the first line.">
<label for="textindent">Indent:</label>
<input name="textindent" value=" " type="text" size="3" maxlength="3" onkeyup="clearField('textindentmetric');generateCode();">
<select name="textindentmetric" id="textindentmetric" onchange="clearField('textindent');generateCode();" style="max-width:70px;">
<option value="inherit"> (Inherit)
<optgroup label="Absolute Lengths">
<option value="cm"> Centimeters</option>
<option value="mm"> Millimeters</option>
<option value="in"> Inches</option>
<option value="pt"> Points</option>
<option value="pc"> Picas</option>
<option value="px" selected> Pixels</option>
</optgroup>
<optgroup label="Font-Relative Lengths">
<option value="em" > Em</option>
<option value="ex"> Ex</option>
<option value="ch"> Ch</option>
<option value="rem"> Rem</option>
</optgroup>
<optgroup label="Viewport-Percentage Lengths">
<option value="vw"> Vw</option>
<option value="vh"> Vh</option>
<option value="vmin"> Vmin</option>
<option value="vmax"> Vmax</option>
</optgroup>
<option value="%"> Percent</option>
</select>
</div>
<div class="textpadding">
<label for="letterspacing">Letter-Spacing:</label>
<input name="letterspacing" id="letterspacing" value="2" type="text" size="3" maxlength="3" onkeyup="clearField('letterspacingmetric');generateCode();">
<select name="letterspacingmetric" id="letterspacingmetric" onchange="clearField('letterspacing');generateCode();" style="max-width:70px;">
<option value="inherit"> (Inherit)</option>
<option value="normal"> Normal</option>
<optgroup label="Absolute Lengths">
<option value="cm"> Centimeters</option>
<option value="mm"> Millimeters</option>
<option value="in"> Inches</option>
<option value="pt"> Points</option>
<option value="pc"> Picas</option>
<option value="px" selected> Pixels</option>
</optgroup>
<optgroup label="Font-Relative Lengths">
<option value="em" > Em</option>
<option value="ex"> Ex</option>
<option value="ch"> Ch</option>
<option value="rem"> Rem</option>
</optgroup>
<optgroup label="Viewport-Percentage Lengths">
<option value="vw"> Vw</option>
<option value="vh"> Vh</option>
<option value="vmin"> Vmin</option>
<option value="vmax"> Vmax</option>
</optgroup>
</select>
</div>
<div class="textpadding">
<label for="wordspacing">Word-Spacing:</label>
<input name="wordspacing" id="wordspacing" value="" type="text" size="3" maxlength="3" onkeyup="clearField('wordspacingmetric');generateCode();">
<select name="wordspacingmetric" id="wordspacingmetric" onchange="clearField('wordspacing');generateCode();" style="max-width:70px;">
<option value="inherit"> (Inherit)</option>
<option value="normal"> Normal</option>
<optgroup label="Absolute Lengths">
<option value="cm"> Centimeters</option>
<option value="mm"> Millimeters</option>
<option value="in"> Inches</option>
<option value="pt"> Points</option>
<option value="pc"> Picas</option>
<option value="px" selected> Pixels</option>
</optgroup>
<optgroup label="Font-Relative Lengths">
<option value="em" > Em</option>
<option value="ex"> Ex</option>
<option value="ch"> Ch</option>
<option value="rem"> Rem</option>
</optgroup>
<optgroup label="Viewport-Percentage Lengths">
<option value="vw"> Vw</option>
<option value="vh"> Vh</option>
<option value="vmin"> Vmin</option>
<option value="vmax"> Vmax</option>
</optgroup>
</select>
</div>
<div class="textpadding">
<label for="lineheight">Line-Height:</label>
<input name="lineheight" id="lineheight" value=" " type="text" size="3" maxlength="3" onkeyup="clearField('lineheightmetric');generateCode();">
<select name="lineheightmetric" id="lineheightmetric" onchange="clearField('lineheight');generateCode();" style="max-width:70px;">
<option value="inherit"> (Inherit)</option>
<option value="normal"> Normal</option>
<option value="%"> Percent</option>
<optgroup label="Absolute Lengths">
<option value="cm"> Centimeters</option>
<option value="mm"> Millimeters</option>
<option value="in"> Inches</option>
<option value="pt"> Points</option>
<option value="pc"> Picas</option>
<option value="px" selected> Pixels</option>
</optgroup>
<optgroup label="Font-Relative Lengths">
<option value="em" > Em</option>
<option value="ex"> Ex</option>
<option value="ch"> Ch</option>
<option value="rem"> Rem</option>
</optgroup>
<optgroup label="Viewport-Percentage Lengths">
<option value="vw"> Vw</option>
<option value="vh"> Vh</option>
<option value="vmin"> Vmin</option>
<option value="vmax"> Vmax</option>
</optgroup>
</select>
</div>
</td>
</tr>
<tr>
<th>Decorations</th>
</tr>
<tr>
<td>
<div>
<label for="textdecoration">Text-Decoration:</label>
<select name="textdecoration" onchange="generateCode();" id="textdecoration">
<option value="inherit" checked> (Inherit)</option>
<option value="none"> None</option>
<option value="overline" style="text-decoration:overline"> Overline</option>
<option value="underline" style="text-decoration:underline"> Underline</option>
<option value="line-through" style="text-decoration:line-through"> Line Through</option>
<option value="blink" style="text-decoration:blink"> Blink</option>
</select>
</div>
<div>
<label for="texttransform">Text-Transform:</label>
<select name="texttransform" id="texttransform" onchange="generateCode();" style="max-width:100px;">
<option value="inherit" checked> (Inherit)</option>
<option value="none"> None</option>
<option value="uppercase"> UPPERCASE</option>
<option value="lowercase"> lowercase</option>
<option value="capitalize"> Capitalize The First Letter Of Each Word</option>
</select>
</div>
<div title="Not all fonts will stretch.">
<label for="fontstretch">Font-Stretch:</label>
<select name="fontstretch" onchange="generateCode();" id="fontstretch">
<option value="inherit" checked> (Inherit)</option>
<option value="ultra-condensed" style="font-stretch:ultra-condensed;"> Ultra-condensed</option>
<option value="extra-condensed" style="font-stretch:extra-condensed;"> Extra-condensed</option>
<option value="condensed" style="font-stretch:condensed;"> Condensed</option>
<option value="semi-condensed" style="font-stretch:semi-condensed;"> Semi-condensed</option>
<option value="normal" style="font-stretch:normal;"> Normal</option>
<option value="semi-expanded" style="font-stretch:semi-expanded;"> Semi-expanded</option>
<option value="expanded" style="font-stretch:expanded;"> Expanded</option>
<option value="extra-expanded" style="font-stretch:extra-expanded;"> Extra-expanded</option>
<option value="ultra-expanded" style="font-stretch:ultra-expanded;"> Ultra-expanded</option>
</select>
</div>
</td>
</tr>
</table>
</td>
<td class="preview">
<div id="displayResult">
</div>
</td>
</tr>
<tr>
<td class="code" style="background:#606060;" colspan="2">
<div class="resultcopycode">
  <h2>The Code</h2>
<p>Here is the code that was generated:</p>
<textarea cols="10" rows="20" name="generatedCode" id="generatedCode" onclick="this.focus();this.select()"></textarea>
</div>
</td>
</tr>
</table>
</form>
<script src="demo.js"></script>
</body>
</html>

Step2:- Create style.css File.

.TextGenerator {
width:100%;
border-collapse:collapse;
background:#fff;
color:#000;
position: relative;
}
.TextGenerator td {
border:1px solid #000;
vertical-align:top;
padding:10px;
}
.TextGenerator td.toolBar {
font-size:11px;
width:350px;
height:100px;
padding:0px;
margin:0px;
}
.TextGenerator td.toolBar table {
border-collapse:collapse;
width:100%;
}
.TextGenerator td.toolBar th {
background-color:#606060;
color:#fff;
font-size: 25px;
padding: 10px;
padding-left:3px;
}
.TextGenerator td.toolBar td {
font-size:14px;
padding:3px;
border:none;
}
.TextGenerator td.toolBar textarea {
width:300px;
height:100px;
font-size:1em;
}
.TextGenerator td.preview {
background:#f6f6f6;
position: fixed;
top: 50%;
left: 50%;
bottom: 0;
right: 0;
}
.resultcopycode{
  margin-top: 10px;
}
.TextGenerator div#displayResult {
max-width:550px;min-height:250px;max-height:250px;overflow:auto;margin-bottom:10px;padding:10px;
}
.TextGenerator textarea#generatedCode {
width:300px;min-height:200px;
}
.TextGenerator input {
border:1px solid #ccc;
border-radius: 0;
width: 50px;
height: 40px;
}
.testsizelist
input{
  border:1px solid #ccc;
border-radius: 0;
width: 30px;
height: 30px;
}

.TextGenerator input[size="3"] {
width:2em;
}
.TextGenerator table[border="1"] td {
border:1px solid black;
width:11px;
}
.TextGenerator label{
  font-size: 20px;
  font-weight: 600;
}
.TextGenerator select{
  height: 40px!important;
  border-radius: 0;
}
.textpadding
input{
  width: 60px!important;
  font-size: 18px;
  border:1px solid black;
  height: 40px!important;
}
.textpadding
button{
  background: #606060;
  height: 40px;
}

.code
h2{
  font-size: 35px;
  color: #fff;
}
.code
p{
  font-size: 15px;
  color: #fff;

}

Step3:- Create demo.js File.

function generateCode(){return textbody=document.TextGenerator.textbody.value,fontfamily=document.TextGenerator.fontfamily.value,fontsize=document.TextGenerator.fontsize.value,fontsizemetric=document.TextGenerator.fontsizemetric.value,fontsize2=document.TextGenerator.fontsize2.value,fontstyle=document.TextGenerator.fontstyle.checked,fontweight=document.TextGenerator.fontweight.checked,fontvariant=document.TextGenerator.fontvariant.checked,fontstretch=document.TextGenerator.fontstretch.value,textdecoration=document.TextGenerator.textdecoration.value,texttransform=document.TextGenerator.texttransform.value,letterspacing=document.TextGenerator.letterspacing.value,letterspacingmetric=document.TextGenerator.letterspacingmetric.value,wordspacing=document.TextGenerator.wordspacing.value,wordspacingmetric=document.TextGenerator.wordspacingmetric.value,lineheight=document.TextGenerator.lineheight.value,lineheightmetric=document.TextGenerator.lineheightmetric.value,textindent=document.TextGenerator.textindent.value,textindentmetric=document.TextGenerator.textindentmetric.value,textalign=document.TextGenerator.textalign.value,textcolor=document.TextGenerator.textcolor.value,backgroundcolor=document.TextGenerator.backgroundcolor.value,padding=document.TextGenerator.padding.value,paddingmetric=document.TextGenerator.paddingmetric.value,margin=document.TextGenerator.margin.value,marginmetric=document.TextGenerator.marginmetric.value,output='<!-- Codes by myprograming.com -->\n\n<!-- CSS Code -->\n<style type="text/css" scoped>\n.GeneratedText {\n'+("inherit"!=fontfamily?"font-family:"+fontfamily+";":"")+(""!=fontsize?"font-size:"+fontsize+fontsizemetric+";":"")+("inherit"!=fontsize2&&""!=fontsize2?"font-size:"+fontsize2+";":"")+(fontstyle?"font-style:italic;":"")+(fontweight?"font-weight:bold;":"")+(fontvariant?"font-variant:small-caps;":"")+("inherit"!=fontstretch?"font-stretch:"+fontstretch+";":"")+("inherit"!=textdecoration?"text-decoration:"+textdecoration+";":"")+("inherit"!=texttransform?"text-transform:"+texttransform+";":"")+("normal"==letterspacingmetric?"letter-spacing:"+letterspacingmetric+";":letterspacing&&letterspacingmetric?"letter-spacing:"+letterspacing+letterspacingmetric+";":"")+("normal"==wordspacingmetric?"word-spacing:"+wordspacingmetric+";":wordspacing&&wordspacingmetric?"word-spacing:"+wordspacing+wordspacingmetric+";":"")+("normal"==lineheightmetric?"line-height:"+lineheightmetric+";":lineheight?"line-height:"+lineheight+lineheightmetric+";":"")+(textindentmetric&&textindent?"text-indent:"+textindent+textindentmetric+";":"")+("inherit"!=textalign?"text-align:"+textalign+";":"")+(textcolor?"color:"+textcolor+";":"")+(backgroundcolor?"background-color:"+backgroundcolor+";":"")+("inherit"!=paddingmetric?"padding:"+padding+paddingmetric+";":"")+("auto"==marginmetric?"margin:"+marginmetric+";":margin&&marginmetric?"margin:"+margin+marginmetric+";":"")+'\n}\n</style>\n\n<!-- HTML Code -->\n<div class="GeneratedText">'+textbody+"</div>\n\n",document.TextGenerator.generatedCode.value=output,document.getElementById("displayResult").innerHTML=output,document.getElementById("textcolor").style.color=textcolor,document.getElementById("backgroundcolor").style.backgroundColor=backgroundcolor,output}function clearField(e){"fontsize"==e?document.TextGenerator.fontsize.value="":"fontsize2"==e?document.TextGenerator.fontsize2.value="":"letterspacing"==e?("normal"==document.TextGenerator.letterspacingmetric.value||"inherit"==document.TextGenerator.letterspacingmetric.value)&&(document.TextGenerator.letterspacing.value=""):"letterspacingmetric"==e?("normal"==document.TextGenerator.letterspacingmetric.value||"inherit"==document.TextGenerator.letterspacingmetric.value)&&(document.TextGenerator.letterspacingmetric.value=""):"wordspacing"==e?("normal"==document.TextGenerator.wordspacingmetric.value||"inherit"==document.TextGenerator.wordspacingmetric.value)&&(document.TextGenerator.wordspacing.value=""):"wordspacingmetric"==e?("normal"==document.TextGenerator.wordspacingmetric.value||"inherit"==document.TextGenerator.wordspacingmetric.value)&&(document.TextGenerator.wordspacingmetric.value=""):"lineheight"==e?("normal"==document.TextGenerator.lineheightmetric.value||"inherit"==document.TextGenerator.lineheightmetric.value)&&(document.TextGenerator.lineheight.value=""):"lineheightmetric"==e?("normal"==document.TextGenerator.lineheightmetric.value||"inherit"==document.TextGenerator.lineheightmetric.value)&&(document.TextGenerator.lineheightmetric.value=""):"textindent"==e?"inherit"==document.TextGenerator.textindentmetric.value&&(document.TextGenerator.textindent.value=""):"textindentmetric"==e?"inherit"==document.TextGenerator.textindentmetric.value&&(document.TextGenerator.textindentmetric.value=""):"textcolor"==e?document.TextGenerator.textcolor.value="":"backgroundcolor"==e?document.TextGenerator.backgroundcolor.value="":"padding"==e?"inherit"==document.TextGenerator.paddingmetric.value&&(document.TextGenerator.padding.value=""):"paddingmetric"==e?"inherit"==document.TextGenerator.paddingmetric.value&&(document.TextGenerator.paddingmetric.value=""):"margin"==e?("auto"==document.TextGenerator.marginmetric.value||"inherit"==document.TextGenerator.marginmetric.value)&&(document.TextGenerator.margin.value=""):"marginmetric"==e&&("auto"==document.TextGenerator.marginmetric.value||"inherit"==document.TextGenerator.marginmetric.value)&&(document.TextGenerator.marginmetric.value="")}
document.getElementsByTagName('body').onload = generateCode();


,

Related Posts

CSS Code Beautifier
CSS GENERATOR

Streamline Your Code with an Online CSS Code Beautifier

Khushal
CSS Minify Tool
CSS GENERATOR

Online CSS Minify Tool and Compressor

Khushal

Leave a Reply

Your email address will not be published. Required fields are marked *