Saltar al contenido

Comprensión de CSS en línea, interno y externo

febrero 6, 2022
Site owner learning how to add CSS to HTML.jpgkeepProtocol

Si está creando un sitio web, entonces comenzará con HTML. Con este lenguaje de marcado, puede agregar encabezados, párrafos, imágenes, tablas, formularios, listas y mucho más. Pero no puede controlar cómo se presentan o distribuyen estos elementos en la página.

Ahí es donde entra CSS.

CSS describe cómo debe verse una página para el navegador, que la representa en consecuencia. CSS se puede usar para una amplia variedad de propósitos estilísticos, que incluyen cambiar el texto y el color de fondo en una página, eliminar el subrayado de los enlaces y animar imágenes, texto y otros elementos HTML.

Si desea un mayor control sobre la apariencia de su sitio, entonces necesita saber cómo agregar CSS a su sitio. Empecemos.

Descargar ahora: Guía de introducción gratuita a HTML y CSS

Aquí hay otra forma de resumir las tres formas en que puede agregar CSS a HTML:

  • CSS en línea: Requiere el atributo de estilo colocado dentro de un elemento HTML.
  • CSS interno: Requiere el elemento

    y se encuentra en la sección de encabezado del archivo HTML.

     
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    selector {
    CSS property: value;
    }
    </style>
    </head>

    Usar CSS interno se considera una mejor práctica que usar CSS en línea.

    El CSS interno le permite diseñar grupos de elementos a la vez, en lugar de tener que agregar los mismos atributos de estilo a los elementos una y otra vez.

    Además, dado que separa el CSS y HTML en diferentes secciones pero lo mantiene en el mismo documento, el CSS interno es ideal para sitios web de una página. Si tiene un sitio de varias páginas y desea realizar cambios en su sitio, deberá abrir cada archivo HTML que represente esas páginas y agregar o cambiar el CSS interno en cada sección principal. (O tu puedes usar CSS externo).

    Ejemplo de CSS interno

    Supongamos que desea cambiar el color del texto de cada elemento de párrafo en una página web a un color azul marino. En ese caso, establecería la propiedad de color en el código de color hexadecimal para un tono de azul marino (# 33475B), colóquelo dentro de un conjunto de reglas CSS con el selector de tipo pagsy colóquelo todo dentro de la sección principal de la página web.

    Así es como se vería el archivo HTML:

     
    

     

       <!DOCTYPE html>

    <html>

    <head>

    <style>

    p {

      color: #33475B;

    }

    </style>

    </head>

    <body>

    <h2>Internal CSS Example</h2>

    <p>The default text color for the page is black. However I can change the color of every paragraph element on the page using internal CSS.</p>

    <p>Using internal CSS, I only need to write one rule set to change the color of every paragraph elemnet.</p>

    <p>With inline CSS, I'd have to add a style attribute to every single paragraph in my HTML.</p>

    </body>

    </html>

     

    Aquí está el resultado:

    ver la pluma Ejemplo de CSS interno de Christina Perricone (@hubspot) sobre CódigoPen.

    Cómo agregar un archivo CSS externo a HTML

    El CSS externo tiene el mismo formato que el CSS interno, pero no está envuelto en etiquetas