Color and background color in ZindaCSS
ZindaCSS has a wide range of colors to use. Using it, you can set text colors, background colors, and border colors. We also allow custom values to be used for colors.
Colors
Using this, you can change the color of any text. All you have to do is create a class with a name. There are 8 predefined color classes:
- Black
- Red
- Blue
- Green
- Yellow
- Purple
- Brown
- Sky
- Orange
color-green-3
Following is a reference to all colors: ZindaCSS color reference
Custom Colors
You can add custom colors using hex, rgb, rgba and hsl. To do so, simply use the class
name:
color_ValueOfColor
If I want to add a color #f58799 to some text:
<span class="color_#f58799">Some text</span>
If I want to add a color rgb(33,100,210) to some text:
<span class="color_rgb(33,100,210)">Some text</span>
If I want to add a color hsl(217,54,40) to some text:
<span class="color_hsl(217,54,40))">Some text</span>
Background Colors
Using this, you can change the background color of any element. All you have to do is create a class with a name. This is very similar to color, and has the same predefined classes.
- Black
- Red
- Blue
- Green
- Yellow
- Purple
- Brown
- Sky
- Orange
bg-green-3
Following is a reference to all background colors: ZindaCSS background-color reference
Custom Backgrounds
You can add custom backgrounds using hex, rgb, rgba and hsl. To do so, simply use the class
name:
bg_ValueOfColor
If I want to add a background color #f58799 to some text:
<span class="bg_#f58799">Some text</span>
If I want to add a background color rgb(33,100,210) to some text:
<span class="bg_rgb(33,100,210)">Some text</span>
If I want to add a background color hsl(32deg,81%,40%) to some text:
<span class="bg_hsl(32deg,81%,40%)">Some text</span>
Border Colors
Once you have a border, you can customise it's color. Learn more about borders in border chapter. Border acts in the same way as colors and background colors. The same eight predefined colors apply
- Black
- Red
- Blue
- Green
- Yellow
- Purple
- Brown
- Sky
- Orange
border-sky-3
Following is a reference to all border colors: ZindaCSS border color reference
Custom Border colors
You can add custom border colors using hex, rgb, rgba and hsl. To do so, simply use the class
name:
border-ValueOfColor
Note: It is required to have a border type for borders to show up. Here, border-normal is used
there are multiple options available. See borders to know more.
If I want to add a border color #68eef9 to some text:
<span class="border-normal border_#68eef9">Some text</span>
If I want to add a border color rgb(33,100,210) to some text:
<span class="border-normal border_rgb(33,100,210)">Some text</span>
If I want to add a border color hsl(217,54,40) to some text:
<span class="border-normal border_hsl(32deg,81%,40%)">Some text</span>