CSS Creación

Cuando el navegador lee una hoja de estilos, formatea el documento HTML de acuerdo con ella.

Cómo insertar una hoja de estilos

Hay tres formas de insertar una hoja de estilos:

• Hoja de estilos externa (External style sheet)
• Hoja de estilos interna (Internal style sheet)
• Estilo en línea (Inline style)

Hoja de estilos externa

Cuando los estilos necesitan aplicarse a muchas páginas, la hoja de estilos externa es la opción ideal. Con una hoja de estilos externa, puedes cambiar la apariencia de todo el sitio modificando un solo archivo. Cada página utiliza la etiqueta <link> para enlazar la hoja de estilos. La etiqueta <link> está en la cabecera (del documento):

El navegador leerá las declaraciones de estilo del archivo mystyle.css y formateará el documento de acuerdo con ellas.

La hoja de estilos externa puede editarse en cualquier editor de texto. El archivo no debe contener etiquetas HTML. La hoja de estilos debe guardarse con la extensión .css. A continuación se muestra un ejemplo de archivo de hoja de estilos:

No dejes espacios entre el valor de la propiedad y la unidad (por ejemplo: "margin-left: 20 px"); la forma correcta es "margin-left: 20px".

Hoja de estilos interna

Cuando un solo documento necesita estilos especiales, se debe utilizar una hoja de estilos interna. Puedes definir una hoja de estilos interna en la cabecera del documento usando la etiqueta <style>, así:

Estilo en línea

Dado que mezcla presentación y contenido, el estilo en línea pierde muchas ventajas de la hoja de estilos. Usa este método con precaución, por ejemplo cuando el estilo solo necesite aplicarse una vez a un elemento.

Para usar estilos en línea, necesitas utilizar el atributo de estilo (style) dentro de la etiqueta correspondiente. El atributo style puede contener cualquier propiedad CSS. Este ejemplo muestra cómo cambiar el color y el margen izquierdo de un párrafo:

Estilos múltiples

Si algunas propiedades están definidas por el mismo selector en diferentes hojas de estilo, el valor de la propiedad se heredará de la hoja de estilos más específica.

Por ejemplo, la hoja de estilos externa tiene tres propiedades para el selector h3:

Mientras que la hoja de estilos interna tiene dos propiedades para el selector h3:

Si la página que tiene la hoja de estilos interna también está enlazada con la hoja de estilos externa, el estilo que recibe h3 es:

Es decir, la propiedad de color se heredará de la hoja de estilos externa, mientras que la alineación del texto (text-alignment) y el tamaño de fuente (font-size) serán reemplazados por las reglas de la hoja de estilos interna.

Prioridad de estilos múltiples

Las hojas de estilo permiten especificar la información de estilo de varias formas. Los estilos pueden definirse en un elemento HTML individual, en el elemento de cabecera de una página HTML, o en un archivo CSS externo. Incluso es posible referenciar múltiples hojas de estilo externas dentro del mismo documento HTML.

En general, la prioridad es la siguiente:

(Estilo en línea) Inline style > (Hoja de estilos interna) Internal style sheet > (Hoja de estilos externa) External style sheet > Estilos predeterminados del navegador

style.cssEl código de los estilos del archivo es el siguiente:

h3 {
    color:blue;
}

Nota:Si la hoja de estilos externa se coloca después de la hoja de estilos interna, la externa sobrescribirá a la interna. Ejemplo: