CSS Inline Styles
Inline styles apply CSS directly to a single element through its style attribute, which is quick for one-off tweaks but poor for anything reused.
What inline styles are
An inline style is written straight onto an element using the <style> attribute. The value is one or more declarations, exactly as they would appear inside a rule's braces but without a selector, since the element is the target.
A styled element
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="color: #00643c; font-weight: bold;">An important paragraph</p>
</body>
</html>When they are useful
Inline styles work for a fast, single change or for content where you cannot edit a stylesheet, such as some email templates. They are also common in generated markup where a value is calculated on the fly.
Why to avoid them for most work
- They cannot be reused, so shared styles must be repeated on every element
- They mix presentation into the content, which is what CSS aims to avoid
- They are hard to maintain because the styles are scattered across the markup
- They carry very high priority, making them awkward to override later
Note: Inline styles beat almost every rule in a stylesheet because of their high specificity. Overusing them leads to fighting your own CSS with !important, which is a sign the styling belongs in a stylesheet instead.
The stylesheet alternative
<!DOCTYPE html>
<html>
<head>
<style>
.important {
color: #00643c;
font-weight: bold;
}
</style>
</head>
<body>
<p class="important">An important paragraph</p>
</body>
</html>For anything you use more than once, prefer a class in an external stylesheet.
