start learning
Image 1
3HTMLStyles

HTML Styles

In HTML, styles can be defined using either inline styles, embedded styles, or external stylesheets.

The right way to use the three styles categorie in you HTML code with explanation

You can use our free live html editor to test tutorial codes .

Inline Styles 


<p style="color: red; font-size: 16px;">This text is styled inline.</p>

In this example, the style attribute is used to define the color and font size of the <p> element.

Inline styles are applied directly to a specific HTML element using the style attribute. Inline styles are useful when you need to apply a style to a specific element only once, and don't want to create a separate stylesheet for it.

More example on how to use inline styles in html

1. Background Color:


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

</body>

2. Paragraph color and font-size : 


 <p style = "color:red;">This is red</p>  
      <p style = "font-size:20px;">This is thick</p>  
      <p style = "color:green;">This is green</p>  
      <p style = "color:green; font-size:20px;" >Hello, World!</p>

3. Heading color and font-size :


<h1 style="text-align:center;">This is a Centered Heading</h1>
<h1 style="font-size:100%;">This is a heading</h1>
<h1 style="font-family:courier;">This is a heading</h1>
<h1 style="color:darkblue;">This is a dark blue heading</h1>

Embedded Styles


<!DOCTYPE html>
<html>
<head>
	<title>My Page</title>
	<style>
		p {
			color: blue;
			font-size: 14px;
		}
	</style>
</head>
<body>
	<p>This text is styled using an embedded style.</p>
	<p>This text is also styled using an embedded style.</p>
</body>
</html>

In this example, the embedded style is defined in the <style> tag in the <head> section of the document. The style applies to all <p> elements in the document. Embedded styles are defined in the <head> section of an HTML document using the <style> tag.
Embedded styles are useful when you need to apply a style to multiple elements throughout the document. Here's an example of how to define an embedded style:

External Stylesheets


<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p class="example1">This text is styled using an external stylesheet.</p>
<p class="example2">This text is also styled using an external stylesheet.</p>
</body>
</html>


.example1 {
color: red;
}
.example2 {
color:green;
}

In this example, the external stylesheet is defined in a separate file called styles.css. The stylesheet contains the styles for all <p> elements in the document. External stylesheets are defined in a separate CSS file and linked to an HTML document using the <link> tag.

×