path: root/files/es/learn/getting_started_with_the_web/css_basics/index.html

---
title: CSS básico
slug: Learn/Getting_started_with_the_web/CSS_basics
tags:
  - CSS
  - Codificacion/Scripting
  - Estilos/Styling
  - Principiante
  - Web
  - aprende
translation_of: Learn/Getting_started_with_the_web/CSS_basics
---
<div>{{LearnSideBar}}</div>

<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics","Learn/Getting_started_with_the_web")}}</div>

<div class="summary">
<p>CSS (<em>Hojas de Estilo en Cascada</em>) es el código que usas para dar estilo a tu página web. <em>CSS Básico</em> te lleva a través de lo que tú necesitas para empezar. Contestará a preguntas del tipo: ¿Cómo hago mi texto rojo o negro? ¿Cómo hago que mi contenido se muestre en tal y tal lugar de la pantalla? ¿Cómo decoro mi página web con imágenes de fondo y colores?</p>
</div>

<h2 id="Entonces_¿qué_es_CSS_realmente">Entonces ¿qué es CSS, realmente?</h2>

<p>Como HTML, CSS (<em>Cascading Style Sheets</em>) u Hojas de estilo en cascada en español, no es realmente un lenguaje de programación, tampoco es un lenguaje de marcado. Es un <em>lenguaje de hojas de estilo,</em> es decir, te permite aplicar estilos de manera selectiva a elementos en documentos HTML. Por ejemplo, para seleccionar <strong>todos</strong> los elementos de párrafo en una página HTML y volver el texto dentro de ellos de color rojo, has de escribir este CSS:</p>

<pre class="brush: css notranslate">p {
  color: red;
}</pre>

<p>Vas a probarlo: pega estas tres líneas de CSS en un nuevo archivo en tu editor de texto y guarda este archivo como <code>style.css</code> en tu directorio <code>styles</code> (estilos).</p>

<p>Pero aún debes aplicar el CSS a tu documento HTML, de otra manera el estilo CSS no cambiará cómo tu navegador muestra el documento HTML. (Si no has seguido nuestro proyecto, lee <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">Manejo de archivos</a> y <a href="/es/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML básico</a> para averiguar qué necesitas hacer primero.)</p>

<ol>
 <li>Abre tu archivo <code>index.html</code> y pega la siguiente línea en algún lugar dentro del {{htmlelement("head")}}, es decir, entre las etiquetas <code>&lt;head&gt;</code> y <code>&lt;/head&gt;</code>:

  <pre class="brush: html notranslate">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
 </li>
 <li>Guarda el archivo <code>index.html</code> y cárgalo en tu navegador. Debes ver algo como esto:</li>
</ol>

<p><img alt="Un logo de Mozilla y algunos párrafos. El texto del párrafo ha sido estilizado en rojo por nuestro css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">Si tu texto del párrafo ahora es rojo, ¡felicitaciones, ya has escrito tu primer CSS de forma exitosa!</p>

<h3 id="Anatomía_de_una_regla_CSS">Anatomía de una regla CSS</h3>

<p>Observa el código CSS de arriba, un poco más a detalle:</p>

<p><img alt="Partes de una declaracion de css" src="https://mdn.mozillademos.org/files/11925/csspartes.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p>

<p>La estructura completa es llamada <strong>regla predeterminada</strong> (pero a menudo «regla» para abreviar). Nota también los nombres de las partes individuales:</p>

<dl>
 <dt>Selector</dt>
 <dd>El elemento HTML en el que comienza la regla. Esta selecciona el(los) elemento(s) a dar estilo (en este caso, los elementos {{htmlelement("p")}} ). Para dar estilo a un elemento diferente, solo cambia el selector.</dd>
 <dt>Declaración</dt>
 <dd>Una sola regla como <code>color: red;</code> especifica a cuál de las <strong>propiedades</strong> del elemento quieres dar estilo.</dd>
 <dt>Propiedades</dt>
 <dd>Maneras en las cuales puedes dar estilo a un elemento HTML. (En este caso, <code>color</code> es una propiedad del elemento {{htmlelement("p")}} ). En CSS, seleccionas qué propiedad quieres afectar en tu regla.</dd>
 <dt>Valor de la propiedad</dt>
 <dd>A la derecha de la propiedad, después de los dos puntos (:), tienes el <strong>valor de la propiedad</strong>, para elegir una de las muchas posibles apariencias para una propiedad determinada (hay muchos valores para <code>color</code> además de <code>red</code>).</dd>
