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:

Sintaxis CSS básica. Cómo se escribe el CSS.
- 248
Escribir CSS es fácil. Es un lenguaje que no tiene sorpresas. En esta entrada se explica como se escribe una instrucción CSS.
Cuidado con los tutoriales pdf obsoletos sobre html, css y javascript
- 61
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
Guía rápida para crear botones personalizados con CSS
- 104
Hacemos un repaso rápido a :hover :active y las propiedades box-shadow, border-radius, cursor y background para estilizar botones.
Creación de un menú horizontal con sub menú desplegable mediante CSS
- 239
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.
Pseudo Clases :link, :active, :hover y :visited
- 110
Las pseudoclases sirven para definir estados en los que se encuentra una etiqueta html. Vemos las pseudoclases link, active, hover y visited.
Posicionamiento mediante CSS de etiquetas html (cajas) en un documento web
- 177
Ejemplos prácticos y visuales dónde se muestran los posicionamientos static | absolute | relative | fixed | sticky. Incluye código CSS y HTML
Posicionamiento flotante de cajas. float: left | right | both; y propiedad clear
- 228
Apuntes de alumno y ejemplos de como usar la propiedad float y clear. Esta publicación forma parte del "tutorial css - apuntes de clase"
Colores CSS para web
- 624
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...
Maquetar una página de prestashop 1.6 con bootstrap
- 482
Maquetar páginas en Prestashop 1.6 con tablas es un deporte de riesgo para implementadores anclados en el pasado. En esta entrada te muestro un ejemplo sencillo y sin demasiadas complicaciones para qu...
Selectores CSS. Que son y como usarlos
- 230
Guía sobre los principales selectores css que existen para llamar a las etiquetas de un documento web.
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.