@rafbar2000rr
Posted
In order to have a focus ring around the phrase: HTML & CSS foundations when it is focused, I will add the following classes:
focus:outline-none This class removes the default focus outline that browsers apply when an element is focused. Usually, elements like buttons or links have a blue outline when focused (via keyboard navigation). By using focus:outline-none, you're removing that outline to customize it using other classes.
focus:ring-1 Adds a ring around the element with a thickness of 1 pixel when the element is focused.
focus:ring-black Specifies the color of the ring to be black. This visual feedback indicates the element is currently in focus, which is important for accessibility, especially for keyboard users.
cursor-pointer This class changes the cursor to a pointer (a hand icon) when the user hovers over the element, indicating that the element is clickable.
tabindex="0" (this is not a class, it is an HTML attribute) This makes the <h1> focusable via keyboard navigation. Normally, headings aren't focusable, but adding a tabindex="0" allows it to be reached using the Tab key, enhancing accessibility for users who navigate via keyboard or assistive technologies.
So, finally your code for that phrase will be:
<h1 class="text-2xl font-extrabold hover:text-[#F4D04E] cursor-pointer inline-block focus:outline-none focus:ring-1 focus:ring-black " tabindex= "0"> HTML & CSS foundations </h1>Marked as helpful
