<p>CSS Specificity helps determine what style will be applied to the HTML element(s) when there are overlapping or multiple CSS rules.</p>
<p>It is a value or weight assigned to a CSS selector. The higher the specificity, the more precedence the selector has.</p>
<p>Let's consider the following code</p>
<pre class="language-markup"><code>&lt;html&gt;
&lt;head&gt;
    &lt;style&gt;
        *{
            color: gray;
        }
        #title{
            color: red;
        }
        .h1{
            color: blue;
        }
        h1{
            color: pink;
        }
    &lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
    &lt;h1 id="title" class="h1" style="color:purple"&gt;CodeWithHarry&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p>&nbsp;</p>
<p>Here the question is, what color will h1 be assigned to? This is calculated based on the selector's components which we will discussed in this tutorial.</p>
<h2>The Cascade Algorithm</h2>
<p>CSS stands for Cascading Stylesheets. The cascade is the algorithm for solving conflicts where multiple CSS rules apply to an HTML element. It's the reason that the text of the button styled with the above CSS will be purple.</p>
<p>Understanding the cascade algorithm helps you understand how the browser resolves conflicts like this. The cascade algorithm has 4 distinct stages.</p>
<ol>
<li><strong>Position and order of appearance</strong>: the order in which your CSS rules appear</li>
<li><strong>Specificity</strong>: an algorithm that determines which CSS selector has the strongest match</li>
<li><strong>Origin</strong>: the order in which CSS appears and where it comes from, whether that is a browser style, CSS from a browser extension, or your authored CSS</li>
<li><strong>Importance</strong>: some CSS rules are weighted more heavily than others, especially with the&nbsp;<code dir="ltr" translate="no">!important</code> rule type</li>
</ol>
<p>Lets look into all these one by one</p>
<h3>Effect of Position</h3>
<p>If there are two rules that have selectors of identical specificity, the last one to be declared won. In an HTML page, you can add styles in different ways: through a <code>&lt;link&gt;</code> tag, a <code>&lt;style&gt;</code> tag, or directly in the element's <code>style</code> attribute. If you have one <code>&lt;link&gt;</code> tag at the top of your page and another at the bottom, the styles from the bottom one will be used. The same goes for <code>&lt;style&gt;</code> tags; the ones lower down on the page take priority.</p>
<p>An inline&nbsp;<code dir="ltr" translate="no">style</code>&nbsp;attribute with CSS declared in it will override all other CSS, regardless of its position, unless a declaration has&nbsp;<code dir="ltr" translate="no">!important</code> defined.</p>
<p>If the browser doesn't support a property, it is ignored!</p>
<h3>Specificity</h3>
<p>CSS specificity determines which style rules get applied to an element when there are conflicts. Higher specificity means the style will be used. It's calculated based on a point system involving inline styles, IDs, classes, and tag names.</p>
<h4>Inline Styles</h4>
<p>Inline styles have the highest specificity and will always override styles if other selector(s) are also defined.</p>
<pre class="language-markup"><code>&lt;html&gt;
&lt;head&gt;
    &lt;style&gt;
        *{
            color: gray;
        }
        #title{
            color: red;
        }
        .h1{
            color: blue;
        }
        h1{
            color: pink;
        }
    &lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
    &lt;h1 id="title" class="h1" style="color:purple"&gt;CodeWithHarry&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-specificity/Inline.png" alt="cwh tutorial image" width="332" height="177"></p>
