HTML Style and HTML Color full tutorial with examples

Published by StudyMuch on December 26, 2021December 26, 2021

HTML TUTORIAL (PART-03)

HTML Style and HTML Color

Here we learn HTML Style and HTML color-

HTML Style

There are Three types of Style in HTML.

Inline Style Sheet
Internal Style Sheet
External Style Sheet

HTML Style are used to style HTML element that means changing default value of file and pages. Style is change as text color, font size, background image and color, text alignment, font family etc.

Inline Style Sheet:

Inline style is used to style element using the style attribute using CSS declaration. It is used to inside of element tag.

Inline Styling Syntax

<h1
style="color: blue; font-style: italic;
 font-size: 20px;">
I am example of Inline Style</h1>

Example of Inline Style Sheet:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>StudyOns.Com</title>
</head>
<body>
    <h1 style="color: blue; font-style: italic; 
font-size: 20px;">
        I am example of Inline Style</h1>
</body>
</html>

Internal Style Sheet

Internal Style Sheet is also called internal Styling. An Internal Style Sheet is composed of one or more (CSS) ‘Cascading Style Sheet’ rule.

They are also enclosed inside the <style> element with <style type=”text/css”> attribute which is inside the <head> element.

Internal Style Sheet Syntax:

<style
type="text/css">
        h1 { color: brown;
             font-size: 10px;
             background-color: aqua;}
</style>

Internal styling is used to style element using the <style> attribute with CSS declaration inside like inline styling.

Example of Internal style Sheet

<!DOCTYPE html>
<html lang="en">
<head>
    <title>StudyOns.Com</title>
    <style type="text/css">
        h1 { color: brown;
             font-size: 10px;
             background-color: aqua;}
    </style>
</head>
<body>
    <h1>I am example of Internal 
Style Sheet </h1>
</body>
</html>

External Style Sheet

An External Style Sheet is a separate CSS file that can be accessed by creating a link and add within the <head> element of the HTML webpages. We can use sane link in multiple webpages to access the external stylesheet. External stylesheet filename extension is .css that contain the Cascading Style Sheet.

External Styling Syntax

In external style sheet this above syntax are important for html webpages, you can name the CSS file whatever you want such as stydyons.css.

Example of External Style Sheet

<!DOCTYPE html>
<html lang="en">
<head>
    <link
rel="stylesheet"
type="text/css"
href="stylesheet.css">
</head>
<body>
    <h1>I am example of external Style 
 Sheet </h1>
    <p>In External styling you link .css 
file in HTML pages</p>
</body>
</html>

Here the example of some styling in CSS, we read in this tutorial. Like background color, text color, text font-family, text size, text aligning.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Examole of HTML Styling</title>
    <style type="text/css">
        h1 {color: blue;}
    </style>
</head>
<body>
    <h1>My color is blue </h1>
    <p
style="font-family: vardana;">
my font-family is </p>
    <p style="background-color: yellow;">
my backgroung
 color is yellow</p>
    <p style="font-size: 20px;">
my size is 20px</p>
    <p style="text-align: center;">
my text align is center</p>
</body>
</html>

Output of above Example

My color is blue
my font-family is

my backgroung color is yellow

my size is 20px

my text align is centre

HTML Colors:

HTML color can define using the following:

HTML color are defining three types, look here below.

Color Name. It is defining any color by using color name for example: white, blue, red etc.
RGB Color Value. RGB stand for Red, Green, Blue. It define any color by using this format “rgb(number, number, number)” for example: (192, 192, 192), rgb(255. 0, 0) etc.
Hex Color Value. It is also called Hexadecimal Color Value, it is defining any color by using hash, letter and number, for example: #00ffff, #ffffff, #800080 etc.

Here we are understanding by using some examples.

Example of HTML color (Color Name, RGB Color Value, Hex Color Value)

Example of HTML color.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>StudyOns.Com</title>
    <style
type="text/css">
        h1 {color: blue;}
    </style>
</head>
<body>
    <h5 style="text-decoration: underline;">
Ex. of HTML
Colors</h5>
    <!--By using Color Nama-->
    <p style="color: blue;">
My color is blue </p>
    <!--By using Hexadecimal Color Value-->
    <p style="color: #800080;"> RGB Color Value</p>
    <!--By using RGB color Value
-->
    <P style="color: rgb(255,0,255);">
Hexadecimal Color</P>
</body>
</html>

Output of above Example

Ex. of HTML Colors

My color is blue

RGB Color Value

Hexadecimal Color

In this Tutorial we learn HTML Style and HTML Color, next tutorial we will be learn a new topic in HTML.

Read also-

Style attribute in html,
Html color picker,
Html inline style,
Html text color,
Background color in html,
Font style in html,
How to link CSS file to html,

3 Comments

XMC.pl · May 13, 2022 at 12:27 am

Cheers for the fantastic information enclosed here in your blog, here is a little question for your blog website readers. Who actually stated the following quote? . . . .Determine never to be idleIt is wonderful how much may be done if we are always doing.

zoritoler imol · June 30, 2022 at 2:06 pm

With every little thing which appears to be developing within this particular area, many of your perspectives tend to be very exciting. Nonetheless, I beg your pardon, but I do not give credence to your entire strategy, all be it exhilarating none the less. It appears to everybody that your commentary are not entirely justified and in actuality you are yourself not really thoroughly certain of your point. In any event I did appreciate examining it.