Usar para preguntas sobre hoja de estilo en cascada o CSS (siglas en inglés de *cascading style sheets*).
Cuando se pida ayuda para depurar css se debe de incluir un ejemplo mínimo ya sea en forma de Stack Snippet, un JSFiddle, un JSBin o similar
Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML o XML2 (y por extensión en XHTML).
La presentación visual del HTML estaba originalmente definida en los atributos HTML pero HTML4 dejo estos atributos obsoletos y CSS fue introducido para separar el control de la presentación visual del contenido.
Un documento CSS básico esta hecho de conjuntos de reglas. Cada conjunto de reglas empieza con un selector, que hace de nexo de unión entre el documento HTML oXML y el CSS , seguido por un bloque de cero o mas propiedades que definen la presentación . Ejemplo :
/* Esto es un comentario*/
a { /* Selecciona todos los elementos <a> (HTML links), */
color: orange; /* cambia su color a naranja, */
background-color: pink; /* cambia el color de fondo a rosa, */
text-decoration: none; /* y remueve el subrayado. */
}
a:hover { /* Selecciona todos los elementos <a> que tienen el puntero encima*/
color: red; /* cambia su color a rojo */
text-decoration: underline; /* y los subraya de nuevo */
}
El simple ejemplo de arriba también ilustra el estilo cascada de los elementos CSS. Cuando colocas el puntero sobre un link (ej., un elemento <a>
) en una página HTML con esta hoja de estilos aplicada las 2 reglas se aplican ; por la primera regla el color del fondo se vuelve rosa pero como el selector a:hover
es mas especifico sus propiedades color
y text-decoration
anulan las de el conjunto de reglas de <a>
.
El orden de la cascada define como la especificidad y otros factores determinan que valor de una propiedades se aplica a un elemento.
Algo más de CSS , continuando desde el ejemplo anterior :
/* Selectores con mayor especificidad anulan a otros con menos */
#article a.tag {
color: #F00;
}
/* Selectores complejos pueden ser creados uniendo varios simples */
#sidebar > h3 + p a:first-child {
border-bottom: 1px solid #333;
font-style: italic;
}
/* También es posible dar estilo a elementos dependiendo de un atributo */
div[id] a[target="_blank"] {
color: white;
}
/* también pueden anular estilos heredadas usando la palabra clave important */
div.nested {
color: orange !important;
}
Precedencia de los selectores
Cada componente de un un selector CSS puede estar basado en uno de tres posibles atributos de un elemento HTML
- El elemento ID (del atributo
id
) - El nombre de una clase del elemento (en el atributo
class
) - La etiqueta del elemento
Selectores que usan ID tienen mayor prioridad que los que usan nombres de clase y los selectores que usan nombres de clases tienen a su vez mayor prioridad que los que usan etiquetas. !important
puede ser usar para anular la precedencia de los selectores , sin embargo siempre que sea posible se debe usar mayor especificidad en vez de !important
para prevenir anulaciones en otros estilos que ser necesario añadir.
Por ejemplo:
a { /* elemento ancla */
color: orange;
}
.class1 { /* cualquier elemento con clase class1 */
color: red;
}
#anchor1 { /* element con id anchor1 */
color: green;
}
<!—Crea un autor con clase class1 y ID anchor1 -->
<a class="class1" id="anchor1">Sample</a>
En el ejemplo de arriba el color del string “Sample” será verde.
Repetidas apariciones del mismo selector también incrementan su especificidad , como está escrito Selectors Level 3 W3C Recomendation.
.class1.class1 { /* selector de clase repetido */
font-weight: bold;
}
.class1 {
font-weight: normal;
}
En el ejemplo de arriba la fuente será bold.
Aviso importante:
Existen editores online como jsbin o jsfiddle en los que se pueden hacer pruebas y compartir las pruebas de código lo que ayuda mucho a la hora de realizar preguntas referentes a CSS
Referencias
Demonstration of all combination of css selectors by w3schools
CSS-Tricks Almanac - A list of all css selectors with example and explanation
Video Tutorial
- CodeSchool CSS Screencast - Learn the fundamentals & foundational elements of CSS with CSS Cross-Country
CSS Pseudo Selector
Validacion
Soporte navegadores
- MDN: Mozilla CSS support chart
- MSDN: CSS Compatibility and Internet Explorer
- Opera web specification support pages
- Konqueror CSS support
- QuirksMode CSS
- When can I use... Compatibility tables for CSS3 and more
- CSS3 Selectors Test
- Wikipedia: Comparison of layout engines
CSS Pre-procesadores
Hojas de estilos reseteadas
CSS Frameworks
- Blueprint
- 960 CSS Framework
- jQuery UI CSS Framework
- YAML
- YUI CSS Grids
- Twitter Bootstrap
- HTML5 ★ BOILERPLATE
- Zurb's Foundation
- Skeleton
- inuit.css
- Jeet Grid System
- Gumby
- Metro UI CSS
Version actual
CSS3 (CSS3 es el ultimo estandar CSS)