Колір посилання встановлюється через властивість color, яке додається до селектору A. Для зміни кольору посилання при наведенні на неї курсора миші застосовується псевдоклас :hover, а щоб зміна кольору відбувалася плавно, до селектору A слід додати властивість transition, значенням якого виступає час. Воно вказується звичайно в секундах або мілісекундах.
У блогах заголовок повідомлення зазвичай служить посиланням на повний текст. Щоб заголовок, який створюється за допомогою тега <h1> перетворити на посилання, текст слід обернути тегом <a>. В HTML5 порядок тегів не має значення, тому блоковий елемент <h1> можна вставити всередину рядкового елемента <a>, але в HTML4 XHTML тег <a> зобов'язаний перебувати всередині <h1>, але ніяк не навпаки.
В деяких браузерах, зокрема Firefox, при активації посилань навколо них додається пунктирна рамка. Вона призначена для залучення уваги і демонстрації поточного фокусу (рис. 1).
Рис. 1. Пунктирна лінія навколо посилання
Тим не менш, деякі розробники хотіли б прибрати цю рамку, щоб зробити сайт одноманітним в різних браузерах. Для цього слід до селектору A додати стильове властивість outline зі значенням none (приклад 1).
Посилання різних кольорів зазвичай потрібні для розміщення на сторінці, що має кілька розрізняються за фонового кольору областей. На темному тлі логічніше розташовувати посилання світлих тонів, а на світлому, навпаки, посилання темного кольору.
Псевдоклас :hover, який додається до селектору A, якраз визначає стиль посилання, коли на неї наводиться курсор миші. В таблиці стилів спочатку вказується селектор A, потім через двокрапку hover.
Щоб задати вид оформлення відвіданих посилань, використовуйте псевдоклас :visited, який через двокрапку додається до селектору A, як показано в прикладі 1.
Використовуйте стильове властивість color для завдання кольору тексту і background для зміни кольору фону під посиланням, додаючи їх до селектору A, як показано в прикладі 1.
За замовчуванням посилання завжди підкреслюються, щоб легко можна було відрізнити посилання від звичайного тексту. Але в деяких випадках підкреслення допустимо прибрати, коли очевидна різниця між посиланням і текстом.
Щоб посилання не підкреслювалися, для селектора A слід додати властивість text-decoration зі значенням none.
Універсальний спосіб, працює у всіх браузерах, полягає у створенні нового класу і його додавання до певних посиланнях. Наприклад, вводимо клас blank і з допомогою атрибута class застосовуємо його до бажаних тегами <a>.
За замовчуванням посилання відкриваються в тому ж вікні, де вони розташовані. Щоб будь-яке посилання відкривалися в новому вікні, до тегу <a> слід додати атрибут target зі значенням _blank.
Пунктирне підкреслення у посилань останнім часом стало стандартом оформлення посилань, клацання по яким не відкриває посилання, а виконує певну дію в поточному документі. Активне використання технології AJAX, коли сторінка оновлюється без її перезавантаження, призвело до нового виду посилань, які відрізняються від звичайних посилань пунктирною лінією.
Для створення лінії слід використовувати властивість border-bottom зі значенням dashed, додаючи його до селектору A. Щоб підкреслення застосовувалося не до всіх посилань, слід вказати унікальний клас, назвемо його, наприклад dot. Також необхідно прибрати вихідне підкреслення у посилань з допомогою властивості text-decoration зі значенням none.
Зовнішніми називаються посилання, які ведуть на інший сайт. Щоб користувач міг відрізнити такі посилання від звичайних, до зовнішніх посиланнях додають невеликий малюнок (наприклад, такий ), який інформує про те, що посилання на інший ресурс.
Для зміни стилю посилань створимо новий стильовий клас external і для нього додамо малюнок у вигляді фону за допомогою властивості background. При цьому слід вказати значення no-repeat, щоб фон не повторювався.
При розміщенні посилання всередині шару заданих розмірів, іноді виникає задача, щоб посиланням був не тільки текст, але і сам шар. Особливо це буває актуально при створенні різних меню. Для зміни вигляду посилання до селектору A в стилях слід додати властивість display зі значенням block, щоб перетворити посилання в блоковий елемент. Такий елемент за замовчуванням займає всю вільну ширину всередині батьків. Також необхідно вказати height: 100%, посилання після цього буде займати всю доступну висоту шару.