How to Link a CSS File to a HTML File Web Tutorial

YOUR LINK HERE:

http://youtube.com/watch?v=sORF-Awir70

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap • 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 ➜ https://bit.ly/3nGHmNn • 🚀 This lesson is part of a CSS for Beginners tutorial series playlist: • • CSS Tutorials for Beginners • 🔗 All Resources for this CSS Tutorial Series: https://github.com/gitdagray/css_course • 📬 Course Updates ➜ https://courses.davegray.codes/ • 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: https://www.google.com/chrome/ • 🔗 Visual Studio Code (VS Code): https://code.visualstudio.com/ • 🔗 Live Server VS Code Extension: https://marketplace.visualstudio.com/... • 🔗 vscode-icons VS Code Extension: https://marketplace.visualstudio.com/... • 🔗 Github Themes VS Code Extension: https://marketplace.visualstudio.com/... • 🔗 W3C CSS Validator: https://jigsaw.w3.org/css-validator/ • 🔗 Specificity Calculator: https://specificity.keegan.st/ • 📚 References: • 🔗 MDN CSS: https://developer.mozilla.org/en-US/d... • 🔗 MDN CSS Basics: https://developer.mozilla.org/en-US/d... • 🔗 MDN CSS Selectors: https://developer.mozilla.org/en-US/d... • 🔗 MDN - How to Apply Colors to HTML Elements with CSS: https://developer.mozilla.org/en-US/d... • 🔗 MDN - CSS Values and Units: https://developer.mozilla.org/en-US/d... • 🔗 MDN - The Box Model: https://developer.mozilla.org/en-US/d... • 📚 Typography Resources: • 🔗 MDN: Fundamental Text and Font Styling - https://developer.mozilla.org/en-US/d... • 🔗 CSSFontStack.com: Websafe Fonts - https://www.cssfontstack.com/ • 🔗 MDN: Styling Links - https://developer.mozilla.org/en-US/d... • 📚 Color Resources: • 🔗 Coolors Contrast Checker: https://coolors.co/contrast-checker/1... • 🔗 WebAIM Contrast Checker: https://webaim.org/resources/contrast... • 🔗 Coolors Palette Generator: https://coolors.co/ • 🔗 HTML Color Codes: https://htmlcolorcodes.com/ • ✅ Follow Me: • Github: https://github.com/gitdagray • Twitter: / yesdavidgray • LinkedIn: / davidagray • Blog: https://yesdavidgray.com • Reddit: / daveoneleven • 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. • #css #html #links

#############################

New on site