UI Tutorial
UI Tutorial

What is an inline style in html

HTML Inline Style CSS is inside of an HTML tag, using the style attribute, it’s called an “inline-style”.

An inline style is used to apply a unique style to a single HTML element.

HTML inline css

They only change on a specific Item (Html Element), this style hard to overwrite with other, non-inline style.

The style attribute is the same as any other HTML attribute.

This attribute starts with style, followed by an equals sign, =, and uses double quotes, ", which contain the value of the attribute.

Inline style does not use curly braces or selectors.

inline style example


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Inline Style</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#000">
</head>
<body>
<!-- inline style example  -->
<h2 style="color:red;padding:10px;margin: 20px;border:10px solid gray;width: 400px;">HTML Inline Styles</h2>
</body>
</html>


Output here.

How to add CSS

Three types of styling methods like Inline style, Internal style, and External style.

The inline style has the highest priority than others.

Order of priority style:

  • 1. Inline style
  • 2. Internal style (Embedded styles)
  • 3. External style

The highest priority is the inline style sheet.

HTML inline css Example



<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Inline css</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffffff">
<style type="text/css">
h2{
background: yellow;
width: 50%;
}
</style>
</head>
<body>
<h2>This text will be yellow background color.</h2>
<h2 style="background:orange;">inline style takes the highest priority. The text will be orange background color The style attribute can override it</h2>
</body>
</html>

Output here.

How to use HTML Inline style attribute in your code. Inline styles directly affect the single tag.

use inline styles sometimes necessary to use, but Professional web designer does not use inline styles

you may see inline styles for some places.

  • Old websites
  • HTML e-mail

Inline css Syntax -


<h2 style="color:blue;">HTML Inline-Style</h2>

Internal css Syntax -


<style type="text/css">
h2{
background: yellow;
color: blue;
}
</style> 


internal Syntax

External css syntax -


<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

inline CSS Tips

The inline CSS is limited. for detailed projects, you should consider other options internal and external CSS.

Inline-styles are difficult to adjust.

The inline style has the highest priority than other style properties determined in internal or external style sheets.

The value of the style attribute specifies properties and values.

Professional web designers use only to apply CSS inline styles for testing purposes.

Related Post

How to add Image in HTML

folder  HTML

The HTML <IMG> tag is used to display an image on the web page.

Read article   

HTML with CSS

folder  HTML

Cascading Style Sheets is a style sheet language used for formatting of HTML pages.

Read article   

What is an HTML boilerplate

folder  HTML

>Popular HTML boilerplates are similar to basic empty templates. The HTML5 Boilerplate base to start your web page.

Read article