Codigo css dentro de html
estilo html en línea
Con CSS puedes controlar el color, la fuente, el tamaño del texto, el espaciado entre elementos, cómo se posicionan y disponen los elementos, qué imágenes o colores de fondo se van a utilizar, diferentes visualizaciones para distintos dispositivos y tamaños de pantalla, ¡y mucho más!
Consejo: La palabra cascada significa que un estilo aplicado a un elemento padre se aplicará también a todos los elementos hijos dentro del padre. Por lo tanto, si estableces el color del cuerpo del texto en «azul», todos los encabezados, párrafos y otros elementos de texto dentro del cuerpo también tendrán el mismo color (a menos que especifiques otra cosa).
La forma más común de añadir CSS, es mantener los estilos en archivos CSS externos. Sin embargo, en este tutorial usaremos estilos internos y en línea, porque es más fácil de demostrar, y más fácil para que lo pruebes tú mismo.
El siguiente ejemplo establece el color del texto de TODOS los elementos <h1> (en esa página) en azul, y el color del texto de TODOS los elementos <p> en rojo. Además, la página se mostrará con un color de fondo «powderblue»:
añadir css a html
Sin embargo, en la programación diaria, no queremos usar estilos inline, porque sólo apunta a un solo elemento HTML, en lugar de apuntar a múltiples, no es fácil de buscar y encontrar en proyectos más grandes, y la razón más importante es que no podemos mantener nuestro código CSS separado del HTML.
La segunda forma de añadir CSS a HTML es utilizando la forma interna de CSS. Para usar esta forma, necesitamos usar una etiqueta HTML llamada etiqueta <style> (no atributo de estilo) y entre las etiquetas de estilo, podemos escribir nuestros selectores y reglas CSS:
hoja de estilo css
Aplicar CSS a HTMLEn primer lugar, vamos a examinar tres métodos para aplicar CSS a un documento: con una hoja de estilos externa, con una hoja de estilos interna y con estilos en línea.Hoja de estilos externaUna hoja de estilos externa contiene CSS en un archivo separado con una extensión .css. Este es el método más común y útil para incorporar CSS a un documento. Puedes enlazar un único archivo CSS a varias páginas web, dando estilo a todas ellas con la misma hoja de estilos CSS. En la sección Introducción a CSS, enlazamos una hoja de estilos externa a nuestra página web.
El atributo href del elemento <link> debe hacer referencia a un archivo en su sistema de archivos. En el ejemplo anterior, el archivo CSS está en la misma carpeta que el documento HTML, pero podría colocarlo en otro lugar y ajustar la ruta. Aquí hay tres ejemplos:
Pero para los sitios con más de una página, una hoja de estilo interna se convierte en una forma de trabajo menos eficiente. Para aplicar un estilo CSS uniforme a múltiples páginas utilizando hojas de estilo internas, debe tener una hoja de estilo interna en cada página web que utilizará el estilo. La penalización de la eficiencia se traslada también al mantenimiento del sitio. Con el CSS en hojas de estilo internas, existe el riesgo de que incluso un simple cambio de estilo pueda requerir ediciones en múltiples páginas web.Estilos en líneaLos estilos en línea son declaraciones CSS que afectan a un único elemento HTML, contenido en un atributo de estilo. La implementación de un estilo en línea en un documento HTML podría tener este aspecto:
código html
Nota: Los estilos incrustados tienen la mayor prioridad, y las hojas de estilo externas la menor. Esto significa que si se especifican estilos para un elemento tanto en hojas de estilo incrustadas como externas, las reglas de estilo en conflicto en la hoja de estilo incrustada prevalecerán sobre la hoja de estilo externa.
El atributo style incluye una serie de pares de propiedades y valores CSS. Cada par «propiedad: valor» está separado por un punto y coma (;), tal y como se escribiría en una hoja de estilo incrustada o externa. Pero tiene que estar todo en una línea, es decir, sin salto de línea después del punto y coma, como se muestra aquí:
El uso de los estilos en línea se considera generalmente como una mala práctica. Como las reglas de estilo se incrustan directamente dentro de la etiqueta HTML, hace que la presentación se mezcle con el contenido del documento; lo que hace que el código sea difícil de mantener y anula el propósito de usar CSS.
Nota: Es imposible aplicar estilos a los pseudo-elementos y a las pseudo-clases con estilos en línea. Por lo tanto, debes evitar el uso de atributos de estilo en tu código. El uso de hojas de estilo externas es la forma preferida de añadir estilos a los documentos HTML.