CSS Properties; CSS fonts(CSS Font Weight and CSS color
CSS Font Weight
The CSS font-weight is used to specify the thickness and boldness of an element's font. Simply, it defines the weight of the text. There is a difference in the available weight depending on the font family used by the browser.
Normal: This is the default font-weight with a numeric value of 400.
Lighter: This value considers the available font weight of the font family and makes it lighter than the original element.
Bolder: This value considers the available font weight of the font family and makes it heavier than the original element.
Bold: This value defines the bold font weight and has a numeric value of 700.
Number: This value sets the font-weight according to the stipulated number. It varies between 1 to 1000.
Initial: This is the value used to set the font-weight back to its default value.
Below is an example that illustrates the CSS font-weight.
<!DOCTYPE html>
<html>
<head>
<title> font-weight property example </title>
<style>
body{
font-family: sans-serif;
}
p.one{
font-weight: normal;
}
p.two{
font-weight: lighter;
}
p.three{
font-weight: bolder;
}
p.four{
font-weight: bold;
}
p.five{
font-weight: 1000;
}
p.six{
font-weight: initial;
}
p.seven{
font-weight: inherit;
}
p.eight{
font-weight: unset;
}
</style>
</head>
<body>
<p class="one">
normal property value example
</p>
<p class="two">
lighter property value example
</p>
<p class="three">
bolder property value example
</p>
<p class="four">
bold property value example
</p>
<p class="five">
number property value example
</p>
<p class="six">
initial property value example
</p>
<p class="seven">
inherit property value example
</p>
<p class="eight">
unset property value example
</p>
</body>
</html>
CSS Color
CSS Font Weight Values
The CSS color property sets the HTML color elements. In most cases, this property is used to form an element's background color or font color.
The color values we use in CSS specify the color and allow border color and other decorative effects.
The following modes specify the color of an element:
RGB Format
This is an acronym for the 'RED GREEN and BLUE' format used to define the color of an HTML element by just specifying the values of R, G, and B that are in the range of 0 to 255. The color values of this format are specified using the rgb() property, allowing three values that can either be in percentage or integer (range from 0 to 255).
It is important to note that this property is not supported in every browser, so it is not advised to use it.
RGBA Format
This is identical to RGB format except that it contains A (Alpha), which defines an element's transparency. The value of A (Alpha) ranges between 0.0 to 1.0, in which 0.0 depicts fully transparent, and 1.0 depicts not transparent.
Hexadecimal Notation
Hexadecimal is a six-digit color illustration. The notation starts with the # symbol and is usually followed by six characters ranging from 0 to F. In a hexadecimal notation, RR is represented by the first pair of numbers, the second pair of numbers represents GG, and the third pair of numbers represents BB.
For example, the black color notation in hexadecimal is #000000, and the white color is #FFFFFF.
Short Hex codes
This is another form of hexadecimal notation in which each digit is recreated to produce an equivalent hexadecimal value. For example, #7B6 is the equivalent of #77BB66 in hexadecimal. It is shorter than a hexadecimal notation.
The black color notation in short hex is #000, and the white color notation in short hex is #FFF.
HSL
This is an acronym for Hue, Saturation, and Lightness.
Hue is the degree on the color wheel from 0 to 360. 0 means red, 120 means green, and 240 means blue.
Saturation takes value in percentage. 100% means fully saturated, i.e., no shades of gray, 50% means 50% gray, but the color is still seen, and 0% means fully unsaturated, i.e., completely gray, and the color is not. Lightness is the amount of light we wish to provide the color. 0% is black, depicting the absence of light, 50% is neither dark nor light, and 100% is white, showing total lightness.
HSLA
This is quite similar to the HSL property. The only exception is its A (alpha), which specifies the transparency of an element. Its value ranges from 0.0 to 1.0, where 0.0 signifies fully transparent, and 1.0 signifies not transparent.
Built-in Color
The term built-in color refers to a collection of previously defined colors used by naming them something like red, blue, green, etc.
Below is the built-in colors list and their decimal and hexadecimal values.
| S.no. | Color name | Hexadecimal Value | Decimal Value or rgb() value |
| 1. | Red | #FF0000 | rgb(255,0,0) |
| 2. | Orange | #FFA500 | rgb(255,165,0) |
| 3. | Yellow | #FFFF00 | rgb(255,255,0) |
| 4. | Pink | #FFC0CB | rgb(255,192,203) |
| 5. | Green | #008000 | rgb(0,128,0) |
| 6. | Violet | #EE82EE | rgb(238,130,238) |
| 7. | Blue | #0000FF | rgb(0,0,255) |
| 8. | Aqua | #00FFFF | rgb(0,255,255) |
| 9. | Brown | #A52A2A | rgb(165,42,42) |
| 10. | White | #FFFFFF | rgb(255,255,255) |
| 11. | Gray | #808080 | rgb(128,128,128) |
| 12. | Black | #000000 | rgb(0,0,0) |
<html>
<head>
<title>CSS hsl color property example</title>
<style>
h1{
text-align:center;
}
#rgb{
color:rgb(255,0,0);
}
#rgba{
color:rgba(255,0,0,0.5);
}
#hex{
color:#EE82EE;
}
#short{
color: #E8E;
}
#hsl{
color:hsl(0,50%,50%);
}
#hsla{
color:hsla(0,50%,50%,0.5);
}
#built{
color:green;
}
</style>
</head>
<body>
<h1 id="rgb">
Hello Developers. This is the RGB format example.
</h1>
<h1 id="rgba">
Hello Developers. This is the RGBA format example.
</h1>
<h1 id="hex">
Hello Developers. This is the Hexadecimal format example.
</h1>
<h1 id="short">
Hello Developers. This is the Short-hex format example.
</h1>
<h1 id="hsl">
Hello Developers. This is the HSL format example.
</h1>
<h1 id="hsla">
Hello Developers. This is the HSLA format example.
</h1>
<h1 id="built">
Hello Developers. This is the Built-in color format example.
</h1>
</body>
</html>
