La etiqueta style en HTML es una etiqueta que se utiliza para definir estilos para una página web. Los estilos pueden incluir cosas como el color, el tamaño, la fuente y la alineación del texto, así como el diseño de los elementos de la página web.
A continuación conoceremos todo lo relacionado con la etiqueta style, que es, como se utiliza y ejemplos prácticos para iniciar a practicar.
¿Qué es la etiqueta style en html?
La etiqueta style en html es un elemento que se escribe dentro de la sección <head> de una página web, y que contiene reglas CSS que afectan al aspecto de los elementos HTML de la página. La etiqueta style tiene el siguiente formato:
El atributo type indica el tipo de contenido que se está proporcionando, que en este caso es text/css. Dentro de la etiqueta style, se pueden escribir las reglas CSS que se quieran aplicar a los elementos HTML, usando selectores, propiedades y valores. Por ejemplo, si queremos cambiar el color y el tamaño de la fuente de los párrafos de la página, podemos usar la siguiente etiqueta style:
¿Cómo se usa la etiqueta style en html?
Para usar la etiqueta style en html correctamente, hay que seguir una serie de pasos y recomendaciones:
- Elegir los selectores adecuados: dependiendo de los elementos HTML que se quieran modificar, hay que seleccionar los selectores más apropiados para identificarlos. Existen varios tipos de selectores, como los de tipo, los de clase, los de id, los de atributo, los combinados, los descendientes, los hijos, los adyacentes y los pseudo-clases. Por ejemplo, si queremos cambiar el color de fondo de todos los elementos
<div>con la clasecontainer, podemos usar el siguiente selector:
div.container { background-color: yellow; }
- Escribir las propiedades y los valores correctos: dependiendo del aspecto que se quiera modificar, hay que escribir las propiedades y los valores adecuados para cada selector. Existen muchas propiedades CSS que se pueden usar para cambiar el color, el tamaño, el margen, el relleno, el borde, la posición, la alineación, el fondo, la fuente y otros aspectos de los elementos HTML. Por ejemplo, si queremos centrar horizontalmente un elemento
<div>con el idmain, podemos usar las siguientes propiedades y valores:
div#main { width: 80%; margin: 0 auto; }
- Insertar la etiqueta style en el código fuente: hay que colocar la etiqueta style dentro de la sección
<head>del código fuente de la página web, antes del cierre de dicha sección. Se puede usar un editor de código o un gestor de contenidos para insertar la etiqueta fácilmente.