Cómo Se Estructura El CSS - Aprende Desarrollo Web - MDN

Get real-time assistance with your coding queries. Try AI Help now!
References Guides Plus Curriculum NEW Blog Play AI Help BETA Theme Log in Sign up for free
Aprende desarrollo web CSS Primeros pasos en CSS Cómo se estructura el CSS Español
Esta página ha sido traducida del inglés por la comunidad. Aprende más y únete a la comunidad de MDN Web Docs.
CSS — Styling the web

Filter
CSS first steps
Primeros pasos en CSS
¿Qué es el CSS?
Cómo se estructura el CSS In this article
Aplicar CSS al HTML
Empezar con CSS Anterior Overview: Primeros pasos en CSS Siguiente Juguemos con el CSS de este
artículo
Cómo se estructura el CSS Ahora que ya sabes qué es el CSS y conoces sus conceptos básicos, es hora de profundizar un poco
más en la estructura del lenguaje en sí. Ya hemos visto muchos de los conceptos que aparecen en Selectores
Cómo funciona CSS este artículo; puedes volver para recapitular si más adelante encuentras conceptos confusos. Propiedades y valores
Usa tu nuevo conocimiento Ejemplo
CSS building blocks Conocimientos básicos de informática, tener el software básico instalado, @rules
Prerrequisitos: conocimientos básicos de trabajo con archivos, conceptos básicos de HTML
Styling text (véase Introducción al HTML) y una idea de cómo funciona el CSS. Abreviaturas
CSS layout Objetivo: Aprender en detalle las estructuras de sintaxis fundamentales de CSS. Comentarios
Espacio en blanco
JavaScript — Dynamic client-side
scripting Aplicar CSS al HTML ¿Qué sigue?
JavaScript first steps Lo primero que veremos son los tres métodos para aplicar CSS a un documento.
JavaScript building blocks
Introducing JavaScript objects
Hoja de estilo externa
En Empezar con el CSS, vinculamos una hoja de estilo externa a nuestra página. Este es el método
más común y útil para adjuntar CSS a un documento, porque puedes vincular el CSS a varias páginas
y dar estilo a todas ellas con la misma hoja de estilo. En la mayoría de los casos, las diferentes
páginas de un sitio web se verán más o menos iguales, de modo que puedes usar el mismo conjunto
de reglas para el aspecto y la interacción básicos.
Una hoja de estilo externa significa que el CSS está escrito en un archivo independiente con una
extensión .css y que lo vinculas desde un elemento <link> de HTML:
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Mi experimento CSS</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Este es mi primer ejemplo de CSS</p>
</body>
</html>
El archivo CSS podría parecerse a esto:

CSS
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
El atributo href del elemento <link> tiene que hacer referencia a un archivo de tu sistema de
archivos.
En el ejemplo anterior, el archivo CSS está en la misma carpeta que el documento HTML, pero
puedes colocarlo en otro lugar y especificar la ruta adecuada. Por ejemplo:
HTML

<link rel="stylesheet" href="styles/style.css" />

<link rel="stylesheet" href="styles/general/style.css" />

<link rel="stylesheet" href="../styles/style.css" />
Hoja de estilo interna

