Ejercicio css. Separar el css de un html

Ejercicio css. Separar el css de un html

Print Friendly, PDF & Email
Ejercicio css. Separar el css de un html
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!

Entradas relacionadas:

Ejemplo de menú vertical con submenú desplegable vertical (CSS)
- 593
Serie de ejercicios de creación de menús con submenús desplegables mediante CSS. Incluye código y descargable.
La propiedad overflow
- 203
Resumen de uso de la propiedad de overflow de CSS. Apuntes de teoría del curso IFCD0110 del curso confección y publicación de páginas web.
LibrosWeb ahora es UniWebSidad
- 307
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
Estilos css para enlaces. :link, :visited:, :hover, :active
- 37
Las propiedades que controlan los estados de un enlace son :link, :visited, :hover, :active en este orden. Se muestra un ejemplo de uso para hacer un botón.
Ejemplo de menú vertical con submenú horizontal mediante CSS
- 420
Código html y css de como crear un menú vertical con un submenú horizontal.
Cuidado con los tutoriales pdf obsoletos sobre html, css y javascript
- 120
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
Elementos en línea. Elementos bloque. Elementos inline-block.
- 599
Hemos aprendido como se define el margen, el borde, el relleno y el ancho y la altura. Nos queda pendiente ver como se relacionan estas cajas html entre ellas. Si se apilan. Si se ponen una al lado de...
Concepto de cascada en CSS
- 294
En CSS existen una serie de normas que dan prioridad a las instrucciones que afectan a cada etiqueta html en función de su importancia, grado de especificidad y orden de aparición. Veámoslo.
Diferencia entre visibility:hidden; y display:none;
- 261
Código css para ilustrar la diferencia entre el uso de visibility:hidden; y display:none; . Incluye ejemplo visual.
Ejemplo de centrado vertical y horizontal con CSS
- 155
Ejemplo explicado sobre como centrar verticalmente y horizontalmente una caja dentro de otra mediante position relative y absolute.
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.