Como mezclar CSS y HTML. Acoplamiento CSS

Como mezclar CSS y HTML. Acoplamiento CSS

Print Friendly, PDF & Email
Como mezclar CSS y HTML. Acoplamiento CSS
Valora esta entrada
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!

Entradas relacionadas:

Colores CSS para web
- 294
Existen distintas formas de indicar los colores que queremos dar a los elementos de un documento. Básicamente necesitamos dominar los colores RGB, RGBa y Hexadecimal. Se muestran varios ejemplos de us...
Modelo de cajas CSS. Ancho, altura, relleno, borde y margen
- 246
El modelo de cajas nos permite definir mediante CSS las propiedades físicas de espacio a una etiqueta html que esté dentro del body. En esta publicación se habla del ancho, altura, relleno, borde y fo...
Concepto de herencia en CSS
- 161
¿Imaginas tener que especificar una por una los estilos a cada una de las etiquetas? El concepto de CSS nos ayuda a optimizar código. Entender sus propiedades nos puede ayudar mucho a ser mejores maqu...
Creación de un menú horizontal con sub menú desplegable mediante CSS
- 21
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.
Box Sizing, como modificar el modelo de cajas convencional
- 76
¿Se rompen las columnas de tu web al redimensionar el ancho de tu navegador? En esta publicación hablamos de box-sizing con un ejemplo real.
Ejemplo de centrado horizontal de una caja con CSS
- 232
Ejemplo de como centrar horizontalmente una caja o contenedor en una página web y mediante CSS.
Como centrar un texto mediante CSS y no con HTML
- 162
Hay ocasiones en las que necesitamos centrar un texto pero no hay manera. La forma correcta de hacerlo es mediante CSS.
Introducción al CSS. Que significa Cascading Style Sheets.
- 135
Se explica que es el CSS, que significa en realidad el acrónimo y porqué se le llama así y hacemos una primera toma de contacto con este lenguaje web.
Sintaxis CSS básica. Cómo se escribe el CSS.
- 129
Escribir CSS es fácil. Es un lenguaje que no tiene sorpresas. En esta entrada se explica como se escribe una instrucción CSS.
Dimensiones reales de una caja en CSS
- 111
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.