CSS selectors tell the browser which HTML elements you want to style. So if you think I want to change how this looks. You would use a selector. While Properties are the actual style changes you want to make. Basically just instructions for how something should look. Every property also needs a value. So you could select p then use the property color with the value of blue to change text blue.
I figured I would do one of the most commonly used selectors first. A class selector starts with a period and is used on any element that has a matching class. On this site I am styling each card with a class called .card. You are able to combine multiple classes. Alone a class selector has a specificity of 0, 0, 1, 0. Increasing when you combine class selectors.
.card {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
The Universal selector matches any type. So it can select all HTML tags. We've used it multiple times in class as a reset button. It also can be used for box model adjustments like setting box-sizing globally. I've also seen a few videos where they use it for debugging by adding borders or backgrounds to all elements on a page.
For example, by placing the class debug on your body with the universal selector you would target all elements within the body and add an outline as well as background to show layout.
.debug * {
outline: 1px solid red !important;
background: rgba(255, 0, 0, 0.05) !important;
}
The :is() selector is a little shortcut that lets you group different selectors together. Its a list of things you want to style. Instead of writing separate rules for paragraphs in your header, main content, and footer, you can just say style paragraphs in any of these areas on one line. So "if this element is in any of these places, style it this way" hence the name "is".
/* Repetitive way to do it */
header p { color: purple; }
nav p { color: purple; }
footer p { color: purple; }
/* Using :is() = cleaner */
:is(header, nav, footer) p { color: purple; }
:has() is way to ask "Does this container have something specific inside of it?" If it does, you can style the container itself. So if this box has a button inside of it, make the box red. If this card has an image in it, give it extra padding.
/* Makes any div that has an image inside it turn red */
div:has(img) { background: red; }
The backdrop-filter property in CSS applies filters to the area behind an element. Most common way is a frosted glass effect. You can see what's behind an element but it's blurred or altered in some sort of way.
.demo-area code {
position: relative;
display: block;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
padding: 1rem;
border-radius: 4px;
color: #333;
font-family: monospace;
white-space: pre-wrap;
}
The scrollbar-color property in CSS lets you customize the color of the scrollbar. It takes two colors: one for the "thumb" which is the part you drag and one for the "track" the part that the thumb moves along. It does not support gradients, only accepting solid colors. If you need fancy scrollbar styling with gradients, you'd typically need to use the older ::-webkit-scrollbar pseudo-elements, but that's only supported in WebKit browsers (like Chrome and Safari).
The first color is for the "thumb" second color is for the "track".
html {
scrollbar-color: #304b49 #45b7d1;
}
The cursor property in CSS controls what the mouse cursor looks like when you hover over an element. I never really understood the purpose of changing it other then aesthetics but apparently it is also a way to give user visual hints about what they can do with different elements on your page.
Here is how I placed just the grab cursor on this card by adding a class to my card div.
/* Cursor Demo */
.grab-cursor {
cursor: grab;
}
The perspective property in CSS creates a 3D like view by affecting the distance between us and the z-plane which is where the element sits. The larger the value, the further away you are, this makes the 3D effect more subtle. Used with transform to create cool effects.
/* Perspective Demo */
section {
perspective: 2000px;
}
.perspective-demo {
transform: rotateY(10deg);
transition: transform 0.4s ease;
margin: 50px;
}
.perspective-demo:hover {
transform: rotateY(0deg);
}
Through this research of CSS selectors and properties, I learned quite a bit about different ways to style elements. Starting with selectors, I covered the basics like .class which everyone uses, the * universal selector that's great for resets and debugging, :is() which helps clean up repetitive selectors, and :has() that lets you style containers based on what's inside them.
For properties, I explored some interesting ones like backdrop-filter which creates that cool frosted glass effect, scrollbar-color for customizing scrollbars (mainly in Firefox though), cursor which I learned isn't just for looks but actually helps users understand what elements do, and perspective which lets you create 3D effects by playing with the viewpoint distance.