Skip to content

Week 3_1(es): Agregar CSS a HTML

Jump to bottom
luvchoco47 edited this page Jul 24, 2018 · 3 revisions

Agregar CSS a HTML

En la primera clase, ya aprendimos que CSS se usa para agregar estilos mientras HTML construye la estructura de página web. Vamos a aprender cómo podemos utilizar CSS para una página más decorada!

Antes de empezar, vamos a crear una carpeta en el escritorio (o en sus llaves si las tienen) nombrada fecha-su nombre.
Y hagan clic abajo para copiar los archivos en la carpeta que hemos creado.
index.html
about.html
memo.html
seoul image
Ahora, vamos a crear otra carpeta nombrada img en su carpeta de fecha-su nombre y vamos a desplazar el archivo seoul.jpg a la carpeta img. (Ctrl + X, Ctrl + V)

Estilo Inline(Inline Styles)

Vamos a añadir el siguiente atributo en el primer tag de h1 en el archivo index.html.

style="color: red;"

Estilo inline es una manera rápida y simple para añadir estilo a los elementos de HTML.
Si quieren agregar más que un estilo, pueden escribir más atributos como se muestra abajo.

style="color: red; font-size: 20px;"

El tag <style>

Si utilizan el elemento <style>, pueden escribir el código de CSS en las secciones designadas en HTML.
Vamos a agregar el siguiente código dentro del elemento <head> en el archivo index.html.

<style>
  h1 {
    color: red;
    font-size: 20px;
  }
</style>

En el navegador, podemos ver el estilo ya está aplicado.
Es una manera útil para aplicar y mantener estilos a varios elementos de una vez.
Pueden especificar a cuál elemento quieren aplicar el estilo mientras estilo inline no puede hacer lo mismo.

Utilizar el archivo .css

Pero, si el código de CSS se vuelve más complicado, es mejor separar el archivo de CSS.
Vamos a crear una nueva carpeta nombrada stylesheets dentro de la carpeta de su nombre y vamos a crear un archivo de texto nombrado blog.css en la nueva carpeta.
Ahora, vamos a borrar el elemento <style> y vamos a escribir el siguiente código.

<link rel="stylesheet" href="stylesheets/blog.css" type="text/css">

El elemento <link> es un elemento vacío(empty element) con las siguientes características:

  1. href: el valor del atributo debe ser la ruta al archivo de CSS.
  2. type: explica el tipo de documento a que están vinculando
  3. rel: muestra la relación entre el archivo de HTML y el archivo de CSS.

Si usan el tag <link> , pueden introducir el código que está dentro de blog.css y aplicarlo a la página de index.html.
También pueden aplicar el mismo código a about.html y memo.html.
En el archivo blog.css, escriban el código de CSS que han escrito dentro del elemento <style> y revisen el navegador de nuevo. Es muy recomendable separar el archivo de .css` porque

  • Podemos evitar mezclar códigos de HTML y códigos de CSS.
  • Podemos escribir todos los códigos de CSS para añadir estilos a la página sin perder la legibilidad y el manejo del archivo de HTML.
  • Podemos añadir el estilo a varias páginas en la manera flexible OJO: El archivo de .css es el código puro de CSS y no podemos utilizar código de HTML dentro del archivo.
Clone this wiki locally