HTML Style and HTML Color full tutorial with examples

Published by StudyMuch on

Html style and color

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.

  1. Inline Style Sheet
  2. Internal Style Sheet
  3. 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.

  1. 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>
  1. 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>
  1. 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

<link
rel=“stylesheet”
type=“text/css”
href=“stylesheet.css”>

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,

 


73 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.

Lucius Vaudreuil · September 23, 2022 at 12:46 pm

You are a very clever individual!

bbc persian · July 25, 2023 at 2:22 am

Wonderful post! We will be linking to this great article on our site. Keep up the great writing

deap-throating · July 25, 2023 at 2:48 am

You can definitely see your expertise in the work you write. The world hopes for more passionate writers like you who are not afraid to say how they believe. Always go after your heart.

2m live · July 26, 2023 at 11:22 pm

it’s awesome article. I look forward to the continuation.

newsmax live · July 28, 2023 at 3:27 am

As I website owner I believe the content material here is really good , appreciate it for your efforts.

2m en direct · July 29, 2023 at 2:36 am

Very nice blog post. I definitely love this site. Stick with it!

mpo agen · July 29, 2023 at 7:52 am

Today, while I was at work, my sister stole my apple ipad and tested to see if
it can survive a 40 foot drop, just so she can be a youtube sensation. My iPad is now broken and she has 83 views.

I know this is entirely off topic but I had to share it with someone!

rtp slot hari ini · July 29, 2023 at 3:36 pm

Please let me know if you’re looking for a article author for
your blog. You have some really good articles and I feel I would
be a good asset. If you ever want to take some of the load off,
I’d really like to write some material for your blog in exchange for
a link back to mine. Please send me an e-mail if interested.
Kudos!

rtp slot hari ini · July 30, 2023 at 7:49 am

Good way of describing, and nice post to get facts concerning my
presentation topic, which i am going to present in university.

kingslot · July 30, 2023 at 10:04 am

I really like your blog.. very nice colors & theme.
Did you design this website yourself or did you hire someone to do it for you?
Plz reply as I’m looking to design my own blog and would like to know where u got this from.
thank you

situs slot gacor · July 30, 2023 at 10:04 pm

Hi there, just became alert to your blog through Google,
and found that it is truly informative. I’m going to watch out for
brussels. I will appreciate if you continue this in future.
A lot of people will be benefited from your writing.

Cheers!

kingslot96 · July 31, 2023 at 3:37 am

If some one wishes to be updated with newest technologies after that he must be pay a visit this website and be up to date daily.

situs slot gacor · July 31, 2023 at 7:22 am

great put up, very informative. I ponder why the other
specialists of this sector don’t realize this.
You should proceed your writing. I’m confident, you’ve a great readers’
base already!

mpoagen · August 1, 2023 at 11:50 pm

Hi everyone, it’s my first go to see at this website, and post is truly fruitful for me, keep up posting such articles.

mpo · August 2, 2023 at 4:15 am

What’s up, I check your blogs regularly. Your writing style is witty,
keep doing what you’re doing!

ayam gacor · August 2, 2023 at 8:42 pm

This is really fascinating, You are a very skilled
blogger. I’ve joined your rss feed and sit up
for searching for extra of your great post.
Additionally, I have shared your site in my social networks

situs slot gacor · August 3, 2023 at 1:11 am

This paragraph will help the internet people for creating new web site or even a weblog from
start to end.

rtp slot · August 3, 2023 at 1:03 pm

I am curious to find out what blog system you’re using? I’m experiencing some small security problems with my latest site
and I would like to find something more risk-free.
Do you have any recommendations?

situs slot gacor · August 3, 2023 at 4:02 pm

Ridiculous story there. What happened after? Thanks!

Psychic Parties · August 5, 2023 at 5:57 pm

you’re really a good webmaster. The site loading speed is incredible. It seems that you are doing any unique trick. Also, The contents are masterpiece. you have done a great job on this topic!

rtp slot · August 9, 2023 at 3:27 am

Hey! I just wanted to ask if you ever have any problems with hackers?

My last blog (wordpress) was hacked and I ended
up losing several weeks of hard work due to no back up.
Do you have any methods to stop hackers?

strippers near me · August 15, 2023 at 10:36 pm

Hi! Someone in my Myspace group shared this website with us so I came to check it out. I’m definitely loving the information. I’m book-marking and will be tweeting this to my followers! Fantastic blog and excellent design and style.

bbc farse · August 16, 2023 at 7:31 am

Some really excellent info, Sword lily I detected this.

bokep indo · August 16, 2023 at 8:34 am

