Como poner codigo css en html

Añadir css a html

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

Ejemplo de archivo css

Las hojas de estilo en cascada (CSS) son un lenguaje de hojas de estilo utilizado para describir el aspecto y el formato de un documento escrito en un lenguaje de marcado. Aunque se utiliza con mayor frecuencia para dar estilo a páginas web e interfaces escritas en HTML y XHTML. Hay tres formas de insertar una hoja de estilo CSS en HTML.

Aquí hemos especificado el estilo en la propia etiqueta </p>. De la misma manera podemos estilizar otros elementos HTML usando este método de estilo en línea. Aunque es más fácil codificar las cosas utilizando este método, todavía no se recomienda cuando construimos un sitio web o una aplicación en línea. La razón es que si se requiere algún cambio hay que hacer ese cambio en el propio código HTML. Es mucho más fácil mantener una hoja de estilo separada.

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 conflictivas en la hoja de estilo incrustada anularán 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.

Html css

La mayor desventaja de los estilos en línea es que son imposibles de reutilizar. Considere la posibilidad de reestructurar un sitio web que contiene cientos de páginas donde los estilos inline ensucian el marcado. Tendría que entrar en cada página y cambiar cada propiedad CSS individualmente es una tarea muy difícil.

Una hoja de estilo externa es un archivo de texto plano que contiene sólo formatos de estilo CSS. La extensión del archivo externo debe terminar con la extensión .css (por ejemplo, pagestyle.css). Este archivo externo se denomina hoja de estilo externa.

La hoja de estilo externa (archivo .css) siempre está separada del archivo HTML. Puede enlazar este archivo externo (archivo .css) a su archivo de documento HTML utilizando la etiqueta < link > . Puede colocar esta etiqueta < link > dentro de la sección < head >, y después del elemento < title > de su archivo HTML.

El valor del atributo rel debe ser hoja de estilo. El atributo href indica la ubicación y el nombre del archivo de hoja de estilo. En el código anterior, el nombre del archivo externo es «style.css» y se almacena en la misma ubicación del directorio de su archivo HTML. Si desea almacenar el archivo .css en otra ubicación de directorio, entonces debe especificar la ruta de su archivo css en el href.