Learn all about how to write your HTML using UI Buddy.
The basic syntax is literally any CSS property, followed by a colon, followed by the value you want to assign to that property. For example:
This looks pretty much like CSS, except instead of using hyphens, we're using camelCase notation.
Click here to view a complete list of all supported CSS properties.
The following table lists all supported CSS units:
|rem||Relative to the font-size of the root element|
|em||Relative to the font-size of the element|
|ex||Relative to the x-height of the current font|
|ch||Relative to the width of the "0" (zero)|
|vw||Relative to 1% of the width of the viewport|
|vh||Relative to 1% of the height of the viewport|
|vmin||Relative to 1% of viewport's smaller dimension|
|vmax||Relative to 1% of viewport's larger dimension|
You can define colors using hex codes, words, or even rgba notation! Examples include:
color:red color:#ff0000 color:rgba(255,0,0,1) background:red background:#ff0000 background:rgba(255,0,0,1)
Shorthand and complex values
In case you want to define multiple properties by using a shorthand like padding, or a complex box-shadow such as 0 4px 7px rgba(0,0,0,0.2), use "_" (underscores) instead of adding spaces between values. For example, to add a padding of 2rem on top and bottom, and 4rem on left and right using the padding shorthand, you could write something like:
And this will evaluate to:
padding: 2rem 4rem;
Sweet, isn't it?
Here are some more examples of complex properties:
// LINEAR GRADIENT <div class="background:linear-gradient(to_right,#0000ff,#00ff00)"></div> // BOX SHADOW <div class="boxShadow:0_1px_3px_rgba(0,0,0,0.1)"></div> //BORDER <div class="border:1px_solid_#000"></div>
Just remember, whenever you need to add a space between values, use an underscore "_" and you're good. All other symbols such as parentheses, commas, hyphens, hash work just fine as they are.