robot de la enciclopedia para niños

CSS para niños

Enciclopedia para niños
Para otros usos de este término, véase CSS (desambiguación).
Datos para niños
Hojas de estilo en cascada (CSS)
Official CSS Logo.svg
Ejemplo de código CSS.jpg

Ejemplo de código fuente escrito en CSS.
Desarrollador
World Wide Web Consortium (W3C)
https://www.w3.org/Style/CSS/ y https://drafts.csswg.org/
Información general
Extensión de archivo .css
Tipo de MIME text/css
Uniform Type Identifier public.css
Lanzamiento inicial 17 de diciembre de 1996
Última versión CSS3
Tipo de formato Lenguaje de hoja de estilos
Contenedor para Reglas de estilo para elementos HTML (etiquetas)
Contenido por Documentos HTML
Estándar(es) Level 1 (Recommendation)
Level 2 (Recommendation)
Level 2 Revisión 1 (Recommendation)
Level 2 Revisión 2 (CSS 2.2)
Formato abierto Sí 

CSS significa "Cascading Style Sheets" en inglés, que en español se traduce como "Hojas de Estilo en Cascada". Es un lenguaje informático que se usa para darle estilo y apariencia a los documentos que están escritos en otros lenguajes, como HTML o XML. Piensa en CSS como el "maquillaje" o la "ropa" de una página web.

Junto con HTML (que organiza el contenido) y JavaScript (que añade interactividad), CSS es fundamental para que las páginas web se vean atractivas. Ayuda a crear el diseño, los colores, las fuentes y muchos otros detalles visuales de los sitios web, aplicaciones y programas para móviles.

El objetivo principal de CSS es separar el contenido de una página (lo que dice) de su presentación (cómo se ve). Esto hace que las páginas sean más fáciles de usar para todos. También permite que muchos documentos HTML compartan el mismo estilo usando un solo archivo CSS, lo que simplifica el trabajo de los diseñadores.

Gracias a CSS, un mismo documento puede verse diferente según dónde se muestre. Por ejemplo, puede tener un estilo para la pantalla de tu computadora, otro para imprimirlo, y otro para ser leído en voz alta por un programa. Incluso puede adaptarse al tamaño de la pantalla de tu teléfono o tableta.

La organización de CSS se llama "cascada" porque tiene reglas de prioridad. Si hay varias reglas que intentan darle estilo a lo mismo, CSS sabe cuál aplicar para que el resultado sea siempre el esperado. El World Wide Web Consortium (W3C) es la organización que se encarga de mantener y mejorar las especificaciones de CSS.

Cómo funciona CSS: Sintaxis y Reglas

CSS tiene una forma sencilla de escribir sus instrucciones. Usa palabras clave en inglés para describir cómo deben verse las cosas. Una hoja de estilos CSS es como una lista de "reglas". Cada regla tiene una parte que dice "a qué se aplica" (llamada selector) y otra parte que dice "cómo debe verse" (llamada bloque de declaración).

Selectores: ¿A qué se aplica el estilo?

Los selectores son como las etiquetas que le dices a CSS para que sepa a qué elementos de tu página web aplicar un estilo.

Puedes aplicar estilos a:

  • Todos los elementos de un tipo: Por ejemplo, a todos los párrafos (<p>).
  • Elementos con un atributo especial:
    • id: Es un nombre único que le das a un solo elemento.
    • class: Es un nombre que puedes dar a varios elementos para agruparlos y aplicarles el mismo estilo.

Las clases y los identificadores distinguen entre mayúsculas y minúsculas. Siempre empiezan con una letra y pueden incluir números o guiones bajos.

Las pseudoclases son selectores especiales que permiten aplicar estilos según el estado de un elemento, no solo por su contenido. Por ejemplo, :hover se usa para cambiar el estilo de un elemento cuando pasas el ratón por encima. Se añade al selector, como a:hover (para enlaces cuando el ratón está encima).

Los selectores se pueden combinar para ser más específicos. Por ejemplo, div.miClase {color: rojo;} aplica el color rojo a todos los elementos

que tengan la clase "miClase". En cambio, .miClase div {color: rojo;} aplica el color rojo a todos los elementos
que estén dentro de cualquier elemento con la clase "miClase".

Bloque de Declaraciones: ¿Cómo se ve el estilo?

Después de elegir a qué elemento aplicar el estilo (con el selector), viene el bloque de declaraciones. Aquí es donde le dices a CSS qué cambios hacer.

Cada declaración tiene una propiedad (como "color" o "tamaño de fuente") y un valor (como "rojo" o "16px"). Si hay varias declaraciones, se separan con un punto y coma (;).

Las propiedades son las características que puedes cambiar (color, tamaño, etc.). Los valores son lo que le das a esas propiedades. Pueden ser palabras (como "center"), números (como "200px" para 200 píxeles) o porcentajes (como "80%").

