Learn HTML Styles Code

Tips (Total 11)

1. What is HTML Styles

2. How to create HTML Style Attribute HTML element

3. How to change body Background Color HTML Style

4. How to change Background Color of <h1> and <p> Elements

5. How to change Text Color

6. How to change Fonts Family of Text with HTML <h1> <p>

7. How to change Text Size with HTML <h1> and <p>

8. How to create Text Alignment

9. How to create HTML CSS Border

10. How to create HTML CSS Padding

11. How to create HTML CSS Margin

# Tips-1) What is HTML Styles

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

HTML Style is used to change or add the style on existing HTML elements. There is a default style for every HTML element e.g. background color is white, text color is black etc.

The style attribute can by used with any HTML tag. To apply style on HTML tag, you should have the basic knowledge of css properties e.g. color, background-color, text-align, font-family, font-size etc.

Use the style attribute for styling HTML elements
Use background-color for background color
Use color for text colors
Use font-family for text fonts
Use font-size for text sizes
Use text-align for text alignment

Sample of HTML Styles

We have given following examples to understand about HTML Style:

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

Full Example of HTML Styles

HTML Styles are used to change the behaviors of HTML Elements. Such as: Text, Color, Size etc...

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

</body>
</html>

Output should be:

# Tips-2) How to create HTML Style Attribute HTML element

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

Learn more about How to create HTML style Attribute

The property is a CSS property. The value is a CSS value.

index.html

Example: HTML

<tagname style="property:value;">

# Tips-3) How to change body Background Color HTML Style

The CSS background-color property defines the background color for an HTML element.

Sample of code about Background Color HTML Body Style

Set the background color for a page to powderblue:

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

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

</body>

Full Example of Background Color HTML Body Style

Here is used the code on full html page.

index.html

Example: HTML

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

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

</body>
</html>

Output should be:

# Tips-4) How to change Background Color of <h1> and <p> Elements

Set background color for two different elements:

Sample of code about Background Color of <h1> and <p> Elements

<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>

Full Example of Background Color about <h1> and <p> Elements

Set background color for two different elements:

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>

</body>
</html>

Output should be:

# Tips-5) How to change Text Color

The CSS color property defines the text color for an HTML element:

Sample of changing text color HTML Code

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

Full Example of Text Color HTML Code

The CSS color property defines the text color for an HTML element:

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Output should be:

# Tips-6) How to change Fonts Family of Text with HTML <h1> <p>

The CSS font-family property defines the font to be used for an HTML element:

Example of Fonts Family of Text with HTML <h1> <p>

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

Full Example of Fonts Family of Text with HTML <h1> <p>

The CSS font-family property defines the font to be used for an HTML element:

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Output should be:

# Tips-7) How to change Text Size with HTML <h1> and <p>

The CSS font-size property defines the text size for an HTML element:

Example of Text Size with HTML <h1> and <p>

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Full Example of Text Size with HTML <h1> and <p>

The CSS font-size property defines the text size for an HTML element:

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

</body>
</html>

Output should be:

# Tips-8) How to create Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML element:

This way you can move a text center/right/left

Example Text Alignment Center HTML Style

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

Full Example of Text Alignment HTML Style

<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

</body>
</html>

Output should be:

# Tips-9) How to create HTML CSS Border

The CSS border property defines a border around an HTML element.

Full Example of HTML CSS Border

Tip: You can define a border for nearly all HTML elements.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

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

</body>
</html>

Output should be:

# Tips-10) How to create HTML CSS Padding

The CSS padding property defines a padding (space) between the text and the border.

Full Example of HTML CSS Padding

Use of CSS border and padding properties:

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
  padding: 30px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

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

</body>
</html>

Output should be:

# Tips-11) How to create HTML CSS Margin

The CSS margin property defines a margin (space) outside the border.

Full Example of HTML CSS Margin

Use of CSS border and margin properties:

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
  margin: 50px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

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

</body>
</html>