How to Style HTML hypertext links in CSS with visited, hover, active and focus

Опубликовано: 15 Март 2022
на канале: Dave Gray
26k
822

Web Dev Roadmap for Beginners (Free!):

Learn how to style HTML hypertext links in CSS with visited, hover, active and focus pseudo-classes. In this CSS tutorial, we will style hypertext links to indicate visited, hover, active and focus.

Subscribe

This lesson is part of a CSS for Beginners tutorial series playlist:


All Resources for this CSS Tutorial Series:

Course Updates

How to Style HTML hypertext links in CSS with visited, hover, active and focus

(00:00) Intro
(00:05) Welcome
(00:25) Setup
(01:51) Typography styles also apply to links
(02:42) Default link styles
(03:38) Removing the underline
(04:16) Cursor options
(04:57) Link color
(05:32) visited pseudo-class
(06:14) hover pseudo-class
(07:08) active pseudo-class
(07:54) pseudo-class specificity
(09:07) Cascade order for the pseudo-classes
(10:14) focus pseudo-class
(10:59) A different link style approach
(11:54) Using hsl for a complimentary hover color
(13:47) Using transparency for hover
(15:46) Pseudo-classes can change other properties, too

Web Dev Tools:
Chrome Browser:
Visual Studio Code (VS Code):
Live Server VS Code Extension:
vscode-icons VS Code Extension:
Github Themes VS Code Extension:
W3C CSS Validator:
Specificity Calculator:

References:
MDN CSS:
MDN CSS Basics:
MDN CSS Selectors:
MDN - How to Apply Colors to HTML Elements with CSS:
MDN - CSS Values and Units:
MDN - The Box Model:

Typography Resources:
MDN: Fundamental Text and Font Styling -
CSSFontStack.com: Websafe Fonts -
MDN: Styling Links -

Color Resources:
Coolors Contrast Checker:
WebAIM Contrast Checker:
Coolors Palette Generator:
HTML Color Codes:

Follow Me:
Github:
Twitter:
LinkedIn:
Blog:
Reddit:

Was this tutorial about how to style HTML hypertext links in CSS with visited, hover, active and focus pseudo-classes helpful? If so, please share. Let me know your thoughts in the comments.


Смотрите видео How to Style HTML hypertext links in CSS with visited, hover, active and focus онлайн без регистрации, длительностью 16 минут 52 секунд в хорошем hd качестве. Это видео добавил пользователь Dave Gray 15 Март 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 26 тысяч раз и оно понравилось 82 людям.