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
¿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.