<p>Here, you can see that the color: purple is applied to the h1 tag.</p>
<h4>ID Selector</h4>
<p>The ID selector also has high specificity but comes after the inline Style specificity. So, if we have an ID and other selectors except the inline style, then the element will take the ID selector properties and values.</p>
<pre class="language-markup"><code>&lt;head&gt;
    &lt;style&gt;
        *{
            color: gray;
        }
        #title{
            color: red;
        }
        .h1{
            color: blue;
        }
        h1{
            color: pink;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1 id="title" class="h1"&gt;CodeWithHarry&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-specificity/ID.png" alt="cwh tutorial image" width="262" height="140"></p>
<p>Here, you can see the color: red is applied to the h1 tag.</p>
<h4>Class and Attribute Selectors</h4>
<p>Class selectors and attribute selectors have moderate specificity. Suppose the element has a class or attribute selector and not an inline style or ID selector, then the element will take properties and values from the class or attribute selector.</p>
<pre class="language-markup"><code>&lt;head&gt;
    &lt;style&gt;
        *{
            color: gray;
        
        .h1{
            color: pink;
        }
    &lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
    &lt;h1 class="h1"&gt;CodeWithHarry&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-specificity/class_attribute.png" alt="cwh tutorial image" width="266" height="142"></p>
<p>Here, you can see color:pink is applied to the h1 tag.</p>
<h4>Element Selector:</h4>
<p>Element selectors like &lt;p&gt;, &lt;div&gt;, &lt;a&gt;, etc. have low specificity.</p>
<pre class="language-markup"><code>&lt;head&gt;
    &lt;style&gt;
        *{
            color: gray;
        }
        h1{
            color: tomato;
        }
    &lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
    &lt;h1 class="h1"&gt;CodeWithHarry&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-specificity/element.png" alt="cwh tutorial image" width="268" height="144"></p>
<p>Here, you can see color:tomato is applied to the h1 tag.</p>
<h4>Universal Selector:</h4>
<p>Universal selectors (*) and combining selectors like not, first-child, and last-child have the lowest specificity.</p>
<pre class="language-markup"><code>&lt;head&gt;
    &lt;style&gt;
        *{
            color: gray;
        }
    &lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
    &lt;h1 class="h1"&gt;CodeWithHarry&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-specificity/universal.png" alt="cwh tutorial image" width="255" height="137"></p>
<p>Here, you can see color:gray is applied to the h1 tag.</p>
<p>So, the order of specificity is:</p>
<p><strong>Inline Style &gt; ID Selector &gt; Class or Attribute Selector &gt; Element Selector &gt; Universal Selector</strong></p>
<h4>Specificity Calculation</h4>
<p>To calculate specificity, assign a value to each part of the selector:</p>
<ul>
<li>Universal Selector: 0</li>
<li>Element selectors and pseudo-elements: 1</li>
<li>Class selectors, attribute selectors, and pseudo-classes: 10</li>
<li>ID selectors: 100</li>
<li>Inline styles: 1000</li>
</ul>
<p>Then, add up the values of all the parts in the selector.</p>
<p>Here is an example&nbsp;</p>
<pre class="language-markup"><code>&lt;h1 id="title" class="h1"&gt;CodeWithHarry&lt;/h1&gt;</code></pre>
<p>Here, the specificity value will be <strong>111 </strong>because ID has a specificity of 100, the class has a specificity of 10, and the h1 element has a specificity of 1.</p>
<p>In the case of a specificity tie, the rule that appears last in the CSS is applied.</p>
<h3>Importance</h3>
<p>The <code>!important</code> flag in CSS is used to give a particular style rule the highest level of importance, overriding any other competing styles. When you add <code>!important</code> to a CSS rule, it will take precedence over other rules affecting the same element, regardless of their specificity. For example, if you have:</p>
<pre class="language-css"><code>p {
  color: red !important;
}

p {
  color: blue;
}</code></pre>
<p>The text in the <code>&lt;p&gt;</code> element will be red, not blue, because the <code>!important</code> flag makes that rule more important.</p>
<p>an&nbsp;<code dir="ltr" translate="no">!important</code>&nbsp;at the end of a CSS value gets a specificity score of&nbsp;<strong>10,000 points</strong>. This is the highest specificity that one individual item can get.</p>
<p>However, it's generally best to use <code>!important</code> sparingly, as it can make debugging and maintaining your stylesheets more complicated. It can override styles in ways that are hard to trace, leading to unexpected results.</p>
<h2>Quick Quiz</h2>
<p>What will be the specificity value of the following selector:</p>
<pre class="language-css"><code>a.harryclass.rohan-class[href]:hover {
  color: red;
}</code></pre>
<h3>Solution</h3>
<p>To calculate the specificity value of the selector <code>a.harryclass.rohan-class[href]:hover</code>, you can break down its components:</p>
<ul>
<li>Element selectors: <code>a</code> contributes 1 point.</li>
<li>Class selectors: <code>.harryclass</code> and <code>.rohan-class</code> each contributes 10 points, totaling 20 points.</li>
<li>Attribute selector: <code>[href]</code> contributes 10 points.</li>
<li>Pseudo-class: <code>:hover</code> adds another 10 points.</li>
</ul>
<p>Add up all these values:</p>
<p>1 (element) + 20 (classes) + 10 (attribute) + 10 (pseudo-class) = 41.</p>
<p>So, the specificity value of the selector <code>a.harryclass.rohan-class[href]:hover</code> will be 41.</p>

CSS Specificity

<p>The CSS background property helps set the background style, property, and effects of the element.</p>
<p>There are various background properties, such as:</p>
<h2>Background color</h2>
<p>The background color property sets the background colour of HTML tags such as div, section, p, etc.</p>
<h3><strong>Syntax:</strong></h3>
<pre class="language-css"><code>selector{
      background-color: color;
}</code></pre>
<p><strong>Note: </strong>Color can be hex, rdb, hsl, etc. To learn more about colors, follow the <a href="../../../tutorial/css-colors/">CSS Colour</a> Tutorial.</p>
<h4>Example:</h4>
<pre class="language-markup"><code>&lt;html&gt;
&lt;head&gt;
    &lt;style&gt;
        div{
            background-color: yellow;
        }
        h1{
            background-color: #FF0000;
        }
        p{
            background-color: orange;
        }
        span{
            background-color: purple;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div&gt;
        &lt;h1&gt;CodeWithHarry&lt;/h1&gt;
        &lt;p&gt;Developer and founder of &lt;span&gt;CodeWithHarry.com&lt;/span&gt;&lt;/p&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h5>Output:</h5>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-backgrounds/background_color.png" alt="cwh tutorial image" width="630"></p>
<h2>Background Image</h2>
<p>The Background Image property sets an image as a background by providing the image URL within the <strong>url()</strong> function.</p>
<h3>Syntax:</h3>
<pre class="language-css"><code>selector{
        background-image: url('image-url');
}</code></pre>
<h4>Example:</h4>
<pre class="language-markup"><code>&lt;style&gt;
        div{
            background-image: url('harrybhai.png');
        }
&lt;/style&gt;</code></pre>
<h5>Output:</h5>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-backgrounds/background_image.png" alt="cwh tutorial image" width="630"></p>
<p>The image is repeated many times because CSS repeats the image on both the x and y axes, to avoid leaving empty spaces due to the image dimensions. To solve this issue, use the background property <span style="text-decoration: underline; color: #252525;">repeat</span>.</p>
<h2>Background repeat</h2>
<p>Background repeat helps to control how the image will repeat.</p>
<h3>Syntax</h3>
<pre class="language-css"><code>selector{
   background-repeat: repeat-x || repeat-y || repeat || no-repeat;
}</code></pre>
<p>background-repeat can be set to repeat, no-repeat, repeat-x (horizontal), or repeat-y (vertical).</p>
<h2>repeat-x&nbsp;</h2>
<p>repeat the image in the x direction or horizontally repeat the image.</p>
<h3>Syntax:</h3>
<pre class="language-css"><code>selector{
   background-repeat: repeat-x;
}</code></pre>
<h4>Example:</h4>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-backgrounds/background_repeat_x.png" alt="cwh tutorial image" width="630"></p>
<h2>repeat-y</h2>
<p>repeat the image in the y direction or vertically repeat the image.</p>
<h3>Syntax:</h3>
<pre class="language-css"><code>selector{
   background-repeat: repeat-y;
}</code></pre>
<h4>Example:</h4>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-backgrounds/background_repeat_y.png" alt="cwh tutorial image" width="630"></p>
<h2>repeat</h2>
<p>The background image is repeated in both the x and y directions. This is the default.</p>
<h3>Syntax:</h3>
<pre class="language-css"><code>selector{
   background-repeat: repeat;
}</code></pre>
<h4>Example:</h4>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-backgrounds/background_repeat_repeat.png" alt="cwh tutorial image" width="630"></p>
<h2>no-repeat</h2>
<p>The background image is not repeated in any direction. Only one image will be on the screen.</p>
<h3>Syntax:</h3>
<pre class="language-css"><code>selector{
   background-repeat: no-repeat;
}</code></pre>
<h4>Example:</h4>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-backgrounds/background_repeat_no_repeat.png" alt="cwh tutorial image" width="630"></p>
<h2>Background Size</h2>
<p>The Background Size property sets custom sizes for the background image.</p>
<h3 dir="ltr">Syntax:</h3>
<pre class="language-css"><code>selector{
    background-size: propery-value;
}</code></pre>
<p dir="ltr">Property-value can be any of the following:</p>
<p dir="ltr">&nbsp;</p>
<h2>cover:&nbsp;</h2>
<p>The image fits the whole screen according to the dimensions; the background area will be completely covered by the image while maintaining its aspect ratio.</p>
<h3>Syntax</h3>
<pre class="language-css"><code>div{
     background-image: url("./harrybhai.png");
     background-size: cover;
}</code></pre>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-backgrounds/background_size_cover.png" alt="cwh tutorial image" width="630"></p>
<h2>contain:&nbsp;</h2>
<p>Scales the image to fit within the background area entirely while maintaining its aspect ratio.</p>
<h3>Syntax:</h3>
<pre class="language-css"><code>div{
    background-image: url("./harrybhai.png");
    background-size: contain;
}</code></pre>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-backgrounds/background_size_contain.png" alt="cwh tutorial image" width="630"></p>
<h2>auto</h2>
<p>The image will be displayed in its original size. This is the default</p>
<h3>Syntax:</h3>
<pre class="language-css"><code>div{
    background-image: url("./harrybhai.png");
    background-size: auto;
}</code></pre>
<h3 dir="ltr">&nbsp;</h3>
<h2 dir="ltr">Distinct width and height</h2>
<p dir="ltr">We can manually set the width and height of the background image.</p>
<h3 dir="ltr">Syntax:</h3>
<pre class="language-css"><code>div{
    background-image: url("./harrybhai.png");
    background-size: 100% 100%;
}</code></pre>
<p><strong>Note:&nbsp;</strong>The width and height are<strong> </strong>used in percentage(%);</p>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-backgrounds/background_size_custom.png" alt="cwh tutorial image" width="630"></p>
<h2>Background Position</h2>
<p dir="ltr">This property sets the starting position of the background image within the container (parent div).</p>
<p dir="ltr">By default, the position is <strong>top left</strong>.</p>
<h3 dir="ltr">Syntax:</h3>
<pre class="language-css"><code>selector{
     background-position: property-value;
}</code></pre>
<p>Property value can be <strong>top, bottom, left, right, or center. </strong>We use combinations of positions such as top left, top right, bottom left, bottom right, centre, etc.</p>
<h4>Example:</h4>
<pre class="language-css"><code>div{
     background-image: url("./harrybhai.png");
     background-repeat: no-repeat;
     background-position: top right;
}</code></pre>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-backgrounds/background_position.png" alt="cwh tutorial image" width="630"></p>
<h2>Background Attachment</h2>
<p>The background-attachment property determines whether the background image scrolls with the content.</p>
<h3>Syntax:</h3>
<pre class="language-css"><code>div{
    background-attachment: fixed || scroll;
}</code></pre>
<p>Use fixed for a fixed background, or scroll for a scrolling background.</p>
<p>&nbsp;</p>
<h2>Shorthands</h2>
<p>All the background properties would look something like this in a single line.</p>
<h3>Syntax</h3>
<pre class="language-css"><code>selector{
    background: [background-color] [background-attachment] [background-image] [background-repeat] [background-position];
}
</code></pre>
<h4>Example:</h4>
<pre class="language-css"><code>div{
    background: purple fixed url("./harrybhai.png") no-repeat right top;
}</code></pre>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-backgrounds/background_shorthand.png" alt="cwh tutorial image" width="630"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>

CSS Backgrounds

<p>The color property of CSS helps to set the color of the HTML element(s). This helps to set the foreground color of text, text decorations, and borders.</p>
<h2>Syntax:</h2>
<pre class="language-css"><code>/* Syntax
selector {
    color: value
} 
*/
selector {
    /* colorname can be any colour, such as red, blue, yellow, purple, green, etc. */
    color: colorname
}</code></pre>
<p><strong>Note</strong>:<strong> </strong>In CSS we use <strong>color,</strong> not colour.</p>
<h4>Example:</h4>
<pre class="language-markup"><code>&lt;head&gt;
    &lt;style&gt;
        p{
            color: purple;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;p&gt;Hello World&lt;/p&gt;
    &lt;p&gt;CodeWithHarry&lt;/p&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
<h4>Output:</h4>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-colors/color_name.png" alt="cwh tutorial image" width="630"></p>
<div>There are many ways to set the property-value of color, with some of the most common listed below.</div>
<h2>Hexadecimal notation:</h2>
<p>The hex code consists of a hash(#) symbol followed by six characters. These six characters are arranged into a set of three pairs (RR, GG, and BB).</p>
<p>Each character pair defines the intensity level of the colour, where R stands for red, G stands for green, and B stands for blue.</p>
<p>The intensity value lies between 00 (no intensity) and ff (maximum intensity).</p>
<p>Breaking the Character Set (RRGGBB):</p>
<ul>
<li><strong>RR</strong>: RR defines the intensity of color red, ranging from 00 (no red) to FF (maximum red).</li>
<li><strong>GG</strong>: GG defines the intensity of color Green, with values from 00 (no green) to FF (full green).</li>
<li><strong>BB</strong>: GG defines the intensity of color Blue, varying from 00 (no blue) to FF (full blue).</li>
</ul>
<h3 dir="ltr">Syntax:</h3>
<pre class="language-css"><code>seletor {
       color: #RRGGBB;
}</code></pre>
<h4 dir="ltr">Example:</h4>
<pre class="language-markup"><code>&lt;head&gt;
    &lt;style&gt;
       h1 {
            color: #FF0000;
            /*Pure Red*/
        }
        h2 {
            color: #00FF00;
            /* Pure Green */
        }
        h3 {
            color: #0000FF;
            /* Pure Blue */
        }
        h4 {
            color: #b700ff;
            /* Custom Color */
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;CodeWithHarry&lt;/h1&gt;
    &lt;h2&gt;A Developer&lt;/h2&gt;
    &lt;h3&gt;Founder CodeWithHarry.com&lt;/h3&gt;
    &lt;h4&gt;Hello World&lt;/h4&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4>Output:</h4>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-colors/hex.png" alt="cwh tutorial image" width="630"></p>
<h2>RGB</h2>
<p>RGB stands for &ldquo;Red, Green, Blue,&rdquo; and it defines the colour value by taking three (red, green, blue) arguments.</p>
<p>Each argument value lies between 0 and 255.</p>
<h3 dir="ltr">Syntax:</h3>
<pre class="language-css"><code>selector{
       color: rgb(red, green, blue);
}</code></pre>
<h4>Example:</h4>
<pre class="language-markup"><code>&lt;head&gt;
    &lt;style&gt;
        h1 {
            color: rgb(0, 0, 0);
            /* red:0, green:0, blue:0 */
        }

        h2 {
            color: rgb(255, 255, 255);
            /* red:255, green:255, blue:255 */
        }

        h3 {
            color: rgb(30, 150, 220);
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;h1&gt;CodeWithHarry&lt;/h1&gt;
    &lt;h2&gt;A Developer&lt;/h2&gt;
    &lt;h3&gt;CodeWithHarry.com founder&lt;/h3&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
<h4>Output:</h4>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-colors/rgb.png" alt="cwh tutorial image" width="630"></p>
<h3><strong>RGBA</strong></h3>
<p>Similar to RGB, in RGBA, <strong>a</strong> stands for alpha value, which defines the opacity of the color. The alpha value lies between 0 and 1.</p>
<h4>Syntax:</h4>
<pre class="language-css"><code>selector{
       color: rgb(red, green, blue, opacity);
}</code></pre>
<h4>Example:</h4>
<pre class="language-markup"><code>&lt;head&gt;
    &lt;style&gt;
        h1 {
            color: rgba(0, 0, 0, 0.8);
            /* red:0, green:0, blue:0, Alpha: 0.8 = 80% */
        }

        h2 {
            color: rgb(255, 255, 255, 0.6);
            /* red:255, green:255, blue:255 */
        }

        h3 {
            color: rgba(30 150 220 / 60% );
            /* red:30, green:150, blue:200, alpha:60% */
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;h1&gt;CodeWithHarry&lt;/h1&gt;
    &lt;h2&gt;A Developer&lt;/h2&gt;
    &lt;h3&gt;CodeWithHarry.com founder&lt;/h3&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
<h5>Output:</h5>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-colors/rgba.png" alt="cwh tutorial image" width="630"></p>
<h2><strong>HSL</strong></h2>
<p>HSL stands for hue, saturation, and lightness. This is another way to set colour properties.</p>
<p>Breaking each keyword:</p>
<h3>Hue(h)</h3>
<ul>
<li>Hue represents the type of color. It is measured in degrees, and its value lies from 0 to 360.</li>
<li>0 degree represents black, 120 degree is for green, and 360 degree is for blue.</li>
</ul>
<h3>Saturation (S):</h3>
<ul>
<li>Saturation controls the intensity or purity of the color. It is measured in percentage, and its value lies between 0% and 100%.</li>
<li>0% saturation is no color (grayscale),&nbsp; and 100% saturation is the most intense colour.</li>
</ul>
<h3>Lightness (L):</h3>
<ul>
<li>Lightness determines how light or dark the colour is. It is measured in percentage, and its value lies between 0% and 100%.</li>
<li>0% lightness represents pure black, 50% lightness represents normal colour, and 100% lightness is pure white.</li>
</ul>
<h4>Syntax:</h4>
<pre class="language-css"><code>selector{
       color: hsl(hue, saturation, lightness);
}</code></pre>
<h4>Example:</h4>
<pre class="language-markup"><code>&lt;head&gt;
    &lt;style&gt;
        h1 {
            color: hsl(235, 100%, 50%);
        }
        p {
            color: hsl(0, 0%, 0%);
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;h1&gt;CodeWithHarry&lt;/h1&gt;
    &lt;p&gt;A Developer&lt;/p&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
<h5>Output:</h5>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-colors/hsl.png" alt="cwh tutorial image" width="630"></p>
<h3>HSLA</h3>
<p>HSLA is similar to HSL; here, <strong>A</strong> stands for alpha value, which is used to set the opacity. Alpha values lie between 0 and 1.</p>
<h4>Syntax:</h4>
<pre class="language-css"><code>selector{
       color: hsla(hue, saturation, lightness, alpha);
}</code></pre>
<h4>Example:</h4>
<pre class="language-markup"><code>&lt;head&gt;
    &lt;style&gt;
        h1 {
            color: hsla(235, 100%, 50%, 0.7);
        }
        p {
            color: hsl(0, 0%, 0%, 0.4);
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;h1&gt;CodeWithHarry&lt;/h1&gt;
    &lt;p&gt;A Developer&lt;/p&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
<h5>Output:</h5>
<p><img src="https://cwh-full-next-space.fra1.cdn.digitaloceanspaces.com/tutorial/css-colors/hsla.png" alt="cwh tutorial image" width="630"></p>
<p>&nbsp;</p>

CSS Colors