0% found this document useful (0 votes)
54 views10 pagesCSS
Uploaded by
katarichallengeCopyright
© © 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 pagesCSS
Uploaded by
katarichallengeCopyright
© © 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
