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