Como mezclar CSS y HTML. Acoplamiento CSS

Como mezclar CSS y HTML. Acoplamiento CSS

Mezclar html y css es fácil si se conocen las normas.

Podemos hacerlo en línea con el html, en la cabecera del documento web y en una hoja externa.

Veamos los 3 casos posibles.

En línea con el html

Para mezclar html y css en línea hacemos uso del atributo style=»».

En el interior del atributo style escribimos cada una de las instrucciones separadas de punto y coma ;.

Hay ocasiones en que no tienes más remedio que hacerlo así pero siempre que podáis… evitar este sistema. Siempre es mejor cualquiera de los dos mencionados a continuación.

Veamos un ejemplo.

uso de atributo style
Ejemplo de uso de atributo style

En el <head>

Otra posibilidad es escribir el html dentro del <head>.

Hacemos uso de la etiqueta <style>.

Es un sistema bastante cómodo cuando se está aprendiendo.

Veamos la imagen adjunta.

uso de etiqueta head
Ejemplo de uso de etiqueta head

En una hoja externa de extensión .css

Para desvincular al máximo html y css escribimos el siguiente html en la cabecera.

<link rel=»stylesheet» href=»url-de-la-hoja-css»>

Este sistema es el mejor de todos porqué permite una carga más eficiente del documento web.

En el ejemplo de la imagen estamos poniendo una hoja de nombre style.css dentro del directorio de nombre «css».

Uso de etiqueta link para vincular el css
Ejemplo de uso de etiqueta link con href

¡Hola querido lector!

Hemos visto como podemos mezclar html y css.

Ahora se trata de aprender a escribir algunas instrucciones básicas y ganar un poquito de práctica.

En la próxima entrada de esta entrada veremos como es la sintaxis básica de una instrucción CSS.

¡Nos leemos mañana como siempre con un nuevo contenido web!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.