</dl>

<p>Nota las otras partes importantes de la sintaxis:</p>

<ul>
 <li>Cada una de las reglas (aparte del selector) deben estar encapsuladas entre llaves (<code>{}</code>).</li>
 <li>Dentro de cada declaración, debes usar los dos puntos (<code>:</code>) para separar la propiedad de su valor.</li>
 <li>Dentro de cada regla, debes usar el punto y coma (<code>;</code>) para separar una declaración de la siguiente.</li>
</ul>

<p>De este modo para modificar varios valores de propiedad a la vez, solo necesitas escribirlos separados por punto y coma (;), así:</p>

<pre class="brush: css notranslate">p {
  color: red;
  width: 500px;
  border: 1px solid black;
}</pre>

<h3 id="Seleccionar_varios_elementos">Seleccionar varios elementos</h3>

<p>También puedes seleccionar varios elementos y aplicar una sola regla a todos ellos. Incluye varios selectores separados por comas (,). Por ejemplo:</p>

<pre class="brush: css notranslate">p,li,h1 {
  color: red;
}</pre>

<h3 id="Diferentes_tipos_de_selectores">Diferentes tipos de selectores</h3>

<p>Existen muchos tipos diferentes de selectores. Antes, solo viste los <strong>selectores de elementos</strong>, los cuales seleccionan todos los elementos de un tipo dado en los documentos HTML. Sin embargo puedes hacer selecciones más específicas que esas. En seguida están algunos de los tipos de selectores más comunes:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Nombre del selector</th>
   <th scope="col">Qué selecciona</th>
   <th scope="col">Ejemplo</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Selector de elemento (llamado algunas veces selector de etiqueta o tipo)</td>
   <td>Todos los elementos HTML del tipo especificado.</td>
   <td><code>p</code><br>
    Selecciona <code>&lt;p&gt;</code></td>
  </tr>
  <tr>
   <td>Selector de identificación (ID)</td>
   <td>El elemento en la página con el ID especificado (en una página HTML dada, solo se permite un único elemento por ID).</td>
   <td><code>#mi-id</code><br>
    Selecciona <code>&lt;p id="mi-id"&gt;</code> y <code>&lt;a id="mi-id"&gt;</code></td>
  </tr>
  <tr>
   <td>Selector de clase</td>
   <td>Los elementos en la página con la clase especificada (una clase puede aparecer varias veces en una página).</td>
   <td><code>.mi-clase</code><br>
    Selecciona <code>&lt;p class="mi-clase"&gt;</code> y <code>&lt;a class="mi-clase"&gt;</code></td>
  </tr>
  <tr>
   <td>Selector de atributo</td>
   <td>Los elementos en una página con el atributo especificado.</td>
   <td><code>img[src]</code><br>
    Selecciona <code>&lt;img src="mimagen.png"&gt;</code> pero no <code>&lt;img&gt;</code></td>
  </tr>
  <tr>
   <td>Selector de pseudoclase</td>
   <td>Los elementos especificados, pero solo cuando esté en el estado especificado, por ejemplo cuando el puntero esté sobre él.</td>
   <td><code>a:hover</code><br>
    Selecciona <code>&lt;a&gt;</code>, pero solo cuando el puntero esté sobre el enlace.</td>
  </tr>
 </tbody>
</table>

<p>Existen muchos más selectores para explorar, y podrás encontrar una lista más detallada en la <a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS">guía de Selectores</a>.</p>

<h2 id="Fuentes_y_texto">Fuentes y texto</h2>

