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 smartwatches for 2021:Top 5 smartwatches across the world

The best smartwatches accomplish more than show warnings on your wrist. They're every-thing in one: a wellness tracker for getting better an advanced pouch and now and again, even a telephone on your wrist.   A smartwatch can likewise save your existence with raised pulse cautions and consequently associate you to crisis administrations in the event that you fall. Electrocardiogram (ECG) and blood oxygen (SpO2) readings are lead of certain superior models, as well. The previous distinguishes indications of atrial fibrillation, while the last is a decent pointer of respiratory wellbeing. In any case, the best smartwatches show improvement over others. Some have massive numbers of applications you can download, and some have batteries that will scarcely most recent daily, while others can go almost seven days on a charge. What's more, obviously there's style: The best smartwatches can be altered, from their ties to their appearances, to best fit with your character. Wha...
Post a Comment
Read more

Introduction to HTML

HTML stands for Hyper Text Markup Language that is used to create web pages, tells the browser how display content. It is used to define the structure of a web-page. Example: <!DOCTYPE html> <html> <head> <title>page title</title> </head>             <body>             <h1>this is heading</h1>             <p>this paragraph>             </body> </html> Explanation: <!DOCTYPE html> defines that this document is HTML. <html> is root code of page. <head> contains meta information of html page. <title> is use to define title of page and display in browser bar. <body> is used to define body   of page and contains the content that is sh...
Post a Comment
Read more

Top 5 mobile companies 2021

  Sometime in the past cell phone or wireless was viewed as an extravagance. Telecom organizations use to charge for both approaching and active call. Today the world has changed. We have advanced from First Generation of Mobile Phone Technology to the 5Th Generation. Presently, in many nations, telecom organizations charge for just cordial calls. Approaching calls are free.   Likewise, in the past there were not many rumored and confided in Mobile Phone Brands and Companies in the World. Brands like Motorola and Nokia managed the cell phone market. Because of innovative advancement and gigantic expansion popular, an ever increasing number of organizations have joined the cell phone fabricating business.   Prior cell phone handsets were basic and were implied uniquely to settle on and get telephone decisions and instant messages. With headway in innovation and less expensive call and information rates, straightforward component telephones are supplanted by cell ph...
Post a Comment
Read more