0% found this document useful (0 votes)
54 views10 pages

CSS

Uploaded by

katarichallenge
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
0% found this document useful (0 votes)
54 views10 pages

CSS

Uploaded by

katarichallenge
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
n‘ Child Selectors in CSS first-child ow momo me last-child Ben wm: nth-child(2) ‘ EE rl nth-last-child(2) @ @ @ @ rs) " nth-child(odd) 5 z B nth-child(even) i A Seo | wre ruries m2 e o nth-child(3n-1) i me B na eeren eee) — ; » & nth-child(4n) Bn: “- CSS tip: easy layout This approach utilizes CSS Grid and the fr unit (fractional unit) to create a two-column layout with a fixed-width sidebar and a flexible main content area that adjusts to different screen sizes. AreCihe h taf Chey) ESL grid-template-columns: minmax(200px, 25%) 1fr; i sidebar alameda 200px Print Friendly CSS Learn how to create CSS stylesheets optimized for printing, ensuring a seamless transition from digital to paper. Co CM Tatra Pera color: #000; ST cS eo eet Camere ae racy display: none; -print-only { m Cet ae ea era et Show elements with B ol lala coe max-width: 100%; k— Lee bee To Ensure images Fit within EEN eane tas the printable area color: #551a8b; ¢_ te a od animations. animation: pulse 1s ease-in-out stated ee -le-he td ip CCM UCC Tae 0% { outline-offset: 5px; } 50% { outline-offset: 10px; } 100% { outline-offset: 5px; } ip 3 overscroll-behaviour Control dite DIOWSETS behavior when a | hi yond daries of a scrollable eeraitincne ig ailaws ata to define how the browser should handle the overscrolling. Teter overscroll-behavior: contain; Waa ao axel gure) a) aac scrolling stops here va when its set on auto the page starts crotatellar) eee aia Maat laa 3 color-scheme in This property lets you specify whether an element prefers to be displayed in light or dark mode, aligning with the user's system preferences. [ E oataaca define styles 7 Ag a Prentea ane and dark modes uy @media (prefers-color-scheme: light) { Pee ea ere any Colts larme (CCD + Ma @media (prefers-color-scheme: dark) { CBs) ator) { background-color: #222; rl re aaa Ly + Fr] Loading Animation Hla) The property sets the color and thickness of the loader, and makes the foilceullola paler Te (Tam border: 5px solid #f3f3f3; border-top: 5px solid #3498db; J border-radius: 50%; width: 30px; height: 30px; animation: spin 2s linear infinite; i Z @keyframes spin { 0% { transform: rotate(Odeg); } 100% { transform: rotate(360deg); } causing rotation A Custom Scrollbar in CSS Create a custom scrollbar with CSS to resonate it with your brand! A finishing touch. aren Lies

You might also like