em) i més èmfasi (strong)Els navegadors acostumen a representar l'èmfasi (em) en itàlica i més èmfasi (strong) en negreta, d'aqui que sigui habitual confondre els elements i amb em i b amb strong. Contràriament als navegadors, els lectors de pantalla si que fan aquesta distinció i llegeixen amb més intensitat el contingut dels elements emfasi i més èmfasi.
Pel que fa a les regles d'estil que es poden associar als elements em i strong es tractarà d'assegurar que, a tots els navegadors, es representin seguint la convenció abans esmentada:
em {
font-style: italic;
}
strong {
font-weight: bold;
}
acronym) i els acrònims (abbr)Per defecte, els navegadors presenten el text marcat com a forma abreviada i com a acrònim subratllats amb una línia discontínua amb la finalitat de cridar l'atenció dels usuaris, que en passar el ratolí per sobre, veuran aparèixer una petita caixa flotant (tooltip) amb la informació definida a l'atribut title.
No tots els navegadors, però, representen d'aquesta manera el contingut de les etiquetes acronym i abbr. Aconseguir aquesta presentació per mitjà de fulls d'estil és molt senzill:
abbr, acronym {
border-bottom: 1px dotted;
cursor: help;
}
El que afegeix aquesta regla és un comportament visual del cursor quan aquest passi per sobre de l'acrònim o la forma abreviada. Apareixerà el cursor amb un símbol d'interrogació que fa què l'acrònim o la forma abreviada no es confongui amb un enllaç.
code)Per defecte, la representació visual de l'etiqueta code, utilitza la família de font monospace, perè es pot canviar el seu estil a través del CSS:
code {
font-size: 130%;
padding: 1px 5px 1px 5px;
font-weight: bold;
color: #333;
border: 1px dotted #55c;
background-color: #ddd;
}
cite)Per defecte, els navegadors representen el text marcat per l'element cite en itàlica o cursiva. De la mateixa manera que en els casos anterior, l'estil de les cites d'un document es pot personalitzar amb el CSS:
cite {
font-style: italic;
font-weight: bold;
color: #2f8e2f;
background-color: #fffe9e;
}
kbd)De nou, gràcies als CSS, es pot donar estils visuals específics quan l'expressió marcada sigui una combinació de tecles o, per exemple, una línia de comandes.
kbd {
font-size: 150%;
font-weight: bold;
margin: 0 3px 0 3px;
padding: 2px 6px 2px 6px;
background-color: #f5f5f5;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #666;
border-right: 1px solid #666;
-moz-border-radius: 5px;
}
kbd.consola {
font-size: 130%;
color: #0f0;
background-color: #000;
border: none;
-moz-border-radius: 0px;
}
La primera regla (kbd) definirà l'estil de qualsevol text marcat amb les etiquetes "kbd", de manera que tingui una aparença de teclat, a través d'una simple combinació de colors i vores. S'ha afegit una propietat que només és visible pels navegadors de la família Mozilla (-moz-border-radius: 5px;), que arrodoneix les cantonades de la caixa de l'element. Aquests propietat no tindrà efecte si s'utilitzen d'altres navegadors i no validarà, ja que no és una propietat estàndar.
La segona regla (kbd.consola) hereda totes les propietats de la primera més les que s'especifiquen dins d'aquesta segona, gràcies a l'atribut class de valor consola. Amb aquesta propietat quedaran diferenciades les entrades de teclat que siguin una espressió o línia de comandes de consola de la que és una combinació de tecles. Posant el valor de 0 pixels a l'arrodoniment de les cantonades (-moz-border-radius: 0px;), s'elimina l'aparició de la vora i es juga amb una paleta de colors habitual de la consola (verd sobre fons negre).