CSS can be used to style icons and apply colors to various elements on a webpage. Here are some techniques for working with CSS icons and colors.

Both of the CSS Icons and Colors are discussed further.

CSS Icons

There are two ways of including the Icons into the HTML Document and both the ways are mentioned below.

Font Awesome

Font Awesome is a popular icon library that provides scalable vector icons that can be easily styled using CSS.

To use Font Awesome, you can include their CSS file in your HTML and add the appropriate class to an element.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

SVG Icons

You can also use SVG (Scalable Vector Graphics) icons directly in your HTML or CSS. SVG icons can be customized using CSS properties like fill and stroke.

CSS Colors

Various ways of including the CSS Colors in the Hyper Text markup Language are mentioned below.

Color Names

CSS supports several predefined color names such as red, blue, green, etc.

The code for including the color with their names is mentioned below -

h1 { color: blue; }

Hex Codes

Colors can be specified using hexadecimal color codes. Hex codes start with a pound sign (#) followed by six digits representing the red, green, and blue (RGB) values.

The code for including the color with their Hex Codes is mentioned below -

p { color: #FF0000; /* red */ }

RGB and RGBA

RGB values allow you to define colors using the intensity of red, green, and blue channels. RGBA includes an additional alpha channel for transparency.

The code for including the color with their RGB and RGBA values is mentioned below -

span { color: rgb(255, 0, 0); /* red / background-color: rgba(0, 128, 0, 0.5); / semi-transparent green */ }

HSL and HSLA

(Hue, Saturation, Lightness) and HSLA (HSL with alpha) are alternative color models that provide more control over hue, saturation, and lightness.

div { color: hsl(120, 100%, 50%); /* fully saturated green / background-color: hsla(0, 100%, 50%, 0.7); / semi-transparent red */ }