Trabajar con estilos
Un estilo es un conjunto de características de formato definidas en una hoja de estilos en cascada (CSS). Puede aplicar estilos al contenido de una página web, incluidos texto (caracteres individuales o párrafos enteros), gráficos, capas, tablas e incluso al cuerpo de toda la página web. Los estilos permiten volver a utilizar de forma eficiente un grupo de propiedades y valores sin tener que configurar las propiedades cada vez que se desean usar.
Los estilos de una CSS están en cascada en el sentido de que a los elementos HTML siempre se les aplicarán las reglas globales de un estilo excepto cuando las reglas de estilo locales las invaliden. En general, las reglas de estilo locales tienen prioridad sobre las reglas de estilo globales. Por ejemplo, un estilo definido en una CSS interna de una página web invalida un estilo definido en una CSS externa. De la misma manera, una CSS en línea definida en un único elemento HTML de la página web invalida cualquier estilo definido para ese mismo elemento en la CSS interna o externa de la página web. Las partes de las reglas de estilo globales que no entran en contradicción con las reglas de estilo de las CSS locales se aplican a los elementos HTML incluso cuando se aplican los estilos locales.
Tipos de estilos
Un estilo que reside en una CSS externa o interna puede tener una clase, un elemento o un selector de Id. Un estilo se define por su conjunto de reglas, que consta de un selector, seguido de un bloque de declaraciones de propiedad que aparecen entre una llave de apertura ({) y una llave de cierre (}). Cada tipo de estilo se distingue de los demás por el selector. El selector va precedido por un punto (.) en los estilos basados en una clase y por un signo de número (#) en los estilos basados en un Id. El selector de los estilos basados en un elemento consta únicamente de un elemento HTML, por ejemplo H1.
Selectores de elementos
Los selectores de elementos sirven para definir el conjunto de propiedades que desea que utilice cada una de las instancias de un elemento HTML concreto de una página web. Por ejemplo, para crear un margen de 25 píxeles alrededor de todos los párrafos (contenido rodeado de etiquetas <p>) en la página web, cree un estilo que utilice el elemento p como selector y contenga declaraciones para las propiedades margin, como se muestra en el siguiente código.
En el siguiente ejemplo se aplican las propiedades margin-left y margin-right a todos los elementos HTML h2 del documento.
h2 { margin-left: 25px; margin-right: 25px;}
Selectores de clases
Los selectores de clases sirven para definir el conjunto de propiedades que desea usar en uno o varios elementos de una página web. Si en algún momento desea modificar el estilo, puede editar el conjunto de reglas del mismo y cada uno de los elementos a los que ha aplicado el estilo reflejará los cambios automáticamente.
En el siguiente ejemplo se declara la clase introduction y se especifican las propiedades font-size y color.
.introduction {font-size: small; color: white;}
Puede asignar esta clase a cualquier elemento HTML:
<h3 class="introduction">
Si desea limitar una regla de CSS a elementos HTML específicos, incluya el elemento en el selector de la siguiente forma:
p.subtext {font-style: italics; font-size: 0.8em;}
Esta regla de estilo solo se aplica a elementos de párrafo.
[!NOTA]
Puede asignar varias clases a un solo elemento HTML.
<p class="introduction subtext">
Selectores de Id.
Los selectores de Id. sirven para definir un conjunto de propiedades para un solo elemento o para un bloque de elementos que desee distinguir del resto del contenido en una o varias páginas web. Utilice un estilo de Id. cuando desee aplicar estilos a un solo elemento HTML de una página web.
#footer {background-color: #CCCCCC; margin: 15px;}
Aplique este regla de CSS a un solo elemento HTML.
<div id="footer">
Estilos en línea
Los estilos en línea sirven para definir un conjunto de propiedades para un solo elemento o para un bloque de elementos de una página web cuando no se desean volver a utilizar esos estilos. A diferencia de los estilos de Id., de elementos y de clases, cuyas propiedades están definidas en la sección de encabezado de una página web (CSS interna) o en un archivo CSS externo, las propiedades de los estilos en línea (o CSS en línea) están definidas directamente en el elemento HTML que desea que use el estilo.
<p style="font-weight: bold; font-style: italic; color: #FF0000">
Vea también
Tareas
Crear un estilo
Modificar un estilo
Conceptos
Controlar las apariencias mediante estilos
Referencia de hojas de estilos en cascada