Scribd
Upload
6 views35 pages

CSS Sheets

This document is a comprehensive CSS cheatsheet that outlines various CSS concepts, including selectors, properties, and methods for writing CSS (inline, internal, external). It covers essential topics such as text styling, background properties, display types, flexbox, grid layout, transitions, animations, and media queries, along with examples for each. Additionally, it details pseudo-classes, units of measurement, and common CSS properties to aid in web design and development.

Uploaded by

rajsince77
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views35 pages

CSS Sheets

This document is a comprehensive CSS cheatsheet that outlines various CSS concepts, including selectors, properties, and methods for writing CSS (inline, internal, external). It covers essential topics such as text styling, background properties, display types, flexbox, grid layout, transitions, animations, and media queries, along with examples for each. Additionally, it details pseudo-classes, units of measurement, and common CSS properties to aid in web design and development.

Uploaded by

rajsince77
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 35

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

You might also like