ZindaCSS

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
Background Colors
Border 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:

  1. Black
  2. Red
  3. Blue
  4. Green
  5. Yellow
  6. Purple
  7. Brown
  8. Sky
  9. Orange
You can choose a specific color ranging from 1 to 10. If I want a dark green:

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.

  1. Black
  2. Red
  3. Blue
  4. Green
  5. Yellow
  6. Purple
  7. Brown
  8. Sky
  9. Orange
You can choose a specific background color ranging from 1 to 10. If I want a dark green:

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

  1. Black
  2. Red
  3. Blue
  4. Green
  5. Yellow
  6. Purple
  7. Brown
  8. Sky
  9. Orange
You can change the change among these from a value of 1 to 10. To add a dark sky border:

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>