HTML Style and HTML Color full tutorial with examples
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
<link |
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
|
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,
104 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!
Minitool coupon · February 24, 2024 at 1:12 pm
I think this is one of the so much significant info for me. And i’m happy studying your article. However wanna statement on some normal issues, The web site style is perfect, the articles is in point of fact great : D. Just right process, cheers
coffee samplers · February 24, 2024 at 5:34 pm
Pretty! This was an incredibly wonderful article. Thanks for supplying this info.
school and sports physicals with ekg alpharetta georgia · March 3, 2024 at 3:46 am
You ought to be a part of a contest for one of the best websites on the web. I will highly recommend this blog!
AI Agents Blog · April 30, 2024 at 11:18 am
This website definitely has all of the information and facts I needed about this subject and didn’t know who to ask.
beveiligingscamera · May 5, 2024 at 7:20 pm
This page truly has all the information I wanted about this subject and didn’t know who to ask.
xparkles · May 5, 2024 at 7:43 pm
There’s noticeably a bundle to find out about this. I assume you made certain good factors in features also.
bokep jepang · May 5, 2024 at 7:43 pm
Hiya, I am really glad I have found this information. Today bloggers publish just about gossips and net and this is really annoying. A good website with interesting content, this is what I need. Thanks for keeping this web site, I’ll be visiting it. Do you do newsletters? Can not find it.
situs bokep · May 5, 2024 at 8:42 pm
Thanks , I have just been looking for information approximately this subject for ages and yours is the greatest I have came upon till now. But, what concerning the bottom line? Are you positive concerning the supply?
digital media firm · May 6, 2024 at 3:29 am
Your style is very unique compared to other folks I’ve read stuff from. Many thanks for posting when you have the opportunity, Guess I’ll just book mark this page.
Optimisation de revenu locatif Gatineau · May 6, 2024 at 7:38 am
Greetings! Very helpful advice in this particular post! It is the little changes which will make the greatest changes. Thanks for sharing!
bokep indo · May 6, 2024 at 8:14 am
Hi there! I could have sworn I’ve been to this blog before but after reading through some of the post I realized it’s new to me. Anyhow, I’m definitely glad I found it and I’ll be bookmarking and checking back frequently!
kontol kuda · May 6, 2024 at 9:01 am
I just could not depart your site before suggesting that I extremely enjoyed the usual information an individual provide on your guests? Is going to be back frequently to check up on new posts
bokep indo · May 7, 2024 at 5:42 pm
I know this if off topic but I’m looking into starting my own blog and was curious what all is required to get setup? I’m assuming having a blog like yours would cost a pretty penny? I’m not very internet smart so I’m not 100 positive. Any suggestions or advice would be greatly appreciated. Thanks
bokep indo · May 7, 2024 at 6:03 pm
Thanks for another magnificent article. Where else could anybody get that type of info in such an ideal way of writing? I have a presentation next week, and I’m on the look for such information.
link bokep · May 7, 2024 at 7:01 pm
Aw, this was a very nice post. In idea I want to put in writing like this moreover ? taking time and actual effort to make a very good article? however what can I say? I procrastinate alot and on no account appear to get something done.
PSL88 · June 18, 2024 at 11:12 am
Can I just say what a relief to uncover someone that genuinely knows what they are talking about on the internet. You actually understand how to bring a problem to light and make it important. A lot more people must look at this and understand this side of the story. I was surprised you are not more popular since you most certainly possess the gift.
executive coaching services · June 18, 2024 at 12:17 pm
Very good article. I’m going through some of these issues as well..
bokep indo viral terbaru · July 1, 2024 at 2:29 am
Pretty nice post. I simply stumbled upon your blog and wished to say that I have truly enjoyed surfing around your weblog posts. After all I?ll be subscribing for your rss feed and I hope you write once more very soon!
Thca Flower · July 1, 2024 at 6:44 am
It?s really a cool and useful piece of information. I am glad that you just shared this useful info with us. Please stay us up to date like this. Thank you for sharing.
rich queen casino login · July 14, 2024 at 9:57 pm
Thanks for the guidelines shared using your blog. One more thing I would like to say is that fat reduction is not exactly about going on a dietary fads and trying to reduce as much weight as you can in a couple of weeks. The most effective way to lose weight is by acquiring it gradually and following some basic suggestions which can enable you to make the most through your attempt to drop some weight. You may learn and be following some of these tips, nonetheless reinforcing knowledge never damages.
เรื่องย่อซีรี่ย์ revenge of the reborn princess 2023 ย · July 29, 2024 at 1:45 am
Thank you for any other magnificent article. Where else may anybody get that type of info in such an ideal method of writing? I’ve a presentation next week, and I’m at the look for such information.
Luxury Tour company · August 8, 2024 at 2:45 pm
Thank you for the auspicious writeup. It in fact was a amusement account it. Look advanced to more added agreeable from you! By the way, how can we communicate?
카지노총판 · September 17, 2024 at 11:57 pm
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 answer back as I’m looking to construct my own blog and would like to know where u got this from. thanks a lot
Dino Game 233 · September 18, 2024 at 1:44 am
I enjoy, lead to I discovered just what I was looking for. You’ve ended my four day long hunt! God Bless you man. Have a great day. Bye
Dino Game 235 · September 18, 2024 at 6:24 am
Thanks for any other fantastic article. The place else may just anyone get that kind of info in such a perfect approach of writing? I’ve a presentation subsequent week, and I am at the look for such information.
ซีรี่ย์จีน123 · September 20, 2024 at 7:49 am
I like what you guys are up too. This kind of clever work and coverage! Keep up the terrific works guys I’ve added you guys to my own blogroll.
ซีรี่ย์จีน123 · September 20, 2024 at 6:00 pm
Magnificent web site. Lots of helpful information here. I am sending it to some pals ans also sharing in delicious. And obviously, thank you to your effort!
แจกเครดิตฟรี 50 124 · September 26, 2024 at 10:44 am
Sweet blog! I found it while browsing on Yahoo News. Do you have any tips on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there! Many thanks
hentai doukyuusei · September 28, 2024 at 4:44 am
Thank you, I’ve recently been searching for info about this subject for ages and yours is the greatest I have discovered till now. But, what about the conclusion? Are you sure about the source?
zentai · September 29, 2024 at 12:07 am
Good write-up, I?m regular visitor of one?s web site, maintain up the excellent operate, and It is going to be a regular visitor for a lengthy time.
เล่นเกมคาสิโนออนไลน์ · September 29, 2024 at 9:04 pm
You actually make it seem so easy together with your presentation but I in finding this topic to be really something which I think I’d never understand. It seems too complex and very broad for me. I’m having a look forward to your next publish, I?ll try to get the hang of it!