DEV Community

Cover image for Tips to consider when styling with CSS
Posandu
Posandu

Posted on

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;
      margin:0;
      padding:0;
}
Enter fullscreen mode Exit fullscreen mode

alternatively, you can use

* , *:before , *:after {
      box-sizing: inherit;
      margin:0;
      padding:0;
}
body {
     box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

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
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);
}
Enter fullscreen mode Exit fullscreen mode

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

Roboto font

Noto Sans JP

Noto Sans JP

Lato

SLato

Inter

Inter

Segoe UI

Segoe UI

That's all for now. Please put a comment b̷͙̕é̴̯l̷͈̏ŏ̶͜w̶̩̾ if you have any suggestions for the list.

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

Discussion (5)

Collapse
afif profile image
Temani Afif

You must reset the whole layout of the page using this four lines of code. --> this not a good practise. People tend to always remove the default margin/padding everywhere but this is not good especially when dealing with elements like <h1>,<p>, <ul> etc they have default margin/padding on purpose that you should not automatically remove.

Collapse
posandu profile image
Posandu Author

Is the updated one good ?

Collapse
afif profile image
Temani Afif

you were not obliged to update ;) I simply gave my opinion

Thread Thread
posandu profile image
Posandu Author

Okay @afif Glad you've read my post 😊

Some comments have been hidden by the post's author - find out more