Cómo añadir CSS en HTML - Las Claves más Importantes!

CSS

  • CSS significa Cascading Style Sheets (Hojas de estilos en cascada)
  • CSS describe cómo se deben mostrar los elementos HTML en la pantalla, papel o en otros medios
  • CSS nos ahorra mucho trabajo. Podemos controlar el diseño de varias páginas a la vez
  • Las hojas de estilo externas se guardan en fichero CSS

Añadir CSS al HTML

Tenemos tres formas:

  • CSS en línea
  • CSS interno
  • CSS externo

La forma más común es añadirlos de forma externa en ficheros a parte.

CSS en línea

Se usa para aplicar estilos a un sólo elemento con el atributo styles, y dentro de este puede haber cualquier propiedad de CSS.

See the Pen HTML | 1.13 - CSS - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

CSS interno

Los estilos se encuentran dentro del archivo HTML dentro de un elemento <style> dentro del <head>

See the Pen HTML | 1.13 - CSS - 2 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

CSS externo

Los estilos se encuentran en un fichero externo (.css) que se vincula al HTML usando la etiqueta <link> en el <head>

See the Pen HTML | 1.13 - CSS - 3 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Fuentes en CSS

  • color: cambia el color del texto
  • font-family: define la familia de fuentes a usar
  • font-size: especifica el tamaño de texto

See the Pen HTML | 1.13 - CSS - 4 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Borde en CSS

Con la propiedad border podemos definir un borde alrededor del elemento HTML.

See the Pen HTML | 1.13 - CSS - 5 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Padding en CSS

Con la propiedad padding podemos definir un relleno entre el contenido y el borde del elemento HTML.

See the Pen HTML | 1.13 - CSS - 6 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Margin en CSS

Con la propiedad margin podemos definir espacio de margen entre elementos HTML.

See the Pen HTML | 1.13 - CSS - 7 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo id

Para definir un estilo a un elemento especial lo podemos hacer añadiendo el atributo id.

El id debe ser único por documento HTML.

See the Pen HTML | 1.13 - CSS - 8 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo class

Podemos añadir el atributo class para definir estilos especiales para varios elementos HTML.

See the Pen HTML | 1.13 - CSS - 9 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

¿Quieres más?

Si estás interesado en el mundo de la programación y el desarrollo web, te recomiendo que te suscribas a mi canal de youtube donde tienes mucho más contenido gratuito

IR AL CANAL

¿Quieres convertirte en desarrollador web? [GRATIS]

Déjame aquí tu mejor email y te mandaré un curso para que puedas empezar en el desarrollo web totalmente GRATIS!

¡Prometo no enviarte SPAM! Sólo cosas relevantes que te interesen.