<p>Ahora que has explorado lo básico de CSS, empieza por añadir información y algunas reglas más a tu archivo <code>style.css</code> para que tu ejemplo se vea bonito. Primero, haz que tus fuentes y texto luzcan un poco mejor.</p>

<ol>
 <li>Antes que nada, regresa y busca las <a href="/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Fuente">fuentes de Google Fonts</a> que guardaste en un lugar seguro. Agrega el elemento {{htmlelement("link")}}<code>...</code> en algún lugar del <em>head</em> de tu archivo <code>index.html</code> (de nuevo, en cualquier lugar entre las etiquetas {{htmlelement("head")}} y <code>&lt;/head&gt;</code>). Debe verse algo así:

  <pre class="brush: html notranslate">&lt;link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet" type="text/css"&gt;</pre>
 </li>
 <li>Luego, borra la regla existente en tu archivo <code>style.css</code>. Fue una buena prueba, pero el texto en rojo en realidad no se ve muy bien.</li>
 <li>
  <p>Añade las siguientes líneas (que se muestran a continuación), sustituyendo la asignación de <code>font-family</code> por tu selección de <code>font-family</code> que obtuviste en <a href="/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Fuente">¿Cuál será la apariencia de tu sitio Web?</a> La propiedad <code>font-family</code> se refiere a la(s) fuente(s) que deseas usar en tu texto. Esta regla define una fuente base global y un tamaño de fuente para usar en toda la página. Dado que {{htmlelement("html")}} es el elemento primario (o padre) de toda la página, todos los elementos contenidos dentro de él heredan las propiedades <code>font-size</code> y <code>font-family</code>):</p>

  <pre class="brush: css notranslate">html {
  font-size: 10px; /* px quiere decir 'píxeles': el tamaño de la fuente base es ahora de 10 píxeles de altura */
  font-family: "Open Sans", sans-serif; /* Este debe ser el resto del resultado que obtuviste de Google fonts */
}</pre>

  <div class="note">
  <p><strong>Nota</strong>: se ha añadido un comentario para explicar qué significa «px». Todo lo que está en un documento de CSS entre <code>/*</code> y <code>*/</code> es un <strong>comentario en CSS</strong>, el cual el navegador descarta cuando carga el código. Este es un espacio donde puedes escribir notas útiles sobre lo que estás haciendo.</p>
  </div>
 </li>
 <li>Ahora escoge el tamaño de fuente para los elementos que contienen texto dentro del cuerpo del HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, y {{htmlelement("p")}}). También centra el texto del título, escoge un ancho de línea y espaciado entre letras en el contenido del texto para hacerlo un poco más legible:
  <pre class="brush: css notranslate">h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}</pre>
 </li>
</ol>

<p>Puedes ajustar estos valores en px para lograr que tu diseño luzca como desees, pero por lo general tu diseño debe verse así:</p>

<p><img alt="Un logo de Mozilla y algunos párrafos. se ha establecido una fuente sans-serif, se han ajustado los tamaños de las fuentes, la altura de las líneas y el espaciado de las letras, y se ha centrado el encabezamiento de la página principal." src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p>

<h2 id="Cajas_cajas_todo_se_trata_de_cajas">Cajas, cajas, todo se trata de cajas</h2>

<p>Una cosa que notarás sobre la escritura de CSS es que trata mucho sobre cajas —ajustando su tamaño, color, posición, etc—. Puedes pensar en la mayoría de los elementos HTML de tu página como cajas apiladas una sobre la otra.</p>

<p><img alt="Una gran pila de cajas o cajones puestos uno encima del otro." src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p>

<p>No es de extrañar que el diseño de CSS esté basado principalmente en el <em>modelo de caja</em>. Cada una de las cajas que ocupa espacio en tu página tiene propiedades como estas:</p>

<ul>
 <li><code>padding</code> (relleno), el espacio alrededor del contenido. En el ejemplo siguiente, es el espacio alrededor del texto del párrafo.</li>
 <li><code>border</code> (marco), la línea que se encuentra fuera del relleno.</li>
 <li><code>margin</code> (margen), el espacio fuera del elemento que lo separa de los demás.</li>
</ul>

