Estilos CSS

CSS significa Cascading Style Sheets (hojas de estilo de cascada). CSS ahorra mucho trabajo. Puedes controlar el diseño de varias páginas web a la vez.

Diseño de HTML con CSS

CSS describe cómo se deben mostrar los elementos HTML en la pantalla, papel u otros medios.

CSS puede ser añadido en HTML de tres maneras diferentes:

  • Inline (en linea): usando el atributo style en los elementos HTML.
  • Interno: usando una etiqueta <style> en la sección <head>.
  • Externo: usando un archivo CSS.

La manera más común de añadir CSS es mantener los estilos separados en archivos CSS.

Estilos en linea

CSS en línea es usado para aplicar un único estilo a un único elemento HTML. Un estilo en linea usa el atributo style en un elemento HTML. El siguiente ejm muestra un color azul en un elemento HTML <h1>.

Ejm

<h1 style="color:blue">Encabezado azul</h1>

CSS interno

El CSS interno es usado para definir un estilo en una única página web. Es definido en la etiqueta <head> de nuestra página web, con una etiqueta <style>, como veremos en el ejm siguiente:

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>Esto es un encabezado</h1>
<p>Esto es un párrafo</p>

</body>
</html>

CSS externo

Un CSS externo es usado para definir estilos CSS en muchas páginas HTML. Con una hoja de estilo externa, puedes cambiar el aspecto de un sitio web completo, ¡cambiando únicamente un archivo!.

Para usar una hoja de estilo externa, agrega un enlace en la sección <head> de la página HTML.

Ejm

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Esto es una cabecera</h1>
<p>Esto es un párrafo</p>

</body>
</html>

Se puede escribir una hoja de estilo externa en cualquier editor de texto. El archivo no debe contener ningún código HTML y debe guardarse con una extensión .css.

Ejm

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

Fuentes CSS

  • La propiedad CSS color define el color de texto que usaremos.
  • La propiedad CSS font-family define la fuente que usaremos.
  • La propiedad CSS font-size define el tamaño del texto que aplicaremos a nuestro sitio.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}{
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Borde CSS

La propiedad CSS border define un borde alrededor de un elemento HTML.

Ejm

p {
  border: 1px solid powderblue;
}

Padding CSS

La propiedad CSS padding define un padding (espacio) entre el texto y el borde.

Ejm

p {
  border: 1px solid powderblue;
  padding: 30px;
}

Margin CSS

La propiedad CSS margin define un margen (espacio) fuera del borde.

Ejm

p {
  border: 1px solid powderblue;
  margin: 50px;
}

El atributo id

Para definir un estilo específico para un elemento especial, agrega un atributo id al elemento.

Ejm

<p id="p01">I am different</p>

Luego define un estilo para el elemento con el valor de id.

#p01 {
  color: blue;
}

Nota: El id de un elemento debe ser único dentro de una página, por lo que el selector id se usa para seleccionar un elemento único.

El atributo class

Para definir un estilo para tipos especiales de elementos, agregue un atributo class al elemento.

Ejm

<p class=”error”>I am different</p>

luego define un estilo para los elementos con la clase específica.

p.error {
  color: red;
}

Referencias externas

Se puede hacer referencia a las hojas de estilo externas con una URL completa o con una ruta relativa a la página web actual.

Este ejemplo utiliza una URL completa para vincular a una hoja de estilo.

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

Este ejemplo enlaza con una hoja de estilo ubicada en la carpeta html en el sitio web actual:

<link rel="stylesheet" href="/html/styles.css">

Este ejemplo enlaza a una hoja de estilo ubicada en la misma carpeta que la página actual:

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

Resumen

  • Usamos el atributo HTML style para estilos en linea.
  • Usamos el elemento HTML <style> para definir CSS interno.
  • Usamos el elemento HTML <link> para referirnos a un archivo CSS externo.
  • Use el elemento HTML <head> para almacenar elementos <style> y <link>.
  • Usamos la propiedad color para el color de texto
  • Usamos la propiedad font-family para la fuente del texto.
  • Usamos la propiedad font-size para el tamaño del texto.
  • Usamos la propiedad border para añadir bordes.
  • Usamos la propiedad padding para añadir espacio dentro del borde.
  • Usamos la propiedad margin para añadir espacio fuera del borde.