A. Class Selectors
Select elements to which you have assigned that class and format them accordingly
- give the class name in the html document: <p class=”otiOnomaTheleis“>To keimeno pou theleis</p>
- declare the class in CSS: .otiOnomaTheleis {font-size: 120%;}
- Don’t forget the “.” in the CSS declaration.
- Don’t forget that a class name cannot start with a number
- Here is how can you do that in a WordPress Block
B. ID Selectors
Select elements to which you have assigned that ID and format them accordingly
- give the ID name in the html document: <p id=”otiOnomaTheleis“>To keimeno pou theleis</p>
- declare the ID in CSS: .#otiOnomaTheleis {font-size: 120%;}
- Don’t forget the “#” in the CSS declaration.
- Don’t forget that an ID name cannot start with a number
See here how to add a CSS class in a block in a post/page in WordPress
C. Anchors
i. in Elementor:
- put the link as you would normally do with any link in a page except
- you put a sharp (#) before the unique name that you must provide
- go to the point where you want to jump to and
- in Advanced and
- in Layout and
- in CSS ID field
- give the name you gave b4 only this time without the sharp
ii. in Gutenmberg:
- go to the block and then
- select carefully the block and then
- advanced (bottom) then to
- HTML Anchor and
- follow the instructions by WordPress