<p><img alt="tres cajas puestas una dentro de otra. De fuera a dentro están etiquetadas con el margen, el borde y el relleno" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p>

<p>En esta sección también se utiliza:</p>

<ul>
 <li><code>width</code> (ancho del elemento)</li>
 <li><code>background-color</code>, el color de fondo del contenido y del relleno</li>
 <li><code>color</code>, el color del contenido del elemento (generalmente texto)</li>
 <li><code>text-shadow</code>: coloca una sombra difuminada en el texto dentro del elemento</li>
 <li><code>display</code>: selecciona el modo de visualización para el elemento (no te preocupes de esto por ahora)</li>
</ul>

<p>Bien, ¡continúa y agrega más código CSS a la página! Sigue añadiendo estas reglas nuevas al final de la página, y no temas experimentar cambiando los valores para ver cómo resulta.</p>

<h3 id="Cambiar_el_color_de_la_página">Cambiar el color de la página</h3>

<pre class="brush: css notranslate">html {
  background-color: #00539F;
}</pre>

<p>Esta regla asigna un color de fondo a la página entera. Puedes cambiar el código de color por cualquiera <a href="/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Color_de_tema">como el que elegiste usar en tu proyecto</a>.</p>

<h3 id="Dar_estilo_al_cuerpo_del_documento">Dar estilo al cuerpo del documento</h3>

<pre class="brush: css notranslate">body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}</pre>

<p>Ahora tienes varias declaraciones en el elemento <a href="/es/docs/Web/HTML/Element/body">body</a>. Revisa una por una:</p>

<ul>
 <li><code>width: 600px;</code> — esto hará que el cuerpo siempre tenga 600 píxeles de ancho.</li>
 <li><code>margin: 0 auto;</code> — cuando seleccionas dos valores dentro de propiedades como <code>margin</code> o <code>padding</code>, el primer valor afectará los lados superior (top) <strong>e</strong> inferior (bottom) (en este caso haciéndolo en 0), y el segundo valor los lados izquierdo (left) <strong>y</strong> derecho (right) (aquí, <code>auto</code> es un valor especial que divide el espacio disponible entre derecha e izquierda). Puedes usar esta propiedad con uno, dos, tres o cuatro valores como se explica en la <a href="/es/docs/Web/CSS/padding#Sintaxis">sintaxis de padding</a>.</li>
 <li><code>background-color: #FF9500;</code> — como antes, este selecciona el color de fondo de un elemento. Se ha usado un naranja rojizo para el elemento <code>body</code> en contraste con el azul oscuro del elemento {{htmlelement("html")}}. Sigue y experimenta. Siéntete libre de usar <code>white</code> o cualquiera que sea de tu agrado.</li>
 <li><code>padding: 0 20px 20px 20px;</code> — tienes 4 valores puestos en el relleno, para dar un poco de espacio alrededor del contenido. Esta vez no pondrás relleno en la parte de arriba de <code>body</code>, 20 píxeles a la izquierda, abajo y derecha. Los valores se ponen: arriba, derecha, abajo e izquierda, en ese orden. Como con <code>margin</code> usar esta propiedad con uno, dos, tres o cuatro valores como se explica en la <a href="/es/docs/Web/CSS/padding#Sintaxis">sintaxis de padding</a>.</li>
 <li><code>border: 5px solid black;</code> — este simplemente pone un borde de 5 píxeles de ancho, continuo y de color negro alrededor del elemento <code>body</code>.</li>
</ul>

<h3 id="Posicionar_y_dar_estilo_al_título_principal_de_la_página">Posicionar y dar estilo al título principal de la página</h3>

<pre class="brush: css notranslate">h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}</pre>

<p>Puedes haber notado que hay un hueco horrible en la parte superior de <em>body</em>. Esto sucede porque los navegadores vienen con estilos por defecto, ¡incluso cuando aún no se ha aplicado ningún archivo CSS! Esto podría parecer una mala idea, pero se quiere que aun una página sin estilizar sea legible. Para deshacerte de este espacio elimina el estilo por defecto, agregando <code>margin: 0;</code>.</p>