Hello my friend! I wish to say that this article is amazing, nice written and include approximately all significant infos. I?d like to see extra posts like this .

strippers jobs near me · August 24, 2023 at 3:45 am

I would like to thank you for the efforts you’ve put in writing this blog. I’m hoping the same high-grade website post from you in the upcoming as well. Actually your creative writing skills has encouraged me to get my own site now. Actually the blogging is spreading its wings quickly. Your write up is a good example of it.

kingslot96 · August 30, 2023 at 10:42 am

After looking at a handful of the blog articles on your site, I truly appreciate your technique of blogging.
I book-marked it to my bookmark webpage list
and will be checking back soon. Please check out my website too and let me know what you think.

mpoagen · August 30, 2023 at 11:08 am

Thanks for sharing your thoughts. I really appreciate your efforts and I am
waiting for your next write ups thank you once again.

iconwin · August 30, 2023 at 11:33 am

I was recommended this web site by way of my cousin. I’m no longer sure whether this submit is written via him as no one else recognise
such targeted approximately my problem. You are amazing!
Thanks!

iconwin · August 30, 2023 at 12:08 pm

Hi mates, its wonderful article regarding cultureand entirely explained, keep it up all the time.

situs slot gacor · August 30, 2023 at 12:40 pm

I’m not that much of a online reader to be honest but your sites
really nice, keep it up! I’ll go ahead and bookmark your site to come back in the future.
Cheers

how to become an iso · September 12, 2023 at 1:56 pm

Hey there just wanted to give you a brief heads up and let you know a few of the pictures aren’t loading properly. I’m not sure why but I think its a linking issue. I’ve tried it in two different web browsers and both show the same outcome.

iconwin · October 1, 2023 at 5:35 am

When someone writes an piece of writing he/she retains the
thought of a user in his/her brain that how a user can know it.
Therefore that’s why this post is outstdanding. Thanks!

starting a credit card processing business · October 2, 2023 at 8:55 pm

Youre so cool! I dont suppose Ive read anything like this before. So good to search out any person with some unique thoughts on this subject. realy thanks for starting this up. this web site is something that’s needed on the web, somebody with a bit originality. helpful job for bringing one thing new to the web!

kingslot96 · October 3, 2023 at 7:58 am

Hello! Someone in my Facebook group shared this site with us
so I came to take a look. I’m definitely loving the information.
I’m bookmarking and will be tweeting this to my followers!
Great blog and superb style and design.

iconwin · October 5, 2023 at 4:24 am

Hello There. I found your blog using msn. This is a very well written article.
I will be sure to bookmark it and return to
read more of your useful info. Thanks for the post. I will certainly comeback.

iconwin · October 6, 2023 at 11:33 am

Heya i am for the first time here. I found this board and I find It truly useful & it helped me out
much. I hope to give something back and help others like you helped
me.

sboagen · October 7, 2023 at 9:19 am

Thanks for ones marvelous posting! I definitely enjoyed reading it,
you are a great author. I will make certain to bookmark your blog and will often come back from now
on. I want to encourage one to continue your
great writing, have a nice weekend!

iconwin · October 7, 2023 at 3:14 pm

It’s nearly impossible to find knowledgeable people for this topic, but
you sound like you know what you’re talking about!
Thanks

iconwin · October 7, 2023 at 4:30 pm

Wow, that’s what I was exploring for, what a data!
existing here at this website, thanks admin of this web site.

kingslot96 · October 7, 2023 at 5:00 pm

Fantastic website. Plenty of useful information here. I
am sending it to some pals ans also sharing in delicious.
And naturally, thanks for your sweat!

kingslot96 · October 26, 2023 at 7:06 pm

Fine way of explaining, and good article to get data on the topic of
my presentation topic, which i am going to present in college.

iconwin · October 26, 2023 at 7:51 pm

I every time used to study paragraph in news papers but now as I am a user of internet so from now I
am using net for articles, thanks to web.

kingslot96 · October 27, 2023 at 11:55 am

Thanks very nice blog!

iconwin · October 27, 2023 at 1:03 pm

I was curious if you ever considered changing the structure of your website?
Its very well written; I love what youve got to say. But maybe you could
a little more in the way of content so people could connect with it better.
Youve got an awful lot of text for only having one or
2 pictures. Maybe you could space it out better?

kingslot96 · October 27, 2023 at 2:50 pm

Your mode of explaining the whole thing in this post is
truly nice, every one be capable of without difficulty know it, Thanks
a lot.

iconwin · October 27, 2023 at 3:57 pm

You actually make it seem so easy with your presentation but I find this matter
to be really something which I think I would never understand.
It seems too complicated and extremely broad for me.
I am looking forward for your next post, I’ll try to get the hang of it!

