Blog de Tecnología del colegio San Esteban: octubre 2024

CSS

CSS (Cascading Style Sheets) es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML.

CSS es la mejor forma de separar los contenidos de su presentación y es imprescindible para crear páginas web complejas.

¿Para qué sirve CSS?

El código CSS hace la vida más fácil al desarrollador al separar las estructuras de un documento HTML de su presentación.

Dicho de otro modo, el HTML actuaría como es esqueleto de la web, definiendo su estructura básica, y el CSS añadiría toda la capa de presentación sobre el que la web define su aspecto final.

Cómo incluir CSS en un documento HTML

1) en el mismo documento, mediante la etiqueta STYLE dentro de la etiqueta <head> - sólo sirve para muy poquitos estilos

2) en un documento externo, enlazado desde el HTML principal

¡ESTE ES EL QUE USAREMOS!

estilos.css será nuestra página de estilos.

rel: indica el tipo de relación que tiene el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet.

Así se ve 👇

3) Incluir CSS en los elementos HTML

Este es último método para incluir estilos CSS en documentos HTML, es el menos utilizado, ya que el principal inconveniente es que, si se quiere hacer una modificación en los estilos definidos, es necesario modificar todos los elementos en todas las páginas.

¿Cómo funciona CSS?
Los navegadores Web, al aplicar las reglas CSS a un documento, modifican la manera en que este nos es presentado.

Las reglas se componen de dos elementos:

- Selector : para definir a qué elementos debe aplicarse la regla

- Propiedades: cada una con su valor

¡observen cómo se escribe!

Propiedades básicas:

font-family: se refiere a la(s) fuente(s) que deseamos usar en nuestro texto. Se definen 3. El navegador va a buscar la 1ra tipografía, si no está, va a usar la 2da, si tampoco está buscará la 3ra. Si la defino para BODY la va a usar en todo el documento.
font-size: define tamaño de la fuente
color: color de la fuente
text-align: alineación de los textos.
background-color: cambiar el color de fondo del elemento.
width: establece el ancho.
height: establece el alto.
border: permite definir el aspecto de cada uno de los cuatro bordes horizontales y verticales de los elementos. Para cada borde se puede establecer su anchura, color y/o estilo.
margin: define cuatro propiedades para controlar cada uno de los márgenes horizontales y verticales de un elemento. (margin-top, margin-right, margin-bottom, margin-left).

padding: define cuatro propiedades para controlar cada uno de los espacios de relleno horizontales y verticales de un elemento. Cada una de las propiedades establece la separación entre el lateral de los contenidos y el borde lateral de la caja. Es el espacio que hay DENTRO de un elemento.

Padding: 10px 20px 👉va a usar 10 arriba y abajo, 20 en derecha e izquierda

Padding: 10px 20px 5px 0px los aplica en sentido horario arriba, derecha, abajo, izquierda

Colores Hexadecimales:

Un color se puede identificar en CSS de diferentes maneras.

Puede ser por su nombre, por su combinación de RGB (RED GREEN BLUE) o por su valor HEXADECIMAL.

Dos opciones para seleccionar un color y obtener su valor hexadecimal y su combinación RGB

1) escribir COLORPICKER en google

2) https://imagecolorpicker.com/

TODAS LAS PROPIEDADES CSS 👉

https://developer.mozilla.org/es/docs/Web/CSS/Reference

PARA TENER EN CUENTA:

👉Si necesitamos que un elemento use otra fuente, la cambiaremos en su css

👉Cuando las propiedades se repiten, el navegador usa la idea de la cascada o herencia. SI hay valor específico para un elemento, usará ese, si no, el que se hereda.

👉Cuando trabajamos en un proyecto con varios html, usaremos 1 único archivo CSS. Vincularemos el mismo CSS en todos los html.

👉Si necesitamos diferenciar un párrafo de otro... CREAREMOS UNA REGLA de ESTILO asociada a un selector de clase. A ese selector de clase le daremos un nombre que debe comenzar con . Por ejemplo: .txt_magenta

¡Un selector de clase NO ESTA ASOCIADO a ningún elemento!

Donde querramos usarlo, dentro del html escribiremos class=txt_magenta

EJEMPLO!

OBSERVEN el archivo .CSS👀