CSS Color

CSS color values to specify a color. Typically, these are used to set a color either for the foreground of an element (i.e., its text) or else for the background of the element. They can also be used to affect the color of borders and other decorative effects. the example below sets the background colors of heading and paragraph. 

<h1 style="background-color:Green;">CSS COLORS</h1>
<p style="background-color:Orange;">Knowledge is power...</p>


CSS Color Keywords:

Color keywords are case-insensitive identifiers that represent a specific color, such as red, blue, black, or lightseagreen. Although the names more or less describes their respective colors, they are essentially artificial, without a strict rationale behind the names used.

There are a few caveats to consider when using color keywords:

  • HTML only recognizes the 16 basic color keywords found in CSS1, using a specific algorithm to convert unrecognized values (often to completely different colors).
  • Unlike HTML, CSS will completely ignore unknown keywords.
  • The color keywords all represent plain, solid colors, without transparency.
  • Several keywords are aliases for each other:
    • aqua / cyan
    • fuchsia / magenta
    • darkgray / darkgrey
    • darkslategray / darkslategrey
    • dimgray / dimgrey
    • lightgray / lightgrey
    • lightslategray / lightslategrey
    • gray / grey
    • slategray / slategrey

CSS Text Color:

Setting paragraph text color to red:

Setting color of specific paragraph:

The aobve two lines should be replaced with

To change the text color of a paragraph, CSS can be specified inside the <p> element as inline CSS. The example below sets the color of the paragraph to red using the color code #9acd32.

add tryit, add code in enlighter, 

<p style="color: #9acd32;">Knowledge is power</p>

Setting color for all paragraphs:

to set the same color of all the paragphrash, the CSS can be define in the following way.

add try it, add enlighter, use two paragraph in the code to show this effect. for example

<p1> text 1</p>

<p1> text 2</p>

CSS Border Color:

please write something here about the heading

<h1 style="border:4px solid Wheat;">Hey Dude</h1>
<h1 style="border:4px solid skyblue;">Hey Dude</h1>
<h1 style="border:4px solid yellow;">Hey Dude</h1>
CSS color Border color

CSS Color Values

In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:

Same as color name “Orange”:

gb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

Example:

ValueDescriptionExample
#Hexadecimal red-green-blue.
Can be six or three hexadecimal digits (0 to F).
Using six digits, the first two specify the amount of red, second two the amount of green, and third two the amount of blue.
The three-digit form is a shortened notation with the first digit red, second green, and thrid blue.		p { color: #ff0000 }
/* is the same as... */
p { color: #f00 }
/* (full red) */

CSS Color Codes

Following color codes can be applied:

[supsystic-tables id=1]

Comments are closed.