Como hacer un css externo

Link css to html

External style sheets are separate files with a .css extension that are referenced in the main HTML document. Learn cascading order rules to understand the use of specificity, source order, and the ‘!important’ declaration.

Cascading Style SheetsNow that you understand that the CSS rules can be defined at multiple places using various techniques, what do you think will happen when an element in HTML has more than one CSS rule? Which properties will finally be applied to that element while displaying? A cascading style sheet defines a specific order that decides the winning selectors. This list is ordered by weight with the highest weight first:

Let’s investigate how the browser chose from among these properties and applied them to the elements using the cascading order rules. First, our HTML has <div> elements. The browser will look up the CSS for the div selectors. The first div selector has two properties specifying a pink color for the text with a font size of 64 pixels. The second div selector has the same two properties that specify a white color for the text and font size of 30 pixels. In this case, both the div selectors have the same level of importance and specificity. Thus, the source order will determine the winning property to be applied. Hence, the properties appearing later in the second div selector override these two properties over the earlier div selector. The result makes the text white with size of 30 pixels for both the HTML <div> elements.

Ejemplo de archivo Css

Aplicación de 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:

Ejemplo de css externo en html

Las hojas de estilo externas o enlazadas son ideales cuando se aplica el mismo estilo a todo un sitio web, ya que el estilo puede mantenerse editando un único archivo. Las hojas de estilo externas constan de dos partes: el enlace al archivo CSS y el propio archivo CSS.

Dentro de la etiqueta de enlace, el atributo “rel” define la relación entre el documento actual y el documento enlazado. El “type” especifica el tipo de documento enlazado, y el “href” es el nombre del archivo y la ruta al archivo css.

También necesitamos el archivo CSS externo al que se enlaza. Cualquier hoja de estilo CSS, que contenga sólo CSS, debe ser identificada por una extensión de archivo “.css”, de forma similar a como se identifica un archivo HTML por su extensión de archivo “.html”. No recomiendo el uso de procesadores de texto (por ejemplo, Microsoft Word, StarOffice Writer o Abiword) para guardar o crear archivos CSS. Los editores de texto como Notepad o Wordpad en máquinas Windows, y Kwrite o Kate en máquinas Linux, son una mejor opción. Cuando guarde el archivo, asegúrese de escribir el nombre del archivo y la extensión (por ejemplo: myboringfilename.css) y, si hay una opción desplegable “Guardar como tipo” en el menú Guardar, que el tipo esté configurado como “Todos los archivos”.

Hoja de estilo CSS

Las hojas de estilo en cascada (CSS) describen cómo se presentan los documentos en las pantallas, en la impresión, o quizás cómo se pronuncian. El W3C ha promovido activamente el uso de hojas de estilo en la Web desde la fundación del consorcio en 1994.

Las hojas de estilo en cascada (CSS) ofrecen alternativas fáciles y eficaces para especificar diversos atributos de las etiquetas HTML. Con CSS se puede especificar una serie de propiedades de estilo para un elemento HTML determinado. Cada propiedad tiene un nombre y un valor, separados por dos puntos (:). Cada declaración de propiedad está separada por un punto y coma (;).

Nota – La etiqueta de fuente está obsoleta y se supone que será eliminada en una futura versión de HTML. Por lo tanto, no debe ser utilizado en lugar, se sugiere utilizar estilos CSS para manipular sus fuentes. Pero aún así, para el propósito de aprendizaje, este capítulo trabajará con un ejemplo usando la etiqueta de fuente.

Si necesita utilizar su hoja de estilo en varias páginas, siempre se recomienda definir una hoja de estilo común en un archivo separado. Un archivo de hoja de estilo en cascada tendrá la extensión .css y se incluirá en los archivos HTML utilizando la etiqueta <link>.