Cheatsheet
CSS cheatsheet
code_wars_official
--> Syntax to write CSS
Selectors :- The element(s) on which the
style should be applied
Property and its value :-This is the actual
style to be applied to the element(s)
--> 3 Ways to write CSS
1. Inline CSS :-
Inline CSS is a method of applying CSS directly
within an HTML element using the style attribute
2. Internal CSS :-
CSS is placed inside the <style> tag within the
<head> section of an HTML document.
3. External CSS :-
CSS is written in a separate file with a .css extension
and linked to the HTML file using the <link> tag.
--> Basic Selectors
Using Element Name :-
Using Class Name :-
Using Id Name :-
Using Attribute Name :-
Select All Elements :-
--> Text
color: Sets the text color.
Example: color: red;
font: A shorthand for setting font style, variant, weight,
size, line height, and family.
Example: font: italic bold 16px/1.5 Arial;
font-family: Defines the font style to apply, using a
prioritized list.
Example: font-family: "Arial", sans-serif;
font-size: Sets the size of the text.
Example: font-size: 20px;
font-weight: Specifies how bold the text is.
Example: font-weight: bold;
letter-spacing: Adjusts the space between letters.
Example: letter-spacing: 2px;
line-height: Sets the space between lines of text.
Example: line-height: 1.5;
text-align: Aligns the text horizontally (left, center, right,
or justify).
Example: text-align: center;
text-decoration: Adds decoration like underline,
overline, or line-through.
Example: text-decoration: underline;
text-indent: Adds space at the beginning of a paragraph.
Example: text-indent: 20px;
--> BackGround:
background-color : orange background-image: url('./img.jpg');
background-size: cover;
background-size: contain;
makes the background image fit
entirely within the element,
keeping its aspect ratio
it Fit The image with its same height
and width on screen and the
remainder of the screen again filled
by same image it occure the
background repeat problem
background-repeat: no-repeat
ensures the background image
appears only once and doesn't Now it Dont repeat the image
repeat again that’s why th rest of the
screen left blank
background-position: right; sets the position of the background
image to the specified side of the element
background-clip: Defines how far the background extends within
an element (e.g., padding-box, border-box, or content-box).
Example: background-clip: padding-box;
background-blend-mode: Sets how the background image blends
with the background color or other images.
Example: background-blend-mode: multiply;
background-composite (Experimental): Defines how background
images are composited with the background color.
Example: background-composite: screen;
--> OverFlow :-
overflow: visible; <- by default it is visible
There is one Div having white border . it is visible
that the height and width of the image is greater
then the height and width of the Div . it called
OverFlow Problem
overflow: hidden;
Hide the element that goes out side of div’s
height of width or any other element
overflow: scroll;
A scrollbar is added to the container, allowing the
user to scroll and view the overflowed content.
--> Display :-
display : block; The element is displayed as a block-level
element, taking up the full width of its container, starting on a
new line (e.g., <div>, <p>).
display : inline; The element is displayed as an inline element,
taking up only as much width as necessary, and does not start on
a new line (e.g., <span>, <a>).
--> Flex :-
flex is a value for the display property in CSS that enables a
flexible layout model called Flexbox. It allows you to create
complex layouts with ease, giving you more control over how
items are arranged within a container, even when their sizes
are dynamic
--> For flex-direction : Row
Justify-content : Value ;
Start Center end
Space-around space-between space-evenly
Justify-item : Value ;
stretch Center start
Space-around space-between space-evenly
align-content : Value ;
Start Center end
Space-around space-between space-evenly
gap: 10px;
Give The gap between row and
column of 10px
display: Enables flexbox layout when set to flex or
inline-flex.
Example: display: flex;
flex-direction: Defines the direction of flex items (row,
row-reverse, column, column-reverse).
Example: flex-direction: row;
justify-content: Aligns flex items horizontally (start,
center, space-between, etc.).
Example: justify-content: space-around;
align-items: Aligns flex items vertically (flex-start,
center, stretch, etc.).
Example: align-items: center;
align-content: Aligns multiple rows of flex items (only
works with wrapping).
Example: align-content: space-between;
flex-wrap: Controls whether items wrap to the next line
or stay in a single line.
Example: flex-wrap: wrap;
--> Border :-
border: 2px solid cyan;
Thickness of
Border
color of
Style of
Border
Border
--> Border-style :-
border-style: dotted;
border-style: dashed;
border-style: double;
border-style: groove;
border-radius: 35px ;
border-top-left-radius: 30px;
border-top-right-radius: 100px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 13px;
--> Padding :-
Padding adds space inside the element but
outside the content
div1
div2
You can also Give saparate padding for each side
like this:-
padding-left: 30px;
padding-right: 100px;
padding-bottom: 5px;
padding-top: 14px;
--> Gradients :-
gradient from left to right
background: linear-gradient(to right, cyan,pink)
to left : eight to left
to top : Bottom to top
to bottom: top to bottom
--> Types Of Gradients :-
background: repeating-linear-
gradient(to right, cyan,pink)
background: radial-
gradient(circle, cyan,pink)
background: repeating-radial-
gradient(circle, cyan,pink)
background: conicgradient(from
45deg, red,yellow,lime,cyan,pink)
--> Z-index:-
.div-blue{
z-index : 1;
.div-green{
}
z-index : 0;
}
.div-blue have higher z-index
then .div-green that’s why blue
shows on top of green
The z-index property in CSS controls the
stacking order of elements, deciding
which element appears in front or behind
another
--> Pseudo-Classes :-
:hover – Styles an element when the mouse hovers
over it.
Example: button:hover { background: blue; }
:focus – Styles an element when it is focused (e.g.,
clicked or tabbed into).
Example: input:focus { outline: none; }
:active – Styles an element when it is being clicked.
Example: a:active { color: red; }
:visited – Styles links that have been visited.
Example: a:visited { color: purple; }
:nth-child(n) – Selects the nth child of its parent.
Example: li:nth-child(2) { color: green; }
:nth-of-type(n) – Selects the nth element of a specific
type.
Example: p:nth-of-type(1) { font-size: 20px; }
:first-child – Selects the first child of a parent.
Example: p:first-child { font-weight: bold; }
:last-child – Selects the last child of a parent.
Example: p:last-child { font-style: italic; }
:only-child – Selects an element that is the only child of
its parent.
Example: div:only-child { background: yellow; }
:empty – Selects elements with no children (including
text).
Example: div:empty { border: 1px solid red; }
--> Pseudo-Classes :-
:not(selector) – Selects elements that do not match the
selector.
Example: div:not(.active) { opacity: 0.5; }
:checked – Styles checked form inputs (checkboxes or
radio buttons).
Example: input:checked { background: green; }
:disabled – Styles disabled form inputs.
Example: button:disabled { opacity: 0.5; }
:enabled – Styles enabled form inputs.
Example: input:enabled { border-color: green; }
:read-only – Selects elements that cannot be edited.
Example: input:read-only { background: gray; }
:read-write – Selects elements that can be edited.
Example: input:read-write { border: 1px solid blue; }
:root – Targets the root element (usually <html>).
Example: :root { --main-color: blue; }
:first-of-type – Selects the first element of a type.
Example: p:first-of-type { color: red; }
:last-of-type – Selects the last element of a type.
Example: p:last-of-type { color: blue; }
:target – Styles an element targeted by a URL fragment.
Example: #section1:target { background: yellow; }
--> Absolute Units (Fixed size, not
responsive)
px (pixels) – Fixed size measured in screen pixels.
Example: width: 100px;
cm (centimeters) – Physical size based on centimeters
(rarely used).
Example: width: 10cm;
mm (millimeters) – Physical size based on millimeters.
Example: width: 50mm;
in (inches) – Physical size based on inches (1 inch =
96px).
Example: width: 1in;
pt (points) – 1 point equals 1/72 of an inch (used in
print).
Example: font-size: 12pt;
pc (picas) – 1 pica equals 12 points (used in print).
Example: font-size: 2pc;
--> Time Units (Used in animations
and transitions)
s (seconds) – Specifies time in seconds.
Example: transition-duration: 2s;
ms (milliseconds) – Specifies time in milliseconds.
Example: transition-duration: 500ms;
Relative Units (Responsive, size
depends on parent or viewport)
% (percent) – Relative to the parent element’s size.
Example: width: 50%;
em – Relative to the font size of the parent element.
Example: font-size: 2em; (2 times the parent’s font size)
rem – Relative to the root element’s font size (html font
size).
Example: font-size: 1.5rem; (1.5 times the root font size)
vw (viewport width) – Percentage of the viewport’s
width.
Example: width: 50vw; (50% of the viewport’s width)
vh (viewport height) – Percentage of the viewport’s
height.
Example: height: 100vh; (100% of the viewport height)
vmin – Percentage of the smaller dimension (width or
height) of the viewport.
Example: font-size: 5vmin;
vmax – Percentage of the larger dimension (width or
height) of the viewport.
Example: width: 10vmax;
ch – Width of the "0" character in the element’s font.
Example: width: 10ch;
ex – Height of the "x" character in the element’s font.
Example: line-height: 2ex;
lh – Relative to the line height of the element.
Example: margin-bottom: 2lh;
--> Transitions :-
Definition: Smoothly animates property changes when
an element is interacted with (like hover or click).
Key Properties:
1. transition-property – Specifies the CSS property to
animate (e.g., background-color, all).
2. transition-duration – Sets how long the transition takes
(e.g., 2s, 500ms).
3. transition-timing-function – Controls the speed curve
(e.g., ease, linear, ease-in-out).
4. transition-delay – Delays the animation start (e.g., 1s).
--> Animations:-
@keyframes – Defines the steps of the animation.
animation-name – Specifies the name of the keyframes.
animation-duration – Sets how long the animation
takes.
animation-timing-function – Defines the speed curve
(e.g., ease, linear).
animation-iteration-count – Number of times the
animation repeats (e.g., infinite).
animation-direction – Direction of the animation (e.g.,
normal, reverse).
--> Transform
rotate(deg) – Rotates the element by a certain degree
(e.g., rotate(45deg)).
scale(x, y) – Scales the element’s size (e.g., scale(1.5) to
enlarge by 1.5 times).
translate(x, y) – Moves the element along the X and Y
axes (e.g., translate(50px, 20px)).
skew(x, y) – Skews the element along X and Y axes (e.g.,
skew(20deg, 10deg)).
rotate 45deg
--> backdrop-filter
It changes the background behind an element to make it
look blurred, brightened, or filtered in other ways, creating
a frosted-glass or translucent effect.
Common Filters:
blur(px) – Blurs the background.
brightness(%) – Adjusts brightness.
grayscale(%) – Converts the background to grayscale.
contrast(%) – Adjusts contrast.
--> Media Queries
They help you apply different styles depending on the
screen size (like mobile, tablet, or desktop) or other
conditions (like screen orientation or resolution)
--> Cursor
auto – Default behavior based on the browser or
element type.
Example: cursor: auto;
default – The standard pointer (arrow).
Example: cursor: default;
pointer – A hand icon, typically used for links or
clickable elements.
Example: cursor: pointer;
text – A text selection cursor (I-beam).
Example: cursor: text;
wait – An hourglass or spinning circle, indicating the
user needs to wait.
Example: cursor: wait;
not-allowed – A circle with a line, indicating the action
is not allowed.
Example: cursor: not-allowed;
crosshair – A crosshair icon.
Example: cursor: crosshair;
move – A move icon (four arrows), indicating the
element can be moved.
Example: cursor: move;
help – A question mark or a similar icon for help
information.
Example: cursor: help;
progress – Indicates loading, but the user can still
interact with the page.
Example: cursor: progress;
--> Grid
CSS Grid is a layout system that divides a container into
rows and columns, allowing you to easily arrange items
into a structured grid
grid-template-columns: auto auto auto; creates a grid with
three columns, where each column's width adjusts
automatically based on its content size
--> Grid
grid-template-columns – Defines the columns in the
grid.
Example: grid-template-columns: 1fr 2fr 1fr; (Three
columns with relative widths.)
grid-template-rows – Defines the rows in the grid.
Example: grid-template-rows: 100px auto 100px; (Three
rows with specific heights.)
gap – Sets the space between grid items (shortcut for
row-gap and column-gap).
Example: gap: 20px;
justify-items – Aligns grid items horizontally.
Example: justify-items: center;
align-items – Aligns grid items vertically.
Example: align-items: stretch;
grid-template-areas – Names grid areas for layout.
--> Key Properties for Grid Items
grid-column – Specifies the start and end of an item in
columns.
Example: grid-column: 1 / 3; (Spans from column 1 to 3.)
grid-row – Specifies the start and end of an item in
rows.
Example: grid-row: 2 / 4; (Spans from row 2 to 4.)
grid-area – Places an item in a named grid area.
Example: grid-area: header;
--> All CSS Properties In Short
Background Properties
background: Shorthand for all background-related
properties.
background-image: Sets an image as the background.
background-position: Positions the background image.
background-size: Specifies the size of the background
image.
background-repeat: Defines if the background image
repeats.
background-attachment: Fixes or scrolls the
background with the page.
background-origin: Sets the starting area for the
background.
background-clip: Determines how far the background
extends within an element.
background-color: Sets the background color.
Border Properties
border: Shorthand for all border-related properties.
border-width: Defines the thickness of the border.
border-style: Specifies the style of the border (solid,
dotted, etc.).
border-color: Sets the color of the border.
border-top: Specifies the border at the top.
border-right: Specifies the border at the right.
border-bottom: Specifies the border at the bottom.
border-left: Specifies the border at the left.
border-radius: Rounds the corners of the border.
border-image: Uses an image as the border.
border-collapse: Sets whether table borders are
collapsed or separated.
Box Model Properties
margin: Adds space outside the element.
padding: Adds space inside the element, around
content.
width: Defines the width of an element.
height: Defines the height of an element.
max-width: Sets the maximum width of an element.
max-height: Sets the maximum height of an element.
min-width: Sets the minimum width of an element.
min-height: Sets the minimum height of an element.
overflow: Controls how content is handled when it
overflows.
box-sizing: Determines if padding and border are
included in width/height.
Display & Positioning
display: Specifies how an element is displayed (block,
inline, etc.).
position: Sets how an element is positioned (static,
relative, etc.).
top: Specifies the top position of an element.
right: Specifies the right position of an element.
bottom: Specifies the bottom position of an element.
left: Specifies the left position of an element.
z-index: Controls the stack order of elements.
float: Positions elements to the left or right.
clear: Prevents elements from wrapping around floated
elements.
Animation & Transition Properties
animation: Shorthand for all animation properties.
animation-name: Specifies the name of the keyframes.
animation-duration: Sets how long the animation lasts.
animation-timing-function: Defines the speed curve of
the animation.
animation-delay: Adds a delay before the animation
starts.
animation-iteration-count: Specifies how many times
the animation repeats.
animation-direction: Sets the direction of the
animation.
transition: Shorthand for all transition properties.
transition-property: Specifies which property to
animate.
transition-duration: Sets how long the transition lasts.
transition-timing-function: Defines the speed curve of
the transition.
transition-delay: Adds a delay before the transition
starts.
Thank You 💚
Your likes, comments, and shares mean
the world to me—they inspire me to
create more amazing content for you!
❤️🥺
Dont’ Forget To Follow Us
CSS cheatsheet BY :- code_wars_official
