EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Tutoriales
  • Blog
✕
            Sin resultados Ver todos los resultados

            ¿Cómo aplicar estilos CSS en un documento HTML?

            estilos css

            Cómo aplicar estilos CSS en un documento HTML

            2. Estilos CSS en un documento HTML

            Hay tres formas de aplicar estilos CSS en un documento HTML: en línea, incrustado en la cabecera y mediante hojas de estilo externas.

            Contenidos del artículo

            • 2. Estilos CSS en un documento HTML
            • 2.1. CSS en línea
            • 2.2. CSS incrustado en la cabecera
            • 2.3. CSS en hojas de estilo externas

            2.1. CSS en línea

            Los estilos en línea son declaraciones CSS que se integran en las etiquetas HTML mediante el atributo style. Este método tan solo afecta al elemento en el que se integra el código. El CSS en línea es complicado de entender y mantener ya que mezcla los estilos CSS con el código HTML.

            Ejemplo:

            <p style="color:green;">Párrafo de color verde.</p>

            Editar en CodePen:

            0

            2.2. CSS incrustado en la cabecera

            Otra manera muy simple de añadir estilo con CSS es utilizando la etiqueta <style> en la cabecera <head> del fichero HTML del sitio. La desventaja de este método es que a la hora de realizar cualquier cambio, se debe realizar en múltiples páginas diferentes y el código estará repetido. Su uso puede llegar a ser necesario en el caso de utilizar un gestor de contenido que no permita modificar el archivo CSS directamente.

            Ejemplo:

            <html>
            <head>
                <title>CSS incrustado en la cabecera</title>  
                <style>p{color:green;}</style>
            </head> 
            <body>
                 <p>Párrafo de color verde.</p>
            </body> 
            </html> 

            Editar el código en CodePen:

            0

            2.3. CSS en hojas de estilo externas

            Mediante hojas de estilo externas se consigue separar el archivo de estilos del fichero HTML. El archivo de estilos cuenta con la extensión .css y se referencia desde HTML mediante el elemento <link>. Este es el método más eficiente y más sencillo de mantener ya que el código CSS se encuentra separado del fichero HTML.

            Ejemplo:

            inicio.html

            <html>
            <head>
                <link rel="stylesheet" href="styles.css">
            </head>
            <body>
                <p>Párrafo de color verde.</p>
            </body>
            </html>

            styles.css

            p {color:green;}

            Editar el código en CodePen:

            0

            Test

            ¿Cuál es la forma más eficiente de aplicar estilos CSS en un documento HTML?

            ¡Bien! ¡Has fallado!

            ¿Con qué elemento se enlaza una hoja de estilo externa a un documento HTML?

            ¡Bien! ¡Has fallado!

            ¿Cuál es la extensión de los archivos de estilos?

            ¡Bien! ¡Has fallado!

            2. Estilos en un documento HTML
            ¡Muy bien!
            Tienes que repasar un poco más...

            Navegación de entradas

            ← ¿Qué es CSS (Cascading Style Sheets)?
            Tipos de selectores en CSS →

            Tutorial CSS Nivel Inicial

            • 1. ¿Qué es CSS?
            • 2. ¿Cómo aplicar estilos CSS?
            • 3. Selectores
            • 4. Unidades de medida
            • 5. Colores y fondo
            • 6. Propiedades de texto
            • 7. Propiedades de las fuentes
            • 8. Propiedades de las listas
            • 9. Propiedades de las tablas
            • 10. Pseudo-clases y pseudo-elementos en CSS
            • 11. Prefijos CSS de los navegadores
            • 12. Modelo de cajas: márgenes, relleno y bordes
            • 13. Tamaño de los elementos
            • 14. Posición y comportamiento de contenedores en CSS
            • 15. Cómo crear un menú horizontal
            • 16. Estilos en formularios CSS
            • 17. Buenas prácticas CSS
            • 18. Herramientas útiles, test de verificación y referencias
            • 19. Test de conocimientos CSS
            • 20. Resumen CSS
            • 21. Ejercicios resueltos CSS

            Tutoriales CSS

            • CSS Inicial
            • CSS Intermedio
            • CSS Avanzado

            Tutoriales

            • Diseño de Interfaces
            • Usabilidad web
            • Accesibilidad web
            • HTML
            • XML
            • CSS Nivel Inicial
            • CSS Nivel Intermedio
            • CSS Nivel Avanzado
            • Bootstrap 5
            • Sass
            • Ver más tutoriales

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            TUTORIALES

            • Contenidos por bloques
            • Diseño de Interfaces Web
            • Lenguajes de Marcas y Sistemas de Gestión de Información

            SÍGUENOS

                 

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2023 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          Sin resultados Ver todos los resultados