1. Use CSS Grid for Better Layouts
CSS Grid Layout is a new way to create layouts on the web. It provides a more efficient way to layout your content than using floats or positioning.
2. Use Media Queries to Target Different Devices
Media queries allow you to target different devices with different CSS properties. This is a great way to make your site look great on all devices.
3. Use CSS Animations for Eye-Catching Effects
CSS Animations allow you to create eye-catching effects that can really make your site stand out.
4. Use Pseudo-Classes to Add More Style to Your Links
Pseudo-classes allow you to add more style to your links, making them more visually appealing.
5. Use the :before and :after Pseudo-Elements to Add Content to Your Pages
:before and :after pseudo-elements allow you to add content to your pages, which can be used to create interesting effects.
6. Use the transform Property to Transform Your Elements
The transform property allows you to transform your elements, which can create some cool effects.
7. Use the transition Property to Create Smooth Animations
The transition property allows you to create smooth animations between CSS properties.
8. Use the opacity Property to Create Transparent Elements
The opacity property allows you to create transparent elements, which can be used to create interesting effects.
9. Use the box-shadow Property to Add Shadows to Your Elements
The box-shadow property allows you to add shadows to your elements, which can give them a more polished look.
10. Use the border-radius Property to Add Curved Borders to Your Elements
The border-radius property allows you to add curved borders to your elements, which can give them a more polished look.
11. Use the font-family Property to Choose the Fonts for Your Pages
The font-family property allows you to choose the fonts for your pages, which can help to create a more unified look.
12. Use the font-size Property to Control the Size of Your Fonts
The font-size property allows you to control the size of your fonts, which can help to create a more unified look.
13. Use the color Property to Control the Color of Your Text
The color property allows you to control the color of your text, which can be used to create a more unified look.
14. Use the background-color Property to Control the Background Color of Your Pages
The background-color property allows you to control the background color of your pages, which can be used to create a more unified look.
15. Use the margin and padding Properties to Control the Space Around Your Elements
The margin and padding properties allow you to control the space around your elements, which can help to create a more polished look.
Thanks for reading through I hope this article helps you in anyway.
Please comment any other trick that I may have missed out.
Thanks.
Kindly follow me on git
Top comments (18)
In other word use CSS π. Good beginners article. Well done and thanks
ChainID thanks for reading my novice article recently I started going back to doing things in pure css and I have learnt a lot that I didn't earlier with help of tailwind now all these concepts are now easier to apply nonetheless Thanks for reading really appreciate it π
Or use bootstrap or tailwind instead.
Sure, if you want to learn a proprietary approach that will be completely useless one day when those projects are defunct. While you're at it, learn jQuery instead of Javascript and use NPM for everything so you can do as little coding as possible. You'll save so much time! What could go wrong?
I agree with you David also maybe sometimes a proprietary solution is what gets the job done faster, seemingly? But I have recently started appreciating the old way of doing things especially when it comes to front end ....it's like the way we have options whether to use react native or flutter both are okay but nothing compares to writing kotlin or java code that actually runs Natively Android
Exactly.
Wouldn't call them tricks, rather basic CSS.
Hey Deon, thanks for reading the article really appreciate your feedback
All about improvement π
CSS the gift that keeps giving.
Andrew Baisden very true I also think that CSS is a gift because it allows web designers to create professional-looking websites with very little effort. CSS is also a great way for beginners to learn how to create websites, because it is relatively simple to learn and it allows for a lot of creativity I am really enjoying looking at CSS again after a long time of using proprietary solutions like bootstrap lol
I'm enjoying grid layouts and flex so far. There's so many ways of doing things in css it's crazy. I want to know all I can with working with CSS before I hop on to those other stuff people say save time.
Yes you are right and thanks for reading this article. I never used to like CSS because I thought it was hard but now I think it makes a lot of designing very easy. Tailwind is good in some ways but having a solid understanding of CSS can really save you time in the future...
You forgot about Flex containers. They are my way to go lately, more than grid.
Grid for the big main layout stuff, then lotta flexbox in lotta flexbox ^^
Hey Rai B, thanks for taking time read my article ...I will surely update it thanks
Hey friends, Number of marketing tools are in the market which you can use for this. In case you need designs for your content you can master bundles check this website. Here you will find the enough details.
Do all that with open-props.style