DevTools para principiantes: Introducción a CSS

En este tutorial, aprenderá a usar CSS para dar estilo a una página web. También aprenderá a usar Microsoft Edge DevTools para experimentar con los cambios css.

El siguiente artículo es el segundo tutorial de una serie de tutoriales que le enseña los conceptos básicos del desarrollo web y Microsoft Edge DevTools. Para obtener experiencia práctica, cree su propio sitio web. No es necesario completar el primer tutorial antes de seguir el segundo. Configurar el código muestra cómo configurarse.

Nota

Este tutorial está diseñado para principiantes absolutos y se centra en los conceptos básicos del desarrollo web y los conceptos básicos del uso de DevTools para experimentar con CSS. Si desea un tutorial que solo se centre en DevTools, vaya a Introducción a Ver y cambiar CSS.

Al principio del tutorial, el sitio debe ser parecido a la siguiente figura.

Cómo es el sitio actualmente

Después de completar el tutorial, el sitio debe ser parecido a la siguiente figura.

Cómo debe ser el sitio al final del tutorial

Objetivos

Siga este tutorial para comprender mejor los siguientes conceptos y tareas.

  • Cómo usar CSS para dar estilo a una página web.
  • Cómo usar Microsoft Edge DevTools para experimentar con CSS.
  • La diferencia entre los marcos CSS y CSS.

Está creando un sitio web real.

Requisitos previos

Antes de intentar este tutorial, complete los siguientes requisitos previos.

  • Complete Get Started with HTML and the DOM o asegúrese de que tiene una comprensión de HTML y DOM similar a lo que se enseña en ese tutorial.
  • Descargue el explorador web de Microsoft Edge. En el siguiente tutorial se usa un conjunto de herramientas de desarrollo web, denominadas Microsoft Edge DevTools, integradas en Microsoft Edge.

Configurar el código

Para crear el sitio, primero debe completar las siguientes acciones para configurar el código.

Nota

Si ya ha completado el primer tutorial de la serie, vaya a la siguiente sección. Siga usando el código del último tutorial, Introducción a HTML y DOM.

  1. Abra el código fuente. Se hace referencia a la pestaña en el foco del explorador como la pestaña de edición.

    La pestaña de edición

  2. Elija cooked-amphibian. Aparece un menú.

    Menú Opciones del proyecto

  3. Elija Remix Project. Glitch crea una copia del proyecto que puede editar.

    Nota

    Glitch genera un nombre aleatorio para el nuevo proyecto.

  4. Elija Mostrar y elija En una nueva ventana. Se abre otra pestaña con una vista en directo del sitio. Se hace referencia a la pestaña en el foco del explorador como la pestaña activa.

    La pestaña activa

Comprender CSS

CSS es un idioma de equipo que determina el diseño y el estilo de las páginas web. La siguiente figura es un párrafo con un borde.

El texto se ha estilo con CSS

El siguiente fragmento de código es el código HTML y CSS usado para crear el párrafo de la figura anterior.

<p style="border: 1px dashed red; padding: 5px;">
    This has been styled with CSS.
</p>

style="border: 1px dashed red; padding: 5px;" probablemente tenga un aspecto nuevo. El resto debería ser familiar. Si no es así, complete Introducción con HTML y DOM antes de intentar las siguientes secciones.

Agregar estilos en línea

Complete las siguientes acciones para usar estilos en línea para aplicar estilos a un solo elemento.

  1. Vuelva a la pestaña de edición y abra index.html .

    index.html

  2. Agregar style="background-color: aliceblue;" a su <nav> . En el bloque de código siguiente, la cuarta línea de código es la que necesita cambiar. El resto está justo ahí, por lo que puede asegurarse de que está colocando el nuevo código en el lugar correcto.

    <header>
        <p>Welcome to my site!</p>
    </header>
    <nav style="background-color: aliceblue;">
        <ul>
            <li><a href="/">Home</a></li>
            ...
        ...
    ...
    
  3. Para mostrar los cambios, vaya a la pestaña activa. El fondo de la <nav> sección es ahora azul.

    El color de fondo detrás de los vínculos Inicio y Contacto ahora es azul

Volver a usar estilos en una sola página con hojas de estilos internas

En un fragmento de código anterior, un estilo en línea aplicó un estilo a una sola <p> etiqueta.

<p style="border: 1px dashed red; padding: 5px;">
    This has been styled with CSS.
</p>

