INTRODUCCIÓN A CSS

¿QUÉ ES CSS?
● CSS - Cascading Style Sheets / Hojas de estilo en cascada

● Es el lenguaje de diseño utilizado para dar estilo a los documentos web.

● Permite aplicar estilos de manera selectiva a elementos en documentos web, ya sean

HTML o XML y sus variaciones.

● El CSS se puede usar para:

○ Definir estilos básicos, como colores y tamaños de elementos.

○ Crear el esquema general de un sitio web
○ Crear efectos de animación.
○ Cambiar el comportamiento de un sitio web de acuerdo al dispositivo en el que se
acceda.
○ Entre otros
 ¿QUÉ ES CSS?

Imágen tomada de: https://i.pinimg.com/

 HISTORIA DE CSS (I)
● Creado por la necesidad de definir un mecanismo que permitiera aplicar de
forma consistente diferentes estilos a los documentos electrónicos y que
mantuvieran la misma apariencia en diferentes navegadores.

● Creado entre 1994 y 1995 por Hakon Wium Lie y Bert Bos tras la propuesta del
organismo W3C (World Wide Web Consortium).

● Lanzado oficialmente el 17 de diciembre de 1996 (CSS nivel 1 - CSS1)

● El 12 de Mayo de 1998, el grupo de trabajo de CSS publica su segunda

recomendación oficial, conocida como "CSS nivel 2 - CSS2”.
 ¿QUÉ ES CSS?
● CSS - Cascading Style Sheets / Hojas de estilo en cascada

● Es el lenguaje de diseño utilizado para dar estilo a los documentos web.

● Permite aplicar estilos de manera selectiva a elementos en documentos web, ya sean

HTML o XML y sus variaciones.

● El CSS se puede usar para:

○ Definir estilos básicos, como colores y tamaños de elementos.

○ Crear el esquema general de un sitio web
○ Crear efectos de animación.
○ Cambiar el comportamiento de un sitio web de acuerdo al dispositivo en el que se
acceda.
○ Entre otros
 FUNCIONALIDADES DESTACADAS DE CSS (I)
CSS1:
● Propiedades de las fuentes, como tipo, tamaño, énfasis, entre otras.
● Color de texto, fondos, bordes u otros elementos.
● Atributos del texto, como espaciado entre palabras, letras, líneas, etcétera.
● Alineación de textos, imágenes, tablas u otros.
● Propiedades de caja, como margen, borde, relleno o espaciado.
● Propiedades de identificación y presentación de listas.

CSS2:
● Funcionalidades de contenedores (<div>) como posicionamiento relativo, absoluto, fijo,
niveles (z-index), etc.
● El concepto de "media types", para definir la presentación de un documento en diferentes
dispositivos como en la pantalla, papel, sintetizador de voz, televisor, etc.
● Texto bidireccional, sombras, etcétera.
 FUNCIONALIDADES DESTACADAS DE CSS (II)
CSS3:
● Bordes redondeados.
● Gradientes de colores.
● Transformaciones y animaciones de elementos.
● Maquetación total de un sitio web.
● Uso de “media queries”, que permiten modificar los estilos de un sitio de acuerdo al
tipo de dispositivo usado o a parámetros específicos como resolución, tamaño,
orientación de la pantalla, entre otros.

ESTÁNDAR CSS: https://www.w3.org/Style/CSS/specs.en.html

¿CÓMO FUNCIONA CSS?

Imágen tomada de: https://developer.mozilla.org/

 ESTRUCTURA DE UNA REGLA CSS (I)
La estructura de un elemento CSS se conoce como “regla”.
 ESTRUCTURA DE UNA REGLA CSS (II)
● SELECTOR: Elemento HTML al que se quiere asignar un estilo determinado. En
el ejemplo, el selector p selecciona a todos los párrafos del documento.

● DECLARACIÓN: Consta de las propiedades y respectivos valores de cada una

que van a asignarse a un selector.

● PROPIEDAD: Propiedad predeterminada de CSS que se va a usar para definir

estilo al elemento HTML elegido en el selector. En el ejemplo, la propiedad
usada es color, para definir el color del texto de los párrafos.
 ESTRUCTURA DE UNA REGLA CSS (III)
● VALOR: Define una de las muchas posibles apariencias para una determinada
propiedad. Cada propiedad posee diversos valores predeterminados. En el
ejemplo, el valor dado a la propiedad “color” es red, definiendo el rojo como
color de texto de los párrafos.

A TENER EN CUENTA:

● Frente al selector se definen llaves de apertura y cierre { }, dentro de las cuales

se crean cada una de las reglas del elemento seleccionado.
● Las propiedades se separan de sus respectivos valores mediante el uso de dos
puntos (:).
 USO DE MÚLTIPLES REGLAS
Al finalizar cada regla, se utiliza punto y coma (;) para separar una declaración de la
siguiente.
 SELECCIONAR MÚLTIPLES ELEMENTOS
Para aplicar las mismas reglas CSS a diferentes tipos de elementos HTML, basta con
definir los diferentes selectores que se van a utilizar separados por coma (selector1,
selector2, …, selectorN).
¿CÓMO MANEJAN LOS NAVEGADORES EL CSS QUE
NO ENTIENDEN?
No todos los navegadores, ni versiones de los mismos, implementan todas las
novedades de CSS, algunos tienen mejor soporte que otros. De esta manera, los
navegadores analizan las reglas CSS en general, simplemente ignorando aquellas
que no entienden, ya sea por compatibilidad o error en la sintaxis de selectores,
propiedades o valores, o cierre inapropiado de reglas o llaves.
LISTADO DE PROPIEDADES CSS

https://www.w3schools.com/cssref/