Introducción a las hojas de estilos en cascada
Las hojas de estilos en cascada (CSS) le otorgan el control sobre la presentación de las páginas web. Mediante CSS, puede colocar y definir con precisión la apariencia de los elementos de una página web.
Una CSS puede ser externa, interna o en línea, relativa a una página web, y una página web puede usar uno o varios de estos tipos de CSS a la vez. En general, los estilos que se definen en una CSS en línea tienen prioridad sobre los de una CSS interna o externa, y los estilos de una CSS interna tienen prioridad sobre los de una CSS externa.
CSS externas
Las hojas de estilos externas sirven para aplicar los mismos estilos de forma coherente en algunas o en todas las páginas web de un sitio web. Al definir estilos en una o varias hojas de estilos externas y adjuntarlos a las páginas web, puede garantizar que todo el sitio web tenga una apariencia coherente. Si decide cambiar un estilo, sólo tiene que hacer un cambio (en la CSS externa) y éste se refleja automáticamente en todas las páginas web que hagan referencia a dicho estilo y CSS.
Las CSS externas se incluyen en archivos .css, como global.css. La sintaxis de las CSS externas es la misma que la de las CSS internas (vea el ejemplo de la sección siguiente de este tema), excepto en que los estilos definidos en las CSS externas no están incluidos entre etiquetas <style>.
CSS internas
Las CSS internas, denominadas en ocasiones CSS incrustadas, sirven para definir estilos sólo para la página web actual y también para reemplazar los estilos que se definen en una CSS externa adjunta a la página web actual.
Las CSS internas se incluyen entre las etiquetas <head> de las páginas web.
Ejemplo de hoja de estilos interna
<style type="text/css">
.alert {
font-weight: bold;
color: #FF0000;
}
h1 {
font-size: 16pt;
font-family: Arial, Helvetica, sans-serif;
}
#headlines {
border-color: #000000;
border-width: thin;
border-style: solid;
}
</style>
CSS en línea
Los estilos en línea sirven para aplicar las propiedades de las hojas de estilos en cascada a elementos individuales de una página sin tener que reutilizar el estilo. Los estilos en línea se definen dentro de las etiquetas iniciales de los elementos HTML de páginas web.
Ejemplo de estilo en línea
<p style="font-weight: bold; font-style: italic; color: #FF0000">