Header Ads

Estilos CSS, Etiqueta Style

Como ya redactamos en una entrada anterior sobre la utilización de CSS en nuestras paginas, ventajas y desventajas que esta tienen y sobre los 3 tipos de Estándares que este maneja- ver entrada , Ahora nos centraremos en las formas de Insertar CSS en nuestros sitios Web. Existen 2 formas de insertar estilos CSS a nuestra pagina Web, una de ellas es usando las etiquetas Style y la segunda usando un archivo separado; en esta entrada nos centraremos en la utilización de las etiquetas Style....




Insertar Códigos CSS con Etiquetas Style:

Para insertar cogido CSS en una pagina HTML hay que hacer uso de la etiqueta <style>, dentro de la cabecera que esta limitada por las etiquetas <head> y </head> , del documento, de la siguiente forma, como se muestra en el Ejemplo:

Ejemplo :

Código HTML:



Resultado:

Usando Style

Si ejecutamos el Código HTML de nuestro ejemplo, tendremos un resultado igual al que observamos con las letras rojas, Como notan, se asigno el color siguiendo la siguiente regla:


Insertar CSS en los elementos HTML:

Otra forma de insertar CSS usando la etiqueta Style, es colocarlo en el mismo elemento HTML al cual queremos añadir los estilos, para entenderlo mejor aplicaremos un ejemplo:

Ejemplo:

Código HTML:



Resultado:


Usando Style

Aplicando las 2 formas de Insertar Código CSS, en un mismo Documento HTML, nos brindan el mismo resultado, pero existe una gran diferencia, la cual es la optimizacion de Código. Si analizamos el segundo ejemplo nos damos cuenta que si queremos aplicar el miso estilo a diferentes palabras que contengan la etiqueta <p>, tendríamos que hacerlo uno por uno, mientras que en el primer ejemplo basta con asignarle a la etiqueta <p> los valores que queremos que se apliquen y estos se emitirán a todos los elementos que contengan mencionada etiqueta.

Cualquier duda o aporte hacerlo por comentarios. Gracias por su Tiempo!.






No hay comentarios