Definition: Applies graphical effects like blur, brightness, contrast, grayscale, and more to
elements. Filters can be combined for complex effects and work on images, backgrounds, and all content. This
is GPU-accelerated in modern browsers for better performance than pixel-manipulation alternatives. Perfect
for creating image effects without editing source files. Can be animated in transitions and keyframes. Default Value: none Values: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() |
opacity() | saturate() | sepia() | url() | and combinations
Definition: Clips element content to a specific shape. Supported shapes include circle, ellipse,
polygon, inset, and path. Removes (hides) any content outside the defined shape boundary. Works on
images, text, background, and all elements. Useful for creative designs, image masks, and decorative
shapes without needing image files. Animatable between different shapes. Default Value: none Values: circle() | ellipse() | polygon() | inset() | path() | url()
Definition: Controls how media content (images, videos) fills its container while maintaining
aspect ratio. Determines whether content should be stretched, cropped, or padded. Essential for
responsive images that need consistent container sizes without distortion. Works with `object-position`
to customize alignment. Different values suit different use cases: cover for backgrounds, contain for
full visibility, fill for stretching. Default Value: fill Values: fill | contain | cover | scale-down | none
✦ object-fit: fill (Default)
Stretches image to fill container, may distort aspect ratio
Definition: Creates a line outside the border that doesn't take up space in the layout. Unlike
border, outline doesn't affect element dimensions or positioning. Used primarily for focus states
(accessibility), decorative borders, and highlighting. Outlines never round with border-radius. Can be
customized with width, style, color, and offset properties. Default Value: none Values: outline-width outline-style outline-color | outline-offset: length
<div>
<ul style="list-style-type: square;">
<li> Item One </li>
<li> Item Two </li>
</div>
👶 Styling Children with CSS
You can target specific child elements using CSS selectors like :first-child or
:nth-child(). This is very useful for styling lists or grids without adding classes to
every item.
Example
This is the first item (red and bold)
This is the second item (blue)
This is the third item (blue)
<style>
ul li {
color: blue; /* Styles all list items as blue */
}
ul li:first-child {
color: red; /* Overrides the first list item to be red */
font-weight: bold;
}
</style>
<ul>
<li>This is the first item (red and bold)</li>
<li>This is the second item (blue)</li>
<li>This is the third item (blue)</li>
</ul>
@import – Import CSS
Definition: The @import rule is used to import style rules from other style sheets.
This allows you to break down your CSS into smaller, more manageable files. It must be placed at the
very top of the CSS file.