This content originally appeared on DEV Community and was authored by Posandu Mapa
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;
}
alternatively, you can use
* , *:before , *:after {
box-sizing: inherit;
margin:0;
padding:0;
}
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 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/
This content originally appeared on DEV Community and was authored by Posandu Mapa
Posandu Mapa | Sciencx (2021-07-28T09:49:00+00:00) Tips to consider when styling with CSS. Retrieved from https://www.scien.cx/2021/07/28/tips-to-consider-when-styling-with-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.