kingslot96 · October 27, 2023 at 8:14 pm

Awesome post.

iconwin · October 28, 2023 at 6:02 am

Hi, I do think this is an excellent blog. I stumbledupon it 😉 I am going to return yet again since i have book marked it.
Money and freedom is the best way to change, may
you be rich and continue to help other people.

kingslot96 · October 30, 2023 at 3:36 pm

This text is worth everyone’s attention. Where can I find out more?

winmacsofts · October 31, 2023 at 4:45 pm

I just could not depart your website prior to suggesting that I really enjoyed the standard information a person provide for your visitors? Is going to be back often to check up on new posts

kingslot96 · November 5, 2023 at 8:21 am

I think this is among the most important information for me.
And i am glad reading your article. However should commentary on some basic things, The web site style is wonderful,
the articles is really nice : D. Just right job, cheers

starting a credit card processing business · November 6, 2023 at 12:18 am

Hey there just wanted to give you a quick heads up and let you know a few of the pictures aren’t loading properly. I’m not sure why but I think its a linking issue. I’ve tried it in two different web browsers and both show the same outcome.

how to be a credit card processor · November 6, 2023 at 12:29 am

I?m not sure where you are getting your information, but great topic. I needs to spend some time learning more or figuring out more. Thanks for magnificent info I used to be searching for this info for my mission.

iconwin · November 6, 2023 at 5:56 am

What’s up, every time i used to check blog posts here in the early hours in the dawn, because i like to learn more and more.

mpoagen · November 6, 2023 at 9:23 am

I do trust all the ideas you have introduced to your post.
They’re very convincing and can definitely work. Nonetheless, the posts are too brief for newbies.
Could you please extend them a little from subsequent time?
Thank you for the post.

clit Jewels · November 7, 2023 at 2:57 am

I loved as much as you will receive carried out right here. The sketch is attractive, your authored subject matter stylish. nonetheless, you command get got an nervousness over that you wish be delivering the following. unwell unquestionably come more formerly again as exactly the same nearly very often inside case you shield this hike.

dubai racing live · January 2, 2024 at 11:47 pm

Thank you for great article, look forward to the continuation.

recipes · January 15, 2024 at 6:53 am

I like reading through an article that can make people think. Also, thanks for permitting me to comment.

situs rajamas · January 18, 2024 at 3:21 pm

I really love your website.. Pleasant colors & theme. Did you build this web site yourself? Please reply back as I’m wanting to create my very own blog and want to know where you got this from or what the theme is named. Many thanks.

UFABETเว็บพนันตรงไม่มีขั้นต่ำ · January 19, 2024 at 5:39 am

You should be a part of a contest for one of the most useful websites on the net. I’m going to recommend this site!

homepage · January 21, 2024 at 10:42 am

Hi, just wanted to tell you, I enjoyed this article.
It was helpful. Keep on posting!

watch free movies online · January 21, 2024 at 12:04 pm

This blog was… how do you say it? Relevant!! Finally I have found something that helped me. Many thanks.

concrete cleaning · January 21, 2024 at 3:02 pm

Greetings! Very helpful advice in this particular post! It is the little changes which will make the biggest changes. Many thanks for sharing!

Hylan tillman newest accomplishment · January 23, 2024 at 1:41 pm

This is a good tip particularly to those fresh to the blogosphere. Simple but very accurate info… Thank you for sharing this one. A must read article!

dailynews · February 3, 2024 at 1:50 am

This is a topic which is near to my heart… Take care! Exactly where are your contact details though?

Casinosite · February 5, 2024 at 11:59 am

Howdy! Would you mind if I share your blog with my myspace group? There’s a lot of folks that I think would really enjoy your content. Please let me know. Thanks

Hawaii Graphic Design · February 8, 2024 at 6:27 am

Aw, this was an exceptionally good post. Taking the time and actual effort to create a great article… but what can I say… I put things off a lot and don’t seem to get anything done.

link bokep · February 10, 2024 at 7:23 pm

I really like your wordpress design, wherever did you download it from?

Queens Nails · February 11, 2024 at 9:47 am

Wow, fantastic blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your website is magnificent, as well as the content!

먹튀검증 · February 22, 2024 at 11:34 am

Hey There. I found your blog using msn. This is a really well written article. I?ll be sure to bookmark it and return to read more of your useful information. Thanks for the post. I will certainly return.

betting guest posts · February 24, 2024 at 12:11 pm

This blog was… how do you say it? Relevant!! Finally I’ve found something that helped me. Thanks!

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *