Guía de CSS en línea: cómo diseñar una etiqueta HTML directamente

Ha escrito algo de HTML y ahora necesita diseñarlo con CSS. Una forma es utilizar estilos en línea, que es de lo que trata este artículo.

This is my first paragraph.

Antes de entrar en los matices de los estilos en línea, cuándo, por qué y cómo usarlos, es importante conocer las otras formas de diseñar su HTML. De esa manera, eliges la mejor opción para tu código.

Aquí tienes un resumen de tus opciones.

Hoja de estilo externa

Los desarrolladores suelen mantener todo su CSS en una hoja de estilo externa. En su archivo HTML, use el elemento para vincular a su hoja de estilo externa, que contiene su CSS.

Dentro del archivo, index.css, tenemos nuestras reglas CSS.

p { color: red; font-size: 20px; } 

Hoja de estilo interna

Otra opción para diseñar CSS es usar una hoja de estilo interna. Esto significa definir sus reglas CSS dentro del elemento en su archivo HTML.

  p { color: red; font-size: 20px; }   

Estilos en línea

Con menos frecuencia, se encontrará buscando estilos en línea. Pero todavía es importante conocerlos porque hay ciertas ocasiones en las que son útiles.

Con estilos en línea, agregará el estiloatributo a una etiqueta HTML seguida de su CSS para diseñar un elemento.

This is my first paragraph.

This is my second paragraph.

Entonces, en nuestro caso, el texto del primer párrafo es rojo con un tamaño de fuente de 20px. El segundo, sin embargo, permanece sin cambios.

Echemos un vistazo más de cerca a cómo y cuándo usar estilos en línea. También descubriremos por qué solo uno de nuestros párrafos tiene estilo.

¿Qué es una etiqueta HTML?

Con los estilos en línea, aplica CSS al styleatributo en la etiqueta HTML de apertura.

Ejemplos de etiquetas HTML incluyen:

  • ...
  • ...

  • ...

Las etiquetas de apertura y cierre suelen formar parte del elemento HTML, que puede contener texto, datos, una imagen o nada en absoluto.

Aquí tenemos un elemento de texto.

This is my first paragraph.

Podemos usar estilos en línea para diseñar este elemento agregando el atributo de estilo a la etiqueta de apertura, seguido de pares de propiedad-valor de CSS.

This is my first paragraph.

This is my second paragraph.

Veamos cómo usamos los estilos en línea.

Cómo utilizar estilos en línea

Añade elatributo de estilo a la etiqueta que desea aplicar estilo, seguido de un signo igual. Comience y termine su CSS con comillas dobles.

Agregue pares de propiedad-valor al atributo de estilo. Agregue un punto y coma después de cada par propiedad-valor.

color: red; font-size: 20px; 

Entonces, cuando juntamos todo, se ve así:

This is my first paragraph.

Puntos clave que debe conocer

A diferencia de las hojas de estilo internas y externas, los estilos en línea no contienen llaves ni saltos de línea. Es decir, escriba su CSS en la misma línea cuando use estilos en línea.

Además, tenga en cuenta que los estilos en línea solo afectan al elemento específico al que agrega el atributo de estilo con pares de propiedad-valor de CSS.

Por ejemplo, en el código siguiente, solo el primer párrafo tiene el estilo rojo con un tamaño de fuente de 20px.

This is my first paragraph.

This is my second paragraph.

Si queremos darle estilo al texto de ambos párrafos con estilos en línea, entonces necesitamos agregar CSS al atributo de estilo al segundo

This is my first paragraph.

This is my second paragraph.

However, if we used an external stylesheet, for example, we could easily style both paragraphs without duplicating our code by using a single CSS selector.

p { color: red; font-size: 20px; } 

This brings us to an important topic: when to use and when not to use inline styles.

When to Use (and when NOT to use) Inline Styles

Say you have an HTML file with ten or more paragraph tags. Can you imagine styling each one individually with inline styles?

Doing so will quickly clutter your code, making it hard to read and maintain.

Besides, inline styles can introduce specificity issues if you’re also using internal or external stylesheets.

That’s because inline styles have a high specificity. This means they'll override most other rules in internal and external stylesheets, except for the !important declaration.

For example, we added inline styles to two paragraph elements. We’ve also added an internal stylesheet.

 My New Webpage p { color: pink; } 

A blue paragraph.

Another blue paragraph.

The CSS from our inline styles override the CSS in the internal stylesheet. So we end up with two blue paragraphs.

External stylesheets are also much easier to maintain when you or someone else needs to make a change. This is because a style from an external or internal stylesheet can apply to multiple elements, while an inline one must be applied to each element individually.

For example, say you need to update a style to ten elements. It’s easier to make the change once in an external stylesheet, instead of ten different times in your HTML file.

In general, it’s often best practice to put your CSS into a separate file. That way, your HTML file contains the structure and content of your website, and your CSS file contains your styles. Doing so makes your code easier to read and manage.

However, there are times when it may make sense to use inline styles:

  • Add a style and see the change quickly, which can be useful for testing.
  • Use the style attribute in JavaScript to apply styling.

Most of the time you’ll want to use external stylesheets. But you’ll occasionally find yourself using inline styles, most commonly in the above situations.

I write about learning to program, and the best ways to go about it on my blog at amymhaddad.com.