WEB DEVELOPMENT SERIES(PART- 4)
This blog is a part of the web development series. If you haven’t gone through the previous parts then please go through them.
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.
Color Names
In HTML, a color can be specified by using a color name. HTML supports 140 standard color names.
Colors are used to make the page more attractive. Here are the different styles which can be used to create new colors by combination of different colors.
Hexadecimal Style : In this style, we define the color in 6 digit hexadecimal number (from 0 to F). It is denoted by ‘#’. The first two digits indicate red color, next two green color and the last two blue color.
Examples : If we want all ‘h1’ tags of purple color.
h1{
color:#00FF00;
}RGB Style [Red Green Blue] : In this we need to give 3 numbers indicating the amount of red, green and blue colors respectively required in the mixed color. The range of each color is from 0 to 255.
Example: If we want all ‘h1’ tags of green color.
h1{
color:rgb(0, 255, 0);
}Note: rgba(0, 0, 0) is Black color and rgb(255, 255, 255) is White color.
RGBA Style [Red Green Blue Alpha] : This style allows us to make the color transparent according to our will. Alpha indicates the degree of transparency. The range of green, blue and red is from 0 to 255 and that of alpha is from 0 to Example: If we want all ‘h1’ tags of green color.
h1{
color:rgba(11, 99, 150, 1);
}HSL colors : Here ‘H’ stands for hue, ‘S’ for Saturation and ‘L’ for Lightness. HSL color values are specified as:
Syntax:
hsl(hue, saturation, lightness)Code for above styles:-
<!DOCTYPE html>
<html>
<body>
<p>Bhavya Tyagi</p>
<h1 style=”background-color:rgb(255, 99, 71);”>rgb(255, 99, 71)</h1>
<h1 style=”background-color:#ff6347;”>#ff6347</h1>
<h1 style=”background-color:hsl(9, 100%, 64%);”>hsl(9, 100%, 64%)</h1>
<p>Web Development Series</p>
<h1 style=”background-color:rgba(255, 99, 71, 0.5);”>rgba(255, 99, 71, 0.5)</h1>
<h1 style=”background-color:hsla(9, 100%, 64%, 0.5);”>hsla(9, 100%, 64%, 0.5)</h1>
<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>
</body>
</html>
Output of the above code:-
HTML Lists
HTML lists allow web developers to group a set of related items in lists.
Example
An unordered HTML list:
- Item
- Item
- Item
- Item
An ordered HTML list:
- First item
- Second item
- Third item
- Fourth item
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML List Tags :
<ul>- Defines an unordered list
<ol>- Defines an ordered list
<li> - Defines a list item
<dl>- Defines a description list
<dt>- Defines a term in a description list
<dd>- Describes the term in a description list
So, now let’s end this blog here and in next blog we will learn some more basics of HTML in brief like HTML Classes and some basic CSS too.
“Until then Goodbye, Stay Safe!”
