Blog Preview Card

Community feedback

• 

  Rafael Ibarra•120

  @rafbar2000rrPosted about 1 month ago

  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

  0