A style can be defined directly in the HTML5 body. Here is an example of this type of code. A local style is also sometimes called an element-level style because it modifies a particular instance of an element on the page.
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>localStyles.html</title>
</head>
<body>
<h1>Local Styles</h1>
<p style = "border: 2em #FF00FF groove">
This paragraph has a locally-defined border
</p>
<p style = "font-family: sans-serif;
font-size: 1.2em;
font-style: italic">
This paragraph has a series of font and text rules applied.
</p>
</body>
As you look over this code, a couple things should become evident:
No element is in the header. Normally, you use a section in the page header to define all your styles. This page doesn’t have such a segment.
Paragraphs have their own style attributes. A style attribute was added to each paragraph in the HTML body. All HTML elements support the style attribute.
The entire style code goes in a single pair of quotes. For each styled element, the entire style goes into a pair of quotes because it’s one HTML attribute. You can use indentation and white space to make things easier to understand.
When to use local styles
Local styles should not be your first choice, but they can be useful in some circumstances.
If you’re writing a program to translate from a word processor or other tool, local styles are often the easiest way to make the translation work. If you use a word processor to create a page and you tell it to save the page as HTML, it will often use local styles because word processors often use this technique in their own proprietary format.
Usually when you see an HTML page with a lot of local styles, it’s because an automatic translation tool made the page.
Sometimes, you see local styles used in code examples. For example, the following code could be used to demonstrate different border styles:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>localBorders.html</title>
</head>
<body>
<h1>Inline Borders</h1>
<p style = "border: 5px solid black">
This paragraph has a solid black border
</p>
<p style = "border: 5px double black">
This paragraph has a double black border
</p>
</body>
</html>
For example purposes, it's helpful to see the style right next to the element. This code would be fine for demonstration or testing purposes (if you just want to get a quick look at some border styles), but it wouldn’t be a good idea for production code.
Local styles have very high priority, so anything you apply in a local style overrides the other style rules. This can be a useful workaround if things aren’t working like you expect, but it’s better to get your styles working correctly than to rely on a workaround.
The drawbacks of local styles
It’s pretty easy to apply a local style, but for the most part, the technique isn’t usually recommended because it has some problems, such as
Inefficiency: If you define styles at the element level with the style attribute, you’re defining only the particular instance. If you want to set paragraph colors for your whole page this way, you’ll end up writing a lot of style rules.
Readability: If style information is interspersed throughout the page, it’s much more difficult to find and modify than if it’s centrally located in the header (or in an external document).
Lack of separation: Placing the styles at the element level defeats the goal of separating content from style. It becomes much more difficult to make changes, and the mixing of style and content makes your code harder to read and modify.
Awkwardness: An entire batch of CSS rules has to be stuffed into a single HTML attribute with a pair of quotes. This can be tricky to read because you have CSS integrated directly into the flow of HTML.
Quote problems: The HTML attribute requires quotes, and some CSS elements also require quotes (font families with spaces in them, for example). Having multiple levels of quotes in a single element is a recipe for trouble.
