TechnicalcodewithAJ - HTML Page 2

HTML Colors:

Video link: https://youtu.be/X1Rf-ipDtwI

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:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

HTML supports 140 standard color names.

Example 1:

<body>

<h1 style="background-color: tomato;">Tomato</h1>

<h1 style="background-color:dodgerblue;">Dodgerblue</h1>

<h1 style="background-color:Orange;">Orange</h1>

<h1 style="background-color:Yellow;">Yellow</h1>

<h1 style="background-color:mediumseagreen;">Mediumseagreen</h1>

<h1 style="background-color:slateblue;">Slateblue</h1>

<h1 style="background-color:violet;">Violet</h1>

<h1 style="background-color:Lightgray;">Lightgray</h1>

</body>

Background Color:

You can set the background color for HTML elements:

Example 2:

<body>

<h1 style="background-color: tomato;">Tomato</h1>

<p style="background-color: turquoise;">Hello World</p>

<p style="background-color: violet;">Hello World</p>

</body>

Text Color:

You can set the color of text:

Example 3:

<body>

<h1 style="color:blue">Hello World</h1>

<p style="color:Red">Hello World</p>

<p style="color:Orange">Hello World</p>

</body>

Border Color

You can set the color of borders:

Example 4:

<body>

<h1 style="border:2px solid black;">Hello World</h1>

<p style="border:2px solid orangered">Hello World</p>

<p style="border:2px solid red">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum officiis unde blanditiis deleniti ut at ab nulla laborum minus rem, dicta modi in beatae omnis neque fuga illum vel dolorum.</p>

</body>

HTML RGB and RGBA Colors

An RGB color value represents RED, GREEN, and BLUE light sources.

An RGBA color value is an extension of RGB with an Alpha channel (opacity).

RGB Color Values

In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255.

This means that there are 256 x 256 x 256 = 16777216 possible colors!

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255), and the other two (green and blue) are set to 0.

Another example, rgb(0, 255, 0) is displayed as green, because green is set to its highest value (255), and the other two (red and blue) are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

Shades of Gray

Shades of gray are often defined using equal values for all three parameters:

RGBA Color Values:

RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the opacity for a color.

An RGBA color value is specified with:

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)

HEX Color Values

In HTML, a color can be specified using a hexadecimal value in the form:

#rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).

For example, #ff0000 is displayed as red, because red is set to its highest value (ff), and the other two (green and blue) are set to 00.

Another example, #00ff00 is displayed as green, because green is set to its highest value (ff), and the other two (red and blue) are set to 00.

To display black, set all color parameters to 00, like this: #000000.

To display white, set all color parameters to ff, like this: #ffffff.

Experiment by mixing the HEX values below:

#ff6347

RED GREEN BLUE

ff 63 47

HTML HSL and HSLA Colors: part 3

HSL stands for hue, saturation, and lightness.

HSLA color values are an extension of HSL with an Alpha(opacity).

HSL Color Values

In HTML, 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 value, 0% is black, and 100% is white.

Example:

hsl(0, 100%, 50%)

HUE SATURATION LIGHTNESS

0 100% 50%

Example 1:

<body>

</body>

Saturation:

Saturation can be described as the intensity of a color.

100% is pure color, no shades of gray

50% is 50% gray, but you can still see the color.

0% is completely gray, you can no longer see the color.

Example 2:

<body>

</body>

Lightness:

The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).

Example 3:

<body>

</body>

Shades of Gray:

Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0% to 100% to get darker/lighter shades:

EXample 4:

<body>

</body>

HSLA Color Values

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):

Example:

hsla(0, 100%, 50%, 0.5)

HUE SATURATION LIGHTNESS ALPHA

0 100% 50% 0.5

Example 5:

<body>

</body>

HTML id Attribute:

*The HTML id attribute is used to specify a unique id for an HTML element.

*You cannot have more than one element with the same id in an HTML document.

Using The id Attribute:

*The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.

*The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.

*The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.

Example of ID:

<head>

<title>HTML id attribute</title>

<style>

#myId{

background-color: chartreuse;

color:darkblue;

padding:5px;

text-align: center;

}

</style>

</head>

<body>

<h1 id="myId">the html id attribute</h1>

<p id="myId">use the css to style an element with the id</p>

</body>

Note: The id name is case sensitive!

The id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, etc.).

HTML class Attribute:

The HTML class attribute is used to specify a class for an HTML element.

Multiple HTML elements can share the same class.

Using The class Attribute:

*The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.

The Syntax For Class

To create a class; write a dot (.) character, followed by a class name. Then, define the CSS properties within curly braces {}:

Example of Class:

<head>

<title>HTML class attribute</title>

<style>

.city{

background-color:lightgreen;

color:darkslateblue;

padding:5px;

border:2px solid black;

margin:10px;

}

</style>

</head>

<body>

<h2>London</h2>

<p>london is the capital of england</p>

</div>

<h3>paris</h3>

<p>paris is the capital of france</p>

</div>

</body>

Note: The class attribute can be used on any HTML element.

The class name is case sensitive!

Multiple Classes:

*HTML elements can belong to more than one class.

*To define multiple classes, separate the class names with a space,

e.g. <div class="city main">.

Example of Multiple Classes:

<head>

<title>HTML multiple classes</title>

<style>

.city{

background-color:aqua;

color:darkslateblue;

padding:5px;

border:2px solid black;

margin:10px;

}

.main{

background-color: lightgrey;

color:blue;

padding:10px;

border:2px solid yellow;

margin:10px;

}

.url

{

text-align:center;

}

</style>

</head>

<body>

<h2>London</h2>

<p>london is the capital of england</p>

</div>

<h3>paris</h3>

<p>paris is the capital of france</p>

</div>

<h1>this is the largest headding</h1>

</div>

<h6>this is the smallest heading</h6>

</div>

</body>

Difference Between Class and ID:

*A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:

Example of Difference between Class and ID:

<title>Difference between id and class attribute</title>

<style>

#myId{

background-color: lightpink;

color:black;

border:5px solid blue;

padding:5px;

margin:5px;

}

.city{

background-color:aqua;

color:darkslateblue;

padding:5px;

border:2px solid black;

margin:10px;

}

.main{

background-color: lightgrey;

color:blue;

padding:10px;

border:2px solid yellow;

margin:10px;

}

.url

{

text-align:center;

}

</style>

</head>

<body>

<h1>this is the id attribute</h1>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo tempora molestias officia iure rem, quibusdam doloribus maxime soluta neque rerum dolor minima voluptas eaque quis ut fugit, hic provident! Doloremque.</p>

</div>

<h2>London</h2>

<p>london is the capital of england</p>

</div>

<h3>paris</h3>

<p>paris is the capital of france</p>

</div>

<h1>this is the largest headding</h1>

</div>

<h6>this is the smallest heading</h6>

</div>

</body>

Important points to be remembered:

*The id name is case sensitive!

*The id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, etc.).

*The HTML class attribute specifies one or more class names for an element

*Classes are used by CSS and JavaScript to select and access specific elements

*The class attribute can be used on any HTML element

*The class name is case sensitive

*Different HTML elements can point to the same class name