Tips to consider when styling with CSS

In this post, I will tell you some tips to consider when styling with CSS.

Reset the CSS layout before styling

You must reset the whole layout of the page using this four lines of code.

* , *:before , *:after {      box-sizing: border-box;}

alternatively, you can use

* , *:before , *:after {      box-sizing: inherit;}body {     box-sizing: border-box;}

Visit Dribbble to get some inspiration

There is a site called Dribbble where you can find lots of inspiration to style a page or an HTML element. visit this site by clicking the below link dribbble.com/
Below is an example where you can get inspiration to style a button.

Add to cart by Aaron Iker

Use CSS variables for colors

Another great thing is you can use CSS variables. By Using them you can change the colors of the whole by changing one line of CSS code. See the example below where CSS variables are used.

:root {   --blue: blue;   --red: red;}.blue {   background: var(--blue);}.red {   background: var(--red);}

See the example below. (code)

Think about accessibility

We must design UIs accessibility friendly. See the sandbox below and try to navigate using the keyboard.

Without any accessibility

With accessibility

Now you can see why accessibility is important for the web.

Use a good font

The font also shows your brand. Messing up the font is messing up your brand. There are lots of fonts available. Here are the most popular fonts to use in your UI.

Roboto

Noto Sans JP

Lato

Inter

Segoe UI

That's all for now. Please put a comment blw if you have any suggestions for the list.

And if you need a good framework to use, here it is: https://material.pages.dev/