Hojas De Estilo

Hojas de estilo en cascada (CSS)

Las hojas de estilo son útiles para definir los atributos visuales en documentos HTML. Esto le da a los autores métodos poderosos para definir el aspecto visual del documento, mientras que separa la parte semántica (HTML) de la presentación al (style sheets).

Tabla de contenidos

1 Propiedades de estilo
2 Definiciones de estilo
2.1 Utilizando elatributo "style"
2.2 Utilizando el elemento HTML style
2.3 Usando archivos externos
3 Clases en CSS
3.1 Usando el atributo "class"
4 Selectores ID
4.1 Usando el atributo "id"
5 Herencia
6 Cascada
6.1 La regla "!important"
7 El órden de especificidad

Propiedades de estilo

Las propiedades y sus valores son definidos usando una sintaxis de CSS simple. Estas definiciones no pertenecen alestándar HTML, pero están pensadas para reemplazar los atributos presentacionales que HTML ha juntado durante sus primeros tiempos.

nombre-propiedad: valor-propiedad;
De este modo puedes definir muchos pares de valores y propiedades en un mismo bloque, dado que una definición básica es separada de la próxima por un punto y coma. Un conjunto de propiedades puede entonces ser aplicado, por ejemplo, aun elemento, lo que establecerá el aspecto visual de ese elemento dondequiera que aparezca en el documento.

En el siguiente ejemplo un conjunto de propiedades visuales es definido para el elemento elemento HTML p. Para lograr esto, el nombre del elemento debe aparecer antes de la declaración de propiedades, las cuales irán encerradas entre llaves ("{" y "}").

p {
padding: 10px;border-style: solid;
border-color: blue;
border-width: 2px;
background-color: #9EC7EB;
color: white;
font-family: arial,helvetica;
font-size: 11px;
font-weight: bold;
}

Ejemplo para aplicar a la pag web de la hoja de vida

<p style="padding: 10px; border-style: solid; border-color: red; border-width: 2px; background-color: #9EC7EB; color: red; font-family: arial,helvetica; font-size: 35px;font-weight: bold;">Contenido del párrafo
estamos ensayando las pag de estilo
<br><br><br>
hoy martes</p>

Al declarar este código en un documento HTML, todos los párrafos tomarán estas propiedades. En algunos casos necesitas establecer características sólo para algunos párrafos en lugar de para todos. Si este es el caso, puedes usar el atributo "style", las clases olos selectores ID.

Nota: las propiedades CSS y sus posibles valores no ser´na tratados en profundidad en este sitio. Para encontrar más información acerca de este tema, refiérete a este índice de propiedades para CSS 2.

Definiciones de estilo

Puedes definir propiedades de estilo de tres formas: dentro del rag de apertura de un elemento específico (usando el atributo "style"), dentro deun bloque en el encabezado del documento (usando el elemento HTML style) o en archivos externos (usando el tag HTML link).

Usando el atributo "style"

El atributo "style" permite a los autores declarar propiedades de estilo "en línea" como valor de un atributo. Es útil cuando el autor necesita declarar un conjunto único de propiedades para un elemento específico. La sintaxis para laspropiedades CSS son las mismas.

Código
<p style="padding: 10px; border-style: solid; border-color: blue; border-width: 2px; background-color: #9EC7EB; color: white; font-family: arial,helvetica; font-size: 11px; font-weight: bold;">Contenido del párrafo</p>
Vista
Contenido del párrafo

Como puedes ver, el estilo declarado en este ejemplo es el mismo declarado en el ejemplo anterior. Ladiferencia es que este último sólo afecta al elemento contenedor y el primero afecta implícitamente a todos los párrafos.

Usando el elemento HTML style

El elemento HTML style define un bloque donde las declaraciones de estilo pueden ser contenidas. El bloque de estilo debe ser declarado en algún lugar del encabezado del documento (elemento HTML head) y definirá estilos y clases para el...