Hover / tap here for help.
You should instantly notice that this is in no way a blog. As the name implies, this site helps visitors generate css codes according to their needs. I made this with the hope that it will help people save their time writing them.
How to use
At the left side is the generator itself, which is a compilated set of stylesheet elements to write css. It is true that we don't display all the possible properties available in css, but either way we give you the most frequently used ones.At the right side is the field for the generated code. You may not see anything there until you clicked on 'Input' at the top right corner to settle the data accordingly.
Now let's get to learn about the generator's elements.
1. At the top of the generator, just below the title section, is the html tag selection. Use this to select which tag you want to apply the properties to.
2. Right below the html tag selector is a form with a red stripe to the bottom right of the generator. This is the class selector. You use the class selector when you want to target the properties into elements with said classes. If that's the case, you'll need to leave the html tag selector empty or else the data within it shall also be written to the code.
3. Below the class selector is the id selector, which is indicated with the blue stripe. This functions similarly to the class selector.
4. Below the id selector is a white form with no text in it. This is the custom selector input. You use this one to write complex css selectors such as "#parentelement:hover > a:active" or multiple selections such as "some element, some another element" .
5. Below the custom selector input is the white button with the text 'reset' on it. This button resets all the values of the generator to it's defaults. It's like refreshing the page but without losing the generated code on the right field. You use this when you have done a set of properties for a target selection/element and need to make another that has no similar properties with the previous one.
6. The rest of the generator are the properties you would want to add. We display them as selects and text inputs. Please note that for the text inputs, like width, height, margin, etc, you can input all the possible accepted values to the respective textbox such as '40px', '20%', '0.2em', and so on.
7. After you have set all the properties you want, just click the 'Input' button at the top-right to display the resulting block of code to the right field. After you finished with the css, just highlight and copy them wherever you need. If you want to restart the resulting field of code, just click the 'Clear' button below it.
Feedbacks? Thoughts? Please click here..
About Me
My name is Jedidiah David. Born June 11th, 1999. Currently in Tangerang Selatan, Indonesia.
Quick, easy, flexible css editor optimized for touch screens.
Here we help people write css properties faster, easier, minimalizing the need to
actually type individual properties.
If it's the first time you stumbled here, you may want to read these quick introduction first,
since there are also several rule of thumb inbetween the scripts.
You should instantly notice that this is in no way a blog. As the name implies, this site helps visitors generate css codes according to their needs. I made this with the hope that it will help people save their time writing them.
How to use
At the left side is the generator itself, which is a compilated set of stylesheet elements to write css. It is true that we don't display all the possible properties available in css, but either way we give you the most frequently used ones.At the right side is the field for the generated code. You may not see anything there until you clicked on 'Input' at the top right corner to settle the data accordingly.
Now let's get to learn about the generator's elements.
1. At the top of the generator, just below the title section, is the html tag selection. Use this to select which tag you want to apply the properties to.
2. Right below the html tag selector is a form with a red stripe to the bottom right of the generator. This is the class selector. You use the class selector when you want to target the properties into elements with said classes. If that's the case, you'll need to leave the html tag selector empty or else the data within it shall also be written to the code.
3. Below the class selector is the id selector, which is indicated with the blue stripe. This functions similarly to the class selector.
4. Below the id selector is a white form with no text in it. This is the custom selector input. You use this one to write complex css selectors such as "#parentelement:hover > a:active" or multiple selections such as "some element, some another element" .
5. Below the custom selector input is the white button with the text 'reset' on it. This button resets all the values of the generator to it's defaults. It's like refreshing the page but without losing the generated code on the right field. You use this when you have done a set of properties for a target selection/element and need to make another that has no similar properties with the previous one.
6. The rest of the generator are the properties you would want to add. We display them as selects and text inputs. Please note that for the text inputs, like width, height, margin, etc, you can input all the possible accepted values to the respective textbox such as '40px', '20%', '0.2em', and so on.
7. After you have set all the properties you want, just click the 'Input' button at the top-right to display the resulting block of code to the right field. After you finished with the css, just highlight and copy them wherever you need. If you want to restart the resulting field of code, just click the 'Clear' button below it.
Feedbacks? Thoughts? Please click here..
About Me
My name is Jedidiah David. Born June 11th, 1999. Currently in Tangerang Selatan, Indonesia.
Thanks for visiting! :)