Scribd
Cargar
14 vistas14 páginas

Estilos en Css

El documento explica cómo vincular CSS con HTML para mejorar el diseño y presentación de una página web. Se describen tres métodos para hacerlo: hojas de estilo externas, estilos internos y estilos en línea, cada uno con sus ventajas y desventajas. Además, se proporciona un ejemplo práctico de cómo crear un archivo CSS y vincularlo a un archivo HTML.

Cargado por

aitor
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
14 vistas14 páginas

Estilos en Css

El documento explica cómo vincular CSS con HTML para mejorar el diseño y presentación de una página web. Se describen tres métodos para hacerlo: hojas de estilo externas, estilos internos y estilos en línea, cada uno con sus ventajas y desventajas. Además, se proporciona un ejemplo práctico de cómo crear un archivo CSS y vincularlo a un archivo HTML.

Cargado por

aitor
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 14

ESTILOS EN CSS

Partiendo de la actividad: CREANDO MI PRIMERA PÁGINA WEB


¿Cómo vincular CSS con HTML?

HTML: Estructura y contenido.


CSS: Diseño y presentación.
Define la estructura básica, las
habitaciones, los muros y el techo. CSS embellece y da forma
Indica qué elementos hay en la a la apariencia de una
página (encabezados, párrafos,
página web.
imágenes, etc.) y cómo se relacionan
entre sí.
Hay varias formas de vincular CSS a tu HTML. La más común y recomendada es crear un archivo
separado con extensión .css y luego enlazarlo desde tu archivo HTML.

Pasos a seguir:

1. Vincular el archivo CSS a tu HTML:

○ En el encabezado de tu archivo HTML, dentro de la etiqueta <head>, agrega la siguiente


línea, generalmente, posteriormente a la etiqueta:

<head>

<title>Mi primera página web</title>

<link rel="stylesheet" href="estilos.css">

</head>
Explicación de la etiqueta para vincular el
archivo CSS con HTML <link
rel="stylesheet" href="estilos.css">
<link>: Esta etiqueta se utiliza para vincular <!DOCTYPE html>
recursos externos a un documento HTML. <html>
<head>
rel="stylesheet": Este atributo especifica la <title>Mi primera página web</title>
relación entre el archivo vinculado y el documento <link rel="stylesheet" href="estilos.css">
HTML. En este caso, rel="stylesheet" indica </head>
que el archivo vinculado es una hoja de estilo CSS. <body>
<h1>¡Hola! Soy [Tu nombre]</h1>
href="estilos.css": Este atributo especifica la <p>Tengo [Tu edad] años y vivo en [Tu ciudad].</p>
ubicación del archivo CSS. En este ejemplo, <p>En mi tiempo libre me gusta [Tu hobby].</p>
</body>
href="estilos.css" indica que el archivo CSS
</html>
se encuentra en la misma carpeta que el archivo
HTML y se llama "estilos.css".
2. Crear un archivo CSS: Abre un nuevo archivo en tu editor de texto y guárdalo con el nombre estilos.css (o el nombre que prefieras).
Dentro de este archivo, escribirás las reglas CSS para modificar el aspecto de tu página.

body {

font-family: Arial, sans-serif;

background-color: lightblue;

} Explicación del código CSS:

● body { ... }: Aplica estilos a todo el contenido del cuerpo


de la página. En este caso, se establece una fuente y un
h1 {
color de fondo.
color: navy; ● h1 { ... }: Aplica estilos a todos los elementos <h1>. Aquí
se cambia el color del texto y se centra el título.
text-align: center; ● p { ... }: Aplica estilos a todos los párrafos. Se aumenta el
tamaño de la fuente.
}

p{

font-size: 18px;

}
Se generará el siguiente archivo CSS

Para abrir su contenido o bien modificarlo, selecciona ese archivo con botón
secundario y vuelve a abrirlo con el bloc de notas.
3. Guarda el archivo HTML para que cargue
conjuntamente con CSS: Guarda el archivo con
extensión .html. Por ejemplo, "prueba1.html".

Ahora se van a cargar a tu página HTML los cambios


introducidos en el fichero CSS y te dará el resultado en
un archivo en HTML de tu navegador con el nombre
Prueba1
Este es el resultado. Los archivos que deberías tener como resultado son:
PRINCIPALES FORMAS DE VINCULAR HTML Y CSS:
1. Hojas de estilo externas: (La que ya hemos visto)

● Ventajas:
○ Reutilización: Puedes aplicar los mismos estilos a múltiples páginas.
○ Mantenimiento: Es más fácil mantener y actualizar los estilos en un archivo separado.
○ Separación de contenido y diseño: Mantiene el código HTML más limpio y organizado.
● Cómo hacerlo: Utilizando la etiqueta <link> dentro de la sección <head> de tu archivo HTML, como ya hemos visto en el ejemplo anterior.

2. Estilos internos:

● Ventajas:
○ Sencillo para páginas pequeñas: Si tienes pocos estilos, puedes incluirlos directamente en el HTML.
● Desventajas:
○ Menos organizado: Mezcla el código HTML y CSS, dificultando la lectura y el mantenimiento.
○ Reutilización limitada: Los estilos están limitados a esa página específica.
● Cómo hacerlo: Utilizando la etiqueta <style> dentro de la sección <head> de tu archivo HTML.

<head>
<title>Mi página</title>
<style>
body {
background-color: lightblue;
}
</style>
</head>
3. Estilos en línea:
● Ventajas:
○ Muy específico: Aplicas un estilo a un elemento en particular.
● Desventajas:
○ Poco eficiente: Repetir estilos para cada elemento puede hacer que el código sea más largo y difícil
de mantener.
○ Mezcla de contenido y presentación: Reduce la legibilidad del código HTML.
● Cómo hacerlo: Utilizando el atributo style dentro de una etiqueta HTML.

<h1 style="color: red;">Este texto es rojo</h1>

¿Cuándo usar cada método?

1.Hojas de estilo externas: Para la mayoría de los proyectos, esta es la opción más recomendable.

2. Estilos internos: Para estilos muy simples o cuando necesitas aplicar estilos a una sola página.

3. Estilos en línea: Para ajustes rápidos o cuando necesitas aplicar un estilo único a un elemento
específico.
Envía los archivos resultantes a CAMPUS, el icono
dependerá del navegador que utilices. Recuerda
enviar los archivos resultantes a DRIVE.
CSS (Cascading Style Sheets) es como el maquillaje para tu página web. Así
como el maquillaje realza la belleza natural de una persona, CSS embellece y da
forma a la apariencia de una página web.
PUEDES PEDIRLE A CUALQUIER IA QUE TE AYUDE CON ESTOS LENGUAJES EN
FUNCIÓN DE LO QUE QUIERAS O TUS NECESIDADES

También podría gustarte