CSS Color

CSS Colors


Color property is used to set the color of the text.

Syntax: {color: value;}

Now there are many ways of giving this value to the colour. Some of the most common are listed below.

CSS Background Color

<h1 style="background-color: lightblue;">Hello World</h1>
Output

CSS Text Color:

·      We can set the text color

<h2 style="color: blueviolet;">Hello World</h2>
output:



1. RGB format

·      The full form of RGB is “Red, Green, Blue” and thus it defines the colour value by taking three arguments ranging from 0 to 255.

Syntax: {color: rgb(0,0,0);}.

·      Note that this color is black, if you change each of the values to 255 white colours of the text would be selected.

.color {
    /* color with name */
    color: red;

    /* color with  RGB color value represents RED, GREEN, and BLUE.
    And rgb value can be from 0 to 255 */
    color: rgb(14, 12, 184);

    /* color with Hex */

    color: #b9005c;
}

2. Hexadecimal notation:


By using the hex code of any color you can assign 

3. HSL

  •    HSL stands for Hue, Saturation, and Lightness. Tweaking these values gives different colors, and the syntax is quite similar to RGB
  •      HSL(hue, saturation, lightness)
  •       Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
  •       Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.
  •       Lightness is also a percentage. 0% is black, 50% is neither light nor dark, and 100% is white

Related Posts:

  • CSS ColorCSS ColorsColor property is used to set the color of the text.Syntax: {color: value;}Now there are many ways of giving this value to the colour. Some … Read More
  • CSS-simplified-series.html INTRODUCTIONIntroduction to CSS Ways to Add CSSCSS SelectorsCSS CommentsCSS PropertiesCSS ColorsCSS BackgroundsCSS BorderCSS MarginCSS Padd… Read More
  • Introduction to CSSWhat is CSS?CSS is a language that we use to style an HTML document.It describes how elements will be displayed.CSS stands for Cascading Style Sheets.… Read More
  • CSS BackgroundsCSS BackgroundsCSS background properties are used to add background effects for elementsWe will learn below following CSS background properties:backgr… Read More
  • CSS Comments CSS comments are the same as what you must have learned in any technical language. It is written to explain the code and is helpful for the user… Read More

0 Comments:

Post a Comment

Do leave your comments