CSS significa hojas de estilo en cascada.
CSS ahorra muchísimo trabajo. Puedes controlar el diseño de varias páginas web a la misma vez.
¿Qué es CSS?
Las hojas de estilo en cascada (CSS) se utilizan para dar formato al diseño de una página web.
Con CSS, puedes controlar el color(color), la fuente(font-family), el tamaño del texto(font-size), el espacio entre elementos(margin); cómo se colocan y distribuyen los elementos, qué imágenes de fondo o colores de fondo se utilizarán, diferentes diseños para diferentes dispositivos y tamaños de pantalla, y mucho, mucho más.
Tip: La palabra cascada significa que un estilo aplicado a un elemento padre también se aplicará a todos los elementos hijos dentro del elemento padre. Por lo tanto, si establece el color del
bodyen "azul", todos los encabezados, párrafos y otros elementos de texto dentro delbodytambién obtendrán el mismo color (a menos que especifique algo diferente).
Usando CSS
CSS se puede agregar de 3 maneras:
En línea (inline) - usando el atributo
styledentro de los elementos HTMLInterno (internal) - usando el elemento
<style>en la sección<head>Externo (external) - usando el elemento
<link>para vincular a un archivo externo CSS
La forma más común de agregar estilos CSS es usando archivos externos. Sin embargo, en este artículo usaremos estilos en línea(inline) e internos(internal), porque es más fácil de demostrar y más fácil para que usted mismo lo pruebe.
CSS en línea
Un estilo en línea se utiliza para aplicar un estilo único a un solo elemento HTML.
CSS en línea usa el atributo style de un elemento HTML.
A continuación, se muestra un ejemplo que establece el elemento <h1> de color azul, y el elemento <p> a rojo.
Ejemplo:
<h1 style="color: blue;">Un color azul</h1>
<p style="color: red;">Un párrafo rojo</p>
CSS interno
Un estilo interno se utiliza para definir un estilo para una sola página.
CSS interno se define en la sección <head> de una página HTML, con el elemento <style>.
El siguiente ejemplo establece todos los elementos <h1> en azul, y el color de todos los elementos <p> en rojo. Además, la página se mostrará con un color de fondo powderblue.
Ejemplo:
CSS externo
Una hoja de estilos externo se utiliza para definir el estilo de muchas páginas HTML.
Para usar una hoja de estilos externa, agrega un elemento <link> en la sección <head> de cada página HTML:
Ejemplo:
Tip: con una hoja de estilos externa, puedes cambiar la apariencia de un sitio web completo, cambiando un solo archivo.😊
Colores, fuentes y tamaños CSS
Aquí, haremos una demostración de algunas propiedades CSS más comúnes. Aprenderás más de ellos en los próximos artículos.
La propiedad CSS color define el color del texto que se utilizará.
La propiedad CSS font-family define la fuente que se utilizará.
La propiedad CSS font-size define el tamaño del texto que se utilizará.
Ejemplo:
Bordes CSS
La propiedad CSS border define un borde alrededor de un elemento HTML.
Tip: puedes definir un borde para casi todos los elementos HTML
Ejemplo:
Relleno CSS
La propiedad CSS padding define un relleno (espacio) entre el texto y el borde.
Ejemplo:
Margen CSS
La propiedad CSS margin define un margen (espacio) fuera del borde.
Ejemplo:
Vincular CSS externo
Las hojas de estilo externas se pueden referenciar con una URL completa o con una ruta relativa a la página web actual.
Ejemplo URL completa:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Ejemplo URL relativa:
<link rel="stylesheet" href="css/styles.css">
Resumen
HTML nos permite utilizar CSS de tres formas: inline, internal y external.
Las propiedades CSS usadas con más frecuencia: color, font-family, font-size, border, padding y margin.
En resumen:
Usa el atributo
stylepara estilos en líneaUsa el elemento
<style>para estilos internosUsa el elemento
<link>para vincular un archivo CSS externoUsa la propiedad CSS
colorpara color del textoUsa la propiedad CSS
font-familypara fuentes del textoUsa la propiedad CSS
font-sizepara el tamaño del textoUsa la propiedad CSS
borderpara los bordes de un elementoUsa la propiedad CSS
paddingpara espacios dentro del borde de un elementoUsa la propiedad CSS
marginpara espacios fuera del borde de un elemento
Traducido con 💚 desde W3Schools.com