Una hoja de estilo interna es cuando no hay ningún archivo CSS externo, sino que colocas tu CSS
dentro de un elemento <style> contenido dentro del elemento <head> del HTML.
En este caso, el HTML se vería así:
HTML
<!doctype html>
<html>
<head>
<style>
h1 {
color: blue;
background-color: yellow;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Este es mi primer ejemplo de CSS</p>
</body>
</html>
Esto puede ser útil en algunas circunstancias (tal vez estés trabajando con un sistema de
administración de contenido donde no sea posible modificar los archivos CSS directamente), pero no
es tan eficiente como las hojas de estilo externas: en una página web, deberías repetir el CSS en
cada página y actualizarlo en varios lugares en caso de que hubiera que hacer cambios.
Estilos en línea
Los estilos en línea son declaraciones CSS que afectan a un solo elemento, contenido dentro de un
atributo de style :
HTML
<!doctype html>
<html>
<head>
</head>
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">
¡Hola mundo!
</h1>
<p style="color:red;">Este es mi primer ejemplo de CSS</p>
</body>
</html>
¡No hagas esto a menos que realmente tengas que hacerlo! Es realmente malo a la hora de
realizar el mantenimiento (puede que tengas que actualizar la misma información varias veces en un
mismo documento), y además mezcla tu información CSS para la presentación con tu información
HTML para la estructura, lo que dificulta la lectura y la comprensión del código. Mantener los
diferentes tipos de código separados facilita trabajar con ellos.
Hay ciertos lugares donde los estilos en línea son más comunes, o incluso aconsejables. Es posible
que tengas que recurrir a ellos si realmente tu entorno de trabajo es restrictivo (tal vez el CMS solo
te permita editar el cuerpo del HTML). También verás que se usan mucho en el correo electrónico en
formato HTML para lograr la máxima compatibilidad con el mayor número de clientes.
Juguemos con el CSS de este artículo

En este artículo hay mucho CSS con el que jugar. Para hacerlo, recomendamos crear un nuevo
directorio/carpeta en el ordenador, dentro de la cual deberás crear una copia de los siguientes dos
archivos:
index.html:
HTML
<!doctype html>
<html lang="en">
<head>
<title>Mis experimentos CSS</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<p>Crea tu HTML de prueba aquí</p>
</body>
</html>
styles.css:
CSS
/* Crea tu CSS de prueba aquí */
p {
color: red;
}
Entonces, cuando te encuentres con un CSS con el que desees experimentar, reemplaza el
contenido <body> del HTML con algo de HTML sin estilos y añade CSS a tu archivo de CSS para
darle estilo.
Si no estás en un sistema donde puedas crear archivos fácilmente, puedes utilizar el editor
interactivo que encontrarás a continuación para experimentar.
¡Sigue leyendo y disfruta!
Selectores
No se puede hablar de CSS sin mencionar los selectores, de los cuales ya hemos descubierto varios
tipos diferentes en la lección Empezar con el CSS. Un selector es, como determinamos, un elemento
de nuestro documento HTML para aplicarle estilo. Si los estilos no se aplican correctamente, es
probable que el selector no coincida con lo que crees que debería coincidir.
Cada regla CSS comienza con un selector o una lista de selectores que indican al navegador a qué
elemento o elementos deben aplicarse dichas reglas. Todos los siguientes son ejemplos de
selectores válidos o listas de selectores.
CSS
h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro
Prueba a crear algunas reglas CSS que usen los selectores anteriores y algo de HTML sin
estilos. Si no conoces alguna de las sintaxis anteriores, ¡prueba a buscarla en MDN!
Nota: Aprenderás mucho más sobre los selectores en nuestros tutoriales sobre selectores
CSS de la próxima lección.
Especificidad
A menudo habrá situaciones en las que dos selectores podrían determinar un mismo elemento
HTML. Considera la siguiente hoja de estilo, en que definimos una regla con un selector p que
establecerá los párrafos en color azul, y también una clase que establecerá los elementos
seleccionados en color rojo.
CSS
.special {
color: red;
}
p {
color: blue;
}
Digamos que en nuestro documento HTML hay un párrafo con una clase special . Ambas reglas
podrían aplicarse. ¿Cuál ganará? ¿De qué color crees que será nuestro párrafo?
HTML
<p class="special">¿De qué color soy?</p>
El lenguaje CSS tiene reglas para controlar cuál ganará en caso de colisión; reciben el nombre de
cascada y especificidad. En el siguiente bloque de códigos hemos definido dos reglas para el
selector p , pero el párrafo termina siendo de color azul. Esto se debe a que la declaración que lo
establece en azul aparece más abajo en la hoja de estilo, y los estilos posteriores anulan a los
anteriores. Así funciona la regla de la cascada.
CSS
p {
color: red;
}
p {
color: blue;
}
Sin embargo, en el caso de nuestro primer bloque, que contiene un selector de clase y otro de
elementos, la clase ganará. Esto hará que el párrafo sea rojo, incluso aunque aparezca antes en la
hoja de estilo. Una clase se describe de forma más específica o con más especificidad que el
selector de elementos, razón por la que gana.
Prueba el ejemplo anterior: añade el HTML a tu experimento, luego pon las dos reglas p { ... }
a tu hoja de estilo. A continuación, cambia el primer selector p por .special para ver cómo
cambia el estilo.
Las reglas de especificidad y de cascada pueden parecer un poco complicadas al principio. Son más
fáciles de entender a medida que se van adquiriendo conocimientos de CSS. En nuestro artículo
sobre Cascada y herencia, que abordaremos en la próxima lección, se explicará en detalle,
incluyendo cómo calcular la especificidad. Por ahora, solo has de saber que existe y que a veces el
CSS no se aplica como esperas porque algo más en la hoja de estilo tiene una mayor especificidad.
El hecho de identificar que más de una regla podría aplicarse a un elemento es el primer paso para
solucionar estos problemas.
Propiedades y valores
En su nivel más básico, el CSS consta de dos componentes básicos:
Propiedades: Identificadores legibles por los humanos que indican qué características de estilo
(por ejemplo, font-size , width , background-color ) deseas cambiar.
Valores: A cada propiedad especificada se le asigna un valor que indica cómo quieres que
cambien esas características de estilo (por ejemplo, lo que quieres que cambie de la fuente, el
ancho o el color de fondo).
La siguiente imagen resalta una sola propiedad y valor. El nombre de la propiedad es color y el valor
blue .
Una propiedad emparejada con un valor se denomina declaración CSS. Las declaraciones CSS se
colocan dentro de los bloques de declaración CSS. La siguiente imagen muestra nuestro CSS con el
bloque de declaración resaltado.
Finalmente, los bloques de declaración CSS se combinan con selectores para producir conjuntos de
reglas CSS (o reglas CSS). Nuestra imagen contiene dos reglas, una para el selector h1 y otra para el
selector p . La regla para h1 está resaltada.
Establecer las propiedades de CSS según valores específicos es la función principal del lenguaje
CSS. El motor CSS calcula qué declaraciones se aplican a cada elemento de una página para darle la
compaginación y los estilos adecuados.
Advertencia: Las propiedades y valores de CSS son sensibles a mayúsculas y minúsculas.

La propiedad y el valor de cada par están separados por dos puntos ( : ).
Prueba a buscar diferentes valores de las siguientes propiedades y escribe reglas CSS que se
puedan aplicar a diferentes elementos HTML:
font-size
width
background-color
color
border
Advertencia: Si una propiedad es desconocida o si un valor no es válido para una propiedad

determinada, la declaración se considera inválida y el motor CSS del navegador la ignora por
completo.
Advertencia: En CSS (y otros estándares web) se ha acordado establecer como estándar la

ortografía en inglés de los EE. UU. para solucionar las incertidumbres idiomáticas. Por
ejemplo, siempre hay que escribir color . Si se escribe colour , no funcionará.
Las funciones
Si bien la mayoría de valores son palabras clave relativamente simples o valores numéricos, es
posible que algunos valores tomen la forma de una función. Un ejemplo sería la función calc() . Esta
función te permite hacer operaciones matemáticas sencillas desde tu CSS, por ejemplo:
HTML Play
<div class="outer">
<div class="box">La caja interior es del 90% - 30px.</div>
</div>
CSS Play
.outer {
}
.box {
padding: 10px;
width: calc(90% - 30px);
background-color: rebeccapurple;
color: white;
}
Esto se traduce así:

Play
Ejemplo
Una función consta del nombre de la función y, a continuación, unos paréntesis entre los que se
colocan los valores permitidos para esa función. En el caso del ejemplo calc() anterior, pedimos que
el ancho de esta caja sea del 90% del ancho del bloque que la contiene, menos 30 píxeles. Esto no
es algo que podamos calcular con anticipación y simplemente introducir el valor en el CSS, ya que no
sabemos cuál será el 90%. Como con todos los valores, la página correspondiente del proyecto MDN
tendrá ejemplos de uso para que puedas ver cómo funciona.
Otro ejemplo serían los diversos valores para transform , como rotate() .
HTML Play
<div class="box"></div>
CSS Play
.box {
margin: 30px;
width: 100px;
height: 100px;
background-color: rebeccapurple;
transform: rotate(0.8turn);
}
El resultado del código anterior se ve así:

Play
Prueba a buscar diferentes valores de las siguientes propiedades y escribe reglas CSS que se
apliquen a diferentes elementos HTML:
transform
background-image , en particular a valores de gradiente

color , en particular a valores rgb/rgba/hsl/hsla
@rules
Las @rules (leído "at-rules" en inglés) dan al CSS algunas instrucciones sobre cómo comportarse.
Algunas @rules son simples, con el nombre de la regla y un valor. Por ejemplo, para importar una hoja
de estilo adicional a tu hoja de estilo CSS principal, puedes usar @import :
CSS
@import "styles2.css";
Una de las @rules más comunes con las que te encontrarás es @media , que permite usar consultas a
medios para aplicar CSS solo cuando se dan ciertas condiciones (por ejemplo, cuando la resolución
de la pantalla supera un valor determinado o la anchura supera un valor concreto).
En el CSS que se muestra a continuación, tenemos una hoja de estilo que le da al elemento <body>
un color de fondo rosado. Sin embargo, luego usamos @media para crear una sección de nuestra hoja
de estilo que solo se aplicará en los navegadores con una ventana gráfica de más de 30em de
ancho. Si el navegador es más ancho que 30em, el color de fondo será azul.
CSS
body {
background-color: pink;
}
@media (min-width: 30em) {

body {
background-color: blue;
}
}
Encontrarás otras @rules a lo largo de estas lecciones.

Prueba a añadir una consulta a medios en tu CSS que cambie los estilos según el ancho de la
ventana gráfica. Cambia el ancho de la ventana de tu navegador para ver el resultado.
Abreviaturas
Algunas propiedades como font , background , padding , border y margin se llaman propiedades
abreviadas. Esto se debe a que permiten establecer varios valores de propiedad en una sola línea, lo
que ahorra tiempo y ordena el código.
Por ejemplo, esta línea:
CSS
/* En propiedades abreviadas con 4 valores, como margin y padding (relleno), los valores se
aplican
según el orden: arriba, derecha, abajo e izquierda (en sentido horario desde la parte
superior). También hay otros
tipos de abreviaturas, como las propiedades abreviadas con 2 valores que establecen el
relleno/margen,
arriba/abajo, y luego izquierda/derecha */
padding: 10px 15px 15px 5px;
Hace lo mismo que todas estas juntas:

CSS
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
Mientras que esta línea:

CSS
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
Hace lo mismo que todas estas juntas:

CSS
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;
Ahora mismo no pretendemos enseñarlos exhaustivamente: encontrarás muchos ejemplos más

adelante en el curso. Te aconsejamos que busques los nombres de las propiedades abreviadas en
nuestra referencia CSS para obtener más información.
Prueba a añadir las declaraciones anteriores a tu CSS para ver cómo afecta al estilo de tu
HTML. Experimenta con diferentes valores.
Advertencia: Si bien las propiedades abreviadas a menudo permiten ahorrarte valores,

luego restablecerán a sus valores iniciales cualquier valor que no incluyas. Esto asegura que
se use un conjunto de valores razonable. Sin embargo, puede resultar confuso si esperas
que la propiedad abreviada solo cambie los valores que has introducido.
Comentarios
Al igual que con el HTML, te recomendamos que hagas comentarios en tu CSS para que te ayuden a
comprender cómo funciona su código cuando vuelvas a utilizarlo al cabo de varios meses, así como
para ayudar a otros que vayan a trabajar con él a entenderlo.
Los comentarios en el CSS comienzan con /* y terminan con */ . En el bloque de código que
encontrarás a continuación, hemos usado comentarios para marcar el inicio de las diferentes
secciones de código. Esto es útil para ayudarnos a movernos por la base de código a medida que
aumenta: puedes buscar los comentarios en tu editor de código.
CSS
/* con elementos básicos de aplicación de estilo */

/* --------------------------------------------------------------------------------------------
*/
body {
font:
1em/150% Helvética,
Arial,
sans-serif;
padding: 1em;
margin: 0 auto;
max-width: 33em;
}

/* Prestemos especial atención al tamaño de fuente global. En una pantalla o una ventana
grande,
aumentamos el tamaño de la fuente para conseguir una mejor legibilidad */
body {
font-size: 130%;
}
}
h1 {
font-size: 1.5em;
}
/* Familiarización con algunos elementos anidados específicos en el DOM */