¿Qué sucede si desea que todos los elementos de la página web se den el mismo <p> estilo? Debe copiar y pegar el código en todas las <p> etiquetas del sitio. Eso es mucho tiempo y esfuerzo. Y, si necesita realizar una edición, debe cambiar todas las etiquetas de nuevo. Complete las siguientes acciones para usar una hoja de estilos interna para escribir el CSS una vez para que se aplique a varios elementos.

  1. En la pestaña activa, elija Contacto para navegar a la página de contacto. Observe la fuente de Inicio y Contacto.

    La página Contacto

  2. En la pestaña editor, abra contact.html .

  3. Agregue el siguiente código a contact.html . Recuerde que las líneas que comienzan <style> con y terminan con son las que necesita </style> agregar. El otro código está justo ahí para que sepa dónde colocar el nuevo código.

    ...
        <head>
            ...
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <style>
                li a {
                  font-family: 'Courier New', Courier, Serif;
                }
            </style>
            ...
        </head>
        ...
    ...
    
  4. Vuelva a la pestaña activa.

  5. Elija Contacto para volver a la página de contacto. La fuente de Inicio y Contacto ha cambiado.

    La fuente de los vínculos Inicio y Contacto ha cambiado

Comprender hojas de estilos internas

Las hojas de estilos internas aplican estilos mediante selectores. Los selectores son patrones que pueden aplicarse a uno o varios elementos HTML. El fragmento de código anterior agregó el siguiente estilo.

<style>
    li a {
      font-family: 'Courier New', Courier, Serif;
    }
</style>

li a es un selector que se traduce a "cualquier <li> elemento que contenga un <a> elemento". El explorador cambia la fuente de los vínculos Inicio y Contacto porque cada uno de los grupos de etiquetas coincide con el patrón.

<li><a href="/">Home</a></li>
<li><a href="/contact.html">Contact</a></li>

font-family: 'Courier New', Courier, serif es una declaración. Se realiza una declaración de dos partes siguientes.

propiedad

font-family

La propiedad describe una forma general de cambiar el estilo del elemento.

value

'Courier New', Courier, serif

El valor describe exactamente cómo debe cambiar el estilo del elemento.

Por ejemplo, font-family: 'Courier New', Courier, serif proporciona al explorador la siguiente instrucción: "Establecer la fuente de los elementos que coinciden con el patrón en li a 'Courier New' . Si esa fuente no está disponible, use Courier . Si no está disponible, use serif ."

Agregar varios selectores a un conjunto de reglas

Un bloque de código CSS como el siguiente fragmento de código se denomina conjunto de reglas.

li a {
  font-family: 'Courier New', Courier, monospace;
}

Complete las siguientes acciones para usar comas para agregar varios selectores a un conjunto de reglas.

  1. En la pestaña editor, abra contact.html .

  2. Después li a del tipo , h1 .

    <style>
        li a, h1 {
          font-family: 'Courier New', Courier, Serif;
        }
    </style>
    

    El fragmento de código anterior indica al explorador que le de estilo a los elementos de la misma forma que estilos <h1> de elementos que coinciden con el patrón li a .

  3. Vaya a la pestaña activa.

  4. Elija el vínculo Contacto para volver a la página de contacto. Ahora, Póngase en contacto conmigo. tiene la misma fuente que los vínculos de navegación.

    ¡El texto Póngase en contacto conmigo!  ahora tiene la misma fuente que los vínculos Inicio y Contacto

Experimentar con DevTools

A medida que continúa su viaje para convertirse en un experto en desarrollo web, puede que encuentre que CSS es complicado. Puede escribir algún CSS y esperar que se muestre de una manera, pero el explorador hace algo completamente diferente. Microsoft Edge DevTools facilita la experimentación con los cambios y muestra inmediatamente cómo afectan los cambios a la página.

Agregar una declaración a un rulest existente en DevTools

Complete las siguientes acciones para iterar en el estilo de un elemento existente y agregue una declaración a un conjunto de reglas existente.

  1. Mantenga el mouse en el vínculo Inicio, abra el menú contextual (haga clic con el botón secundario) y elija Inspeccionar.

    Inspeccionar el vínculo Inicio

    DevTools se abre junto a la página. El código que representa el vínculo Inicio, <a href="/">Home</a> se resalta en azul en el árbol DOM. El fragmento de código y la vista previa deben estar familiarizados con Introducción a HTML y DOM.

    En la siguiente figura, la declaración que agregó anteriormente se muestra en la pestaña Estilos debajo font-family: 'Courier New', Courier, serif contact.html del árbol DOM. ****

    La pestaña Estilos está debajo del árbol DOM

    Si la ventana DevTools es amplia, la pestaña Estilos está a la derecha del árbol DOM.

    La pestaña Estilos está a la derecha del árbol DOM

  2. Elija la línea vacía siguiente font-family: 'Courier New', Courier, Serif para agregar una nueva declaración.

    Agregar una nueva declaración

  3. Escriba color y seleccione Enter . La interfaz de usuario de autocompletar sugiere opciones a medida que escribe.

    Color de tipo

  4. Escriba magenta y seleccione Enter . Todo el texto de la página de contacto ahora es magenta.

    Tipo magenta

