24 Feb Ejercicio css. Separar el css de un html
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!
Entradas relacionadas:
¿Hay alguna forma amable de leer páginas web dónde todo el contenido se haya compactado? Te presento algunas de mis herramientas favoritas.
Guía sobre los principales selectores css que existen para llamar a las etiquetas de un documento web.
Si no te atrae la idea de usar list-style-image para decorar listas, entonces puedes hacerlo con ::before y el uso de iconos de fontawesome.
Ejercicio css dónde se compara el centrado de contenidos en una caja con el centrado de una caja. Incluye solución completa.
¿Cómo averiguar si una etiqueta es de tipo block, inline o inline-block? Repasamos la teoría y vemos un ejemplo práctico. Incluye solución.
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
Adrian
Posted at 15:33h, 08 febreroMuy útil el post, es lo que estaba buscando y apareció en el primer lugar
Francesc Ricart
Posted at 10:28h, 17 febrero¡gracias!