INTRODUCCIÓN A CSS

Juan Esteban Rodríguez Velásquez

 ¿QUÉ ES CSS?

• CSS son las siglas de Cascading Style Sheets

• CSS describe cómo se mostrarán los elementos HTML en la pantalla, el papel
o en otros medios.
• CSS ahorra mucho trabajo. Puede controlar el diseño de varias páginas web a
la vez
• Las hojas de estilo externas se almacenan en archivos CSS
 SINTAXIS CSS

El selector apunta al elemento HTML al que desea aplicar estilo.

El bloque de declaración contiene una o más declaraciones
separadas por punto y coma.
Cada declaración incluye un nombre de propiedad CSS y un
valor, separados por dos puntos.
Varias declaraciones CSS se separan con punto y coma y los
bloques de declaración están rodeados por llaves.
 SELECTORES CSS

Un selector de CSS selecciona los elementos HTML a los que desea aplicar
estilo.

Algunos de los más básicos son:

• Selectores simples: (seleccione elementos según el nombre, la identificación, la clase)

• Selectores de combinador: (seleccione elementos en función de una relación específica
entre ellos)
• Selectores de pseudo-clase: (seleccione elementos basados en un cierto estado)
• Selectores de pseudo-elementos: (seleccionar y aplicar estilo a una parte de un elemento)
• Selectores de atributos: (seleccione elementos basados en un atributo o valor de atributo)
 EL SELECTOR DE ID DE CSS

• El selector de id utiliza el atributo id de un elemento HTML para seleccionar un