/* --------------------------------------------------------------------------------------------
*/
div p,
#id:first-line {
border-radius: 3px;
}
div p {
margin: 0;
padding: 1em;
}
div p + p {
padding-top: 0;
}
Los comentarios también son útiles para comentar temporalmente ciertas partes del código con
fines de prueba, por ejemplo, si tratas de encontrar qué parte de tu código causa un error. En el
siguiente ejemplo, hemos comentado las reglas para el selector .special .
CSS
/*.special {
color: red;
}*/
p {
color: blue;
}
Añade algunos comentarios al CSS para acostumbrarte a usarlos.
Espacio en blanco
Por espacio en blanco nos referimos los espacios en sí, tabuladores y retornos de carro o intros. De
la misma manera que el HTML, el navegador ignora el espacio en blanco dentro del CSS. El valor del
espacio en blanco es que puede mejorar la legibilidad.
En el siguiente ejemplo, cada declaración (y el principio/fin de regla) está en una línea propia; esta es
posiblemente una buena forma de escribir el CSS, ya que facilita el mantenimiento y la comprensión:
CSS
body {
font:
1em/150% Helvética,
Arial,
sans-serif;
padding: 1em;
margin: 0 auto;
max-width: 33em;
}

body {
font-size: 130%;
}
}
h1 {
font-size: 1.5em;
}
div p,
#id:first-line {
border-radius: 3px;
}
div p {
margin: 0;
padding: 1em;
}
div p + p {
padding-top: 0;
}
Podrías escribir exactamente el mismo CSS eliminando la mayoría de los espacios en blanco; este
bloque de código es funcionalmente idéntico al primer ejemplo, pero seguro que estarás de acuerdo
en que resulta algo más difícil de leer:
CSS
body {
font:
1em/150% Helvetica,
Arial,
sans-serif;
padding: 1em;
margin: 0 auto;
max-width: 33em;
}
body {
font-size: 130%;
}
}
h1 {
font-size: 1.5em;
}
div p,
#id:first-line {
border-radius: 3px;
}
div p {
margin: 0;
padding: 1em;
}
div p + p {
padding-top: 0;
}
La manera que elijas para disponer el código suele ser una preferencia personal, aunque cuando
comiences a trabajar en equipo es posible que encuentres que el equipo ya tiene su propia guía de
estilo que especifica una convención acordada a seguir.
Advertencia: Aunque los valores de las declaraciones CSS se separan por espacios, los
nombres de propiedad nunca tienen espacios.
Por ejemplo, las siguientes declaraciones de CSS son válidas:
CSS
margin: 0 auto;
padding-left: 10px;
Pero las siguientes no lo son:

