Selenium Locators

There are different locators like:
@FindBy(className = "...")
@FindBy(name = "...")
@FindBy(linkText = "...")
@FindBy(tagName = "...")
@FindBy(id = "...")
@FindBy(xpath = "....")
@FindBy(css = ".....")
From these xpath & css selector are relatively difficult to understand. They can be used as:

But how do we detect these paths? There are some plugins:

Instead of absolute path -starting with html, we can set relative path:

CSS selector works similarly: