Un estilo se puede definir directamente en el cuerpo de HTML5. He aquí un ejemplo de este tipo de código. Un estilo local también a veces se llama un a nivel de elemento

estilo porque modifica un caso particular de un elemento en la página.

Estilos locales
Este párrafo tiene un borde definido localmente
Este párrafo tiene una serie de reglas de fuente y de texto aplicados.

Al revisar este código, un par de cosas deben ser evidentes:

• Sin elemento se encuentra en la cabecera. Normalmente, se utiliza un sección en el encabezado de la página para definir todos sus estilos. Esta página no tiene tal segmento.

• Los párrafos tienen sus propios atributos de estilo. LA estilo atributo de esta en cada párrafo en el cuerpo HTML. Todos los elementos HTML apoyan la estilo atribuir.

• El código de estilo todo va en un solo par de comillas. Para cada elemento de estilo, todo el estilo va en un par de comillas porque es un atributo HTML. Puede usar la sangría y el espacio en blanco para hacer las cosas más fáciles de entender.

Cuándo utilizar estilos locales

Estilos locales no debe ser su primera opción, pero puede ser útil en algunas circunstancias.

Si estás escribiendo un programa para traducir de un procesador de texto u otra herramienta, estilos locales son a menudo la manera más fácil de hacer que el trabajo de traducción. Si utiliza un procesador de textos para crear una página y le dices que guardar la página como HTML, se utilizan a menudo estilos locales, porque los procesadores de texto a menudo utilizan esta técnica en su propio formato propietario.

Por lo general, cuando usted ve una página HTML con un montón de estilos locales, es porque una herramienta de traducción automática hizo la página.

A veces, se ve estilos locales usados ​​en ejemplos de código. Por ejemplo, el siguiente código se podría utilizar para demostrar diferentes estilos de borde:

Inline Fronteras
Este párrafo tiene un borde negro
Este párrafo tiene un borde doble negro

Para fines de ejemplo, es útil para ver el estilo justo al lado del elemento. Este código estaría bien para la demostración o propósitos de prueba (si lo que desea es obtener un rápido vistazo a algunos estilos de borde), pero no sería una buena idea para el código de producción.

Estilos locales tienen prioridad muy alta, así que cualquier cosa se aplica en un estilo local anula las otras reglas de estilo. Esto puede ser una solución útil si las cosas no funcionan como esperabas, pero es mejor para obtener sus estilos de trabajo correctamente que confiar en una solución.

Los inconvenientes de estilos locales

Es bastante fácil de aplicar un estilo local, pero en su mayor parte, no se recomienda la técnica, ya que tiene algunos problemas, tales como

• Ineficiencia: Si define estilos a nivel de elemento con el estilo atributo, estás definiendo sólo la instancia particular. Si desea configurar los colores de párrafo para su página entera esta manera, usted va a terminar de escribir un montón de reglas de estilo.

• Legibilidad: Si la información de estilo se entremezcla lo largo de la página, que es mucho más difícil de encontrar y modificar que si se encuentra en el centro de la cabecera (o en un documento externo).

• La falta de separación: La colocación de los estilos a nivel de elemento derrota el objetivo de separar el contenido de estilo. Se vuelve mucho más difícil de hacer cambios, y la mezcla de estilo y contenido hace que el código más difícil de leer y modificar.

• Torpeza: Todo un lote de reglas CSS que se ha metido en un solo atributo HTML con un par de frases. Esto puede ser difícil de leer porque has CSS integrado directamente en el flujo de HTML.

• Problemas Cita: El atributo HTML requiere comillas, y algunos elementos de estilo CSS también requieren comillas (familias de fuentes con espacios en ellos, por ejemplo). Tener múltiples niveles de cotizaciones en un solo elemento es una receta para problemas.