HTML Style
HTML Style
This is the lesson 3 of 10 in the course HTML - Beginner to Advance

Hy Guys, In this chapter we will learn about HTML Style. The Style attribute is used to add style to an HTML element. Style inside HTML Element is known as an inline style sheet. When style is used inside a <style> and </style> tag is known as internal stylesheet. Let’s talk further!

Table of Contents

HTML Style Attribute

<tagname style="property:value;"></tagname>

for any style, we need two values first property and second property value. let’s take look at the example:

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

HTML Style Properties

CSS has a lot of properties and an element can have multiple style properties. Now we will read about a few of them.

Background Color

Background Color property can be applied to many elements like body, div, paragraph, etc.

<!DOCTYPE html>
<html>
<body style="background-color:#aaa;">

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

</body>
</html>

As you can see the background-color property is applied to the body and paragraph.

Color

Color property can be applied on text-only text maybe a paragraph, anchor tag, span tag, etc.

<!DOCTYPE html>
<html>
<body >

<p style="color:blue;">This is a paragraph.</p>
<span style="color:#AAA;">This is a span Tag.</span>
<a href="#" style="color:red;">This is a link</a>

</body>
</html>

Font-Family

This property is used to change the font type of an element tag. If it is applied to the body tag it will change all the font types at a time.

<!DOCTYPE html>
<html>
<body>

<p>This is a Default Font</p>
<p style="font-family:arial;">This is a Arial Font</p>
<p style="font-family:verdana;">This is a Verdana Font</p>
<p style="font-family:courier;">This is a Courier Font.</p>

</body>
</html>

Text Align

This property is used to align text in the left, right, or center position.

<!DOCTYPE html>
<html>
<body>

<p style="text-align:left;">Left paragraph.</p>
<p style="text-align:center;">Centered paragraph.</p>
<p style="text-align:right;">Right paragraph.</p>

</body>
</html>

Font-Size

This property is used to set the size of any font of HTML element. Font-Size can be defined in px, em, pt, percentage, etc.

<!DOCTYPE html>
<html>
<body>

<p style="font-size:20px;">font size default paragraph.</p>
<p style="font-size:20px;">font size 20px paragraph.</p>
<p style="font-size:2em;">font size 2em paragraph.</p>
<p style="font-size:20pt;">font size 20pt paragraph.</p>
<p style="font-size:130%;">font size 130% paragraph.</p>

</body>
</html>

Text-Decoration

Text-Decoration property adds decoration to the text. Decoration can be overline, line-through, underline, etc.

<!DOCTYPE html>
<html>
<body>

<p style="text-decoration:underline">this is a underline paragraph.</p>
<p style="text-decoration:line-through">this is a line-through paragraph.</p>
<p style="text-decoration:overline">this is a overline paragraph.</p>

</body>
</html>

List-Style

list-style is mostly used for ordered, unordered or definition lists. list-style property is short for the following properties:

  • list-style-type
  • list-style-image
  • list-style-position

list-style-type

list-style-type have a lot of values. The default value is a disk, if we use “none” as a value it will remove the list-style-type.

<!DOCTYPE html>
<html>
<body>

<h3>Defalut list</h3>
<ul>
	<li>Default list</li>
</ul>

<h3>list-style-type:none</h3>
<ul style="list-style-type:none;">
	<li>list style type as none</li>
</ul>

<h3>list-style-type:circle</h3>
<ul style="list-style-type:circle;">
	<li>List style type as circle</li>
</ul>

<h3>list-style-type:square</h3>
<ul style="list-style-type:square;">
	<li>List style type as square</li>
</ul>

</body>
</html>

We will discuss all other list-style properties in CSS Course.

Live Practice : Navigation Bar in CSS

Click on the Play button and Live run the code.

<!DOCTYPE html>
<html>
<head>
	<style>
    	*{
        	margin:0px;
            padding:0px;
        }
    	div{
        	background-color:#222;
            padding:8px 0px;
            margin:0px;
        }
        ul :last-child li{
        	border:none;
        }
        ul{
        	text-align:center;
        }
    	ul li{
        	list-style-type:none;
        	display:inline-block;
            margin:0px 0px;
            padding:0px 10px;
            border-right:0.5px solid white;
        }
        ul a{
        	text-decoration:none;	
            color:#bbb;
            text-transform:uppercase;
            letter-spacing:1px;
        }
        ul a:hover{
        	color:white;
        }
    </style>
</head>
<body>
<div>
<ul>
	<a href="#">
    	<li>Home</li>
    </a>
    
    <a href="#">
    	<li>Gallery</li>
    </a>
    
    <a href="#">
    	<li>Contact</li>
    </a>
    
    <a href="#">
    	<li>About Us</li>
    </a>
</ul>
</div>

</body>
</html>

Here we used the CSS that we had done in this chapter. some of the properties may be new for you, so we will explain them here!

ul :last-child li{
border:none;
}

Here we are using :last-child property because we want to remove the last element border as we gave in ul li{ border-right:0.5px solid white}

text-decoration:none; is used to remove the underline in anchor (<a>) tag. And text is transformed to uppercase.

letter-spacing:1px; is used to give the spacing between letters.

Here we had also used a :hover effect which will change the <a> text color from light gray to white.


Question of the day:

Create a Navigation bar with social icons?
Create a Navigation bar with the logo?

Hope you guys like this chapter.

Thank You!

Course Navigation<< HTML Attributes | Attributes in HTMLHTML Quotation >>
Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there πŸ‘‹ It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply