Hoja de estilos html
Para añadir las imágenes de fondo y los estilos de texto a un sitio web, primero tenemos que crear un documento de estilo independiente: un archivo CSS. CSS son las siglas de Cascading Style Sheet (hoja de estilo en cascada), y se llama así por la forma «en cascada» en que está dispuesta su jerarquía, y en la forma en que ciertas reglas anulan a otras (en caso de instrucciones contradictorias), dependiendo de su posición dentro de un documento.
Por ejemplo, (sin querer enredarnos demasiado en el tema), si estás utilizando estilos CSS en tu página HTML, hay cuatro formas principales de definir un estilo, y cuanto más «cerca» esté el estilo de la página, mayor será la prioridad que se le dé sobre otros estilos:
Quien esté familiarizado con Quark Xpress, InDesign (o incluso con Microsoft Word), es muy posible que ya haya encontrado estilos predefinidos. Básicamente, todo lo que necesitas saber sobre CSS (por ahora) es que CSS determina casi todo el aspecto de tu página: cómo se ven las fuentes, cómo y dónde se colocan las imágenes de fondo, qué sucede cuando pasas el ratón por encima de un enlace, etc.
Css in html einbinden w3schools
El lenguaje HTML es bastante limitado cuando se trata de la presentación de una página web. Fue diseñado originalmente como una forma sencilla de presentar la información. El CSS (Cascading Style Sheets) fue introducido en diciembre de 1996 por el World Wide Web Consortium (W3C) para proporcionar una mejor manera de dar estilo a los elementos HTML.
Con CSS, es muy fácil especificar cosas como el tamaño y el tipo de letra de las fuentes, los colores del texto y los fondos, la alineación del texto y las imágenes, la cantidad de espacio entre los elementos, los bordes y los contornos de los elementos, y muchas otras propiedades de estilo.
Nota: Los estilos en línea tienen la mayor prioridad, y las hojas de estilo externas la menor. Esto significa que si especifica estilos para sus párrafos en hojas de estilo incrustadas y externas, las reglas de estilo conflictivas en la hoja de estilo incrustada anularían 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 sola línea, es decir, sin salto de línea después del punto y coma.
Estilo inline Css
Nota: Los estilos en línea 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 están incrustadas 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.
Css externo
De la misma manera que creamos un archivo de texto separado para el HTML, crearás un archivo de texto para el CSS. Si necesitas imágenes para este proceso, consulta el primer tutorial. Estos son los pasos para crear tu hoja de estilo CSS en el Bloc de notas:
Cuando escribas XHTML para diferentes navegadores, una cosa que aprenderás es que todos parecen tener diferentes márgenes y reglas para mostrar las cosas. La mejor manera de estar seguro de que tu sitio se ve igual en la mayoría de los navegadores es no permitir que cosas como los márgenes se ajusten por defecto a la elección del navegador.
Nosotros preferimos empezar las páginas en la esquina superior izquierda, sin relleno ni margen adicional alrededor del texto. Incluso si vamos a acolchar el contenido, ponemos los márgenes a cero para que empecemos con la misma pizarra en blanco. Para ello, añade lo siguiente a tu documento styles.css:
La fuente es a menudo la primera cosa que usted querrá cambiar en una página web. La fuente por defecto en una página web puede ser fea y en realidad depende del propio navegador web, así que si no defines la fuente, realmente no sabes cómo se verá tu página.