<p>Enseguida, se ha puesto un relleno arriba y abajo del título de 20 píxeles, y se hizo que el color del texto sea el mismo que el color de fondo de <code>html</code>.</p>

<p>Una propiedad muy interesante que se ha usado aquí es <code>text-shadow</code>, que aplica una sombra al texto del elemento. Sus cuatro valores son como sigue:</p>

<ul>
 <li>El primer valor en píxeles asigna el <strong>desplazamiento horizontal</strong> de la sombra desde el texto —qué tan lejos la mueve a la derecha—. Un valor negativo la moverá a la izquierda.</li>
 <li>El segundo valor en píxeles asigna el <strong>desplazamiento vertical</strong> de la sombra desde el texto —qué tan lejos la mueve hacia abajo—. En este ejemplo, un valor negativo la desplazaría hacia arriba.</li>
 <li>El tercer valor en píxeles asigna <strong>radio de desenfoque</strong> de la sombra —un valor grande es igual a una sombra borrosa—.</li>
 <li>El cuarto valor asigna el color base de la sombra.</li>
</ul>

<p>Una vez más, trata de experimentar con diferentes valores para ver cómo resulta.</p>

<h3 id="Centrar_la_imagen">Centrar la imagen</h3>

<pre class="brush: css notranslate">img {
  display: block;
  margin: 0 auto;
}</pre>

<p>Finalmente, centra la imagen para hacer que luzca mejor. Puedes usar nuevamente el truco de <code>margin: 0 auto</code> que usaste antes para <code>body</code>, pero existen diferencias que requieren que hagas algo más para que el código CSS funcione.</p>

<p>El elemento {{htmlelement("body")}} es un elemento en nivel de bloque (<strong>block-level</strong>), lo que significa que tomará espacio en la página y que puede tener otros valores de espacio aplicables como margen. Las imágenes, por otra parte, son elementos <strong>inline</strong>, lo que quiere decir que no puedes aplicarles márgenes, debes dar a la imagen un comportamiento de <em>block-level</em> usando <code>display: block;</code>.</p>

<div class="blockIndicator note">
<p><strong>Nota</strong>: las instrucciones anteriores asumen que estás usando una imagen más pequeña que el ancho establecido en <code>body</code> (600 píxeles). Si tu imagen es más grande, desbordará el cuerpo, derramándose en el resto de la página. Para solucionar esto, puedes hacer lo siguiente: 1) reducir el ancho de la imagen usando un <a href="https://es.wikipedia.org/wiki/Editor_de_gráficos_rasterizados">editor gráfico</a>, o 2) usar CSS para dimensionar la imagen estableciendo la propiedad {{cssxref("width")}} en el elemento <code>&lt;img&gt;</code> con un valor menor.</p>
</div>

<div class="note">
<p><strong>Nota</strong>: no te preocupes si aún no entiendes <code>display: block;</code> y la diferencia entre un elemento de bloque y un elemento <em>inline</em>. Lo entenderás en tanto estudies CSS a profundidad. Puedes encontrar más en cuanto a los diferentes valores disponibles para <em>display</em> en la <a href="/es/docs/Web/CSS/display">página de referencia de display</a>.</p>
</div>

<h2 id="Conclusión">Conclusión</h2>

<p>Si has seguido las instrucciones de esta publicación, deberías terminar con una página que luce algo así (también puedes <a href="http://mdn.github.io/beginner-html-site-styled/">ver nuestra versión aquí</a>):</p>

<p><img alt="El logo de Mozilla centrado con título y párrafos. Ahora se ve muy bien de estilo, con un fondo azul para toda la página y un fondo naranja para la franja de contenido principal centrada." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p>

<p>Si te atoraste, puedes comparar tu trabajo con el <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">código del ejemplo finalizado en GitHub</a>.</p>

<p>Aquí, solo has arañado la superficie de CSS. Si quieres encontrar más, puedes ir a la <a href="/es/docs/Learn/CSS">página de aprendizaje de CSS</a>.</p>

<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics","Learn/Getting_started_with_the_web")}}</p>