elemento específico.
• La identificación de un elemento es única dentro de una página, por lo que el
selector de identificación se utiliza para seleccionar un elemento único.
• Para seleccionar un elemento con una identificación específica, escriba un carácter
de almohadilla (#), seguido de la identificación del elemento.
• El selector de clases CSS: El selector de clases selecciona elementos HTML con un
atributo de clase específico.
• Para seleccionar elementos con una clase específica, escriba un punto (.), Seguido
del nombre de la clase.
• El selector universal de CSS: El selector universal (*) selecciona todos los
elementos HTML de la página.
 CÓMO AGREGAR CSS A HTML

Cuando un navegador lee una hoja de estilo, formateará el documento HTML de

acuerdo con la información de la hoja de estilo.
Hay tres formas de insertar una hoja de estilo:

• CSS externo: Con una hoja de estilo externa, puede cambiar el aspecto de un • CSS en línea: Se puede
sitio web completo cambiando solo un archivo. Cada página HTML debe incluir usar un estilo en línea para
una referencia al archivo de hoja de estilo externo dentro del elemento <link>, aplicar un estilo único a un
dentro de la sección del encabezado solo elemento. Para usar
estilos en línea, agregue el
atributo de estilo al
• CSS interno: Se puede utilizar una hoja de estilo interna si una sola página HTML elemento relevante. El
tiene un estilo único. El estilo interno se define dentro del elemento <style>, atributo de estilo puede
dentro de la sección de cabecera. contener cualquier
propiedad CSS
 COMENTARIOS CSS

Los comentarios se utilizan para explicar el código y pueden ayudar cuando edite
el código fuente en una fecha posterior.
Los navegadores ignoran los comentarios.
Se coloca un comentario CSS dentro del <style>elemento y comienza con /*y
termina con */:
 COLORES CSS

• Los colores se especifican utilizando nombres de colores predefinidos o

valores RGB, HEX, HSL, RGBA, HSLA.
 FONDOS CSS

Las propiedades de fondo de CSS se utilizan para agregar efectos de fondo a los
elementos.

Color de fondo CSS: La background-color propiedad especifica el color de fondo de un

elemento.

Con CSS, un color suele especificarse mediante:

• un nombre de color válido, como "rojo"
• un valor HEX, como "# ff0000"
• un valor RGB, como "rgb (255,0,0
 BORDES CSS

Las propiedades del borde CSS le permiten especificar el estilo, el ancho y el color del
borde de un elemento.

Estilo de borde CSS

La border-style propiedad especifica qué tipo de borde mostrar.

Se permiten los siguientes valores:

• dotted - Define un borde punteado
• dashed - Define un borde punteado
• solid - Define un borde sólido
• double - Define un borde doble
• groove- Define un borde acanalado en 3D. El efecto depende del valor del color del borde.
• ridge- Define un borde estriado en 3D. El efecto depende del valor del color del borde.
• inset- Define un borde insertado en 3D. El efecto depende del valor del color del borde.
• outset- Define un borde inicial 3D. El efecto depende del valor del color del borde.
• none - No define ningún borde
• hidden - Define un borde oculto
 MÁRGENES CSS

Los márgenes se utilizan para crear espacio alrededor de los elementos, fuera de
los bordes definidos.

Las margen propiedades de CSS se utilizan para crear espacio alrededor de los
elementos, fuera de los bordes definidos.
Con CSS, tienes control total sobre los márgenes. Existen propiedades para
establecer el margen para cada lado de un elemento (superior, derecha, inferior e
izquierda).
 RELLENO CSS

El relleno se utiliza para crear espacio alrededor del contenido de un elemento,

dentro de los bordes definidos.
Las padding propiedades CSS se utilizan para generar espacio alrededor del
contenido de un elemento, dentro de los bordes definidos.

Con CSS, tienes control total sobre el relleno. Existen propiedades para
configurar el relleno para cada lado de un elemento (superior, derecha, inferior e
izquierda).
 ALTURA Y ANCHO DE CSS

• El CSS heighty las width propiedades se utilizan para establecer la altura y el

ancho de un elemento.

• La max-width propiedad CSS se utiliza para establecer el ancho máximo de un

elemento.

CSS Configuración de altura y ancho:

Las propiedades heighty widthse utilizan para establecer la altura Valores de altura y ancho de CSS:
y el ancho de un elemento. Las propiedades heighty widthpueden tener los siguientes
valores:
Las propiedades de alto y ancho no incluyen relleno, bordes ni
márgenes. Establece la altura / ancho del área dentro del relleno, • auto- Esto es predeterminado. El navegador calcula la altura
el borde y el margen del elemento. el ancho.
• length - Define la altura / ancho en px, cm, etc.
• % - Define la altura / ancho en porcentaje del bloque
contenedor.
• initial - Establece la altura / ancho a su valor predeterminado
• inherit - La altura / ancho se heredará de su valor principal
 MODELO DE CAJA CSS

Todos los elementos HTML se pueden considerar como cuadros.

El modelo de caja CSS: En CSS, el término "modelo de caja" se utiliza cuando se habla de diseño y maquetación.
El modelo de caja CSS es esencialmente una caja que envuelve cada elemento HTML. Consiste en: márgenes, bordes, relleno y el
contenido real.

• Explicación de las diferentes partes:

• Contenido : el contenido del cuadro, donde aparecen el texto y las imágenes.

• Relleno : limpia un área alrededor del contenido. El acolchado es transparente
• Borde : un borde que rodea el relleno y el contenido.
• Margen : borra un área fuera del borde. El margen es transparente
• El modelo de caja nos permite agregar un borde alrededor de los elementos y definir el espacio entre los elementos.
 ESQUEMA CSS

Un contorno es una línea dibujada fuera del borde del elemento.

El contorno difiere de las fronteras! A diferencia del borde, el contorno se dibuja

fuera del borde del elemento y puede superponerse a otro contenido. Además,
el contorno NO es parte de las dimensiones del elemento; el ancho y la altura
totales del elemento no se ven afectados por el ancho del contorno.
 TEXTO CSS

CSS tiene muchas propiedades para dar formato al texto.

• Color de texto: La color propiedad se utiliza para establecer el color del
texto. El color viene especificado por:
• un nombre de color, como "rojo"
• un valor HEX, como "# ff0000"
• un valor RGB, como "rgb (255,0,0)“

• Color del texto y color de fondo

 FUENTES CSS

• Elegir la fuente correcta tiene un gran impacto en cómo los lectores experimentan un sitio web.
• La fuente correcta puede crear una fuerte identidad para su marca.
• Es importante utilizar una fuente que sea fácil de leer. La fuente agrega valor a su texto. También es
importante elegir el color y el tamaño de texto correctos para la fuente.
• Familias de fuentes genéricas
• En CSS hay cinco familias de fuentes genéricas:
1. Las fuentes serif tienen un pequeño trazo en los bordes de cada letra. Crean una sensación de
formalidad y elegancia.
2. Las fuentes Sans-serif tienen líneas limpias (sin pequeños trazos adjuntos). Crean un aspecto
moderno y minimalista.
3. Fuentes monoespaciadas : aquí todas las letras tienen el mismo ancho fijo. Crean una apariencia
mecánica.
4. Las fuentes cursivas imitan la escritura humana.
5. Las fuentes de fantasía son fuentes decorativas y divertidas.
 ICONOS CSS

Los iconos se pueden agregar fácilmente a su página HTML mediante el uso de una biblioteca de iconos.

Cómo agregar iconos:

La forma más sencilla de agregar un ícono a su página HTML es con una biblioteca de íconos, como Font
Awesome.

Agregue el nombre de la clase de icono especificada a cualquier elemento HTML en línea (como <i>o
<span>).

Todos los iconos de las bibliotecas de iconos a continuación son vectores escalables que se pueden
personalizar con CSS (tamaño, color, sombra, etc.)
 ENLACES CSS

Con CSS, los enlaces se pueden diseñar de muchas formas diferentes.

• Enlaces de estilo: Los enlaces pueden ser de estilo con cualquier propiedad CSS (por
ejemplo color, font-family, background, etc.).

Además, los enlaces pueden tener un estilo diferente según el estado en el que se encuentren.
Los cuatro estados de enlaces son:

• a:link - un enlace normal no visitado

• a:visited - un enlace que el usuario ha visitado
• a:hover - un enlace cuando el usuario pasa el mouse sobre él
• a:active - un enlace en el momento en que se hace clic en él
 LISTAS CSS

En HTML, hay dos tipos principales de listas:

• listas desordenadas (<ul>): los elementos de la lista están
marcados con viñetas
• listas ordenadas (<ol>): los elementos de la lista están marcados
con números o letras
Las propiedades de la lista CSS le permiten:
• Establecer diferentes marcadores de elementos de lista para listas
ordenadas
• Establecer diferentes marcadores de elementos de lista para listas
desordenadas
• Establecer una imagen como marcador de elemento de lista
• Agregar colores de fondo a listas y elementos de lista
 TABLAS CSS

El aspecto de una tabla HTML se puede mejorar enormemente con CSS:

Agregar borde a la tabla: Para especificar los bordes de la

tabla en CSS, use la borderpropiedad.

Especifica un borde negro para los elementos <table>, <th> y

<td>
 DISEÑO CSS : LA PROPIEDAD DE
VISUALIZACIÓN

La displaypropiedad es la propiedad CSS más importante para controlar el diseño.

• La propiedad de visualización: La displaypropiedad especifica si / cómo se muestra un elemento.

Cada elemento HTML tiene un valor de visualización predeterminado según el tipo de elemento que
sea. El valor de visualización predeterminado para la mayoría de los elementos es blocko inline.

Elementos a nivel de bloque:

Un elemento a nivel de bloque siempre comienza en una nueva línea y ocupa
todo el ancho disponible (se extiende hacia la izquierda y hacia la derecha tanto
como puede).
El elemento <div> es un elemento a nivel de bloque.
 ANCHO MÁXIMO

• Establecer el widthde un elemento a nivel de bloque evitará que se extienda

hasta los bordes de su contenedor. Luego, puede establecer los márgenes en
automático, para centrar horizontalmente el elemento dentro de su
contenedor. El elemento ocupará el ancho especificado y el espacio restante se
dividirá en partes iguales entre los dos márgenes:

El uso en su max-widthlugar, en esta situación, mejorará el

manejo del navegador de ventanas pequeñas. Esto es
importante al hacer que un sitio se pueda utilizar en
dispositivos pequeños:
 POSICION CSS

La positionpropiedad especifica el tipo de método de posicionamiento utilizado para un elemento (estático, relativo, fijo, absoluto o fijo).
La positionpropiedad especifica el tipo de método de posicionamiento utilizado para un elemento.
Hay cinco valores de posición diferentes:

• Static: Los elementos HTML se colocan estáticos de forma predeterminada.Los elementos de posición estática no se ven afectados por las
propiedades superior, inferior, izquierda y derecha.
• Relative: Está posicionado en relación con su posición normal. Establecer las propiedades superior, derecha, inferior e izquierda de un
elemento en una posición relativa hará que se ajuste lejos de su posición normal. El resto del contenido no se ajustará para encajar en ningún
espacio dejado por el elemento.
• Fixed: Está posicionado en relación con la ventana gráfica, lo que significa que siempre permanece en el mismo lugar incluso si se desplaza la
página. Las propiedades superior, derecha, inferior e izquierda se utilizan para colocar el elemento. Un elemento fijo no deja un hueco en la
página donde normalmente se habría ubicado.
• Absolute: Está posicionado en relación con el antepasado posicionado más cercano (en lugar de posicionado en relación con la ventana
gráfica, como fijo). Sin embargo; si un elemento de posición absoluta no tiene antepasados posicionados, utiliza el cuerpo del documento y se
mueve junto con el desplazamiento de la página.
• Sticky: Se posiciona según la posición de desplazamiento del usuario. Un elemento fijo alterna entre relativey fixed, según la posición de
desplazamiento. Se coloca en una posición relativa hasta que se alcanza una posición de desplazamiento determinada en la ventana gráfica,
luego se "pega" en su lugar (como la posición: fija).
 DESBORDAMIENTO

Propiedad especifica si recortar el contenido o agregar barras de desplazamiento

cuando el contenido de un elemento es demasiado grande para caber en el área
especificada.

La overflowpropiedad tiene los siguientes valores:

• Visible- Defecto. El desbordamiento no está recortado. El contenido se

renderiza fuera de la caja del elemento.
• Hidden - El desbordamiento se recorta y el resto del contenido será
invisible
• Scroll - Se recorta el desbordamiento y se agrega una barra de
desplazamiento para ver el resto del contenido
• Auto- Similar a scroll, pero agrega barras de desplazamiento solo cuando es
necesario
 FLOTANTE Y CL ARO

La floatpropiedad CSS: especifica cómo debe flotar un elemento.

La floatpropiedad se utiliza para posicionar y dar formato al contenido, por ejemplo, dejar que una imagen
flote a la izquierda del texto en un contenedor.

La floatpropiedad puede tener uno de los siguientes valores:

• left - El elemento flota a la izquierda de su contenedor.
• right - El elemento flota a la derecha de su contenedor.
• none- El elemento no flota (se mostrará justo donde aparece en el texto). Esto es predeterminado
• inherit - El elemento hereda el valor flotante de su padre
• La clearpropiedad CSS especifica qué elementos pueden flotar junto al elemento borrado y en qué
lado.
 PANTALL A: BLOQUE EN LÍNEA

Permite establecer un ancho y un alto en el elemento.

Además, display: inline-blockse respetan los márgenes / rellenos superior e
inferior, pero display: inlineno.

En comparación con display: block, la principal diferencia es que display: inline-

blockno agrega un salto de línea después del elemento, por lo que el elemento
puede sentarse junto a otros elementos.
 ALINEACIÓN HORIZONTAL Y VERTICAL

• Elementos de alineación central: Para centrar horizontalmente un

elemento de bloque (como <div>), use margin: auto;
Establecer el ancho del elemento evitará que se estire hasta los bordes de su
contenedor.
A continuación, el elemento ocupará el ancho especificado y el espacio restante
se dividirá en partes iguales entre los dos márgenes:
 COMBINADORES

Un combinador es algo que explica la relación entre los selectores.

Un selector de CSS puede contener más de un selector simple. Entre los selectores simples, podemos incluir un
combinador.
Hay cuatro combinadores diferentes en CSS:
• Selector de descendientes (espacio): El selector de descendientes coincide con todos los elementos que son
descendientes de un elemento especificado.
• Selector de niños (>): El selector de hijos selecciona todos los elementos que son hijos de un elemento
especificado.
• Selector de hermanos adyacentes (+):l selector de hermanos adyacente se usa para seleccionar un elemento que
está directamente después de otro elemento específico. Los elementos hermanos deben tener el mismo elemento
padre y "adyacente" significa "inmediatamente siguiente".
• Selector general de hermanos (~): El selector general de hermanos selecciona todos los elementos que son
hermanos de un elemento especificado.
 PSEUDOCL ASES

Una pseudoclase se usa para definir un estado especial de un elemento.

Por ejemplo, se puede utilizar para:
• Aplicar estilo a un elemento cuando un usuario pasa el mouse sobre él
• Estilo de enlaces visitados y no visitados de forma diferente
• Aplicar estilo a un elemento cuando se enfoca
 PSEUDO-ELEMENTOS

Un pseudoelemento CSS se utiliza para diseñar partes específicas de un

elemento.

Por ejemplo, se puede utilizar para:

• Aplicar estilo a la primera letra o línea de un elemento
• Insertar contenido antes o después del contenido de un elemento
 OPACIDAD / TRANSPARENCIA

La opacity propiedad especifica la opacidad / transparencia de un elemento.

La opacity propiedad puede tomar un valor de 0,0 a 1,0. Cuanto menor sea el
valor, más transparente:
SISTEMAS 11