Glosario: 200 instrucciones en CSS y su utilidad

Para qué sirve CSS y qué es

CSS (Cascading Style Sheets) es un lenguaje de estilo utilizado para definir la apariencia y presentación de un documento HTML. Sirve como complemento de HTML al permitir el control detallado sobre la forma en que se muestra el contenido en un navegador web. Algunas de las principales funciones y usos de CSS son:

1. Estilización visual: CSS permite aplicar colores, fuentes, márgenes, espaciado y efectos visuales a los elementos HTML. Con CSS, se pueden cambiar los colores de fondo, el tamaño y tipo de letra, la alineación del texto, entre otros aspectos visuales.
2. Diseño y maquetación: CSS facilita el diseño y la maquetación de páginas web al permitir controlar la posición y el tamaño de los elementos en la página. Se pueden crear diseños de varias columnas, diseños responsivos que se adaptan a diferentes tamaños de pantalla, y establecer el flujo del contenido en la página.
3. Adaptabilidad y responsividad: CSS ofrece la capacidad de hacer que los sitios web se adapten a diferentes dispositivos y tamaños de pantalla. Mediante el uso de técnicas como media queries, se pueden aplicar estilos específicos para dispositivos móviles, tablets o pantallas de escritorio.
4. Animaciones y transiciones: CSS permite crear efectos de animación y transición en los elementos HTML, como desvanecimientos, cambios de color suaves y desplazamientos. Esto ayuda a mejorar la interactividad y la experiencia de usuario en un sitio web.
5. Mantenibilidad y reutilización: CSS permite separar el estilo del contenido, lo que facilita la modificación y actualización de la apariencia de un sitio web. Además, se pueden definir estilos una vez y reutilizarlos en múltiples elementos, lo que ahorra tiempo y esfuerzo en el desarrollo y mantenimiento de un sitio web.
6. Accesibilidad: CSS proporciona opciones para mejorar la accesibilidad de un sitio web al permitir el ajuste del contraste de color, el cambio del tamaño de fuente y la adaptación para personas con discapacidades visuales.

Conoce más acerca de la estructura de CSS

Aquí tienes una lista de 100 comandos de CSS junto con una breve definición de cada uno:

