Using Colors in CSS

-

Using Colors in CSS
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

CSS Color Names

In CSS, a color can be specified by using a color name:
Red, Blue, Green, Orange, Tomato, DodgerBlue, MediumSeaGreen, Gray, SlateBlue, Violet , LightGray etc.

CSS Background Color

You can set the background color for HTML elements:

Example

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

CSS Text Color

You can set the color of text:

Example

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

CSS Border Color

You can set the color of borders:

Example

<h1 style="border:2px solid red;">Hello World</h1>
<h1 style="border:2px solid brown;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

CSS Color Values

In CSS, colors can also be specified using RGB(Red, Green and Blue) values, HEX (Hexadecimal starts with '#')values, HSL(Hue, Saturation, Lightness) values, RGBA (RGB with Alpha which means opacity of colors it ranges from 0 to 1 )values, and HSLA values:
RGB Format - rgb(255, 99, 71)

Note: rgb(255,255,255) makes White and rgb(0,0,0) makes Black color

HEX Format - #ff6347
HSL Format - hsl(9, 100%, 64%)

Example

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

HSL Value

In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:
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 or dark, 100% is white
HSLA Value
HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color.

An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
Experiment by mixing the HSLA values below:
hsla(0, 100%, 50%, 0.5)

Comments

Post a Comment

Most Popular Posts

RCM- Reverse Charge Mechanism

-
Image
RCM - REVERSE CHARGE MECHANISM Under normal circumstances, the supplier of goods or services collects the tax and pays it to the Govt. But in case of Reverse Charge, the receiver becomes liable to pay the tax to the Govt., which means the chargeability gets reversed. Reverse charge is a mechanism where the recipient of the goods and/or services who is a registered dealer is liable to pay GST instead of the supplier. Normal GST Transaction Flow   RCM Transaction When is Reverse Charge Applicable A. Supply from an Unregistered dealer to a Registered dealer If a vendor who is not registered under GST, supplies goods to a person who is registered under GST, then Reverse Charge would apply. This means that the GST will have to be paid directly by the receiver to the Government instead of the supplier. The registered dealer who has to pay GST under reverse charge has to do self-invoicing for the purchases made. For Inter-state purchases the buyer ...
Read more

HTML CSS mcq Question Bank

-
Multiple Choice Questions 1) What does CSS stands for?        A) Creative Style Sheet                      B) Colorful Style Sheet     C) Cascading Style Sheet                    D) none of the above       2) Which HTML attribute is used to define inline style?      A) Style                                         B) font   C) Styles                             ...
Read more

Learn How to Create Company in Tally.ERP9

-
Image
Company Creation Tally.ERP9 Tally.ERP 9 is not a just an  accounting software  but its a complete ERP solution to business organisations such as managing Accounts, Inventory, Payroll and taxations (GST)   compatibility from version Tally.ERP 9 release 6. How to create a company in Tally.ERP 9? To create a company in Tally.ERP 9, Double Click on   tally icon on the desktop. Press Alt+F3 -> Create Company Details to be filled in company creation screen Directory The tally directory will store all data you entered in Tally ERP 9. By default, the data storage will be inside the installation folder. i.e. c:\users\public\tally.erp9\data Name In this field, we are required to type the name of the company, for example. XYZ INC. Primary mailing details Mailing name In this field, we are required to type the name of the company, for example. XYZ INC. Address In this data field, we are required to enter the address of the company. ...
Read more