Ejercicio css. Separar el css de un html

Ejercicio css. Separar el css de un html

Print Friendly, PDF & Email
Valora esta entrada

En este ejercicio vamos a aplicar el concepto de acoplamiento de css en un documento web.

Hay varias formas de hacerlo:

  • En línea con el html mediante un atributo de nombre style. Por ejemplo  <p style="color:red;">texto</p>
  • Dentro de la etiqueta <style> en  el <head> del documento web
  • En una hoja externa llamada mediante <link rel="stylesheet" href="css/style.css"/>Observación: css/style.css es una ruta que puede variar en función de dónde se encuentre el archivo .css

Para resolverlo sin mayor dificultad te sugiero leer esta entrada dónde se explica la teoría y encontrarás ejemplos.

Entremos en materia.

Enunciado

En el enunciado encontrarás un enlace a un documento que debes descargarte.

El documento contiene un documento html resultado de uno de los ejercicios presentados en el tutorial html.

En él, para su mayor comprensión se escribió un poco de css dentro de una etiqueta <style>.

El ejercicio consiste en hacer que el css que encontrarás en el documento css se cargue dentro de una hoja separada de nombre style.css  Puede estar en el mismo directorio que tu archivo .html o en otra carpeta. Según prefieras.

Solución del ejercicio

Fijaros que el css ya está acoplado pero queremos que se cargue desde una hoja separada.

Separaremos el css escribiéndolo en otro documento de nombre style.css

Es importante que tengas en cuenta en que carpeta pones style.css

En el ejemplo hemos optado por crear el archivo style.css en el mismo nivel que el documento que te os habéis descargado.

La cabecera de nuestro documento web queda de la siguiente forma:

<head>
	<title>Documento con capas sin html5</title>
	<meta charset="utf-8">
	<meta name="author" content="francesc ricart"/>
	<link rel="stylesheet" type="text/css" href="style.css">

</head>

El style.css queda de la siguiente forma:

div{
border:solid 3px black;
margin:10px;
padding:10px;
}

Recordar que esta hoja va en la raíz web.

¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

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.