CSS
margin: 0auto;
padding- left: 10px;
¿Ves los errores de espaciado? 0auto no se reconoce como un valor válido para la propiedad de
margin ( 0 y auto son dos valores separados) y el navegador no reconoce padding- como una
propiedad válida. El valor correcto de propiedad ( padding-left ) se ha separado por un espacio

perdido.
Debes asegurarte siempre de separar los valores distintos entre sí por al menos un espacio, pero
mantén los nombres de las propiedades y los valores de las propiedades juntos.
Prueba a jugar con los espacios en blanco de tu CSS y observa qué es lo que se rompe y lo que
no.
¿Qué sigue?
Resulta útil entender un poco cómo el navegador toma tu HTML y tu CSS y los convierte en una
página web, razón por la cual en el próximo artículo (Cómo funciona el CSS) veremos ese proceso.
Anterior Overview: Primeros pasos en CSS Siguiente
Help improve MDN

Was this page helpful to you?
Yes No
Learn how to contribute.
This page was last modified on 2 ago 2023 by MDN contributors.
View this page on GitHub • Report a problem with this content
MDN Support Our communities Developers

Your blueprint for a better internet. About Product help MDN Community Web Technologies
Blog Report an issue MDN Forum Learn Web Development
Careers MDN Chat MDN Plus
Advertise with us Hacks Blog
Website Privacy Notice Cookies Legal Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.

