Skip to main content

Html Styles

Html Styles 

This tutorial will help you to learn Html Styles and It is very easy to learn .You just follow my tutorial .Open your notepad and write code ,save it and see it in browser step by step.


Let's start.

Html style is used by web developers to add styles to an element, for example color

, font, size and more.

 

<!DOCTYPE html>

<html>

<body>

 

<p>This paragrah is without syle.</p>

<p style="color:red;">this is green color</p>

<p style="color:blue;">this is red color</p>

<p style="font-size:50px;">font siz is 50px.</p>

 

</body>

</html>

Browser result:

html styles


 

Style Attribute

The html style attribute is used to set the style of an element

It has the following syntax:

<tagname style="property:value;">

Now we are going to use this syntax and using some example will clear the concept.

Like we want background color , text size ,font and text alignment in our paragraph.

Background Color

Background color property is used to define background color for an element

 

<!DOCTYPE html>

<html>

<body style="background-color:blue;">

 

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

 

</body>

</html>

Browser Result:

background color property in html styles


Fonts

Font-Family property will be used to define different fonts for an html element.

<!DOCTYPE html>

<html>

<body>

 

<h1 style="font-family:courier;">This is a heading</h1>

<p style="font-family:verdana;">This is a paragraph.</p>

 

</body>

</html>

Browser Result:

fontfamily property in html styles



Text Size and Text Color

Font-Size Property is used to define size for text and Color property for text color.

<!DOCTYPE html>

<html>

<body>

 

<h1 style="color:green;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

<h1 style="font-size:250%;">This is a heading</h1>

<p style="font-size:150%;">This is a paragraph.</p>

 

 

</body>

</html>

Browser Result:

Text Size and Text Color in html styles


Text Alignment

It is used to define alignment for Html element. Property is text-align.

<!DOCTYPE html>

<html>

<body>

 

<h1 style="text-align:center;">This heading is aligned as center.</h1>

<p style="text-align:center;">This paragraph is aligned as center.</p>

 

</body>

</html>

Browser Result:

Text Alignment property in html styles


I hope you like the post ,please don't hesitate to share my post to your friends. Thanks!!!



Labels:

Comments

Post a Comment

Popular posts from this blog

Best and Top 5 Camera Brands 2021

  Regardless of whether you're purchasing your first computerized camera or updating your current photography gear, realizing the top camera brands in 2021 is fundamental. Picking the correct brand for you is significant in light of the fact that it will go far to molding your photography style and how you work out your unit. The brand you pick will likewise impact the nature of your gear and the scope of frill viable with it. We mean to make the determination cycle much simpler by showing you the best camera brands for advanced cameras. So how about we investigate the top camera brands accessible and what you need to know to settle on the best buying choice. Canon Odds are that in the event that you've at any point thought about purchasing another camera, the name Canon has come up.                                                       ...
Post a Comment
Read more

Best Laptops in the world 2021

  best laptops in the world 2021: Our picks of the most recent models from the top brands to help you locate the best PC for your requirements.   In the event that you're on the chase for the best workstations of 2021, we can help. On this page we've positioned the best in class workstations cash can purchase at the present time, and regardless of what sort of PC you're after, or what your spending plan is, we're sure you'll locate the best PC for your demands on this page.   Need the absolute best PC at the present time? At that point look no farther than the MacBook Air (M1, 2020). Macintosh has given its PC an enormous upgrade with regards to equipment (on account of the new M1 chip it planned itself), and figures out how to offer top tier execution, alongside a staggering thin and light plan and a sensibly moderate sticker price too.   Be that as it may, even this right on time into 2021, we've additionally seen some splendid Windows 10 workstati...
Post a Comment
Read more

Top 5 trending Technologies 2021

  Best Top 5 Trending Technologies 2021 We realize that vocations dependent on the present advanced innovation will not change as quick as the manner in which advances advance. In any case, in this 21st century, IT experts ought to continually be learning and upskilling to coordinate with the sets of expectations posted on all significant occupation entrances across the world as it is every one of the an enormous piece of things to come innovation. In the event that you investigate these gateways, you can unmistakably make out that most of occupations are identified with the moving advancements of the day. Here, we will examine the best 10 most recent advances that are work arranged and can offer worthwhile vocations for the wannabes. Allow us to move into the conversation immediately.   Artificial Intelligence Blockchain Internet of Things (IoT) Intelligent Apps 5G 1.         Artificial Intelligence AI is a moving innovation that takes the pri...
Post a Comment
Read more