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!
Deja una respuesta