CSS or Cascading Style Sheets can make your websites came out alive. It can add so much beauty to your websites, landing pages, and can make your projects stand out from the rest of the crowd. But it is very difficult to understand CSS as there's no debugging tool to find bugs and errors in CSS. But with constant practice and with better known skills you can write beautiful and streamlined CSS code that can enhance the overall look of your website.
Whether it's your portfolio project, Professional, or any other projects, exceptional CSS tricks can make your website exceptionally great and fun to look.
Here are some of the lesser-known CSS tricks you must follow:
The "all" property
The "all" property allows you to apply a CSS property to all elements on a page. It can be used as a shorthand for several other properties, and it can also be used to reset a property for all elements.
The ":not" pseudo-class
The ":not" pseudo-class allows you to select elements that do not match a certain criteria. This can be useful for selecting all elements except one, or for selecting only certain elements within a group.
The ":nth-child" pseudo-class
The ":nth-child" pseudo-class allows you to select a specific child element based on its position within a parent element. It can be used to select every other element, or to select elements based on more complex patterns.
The ":first-of-type" and ":last-of-type" pseudo-classes
These pseudo-classes allow you to select the first or last element of a specific type within a parent element. For example, you can use ":first-of-type" to select the first "p" element within a "div".
The ":only-of-type" pseudo-class
The ":only-of-type" pseudo-class allows you to select an element if it is the only one of its type within its parent.
The ":placeholder-shown" pseudo-class
This is a pseudo-class that selects the input element when it is in a placeholder-showing state.
The "background-clip" and "background-origin" properties
These properties allow you to control where the background image is drawn within an element. The "background-clip" property allows you to control how far the background extends into the element's padding, and the "background-origin" property allows you to control where the background image is positioned within the element.
That’s a wrap. Thanks for reading.
Follow me for weekly new tidbits on the domain of tech.
Want to see what I am working on? Check out my Twitter, and GitHub.
Want better services for your website and social media growth? Look out my agency Auxo digitals.
Want to connect? Reach out to me on LinkedIn.
Top comments (0)