Editar una declaración en DevTools

Complete las siguientes acciones para editar las declaraciones existentes en DevTools.

  1. Elija el cuadrado magenta junto a magenta . Aparece un selector de colores.

    Selector de colores

  2. Use el selector de colores para cambiar el texto de fuente a un color que quiera.

    Cambiar el color de fuente a púrpura con el Selector de colores

Agregar un nuevo conjunto de reglas en DevTools

Complete las siguientes acciones para agregar nuevos conjuntos de reglas en DevTools.

  1. Elija Nueva regla de estilo ( Nueva regla de estilo  ) que está junto a .cls. Aparece un conjunto de reglas vacío a con como selector.

    Agregar una nueva regla

  2. Reemplace a por a:hover .

    Reemplazar a con a:hover

    :hover es una pseudo-clase. Use pseudo-clases para elementos de estilo que puedan entrar en estados especiales. Por ejemplo, el estilo solo tiene efecto cuando se pasa el a:hover mouse sobre un <a> elemento.

  3. Elija entre corchetes para agregar una nueva declaración.

  4. Escriba background-color el nombre de declaración y seleccione Enter .

    Tipo de fondo-color

  5. Escriba green para el valor de declaración y seleccione Enter .

    Escriba verde

  6. Mantenga el mouse sobre el vínculo Inicio. El fondo del vínculo se vuelve verde.

    Mantenga el mouse en el vínculo Inicio para mostrar su fondo verde

Volver a usar estilos en páginas con hojas de estilos externas

En un paso anterior, agregó el siguiente fragmento de código como hoja de estilos interna a contact.html .

...
    ...
        ...
        <style>
            li a, h1 {
              font-family: 'Courier New', Courier, Serif;
            }
        </style>
        ...
    ...
...

¿Qué sucede si quieres dar index.html el mismo estilo? ¿Qué sucede si tuviera un gran número de páginas a las que desea aplicar sus estilos? Debe copiar y pegar la hoja de estilos interna en cada página web del sitio. Complete las siguientes acciones para agregar una hoja de estilos externa que le permita escribir el CSS una vez y aplicarlo a varias páginas.

  1. En primer lugar, actualice la pestaña activa para quitar los cambios realizados en DevTools.

     Después de actualizar la página, los cambios realizados en DevTools han desaparecido

  2. Vuelva a la pestaña editor y abra contact.html .

    contact.html

  3. Elimine todo lo <style> que esté entre y , </style> <style> incluidos y </style> .

    Se ha quitado la etiqueta de estilo

  4. Abra index.html y quite de la style="background-color: aliceblue;" <nav> etiqueta. Ahora ha quitado todo el CSS que agregó anteriormente al sitio.

    El estilo en línea se ha quitado del elemento nav

  5. Elija Nuevo archivo.

    El nuevo cuadro de diálogo de archivo

  6. Reemplace cool-file.js por y elija Agregar style.css archivo.

    Tipo style.css

  7. Agregue el siguiente fragmento de código al style.css archivo.

    li a, h1 {
      font-family: 'Courier New', Courier, Serif;
    }
    a:hover {
      background-color: green;
    }
    nav {
      background-color: aliceblue;
    }
    

    Agregar código a style.css

    Asegúrese de que ha creado una hoja de estilos externa. El CÓDIGO HTML no es consciente de que existe.

  8. Abra index.html .

  9. Agregue <link rel="stylesheet" href="style.css"> a su HTML.

    <head>
        ...
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    

    Vínculo a style.css

  10. Abra el contact.html archivo y agregue el vínculo allí.

    Vínculo a style.css en contact.html

  11. Vaya a la pestaña activa. La página principal ahora tiene la misma fuente de la última sección y una sección de navegación azul.

    La página principal

  12. Elija el vínculo Contacto para navegar a la página de contacto. La página de contacto tiene el mismo formato que la página principal.

    La página de contacto

