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.
Page content Show more Page Content Show less
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
how to link html with css
Inline css Syntax -
<h2 style="color:blue;">HTML Inline-Style</h2>
Internal css Syntax -
<style type="text/css">
h2{
background: yellow;
color: blue;
}
</style>
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.