EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            que es CSS Cascading Style Sheets
            ¿Qué es CSS (Cascading Style Sheets)?
            10/10/2019
            Selectores CSS
            Tipos de selectores en CSS
            11/10/2019

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

            estilos css

            Cómo aplicar estilos CSS en un documento HTML

            Tabla de contenidos

            • 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. 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.

            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 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

            Comprueba tu aprendizaje

            ¿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...
            Compartir

            UD3. CSS básico

            • 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. Buenas prácticas CSS
            • 13. Modelo de cajas: márgenes, relleno y bordes
            • 14. Posición y comportamiento de contenedores en CSS
            • 15. Formatos de las fuentes en CSS y utilización de repositorios
            • 16. Estilos en formularios CSS
            • 17. Herramientas útiles, test de verificación y referencias
            • 18. Resumen CSS
            • 19. Prácticas CSS
            • 20. Test de conocimientos CSS
            • 21. Propiedades Personalizadas CSS

            Diseño de Interfaces Web

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            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



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results