CSS es lo que agrega estilo y color a cada página web. Mientras que HTML controla la estructura de un documento con párrafos, encabezados e imágenes, CSS te permite especificar colores, fuentes, diseños y más. Si pensamos en un documento web como un cuerpo humano, HTML es la cabeza y el cuerpo. CSS sería el estilo de eso. Por ejemplo, el color de nuestros ojos, el tamaño de nuestras orejas, el pigmento de nuestra piel e incluso la ropa que usamos. En otras palabras, es nuestro aspecto y estilo. Para ofrecer algo de perspectiva, Javascript sería el equivalente a cómo interactuamos con las personas. Cómo hablamos, nos damos la mano, guiñamos un ojo, asentimos con la cabeza, etc.
¿Cómo funciona CSS?
Selectores de CSS
Un selector de CSS es lo que usamos para orientar HTML en nuestras páginas web que pretendemos diseñar. Un selector es parte de una regla CSS que informa al navegador dónde se implementa CSS en una página.
Regla CSS
Una regla CSS se compone de uno o más selectores y una lista de declaraciones separadas por punto y coma entre corchetes. Cada declaración tiene una propiedad y el valor separados por dos puntos. Una regla se compone de uno o más selectores. En el ejemplo siguiente, el selector es un elemento de párrafo representado por la letra P. Esto significa que la regla se aplicará a todos los párrafos. Esta declaración establece que el color del texto dentro de un párrafo será verde azulado. Tenga en cuenta la ortografía de "color".
p {color:teal}
¿Qué es un archivo CSS?
Un archivo CSS es una extensión que formatea nuestras páginas web. Diferentes archivos CSS dan diferentes estilos a los elementos de un sitio web. Un archivo CSS contiene propiedades personalizadas sobre cómo diseñar los elementos HTML de una página web.
Los diseñadores utilizan los archivos CSS para mantener un estilo idéntico en toda web. El archivo contiene las propiedades de cada página del sitio en un solo lugar. Esto es sumamente útil cuando estámos diseñando o rediseñando una página web porque significa que no tiene que diseñar individualmente cada página.
Puede dirigirse rápida y fácilmente a uno, algunos o todos los elementos especificados en una sola página o incluso en todas las páginas del sitio.
Con él, puede orientar los elementos que desee potencialmente desde una única ubicación. Si realiza algún cambio, proliferarán en la página o páginas. Si necesita editar el estilo, puede hacerlo desde una sola ubicación y los elementos de destino reflejan inmediatamente ese cambio. Curiosamente, también puede aplicar diferentes estilos según el dispositivo en el que se vaya a ver su contenido. Puede reducir las dimensiones de los elementos para verlos en un teléfono inteligente y luego aumentarlos cuando los vea en una computadora portátil o de escritorio.
CSS externo, interno y en línea
CSS se puede utilizar de tres formas: en línea, interna y externa. Aquí está la diferencia entre los tres.
- ¿Qué es CSS externo?
Las hojas de estilo externas son muy útiles, especialmente cuando desea mantener un estilo en todo el sitio. Las reglas de estilo deben crearse solo una vez y se aplican a todas las páginas requeridas dentro de un sitio. Si necesita cambiar ligeramente el estilo en todas las páginas que usan esta hoja externa, solo necesita cambiarlo una vez y se aplica automáticamente a todas las páginas, ¡lo cual es útil! En general, esta es la forma estándar de usar CSS. - ¿Qué es CSS interno?
Esto se aplica solo a la página en la que está trabajando. Esto se puede usar si se requiere un estilo único para una página de su aplicación web. . - ¿Qué es CSS inline?
El CSS inline se utiliza para dar estilo a un elemento HTML específico de la página web. En el siguiente ejemplo, usamos CSS para cambiar un encabezado al color rojo en una página.
<!DOCTYPE html>
<html>
<body>
<h2 style="color:red;">Este es un encabezado rojo</h2>
</body>
</html>
