CSS en HTML

By

 CSS son las siglas de Cascading Style Sheets.

CSS nos ahorra mucho trabajo, pues puede controlar el diseño de varias páginas web a la vez.

¿Qué es CSS?

Se utilizan para dar formato al diseño de una página web. 

Con CSS, puedes controlar el color, la fuente, el tamaño del texto, el espacio entre elementos, cómo se colocan y distribuyen los elementos. También puedes controlar las imágenes, colores de fondo y las distintas pantallas dependiendo del dispositivo desde donde se carga la página.

Nota: La palabra cascada significa que un estilo aplicado a un elemento principal también se aplicará a todos los elementos secundarios dentro del elemento principal. Por lo tanto, si establece el color del cuerpo del texto en azul, todos los encabezados, párrafos y otros elementos de texto dentro del cuerpo también tendrán el mismo color, esto, al menos que se especifique algo más, como por ejemplo que se espeficique algún id sobre un elemento específico y se aplique estilo específico

¿Cómo usar css?

Podemos agregar css a nuestro archivo HTML de 3 formas.

  • En línea:

Se aplica directamente sobre el elemento HTML. Por ejemplo:

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

Resultado:

A Blue Heading

A red paragraph.

Esta forma de declaración, aplica solo para el elemento donde se declaró, es decir que los demás elementos conservarán su valor por default.

  • Interno:
Esta declaración  define el CSS para la página HTML en la que se está declarando. Es decir, que todos los elementos que coincidan con los elementos declarados en este estilo, heredarán sus características. Por ejemplo:

<!DOCTYPE html>
    <html>
        <head>
            <style>
                body {background-color: powderblue;}
                h1   {color: blue;}
                p    {color: red;}
            </style>
        </head>
        <body>
            <h1>This is a heading</h1>
            <p>This is a paragraph.</p>
        </body>
    </html>

  • Externo:
Se utiliza una hoja de estilo externa para definir el estilo de muchas páginas HTML. Esto es muy común y se utiliza para no tener que escribir código  más de una vez.
Para poder utilizar una hoja de estilo externa, es necesario agregar el enlace físico al head en cada página HTML.
Ejemplo:
<!DOCTYPE html>
    <html>
        <head>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
            <h1>This is a heading</h1>
            <p>This is a paragraph.</p>
        </body>
    </html>

La hoja de estilo externa se puede escribir en cualquier editor de texto, aunque mi recomendación es realizarlo en visual code o sublime text. Esto porque además de una mejor estructura visible, permite mediante complementos completar texto.
Para que el archivo sea una hoja de estilo, debe agregarse .css como extensión.
Ejemplo:
style.css

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

Ejemplo de enlace externo en el HEAD:

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">


¿Qué podemos realizar en CSS?

  • Utilice el styleatributo HTML para el estilo en línea
  • Utilice el <style>elemento HTML para definir CSS interno
  • Utilice el <link>elemento HTML para hacer referencia a un archivo CSS externo
  • Utilice el <head>elemento HTML para almacenar elementos <style> y <link>
  • Use la colorpropiedad CSS para colores de texto
  • Utilice la font-familypropiedad CSS para fuentes de texto
  • Use la font-sizepropiedad CSS para tamaños de texto
  • Use la borderpropiedad CSS para bordes
  • Use la paddingpropiedad CSS para el espacio dentro del borde
  • Use la marginpropiedad CSS para el espacio fuera del borde

Capítulo anterior                                                                       Siguiente Capítulo

No hay comentarios.:

Publicar un comentario