1. align-content: Define cómo se alinean las filas de contenido flexible en un contenedor.
2. align-items: Define cómo se alinean los elementos flexibles en el eje transversal en un contenedor.
3. align-self: Define cómo se alinea un elemento flexible específico en el eje transversal en un contenedor.
4. animation: Define una animación para un elemento.
5. animation-delay: Define el retraso antes de que comience la animación.
6. animation-direction: Define la dirección de reproducción de la animación.
7. animation-duration: Define la duración de la animación en segundos o milisegundos.
8. animation-fill-mode: Define cómo se aplican los estilos al inicio y al final de la animación.
9. animation-iteration-count: Define el número de veces que se repite la animación.
10. animation-name: Define el nombre de la animación a aplicar a un elemento.
11. animation-play-state: Define si una animación está en pausa o en reproducción.
12. animation-timing-function: Define la función de tiempo de la animación.
13. backdrop-filter: Aplica efectos visuales al fondo de un elemento.
14. backface-visibility: Define si el lado posterior de un elemento 3D es visible cuando se rota.
15. background: Define el color de fondo y la imagen de fondo de un elemento.
16. background-attachment: Define si una imagen de fondo se desplaza con el contenido o se mantiene fija.
17. background-blend-mode: Define cómo se mezcla el fondo de un elemento con el contenido debajo de él.
18. background-color: Define el color de fondo de un elemento.
19. background-image: Define la imagen de fondo de un elemento.
20. background-origin: Define el punto de origen del fondo de un elemento.
21. background-position: Define la posición inicial de una imagen de fondo.
22. background-repeat: Define cómo se repite una imagen de fondo.
23. background-size: Define el tamaño de una imagen de fondo.
24. border: Define el ancho, el estilo y el color de un borde en un elemento.
25. border-bottom: Define el ancho, el estilo y el color del borde inferior de un elemento.
26. border-bottom-color: Define el color del borde inferior de un elemento.
27. border-bottom-left-radius: Define el radio de la esquina inferior izquierda del borde de un elemento.
28. border-bottom-right-radius: Define el radio de la esquina inferior derecha del borde de un elemento.
29. border-bottom-style: Define el estilo del borde inferior de un elemento.
30. border-bottom-width: Define el ancho del borde inferior de un elemento.
31. border-collapse: Define si los bordes de una tabla se colapsan en uno solo o se separan.
32. border-color: Define el color de los bordes de un elemento.
33. border-image: Define una imagen como borde de un elemento.
34. border-image-outset: Define la cantidad de espacio extendido fuera del borde de una imagen de borde.
35. border-image-repeat: Define cómo se repite una imagen de borde.
36. border-image-slice: Define cómo se divide una imagen de borde en partes.
37. border-image-source: Define la ruta de la imagen utilizada como borde.
38. border-image-width: Define el ancho de la imagen de borde.
39. border-left: Define el ancho, el estilo y el color del borde izquierdo de un elemento.
40. border-left-color: Define el color del borde izquierdo de un elemento.
41. border-left-style: Define el estilo del borde izquierdo de un elemento.
42. border-left-width: Define el ancho del borde izquierdo de un elemento.
43. border-radius: Define el radio de las esquinas de un borde.
44. border-right: Define el ancho, el estilo y el color del borde derecho de un elemento.
45. border-right-color: Define el color del borde derecho de un elemento.
46. border-right-style: Define el estilo del borde derecho de un elemento.
47. border-right-width: Define el ancho del borde derecho de un elemento.
48. border-spacing: Define el espacio entre las celdas de una tabla.
49. border-style: Define el estilo de los bordes de un elemento.
50. border-top: Define el ancho, el estilo y el color del borde superior de un elemento.
51. border-top-color: Define el color del borde superior de un elemento.
52. border-top-left-radius: Define el radio de la esquina superior izquierda del borde de un elemento.
53. border-top-right-radius: Define el radio de la esquina superior derecha del borde de un elemento.
54. border-top-style: Define el estilo del borde superior de un elemento.
55. border-top-width: Define el ancho del borde superior de un elemento.
56. border-width: Define el ancho de los bordes de un elemento.
57. bottom: Define la posición inferior de un elemento.
58. box-decoration-break: Define cómo se maneja la decoración del contenido fragmentado.
59. box-shadow: Define una sombra alrededor de un elemento.
60. box-sizing: Define cómo se calcula el tamaño total de un elemento.
61. break-after: Define si se debe insertar un salto de página, columna o regla después de un elemento.
62. break-before: Define si se debe insertar un salto de página, columna o regla antes de un elemento.
63. break-inside: Define si se permite que un elemento se divida en varias páginas, columnas o reglas.
64. caption-side: Define la posición de la leyenda de una tabla.
65. caret-color: Define el color del cursor intermitente en un elemento editable.
66. clear: Define cómo se deben despejar los elementos flotantes a su alrededor.
67. clip: Define un área rectangular recortada de un elemento posicionado.
68. clip-path: Define una forma personalizada para recortar un elemento.
69. color: Define el color del texto.
70. column-count: Define el número de columnas en un diseño de múltiples columnas.
71. column-fill: Define cómo se llenan las columnas en un diseño de múltiples columnas.
72. column-gap: Define el espacio entre columnas en un diseño de múltiples columnas.
73. column-rule: Define el estilo, grosor y color de la línea entre columnas en un diseño de múltiples columnas.
74. column-rule-color: Define el color de la línea entre columnas en un diseño de múltiples columnas.
75. column-rule-style: Define el estilo de la línea entre columnas en un diseño de múltiples columnas.
76. column-rule-width: Define el grosor de la línea entre columnas en un diseño de múltiples columnas.
77. column-span: Define si un elemento debe abarcar varias columnas en un diseño de múltiples columnas.
78. column-width: Define el ancho de las columnas en un diseño de múltiples columnas.
79. columns: Define el número y el ancho de las columnas en un diseño de múltiples columnas.
80. content: Define el contenido generado por el elemento ::before o ::after.
81. counter-increment: Incrementa o decrementa el valor de un contador.
82. counter-reset: Establece el valor inicial de un contador.
83. cursor: Define el tipo de cursor que se muestra cuando se pasa el ratón sobre un elemento.
84. direction: Define la dirección del texto y la escritura.
85. display: Define el tipo de pantalla de un elemento.
86. empty-cells: Define cómo se deben mostrar las celdas vacías en una tabla.
87. filter: Aplica efectos visuales a un elemento, como desenfoque, brillo o saturación.
88. flex: Define cómo se distribuyen los elementos flexibles en un contenedor.
89. flex-basis: Define el tamaño inicial de un elemento flexible en un contenedor.
90. flex-direction: Define la dirección en la que se colocan los elementos flexibles en un contenedor.
91. flex-flow: Define la dirección y el ajuste de línea de los elementos flexibles en un contenedor.
92. flex-grow: Define la capacidad de crecimiento de un elemento flexible en un contenedor.
93. flex-shrink: Define la capacidad de encogimiento de un elemento flexible en un contenedor.
94. flex-wrap: Define si los elementos flexibles deben envolverse en múltiples líneas en un contenedor.
95. float: Define si un elemento debe flotar a la izquierda, a la derecha o no flotar.
96. font: Define el estilo de fuente para el texto.
97. font-family: Define la familia de fuentes para el texto.
98. font-size: Define el tamaño de fuente para el texto.
99. font-size-adjust: Ajusta el tamaño de fuente según la altura x de las letras.
100. font-stretch: Define la compresión o expansión de la anchura de una fuente.
101. font-style: Define el estilo de fuente para el texto.
102. font-variant: Define las variantes de fuente para el texto.
103. font-weight: Define el grosor de la fuente para el texto.
104. gap: Define el espacio entre las filas y columnas de una cuadrícula.
105. grid: Define una cuadrícula para posicionar los elementos en un diseño.
106. grid-area: Define el tamaño y la posición de un área en una cuadrícula.
107. grid-auto-columns: Define el tamaño predeterminado de las columnas no especificadas en una cuadrícula automática.
108. grid-auto-flow: Define cómo se colocan automáticamente los elementos en una cuadrícula.
109. grid-auto-rows: Define el tamaño predeterminado de las filas no especificadas en una cuadrícula automática.
110. grid-column: Define las líneas de inicio y fin para un elemento en una cuadrícula.
111. grid-column-end: Define la línea de finalización para un elemento en una cuadrícula.
112. grid-column-gap: Define el espacio entre las columnas de una cuadrícula.
113. grid-column-start: Define la línea de inicio para un elemento en una cuadrícula.
114. grid-gap: Define el espacio entre filas y columnas de una cuadrícula.
115. grid-row: Define las líneas de inicio y fin para un elemento en una cuadrícula.
116. grid-row-end: Define la línea de finalización para un elemento en una cuadrícula.
117. grid-row-gap: Define el espacio entre las filas de una cuadrícula.
118. grid-row-start: Define la línea de inicio para un elemento en una cuadrícula.
119. grid-template: Define filas y columnas de una cuadrícula explícitamente.
120. grid-template-areas: Define las áreas de una cuadrícula.
121. grid-template-columns: Define las columnas de una cuadrícula explícitamente.
122. grid-template-rows: Define las filas de una cuadrícula explícitamente.
123. hanging-punctuation: Define cómo se muestran los signos de puntuación al final o al comienzo de una línea.
124. height: Define la altura de un elemento.
125. hyphens: Define cómo se dividen las palabras cuando no encajan en una línea.
126. image-rendering: Define la calidad de representación de una imagen.
127. isolation: Define si un elemento debe crear un nuevo contexto de apilamiento.
128. justify-content: Define cómo se justifican los elementos flexibles en el eje principal en un contenedor.
129. justify-items: Define cómo se justifican los elementos flexibles en el eje principal en un contenedor de cuadrícula.
130. justify-self: Define cómo se justifica un elemento flexible específico en el eje principal en un contenedor de cuadrícula.
131. left: Define la posición izquierda de un elemento.
132. letter-spacing: Define el espacio adicional entre los caracteres de un texto.
133. line-height: Define la altura de línea para el texto.
134. list-style: Define el estilo de viñetas/bordes y la imagen de fondo de una lista.
135. list-style-image: Define la imagen de fondo para los marcadores de lista.
136. list-style-position: Define la posición de los marcadores de lista.
137. list-style-type: Define el tipo de marcadores de lista.
138. margin: Define el margen externo de un elemento.
139. margin-bottom: Define el margen inferior de un elemento.
140. margin-left: Define el margen izquierdo de un elemento.
141. margin-right: Define el margen derecho de un elemento.
142. margin-top: Define el margen superior de un elemento.
143. mask: Aplica una máscara a un elemento mediante una imagen o una forma.
144. mask-border: Define el estilo, ancho y color del borde de una máscara.
145. mask-border-mode: Define si una máscara debe afectar el área dentro o fuera del borde.
146. mask-border-outset: Define la cantidad de espacio extendido fuera del borde de una máscara.
147. mask-border-repeat: Define cómo se repite una imagen de borde de máscara.
148. mask-border-slice: Define cómo se divide una imagen de borde de máscara en partes.
149. mask-border-source: Define la ruta de la imagen utilizada como borde de máscara.
150. mask-border-width: Define el ancho del borde de una máscara.
151. mask-clip: Define la forma que se utiliza para recortar una máscara.
152. mask-composite: Define cómo se combinan varias máscaras en una sola.
153. mask-image: Define la imagen utilizada como máscara.
154. mask-mode: Define cómo se muestran las máscaras en relación con el contenido.
155. mask-origin: Define el punto de origen de una máscara.
156. mask-position: Define la posición inicial de una imagen de máscara.
157. mask-repeat: Define cómo se repite una imagen de máscara.
158. mask-size: Define el tamaño de una imagen de máscara.
159. mask-type: Define el tipo de máscara utilizada.
160. max-height: Define la altura máxima de un elemento.
161. max-width: Define el ancho máximo de un elemento.
162. min-height: Define la altura mínima de un elemento.
163. min-width: Define el ancho mínimo de un elemento.
164. mix-blend-mode: Define cómo se mezcla el contenido de un elemento con el contenido debajo de él.
165. object-fit: Define cómo se ajusta una imagen dentro de su contenedor.
166. object-position: Define la posición inicial de una imagen dentro de su contenedor.
167. opacity: Define la opacidad de un elemento.
168. order: Define el orden de los elementos flexibles en un contenedor.
169. outline: Define el estilo, grosor y color del contorno de un elemento.
170. outline-color: Define el color del contorno de un elemento.
171. outline-offset: Define la separación entre un contorno y el borde de un elemento.
172. outline-style: Define el estilo del contorno de un elemento.
173. outline-width: Define el grosor del contorno de un elemento.
174. overflow: Define cómo se muestra el contenido desbordado de un elemento.
175. overflow-wrap: Define cómo se deben romper las palabras largas y los espacios en una línea de texto.
176. overflow-x: Define cómo se muestra el contenido desbordado horizontalmente de un elemento.
177. overflow-y: Define cómo se muestra el contenido desbordado verticalmente de un elemento.
178. padding: Define el relleno interno de un elemento.
179. padding-bottom: Define el relleno inferior de un elemento.
180. padding-left: Define el relleno izquierdo de un elemento.
181. padding-right: Define el relleno derecho de un elemento.
182. padding-top: Define el relleno superior de un elemento.
183. page-break-after: Define si se debe insertar un salto de página después de un elemento.
184. page-break-before: Define si se debe insertar un salto de página antes de un elemento.
185. page-break-inside: Define si un elemento debe permitir saltos de página dentro de él.
186. perspective: Define la distancia entre el plano de visualización y un elemento 3D.
187. perspective-origin: Define el punto de origen desde el cual se visualiza un elemento 3D.
188. place-content: Define cómo se colocan y alinean los elementos en un contenedor de cuadrícula o flex.
189. place-items: Define cómo se colocan y alinean los elementos en un contenedor de cuadrícula o flex.
190. place-self: Define cómo se coloca y alinea un elemento específico en un contenedor de cuadrícula o flex.
191. pointer-events: Define si un elemento debe responder a eventos del puntero.
192. position: Define el método de posicionamiento de un elemento.
193. quotes: Define las comillas a utilizar en un bloque de citas.
194. resize: Define si un elemento se puede redimensionar y cómo se realiza.
195. right: Define la posición derecha de un elemento.
196. row-gap: Define el espacio entre filas de una cuadrícula.
197. scroll-behavior: Define el comportamiento de desplazamiento suave de un elemento.
198. tab-size: Define el tamaño de tabulación para el contenido dentro de un elemento.
199. table-layout: Define el algoritmo de diseño utilizado para organizar las celdas de una tabla.
200. text-align: Define la alineación horizontal del texto dentro de un elemento.