Los colores se pueden especificar de varias maneras:

  • Con palabras clave (ej. "red" para rojo).
  • Con códigos hexadecimales (ej. #FF0000).
  • Con valores RGB (ej. rgb(255, 0, 0)).
  • Con valores RGBA (igual que RGB, pero con transparencia, ej. rgba(255, 0, 0, 0.8)).
  • Con valores HSL o HSLA (ej. hsl(000, 100%, 50%)).

Cómo usar CSS en tus páginas web

Antes de CSS, toda la información sobre cómo se veía una página web (colores, fuentes, alineación) se mezclaba directamente en el código HTML. Esto hacía que el código fuera muy largo, difícil de leer y de mantener. CSS permite poner toda esa información de estilo en un archivo separado, haciendo que el código HTML sea mucho más limpio y fácil de entender.

Por ejemplo, si quieres que todos los títulos principales (

) de tu página sean rojos, antes de CSS tendrías que escribir el código del color en cada título. Con CSS, lo defines una sola vez en un archivo separado y se aplica a todos los

. Puedes enlazar un archivo CSS externo a tu documento HTML así: 
<link href="hojadeestilos.css" rel="stylesheet" type="text/css" />

También puedes incluir el código CSS directamente en la sección <head> de tu documento HTML usando la etiqueta <style>:

<style>
  h1 {color: red}
</style>

Fuentes de Estilo y la Cascada

Los estilos CSS pueden venir de diferentes lugares:

  • El navegador web (tiene estilos predeterminados).
  • El usuario (puede tener sus propios estilos para mejorar la accesibilidad).
  • El diseñador de la página (los estilos que tú creas).

La "cascada" es el sistema que decide qué estilo se aplica cuando hay conflictos. Los estilos del diseñador suelen tener más prioridad que los del navegador, y dentro de los estilos del diseñador, hay un orden específico.

Una de las ventajas de CSS es que permite a los usuarios tener más control. Si a alguien le cuesta leer un texto con cierto color o tamaño, puede aplicar su propia hoja de estilos para cambiarlo sin afectar el contenido.

Especificidad: ¿Qué estilo gana?

La especificidad es como un sistema de puntos que CSS usa para decidir qué regla de estilo aplicar cuando varias reglas intentan cambiar el mismo elemento. Cuanto más específico sea un selector, más puntos tiene y más prioridad tendrá su estilo.

Por ejemplo:

  • Un selector de tipo (como h1) tiene una especificidad baja.
  • Un selector de clase (como .miClase) tiene más especificidad.
  • Un selector de ID (como #miID) tiene la especificidad más alta.

Si un estilo se define directamente en la etiqueta HTML (estilo inline), tiene la especificidad más alta de todas.

Herencia: Compartiendo estilos

La herencia es una característica muy útil de CSS. Significa que algunas propiedades de estilo se pasan de un elemento "padre" a sus elementos "hijos" dentro de la estructura de la página.

Por ejemplo, si defines un color de texto para el cuerpo de tu página (el elemento <body>), todos los textos dentro de ese cuerpo (párrafos, títulos, etc.) heredarán ese color, a menos que les especifiques un color diferente.

La herencia ayuda a escribir menos código CSS, lo que hace que las páginas se carguen más rápido y sean más fáciles de mantener.

Ejemplo de Herencia

Imagina que tienes esta regla CSS:

 h1 {
    color: pink;
 }

Y en tu HTML tienes esto:

<h1>
    Esto es para <em>ilustrar</em> la herencia
</h1>

La palabra "ilustrar" está dentro de una etiqueta <em>, que es hija de <h1>. Si no le das un color específico a <em>, heredará el color rosa de <h1>. Así, "ilustrar" también se verá en rosa.

Espacios en blanco: Para que el código sea legible

CSS ignora los espacios extra entre las propiedades y los selectores. Esto significa que puedes organizar tu código con saltos de línea y sangrías para que sea más fácil de leer y entender, sin que afecte cómo funciona la página.

Por ejemplo, estos dos códigos hacen lo mismo:

body{overflow:hidden;background:#000000;}

es igual a este otro:

 body {
    overflow: hidden;
    background: #000000;
 }

El segundo es mucho más fácil de leer.

Posicionamiento: Organizando elementos en la página

CSS te permite controlar dónde y cómo se muestran los elementos en tu página web. Hay diferentes formas de posicionar los elementos:

  • Elementos en línea (inline): Se colocan como las palabras en una frase. Cuando no hay más espacio en una línea, pasan a la siguiente.
  • Elementos de bloque (block): Se colocan uno debajo del otro, como párrafos.
  • Elementos flotantes (float): Se sacan del flujo normal y se colocan a la izquierda o a la derecha, permitiendo que otros elementos fluyan a su alrededor.
  • Elementos posicionados absolutamente (absolute): Se colocan en un lugar específico de la página, sin importar dónde estén los otros elementos.

Propiedades de posicionamiento

La propiedad principal es position, que puede tener varios valores. Si un elemento no es static (el valor por defecto), puedes usar top, bottom, left y right para ajustar su posición.

  • static: Es la posición normal de los elementos.
  • relative: El elemento se mueve un poco desde su posición normal, pero sigue afectando a los demás elementos.
  • absolute: El elemento se posiciona en relación con su elemento "padre" más cercano que no sea estático. No afecta a los demás elementos.
  • fixed: El elemento se queda en una posición fija en la pantalla, incluso si el usuario se desplaza por la página.

Float y clear

La propiedad float permite que un elemento "flote" a la izquierda o a la derecha, y el resto del contenido se ajuste a su alrededor.

  • float: left;: El elemento flota a la izquierda.
  • float: right;: El elemento flota a la derecha.

La propiedad clear se usa para evitar que un elemento flote alrededor de otros elementos flotantes.

  • clear: left;: No permite flotar a la izquierda.
  • clear: right;: No permite flotar a la derecha.
  • clear: both;: No permite flotar a ninguno de los dos lados.

Historia de CSS

Archivo:Håkon Wium Lie
Håkon Wium Lie, uno de los creadores del estándar CSS.

CSS fue propuesto por primera vez por Håkon Wium Lie en 1994, mientras trabajaba en el CERN con Tim Berners-Lee, el creador de la World Wide Web. En ese tiempo, se propusieron varios lenguajes para dar estilo a las páginas web.

Las discusiones llevaron a que el World Wide Web Consortium (W3C) publicara la primera recomendación oficial de CSS (CSS1) en 1996. Bert Bos fue coautor de CSS1 y también es reconocido como cocreador.

Antes de CSS, los diseñadores web tenían que usar mucho código HTML para controlar la apariencia de sus páginas. Esto hacía que el HTML fuera muy complicado. CSS se creó para separar el contenido del estilo, haciendo que el diseño web fuera más fácil y flexible.

Lie y Bos trabajaron juntos para desarrollar el estándar CSS. La letra 'H' se quitó del nombre original (Cascading HTML Style Sheets) porque CSS podía aplicarse a otros lenguajes además de HTML.

El desarrollo de CSS ha continuado a lo largo de los años. En 1997, se creó el Grupo de Trabajo de CSS dentro del W3C. Este grupo corrigió errores de CSS1 y lanzó CSS2 en 1998. Después, las mejoras se dividieron en "módulos" para que cada parte de CSS pudiera desarrollarse de forma independiente. Esto dio lugar a CSS3 y a futuras versiones.

Niveles de CSS

Archivo:W3C CSS Snapshot
CSS Snapshot 2021

CSS se ha desarrollado en diferentes "niveles" y "perfiles". Cada nuevo nivel añade funciones al anterior. Los perfiles son versiones de CSS adaptadas para dispositivos específicos, como teléfonos móviles, impresoras o televisores.

CSS1

Fue la primera versión oficial, publicada en diciembre de 1995. Algunas de sus funciones incluían:

  • Propiedades de las fuentes (tipo, tamaño, negrita, cursiva).
  • Colores de texto, fondos y bordes.
  • Espaciado entre palabras, letras y líneas.
  • Alineación de textos e imágenes.
  • Propiedades de caja (márgenes, bordes, relleno).

CSS2

Publicada en mayo de 1998, CSS2 amplió las funciones de CSS1, añadiendo:

  • Control de capas y posicionamiento de elementos (relativo, absoluto, fijo).
  • Concepto de "tipos de medios" (para diferentes dispositivos).
  • Soporte para hojas de estilo auditivas (para lectores de pantalla).

CSS 2.1

Esta fue una revisión de CSS2 que corrigió errores, eliminó funciones poco usadas y añadió algunas nuevas. Fue publicada como recomendación oficial en junio de 2011.

CSS3

A diferencia de las versiones anteriores, CSS3 se divide en muchos "módulos" separados. Cada módulo añade nuevas funciones sin romper la compatibilidad con las versiones anteriores. Los trabajos en CSS3 comenzaron en 1999.

Debido a esta modularización, diferentes partes de CSS3 están en distintas etapas de desarrollo. Algunos módulos ya son recomendaciones oficiales, mientras que otros aún están en fase de prueba.

CSS4

No existe una única especificación llamada "CSS4". En su lugar, el desarrollo de CSS continúa a través de los módulos individuales. Algunos módulos que se basan en CSS Nivel 2 han llegado al Nivel 4 o incluso al Nivel 5. Otros módulos completamente nuevos, como Flexbox, se designan como Nivel 1 y están avanzando.

El Grupo de Trabajo de CSS a veces publica "snapshots" (instantáneas), que son colecciones de módulos estables que los desarrolladores de navegadores pueden implementar.

Soporte de CSS en los navegadores web

Cada navegador web (como Chrome, Firefox, Edge) usa un "motor de renderizado" para mostrar las páginas. El soporte de CSS no es exactamente igual en todos los navegadores. Esto significa que una página puede verse ligeramente diferente en uno u otro.

Debido a estas diferencias, los desarrolladores a veces tienen que usar "trucos" o "filtros" de CSS para que sus sitios se vean bien en todos los navegadores. La adopción de nuevas funciones de CSS a veces es lenta porque los navegadores tardan en implementarlas.

Para asegurar que una página web funcione bien, los desarrolladores suelen probar sus sitios en varios navegadores y sistemas operativos. Existen herramientas como BrowserStack que ayudan con esto.

Además, hay sitios web como CanIUse y Mozilla Developer Network que muestran qué propiedades de CSS son compatibles con cada navegador. CSS3 también incluye una regla especial, @supports, que permite a los desarrolladores escribir código CSS que solo se aplica si el navegador soporta una función específica.

Limitaciones de CSS

Aunque CSS es muy potente, tiene algunas limitaciones:

  • Seleccionar elementos padres: Actualmente, CSS no tiene una forma sencilla de seleccionar el elemento "padre" de un elemento.
  • Pseudoclases dinámicas: Algunas pseudoclases, como :hover (cuando pasas el ratón), no se pueden controlar fácilmente desde el navegador, lo que a veces puede ser un problema.
  • Nombrar estilos: No hay una forma de darle un nombre a una regla CSS, lo que podría ser útil para que los programas puedan referirse a ella.
  • Duplicación de estilos: A veces, es necesario repetir estilos en varias reglas para lograr el efecto deseado, lo que puede hacer el código más largo.
  • Seleccionar rangos de texto: No se puede seleccionar un rango específico de texto sin usar etiquetas HTML adicionales, como <span>.

Ventajas de usar CSS

A pesar de sus limitaciones, CSS ofrece muchas ventajas:

  • Publicación en múltiples formatos: Permite que el mismo contenido se vea diferente según las preferencias del usuario, el navegador o el tipo de dispositivo (computadora, teléfono).
  • Cambios globales sencillos: Si usas CSS de forma eficiente, puedes cambiar el estilo de todo un sitio web modificando solo un archivo. Antes de CSS, esto era mucho más difícil y costoso.
  • Código más eficiente: Una hoja de estilos externa o interna define el estilo para muchos elementos a la vez, lo que es más eficiente que repetir la información en cada elemento HTML. Además, los navegadores guardan en caché los archivos CSS, lo que hace que las páginas se carguen más rápido.
  • Adaptación a dispositivos: Con un simple cambio, puedes adaptar el estilo de una página para diferentes dispositivos, mejorando la accesibilidad.
  • Mejora la accesibilidad: Sin CSS, los diseñadores a menudo usaban tablas para el diseño, lo que dificultaba el acceso a la información para personas con ciertas limitaciones visuales o que usaban lectores de pantalla. CSS permite un diseño más accesible.

Frameworks de CSS

Los frameworks de CSS son como "kits de herramientas" prefabricados que simplifican el diseño de páginas web con CSS. Son colecciones de código CSS ya escrito que puedes usar para crear diseños rápidamente y asegurarte de que se vean bien en diferentes navegadores.

Algunos frameworks populares son Tailwind, Foundation, Bootstrap y Materialize. Se suelen incluir en tu página web como archivos CSS externos. Ofrecen muchas opciones listas para usar en el diseño y la organización de una página.

Muchos diseñadores usan estos frameworks para crear prototipos rápidos o para aprender, pero a menudo prefieren escribir su propio código CSS a mano para tener un control total.

Véase también

Kids robot.svg En inglés: CSS Facts for Kids

  • HTML
  • Lista de lenguajes de hojas de estilo
  • Web Accessibility Initiative
  • XHTML

Enlaces externos

  •  – Este documento reúne en un solo documento todas las especificaciones que conforman el estado actual de CSS en 2015.
  •  – Incluye enlaces a las especificaciones.
  • Comparación de la presentación CSS en diferentes motores (Wikipedia en inglés)
Obtenido de «https://ninos.kiddle.co/index.php?title=CSS&oldid=4890940»
kids search engine
Todo el contenido de los artículos de la Enciclopedia Kiddle (incluidas las imágenes) se puede utilizar libremente para fines personales y educativos bajo la licencia Atribución-CompartirIgual a menos que se indique lo contrario. Citar este artículo:
CSS para Niños. Enciclopedia Kiddle.