Usar un marco CSS

Los marcos CSS son colecciones de estilos creados por otros desarrolladores que facilitan la creación de sitios web atractivos. En lugar de definir estilos usted mismo, un marco le proporciona una colección de estilos que puede usar en los elementos de la página.

  1. Copie el código siguiente:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    
  2. Abra la pestaña de edición y pegue el código en contact.html .

    Vínculo al marco en contact.html

  3. Abra el index.html archivo y agregue el código allí.

    Vínculo al marco en index.html

  4. Vuelva a la pestaña activa para ver los cambios. Aunque el color de fondo del elemento y la fuente de los elementos y son los mismos, la fuente <nav> de los otros elementos ha <li> <a> cambiado.

    Parte de la fuente de la página principal ha cambiado debido al marco

Usar una clase

En la última sección, agregó Bootstrap a las páginas web, lo que cambió las fuentes de algunos de los elementos del sitio. Los marcos CSS le ayudan a realizar cambios importantes en la página con muy poco código. Complete las siguientes acciones para cambiar el encabezado.

  1. Copie el siguiente fragmento de código.

    class="jumbotron jumbotron-fluid"  
    
  2. Agregue el fragmento de código anterior a la <header> etiqueta en index.html .

    Agregar clases en index.html

  3. Agregue el código a la <header> etiqueta en contact.html .

    Agregar clases en contact.html

  4. Ver los cambios en la pestaña activa. Hay un cuadro grande y gris alrededor del encabezado.

    El encabezado ahora tiene un cuadro grande y gris alrededor de él

Comprender clases

Las clases permiten asignar colecciones de estilos a elementos arbitrarios. Use el siguiente fragmento de código para aplicar varios estilos al <header> elemento después de establecer el atributo en class jumbotron .

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: .3rem;
}

Una ventaja de una clase es que le permite aplicar estilos a los elementos que desee. Por ejemplo, supongamos que desea establecer el color de fondo de algunos <p> elementos en púrpura, pero no todos los <p> elementos. Use el siguiente fragmento de código para definir el estilo de una clase.

.custom-background {
  background-color: purple;
}

A continuación, aplique la clase solo a los <p> elementos que desee aplicar estilo.

<p>The text is not purple.</p>
<p class="custom-background">The text is purple.</p>
<p>The text is not purple.</p>
<p class="custom-background">The text is purple.</p>

Alinear elementos

Complete las siguientes acciones para arrancar y proporcionar clases para alinear elementos.

  1. Vuelva a la pestaña editor y abra index.html .

  2. Agregue class="container-fluid" a la <body> etiqueta.

    Agregar la clase container-fluid

  3. Ajuste los <nav> elementos <main> y en <div class="row"> . Asegúrese de colocar </div> después </main> para cerrar correctamente la nueva etiqueta.

    Agregar una fila

  4. Agregue class="col-3" a la etiqueta y a la <nav> class="col-9" <main> etiqueta.

    Agregar las clases col-3 y col-9

  5. Ver los cambios en la pestaña activa.

    El contenido de navegación está ahora a la izquierda del contenido principal

Pasos siguientes

Enhorabuena, ha terminado.

  • La mejor forma de mejorar el desarrollo web es crear más sitios. No te preocupes por las cosas que se rompen. Simplemente diviértase y aprenda lo más posible a lo largo del camino.
  • Para obtener más información sobre el estilo de páginas web, vaya a Introducción a CSS.
  • Para obtener más información sobre cómo usar DevTools para experimentar con el CSS de una página, vaya a Introducción a Ver y cambiar CSS.

Contactar al equipo de Microsoft Edge DevTools

Use las siguientes opciones para discutir las nuevas características y cambios de la publicación, o cualquier otro tema relacionado con DevTools.

  • Envíe sus comentarios con el icono Enviar comentarios o seleccione Alt + Shift + I \ (Windows, Linux ) o Option + Shift + I \ (MacOS ) en DevTools.
  • Tweet a @EdgeDevTools.
  • Enviar una sugerencia a la webque queremos.
  • Para archivar errores sobre este artículo, use la siguiente sección de comentarios .

El icono enviar comentarios en el DevTools de Microsoft Edge

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0.
La página original se encuentra aquí y es creado por Katherine Jackson (Technical Writer Intern, Chrome DevTools).

Licencia de Creative Commons
Este trabajo dispone de licencia conforme a Licencia internacional de Creative Commons Attribution 4.0.