10 UI and UX Principles while styling with CSS

a) Use appropriate icon set for all buttons. If you do not have proper icons, you can download it or use its link in stylesheet from Google Fonts. You can also use icons in emoji format. If you want to know the hex code of emojis you can refer to W3 Schools Emoji Reference. This will increase the accessibility of the website.

b) Put a help button. It should direct the user to any documentation of the website, video tutorial of the product or the Customer support of the website.

c) Be consistent with colors. Instead of using multiple colors decide a color theme for your website. Make sure that the colors make a sharp difference.
Heres a color theme as an example-

:root {     --primary-color: #F0F0F0;     --secondary-color: #FFFFFF;     --text-color: #121212;     --success-color: #2CE840;     --danger-color: #FF5252;}.dark-mode {     --primary-color: #121212;     --secondary-color: #4B4B4B;     --text-color: #FFFFFF;     --success-color: #2CE840;     --danger-color: #FF5252;}

Here, var( --primary-color) will be the background-color, var(--secondary-color) will be the background-color of elements and var(--text-color) will be the text color.
If you are not sure which colors to use you can take help from Color Hunt. Use :root {} and define in it the colors and use var(--colorname) to use the colors. This will also help you while making the dark mode of the website.

d) Be consistent with fonts. Use a maximum of 4 fonts and a minimum of 4 fonts for your projects. Give a different font for your heading and body text.

e) Follow color standards. A warning message should have red background. A note message should have a yellow background. A success message should have a green background. A tips message should be in blue background.

f) Dont make it messy. Use proper word-spacing, letter-spacing, paddings and margins. There should be enough blank space in the website.

g) Try to make the buttons rectangular. So when the word is small use more horizontal padding than vertical padding.

h) Use :hover and :active pseudo classes on buttons The background-color difference between the normal state and the :hover state should have a sharp contrast whereas the :hover state and :active state should have less contrast.

i) Use user-select: none; on buttons so that when the user double clicks it doesn't select the content within the button.

j) Use :focus pseudo class for inputs. The :focus state should have a border.

Check out the whole series!
Share it with someone who may benefit from this
Happy Coding!
Follow for more!