Portions of this content are ©1998–2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Cómo Se Estructura El CSS - Aprende Desarrollo Web - MDN

Cargado por

Copyright:

Formatos disponibles

Cómo Se Estructura El CSS - Aprende Desarrollo Web - MDN

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Cómo Se Estructura El CSS - Aprende Desarrollo Web - MDN

Cargado por

Copyright:

Formatos disponibles

Get real-time assistance with your coding queries. Try AI Help now!

CSS — Styling the web

El archivo CSS podría parecerse a esto:

Hoja de estilo interna

Juguemos con el CSS de este artículo

/* Crea tu CSS de prueba aquí */

¡Sigue leyendo y disfruta!

<p class="special">¿De qué color soy?</p>

Advertencia: Las propiedades y valores de CSS son sensibles a mayúsculas y minúsculas.

Advertencia: Si una propiedad es desconocida o si un valor no es válido para una propiedad

Advertencia: En CSS (y otros estándares web) se ha acordado establecer como estándar la

Esto se traduce así:

El resultado del código anterior se ve así:

background-image , en particular a valores de gradiente

@media (min-width: 30em) {

Encontrarás otras @rules a lo largo de estas lecciones.

Hace lo mismo que todas estas juntas:

Mientras que esta línea:

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

Hace lo mismo que todas estas juntas:

Ahora mismo no pretendemos enseñarlos exhaustivamente: encontrarás muchos ejemplos más

Advertencia: Si bien las propiedades abreviadas a menudo permiten ahorrarte valores,

/* con elementos básicos de aplicación de estilo */

@media (min-width: 70em) {

/* Familiarización con algunos elementos anidados específicos en el DOM */

Añade algunos comentarios al CSS para acostumbrarte a usarlos.

@media (min-width: 70em) {

Pero las siguientes no lo son:

propiedad válida. El valor correcto de propiedad ( padding-left ) se ha separado por un espacio

Help improve MDN

MDN Support Our communities Developers

Website Privacy Notice Cookies Legal Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.

También podría gustarte