CSS - Cheatsheet
CSS Cheat Sheet
CSSstands forCascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.
What is CSS Cheat Sheet?
CSS cheat sheet is a collection of all the CSS properties and selectors that can be used to design any website. In this sheet we will provide mostly used CSS properties and related code snippets of below listed topics.
Table of Content
CSS SelectorsFont PropertiesText PropertiesPadding PropertiesMargin PropertiesBackground PropertiesShadow PropertiesBorder PropertiesCSS FlexboxCSS GridGradientClassification PropertiesCSS FunctionsMedia Queries
Basics of CSS
CSS specify how an HTML element should be displayed on the web page. If you think of the human body as a web page then CSS is styling part of the body. Like color of the eyes, size of the nose, skin tone, etc.
Syntax
selector { property: value; }Ways to use CSS
There are three ways to use CSS into your HTML document.
- Inline CSS:Inline CSS are directly applied on the HTML elements usingstyleattribute.
- Internal CSS:Internal CSS are defined in the HTML head section inside of
<style>tag to let the browser know where to look for the CSS. - External CSS:External CSS are defined in a separate file that contains only CSS properties, this is the recommended way to use CSS when you are working on projects.
CSS Selectors
CSS Selectorsare used to select the HTML elements you want to style on a web page. They allow you to target specific elements or groups of elements to apply styles like colors, fonts, margins, and more.
Universal Selectors
It is used to select all elements of the HTML.
* {
color: blue;
}Element Selectors
This is used to select particular HTML elements like p, span, header, etc.
div {
border: 5px inset gold;
}Class Selectors
This is used to select class defined by your own.
.myClass {
background-color: #04af2f;
}Id Selectors
This is used to select id defined by your own.
.myId {
background-color: #04af2f;
}Attribute Selectors
This is used to select particular HTML attributes.
a[href] {
font-size: 2em;
}Group Selectors
This is used to select multiple elements and style them together.
h3,h4 {
text-align: center;
}Pseudo-element Selectors
This is used to select Pseudo-element.
p::before {
content: "Note: ";
font-weight: bold;
}Pseudo-class Selectors
This is used to select Pseudo-class.
a:hover {
background-color: peachpuff;
}Descendant Selectors
This is used in css to style all the tags which are child of a particular specified tag.
div p {
color: blue;
}Child Selectors
This is used to select all the direct child of a particular element.
div>p {
color: blue;
}Adjacent Sibling Selectors
This is used to select an element that is immediately preceded by a specified element.
div + p {
color: blue;
}General Sibling Selectors
This is used to select all the element that is preceded by a specified element.
div~p {
color: blue;
}Font Properties
CSS Fontis a set of text characters with a consistent design and style. It includes the shape, size, weight, and other attributes of the characters in a typeface.
font
Shorthand font property.
p {
font: oblique small-caps
bold 20px Arial, sans-serif;
}font-family
CSSfont-familyspecifies the font family or list of font families to be used for text.
#para1 {
font-family: verdana, georgia;
}font-feature-settings
CSSfont-feature-settingscontrols advanced typographic features in OpenType fonts.
p {
font-feature-settings: 'smcp', off;
}font-kerning
CSSfont-kerningdetermines the way specific pairs of letters are spaced.
#nokern {
font-kerning: none;
}font-language-override
CSSfont-language-overrideOverrides the typeface behavior for a particular language.
.text {
font-language-override: "DAN";
}font-optical-sizing
CSSfont-optical-sizingsets whether rendering of text should be optimized to view at different sizes.
.myDiv {
font-optical-sizing: auto;
}font-palette
CSSfont-paletteallows the usage of one of the various palettes that are contained in a font.
font-palette: normal | light | dark | <palette-name> | <integer>;font-size
CSSfont-sizesets the size of the text.
font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | percentage | initial | inherit;font-size-adjust
CSSfont-size-adjustspecifies a font’s aspect value (numeric ratio) that controls its x-height.
font-size-adjust: number|none|initial|inherit;font-stretch
CSSfont-stretchadjusts the width of the text (condensed or expanded).
font-stretch: ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | percentage | initial | inherit;font-style
CSSfont-stylespecifies the style of the text, such as “italic”, “oblique”, or “normal”.
font-style: normal | italic | oblique | initial | inherit;font-weight
CSSfont-weightsets the thickness or boldness of the text.
font-weight: normal | bold | bolder | lighter | number | initial | inherit;font-synthesis
CSSfont-synthesisis a shorthand font-synthesis property.
font-synthesis: none | weight | style | small-caps | position | initial | inherit;font-synthesis-small-caps
CSSfont-synthesis-small-capsdetermines whether or not the browser should synthesize the small-caps typeface, that is missing in a font-family.
font-synthesis-small-caps: auto | none | initial | inherit;font-synthesis-style
CSSfont-synthesis-styledetermines whether or not the browser should synthesize the oblique typeface, that is missing in a font-family.
font-synthesis-style: auto | none | initial | inherit;font-synthesis-weight
CSSfont-synthesis-weightdetermines whether or not the browser should synthesize the bold typeface, that is missing in a font-family.
font-synthesis-weight: auto | none | initial | inherit;font-variant
CSSfont-variantcontrols the use of small caps for lowercase letters in the text.
font-variant: normal|small-caps|initial;font-variant-alternates
CSSfont-variant-alternatescontrols the usage of alternate glyphs.
font-variant-alternates: normal | historical-forms | stylistic() | styleset() | character-variant() | swash() | ornaments() | annotation();font-variant-caps
CSSfont-variant-capscontrols the usage of alternate glyphs for capital letters.
font-variant-caps: normal|small-caps|all-small-caps|petite-caps|all-petite-caps|unicase|titling-caps|initial|inherit|unset;font-variant-east-asian
CSSfont-variant-east-asiancontrols the usage of alternate glyphs for East-Asian scripts like Chinese and Japanese.
font-variant-east-asian: normal | ruby;font-variant-ligatures
CSSfont-variant-ligaturescontrols the textual content of element as to which ligature or contextual form should be used.
font-variant-ligatures: normal | none | <common-lig-values>" | <discretionary-lig-values> | <historical-lig-values> | <contextual-alt-values>;font-variant-numeric
CSSfont-variant-numericcontrols the usage of alternate glyphs for numbers, fractions and ordinal markers.
font-variant-numeric: normal | ordinal | slashed-zero | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions;font-variant-position
CSSfont-variant-positioncontrols the usage of alternate, smaller glyphs, positioned as superscript or subscript.
font-variant-position: normal | sub | super;font-variation-settings
CSSfont-variation-settingsspecifies the four-letter axis names of variable font characteristics.
font-variation-settings: normal | <string><integer>;Text Properties
Atextrefers to a piece of written or printed information in the form of words or characters that can be read and understood. Texts can include content such as books, articles, emails, messages, web pages, etc.
Styling a text involves modifying its appearance to make it more visually appealing or to convey a particular message. This chapter demonstrates how to manipulate text using CSS properties.
color
CSScolorsets the color of an element.
color: color | initial | inherit;direction
CSSdirectiondefines direction of the flow of an element’s content.
direction: ltr | rtl | initial | inherit;line-height
CSSline-heightsets the distance between adjacent text baselines.
line-height: normal | length | number | percentage | initial | inherit;text-align
CSStext-alignsets the text alignment style for an element.
text-align: left | right | center | justify | initial | inherit;text-decoration
CSStext-decorationdefines any decoration for the text; values may be combined.
text-decoration: none | underline | overline | line-through | blink | initial | inherit;text-indent
CSStext-indentdefines the indentation of the first line of text in an element; default is 0.
text-indent: length | percentage | initial | inherit;text-shadow
CSStext-shadowcreates text drop shadows of varying colors and offsets.
text-shadow: <h-shadow><v-shadow> blur-radius color | none | initial | inherit;text-transform
CSStext-transformtransforms the text in the element accordingly.
text-transform: none | capitalize | uppercase | lowercase | full-width | full-width-kana | unset | initial | inherit;vertical-align
CSSvertical-alignsets the vertical positioning of an element.
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | length | percentage | initial | inherit;white-space
CSSwhite-spacedefines how whitespace within an element is handled.
white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces | initial | inherit;word-spacing
CSSword-spacinginserts additional space between words.
word-spacing: length | normal | initial | inherit;Padding Properties
CSSpaddingdefines the space between an element’s content and its border.
padding
CSSpaddingis a shorthand for all padding properties. We can set padding for all four sides using padding shorthand property.
padding: padding-top padding-right padding-bottom padding-left | auto | initial | inherit;padding-top
CSSPadding-Topsets the width of the padding on the top of an element.
padding-top: length | percentage | auto;padding-right
CSSPadding-Rightsets the width of the padding on the right of an element.
padding-right: length | percentage | auto;padding-bottom
CSSPadding-Bottomsets the width of the padding on the bottom of an element.
padding-bottom: length | percentage | auto;padding-left
CSSPadding-Leftsets the width of the padding on the left of an element.
padding-left: length | percentage | auto;Margin Properties
CSSmarginproperty is used to create space around an element, outside of its border.
margin
CSSMarginproperty is a shorthand property for defining values of properties: margin-top, margin-right, margin-bottom and margin-left in one single statement
margin: margin-top margin-right margin-bottom margin-left | auto | initial | inherit;Margin-Top
CSSmargin-topsets the space outside the element’s top border.
margin-top: length | percentage | auto;Margin-Right
CSSmargin-rightsets the space outside the element’s right border.
margin-right: length | percentage | auto;Margin-Bottom
CSSmargin-bottomsets the space outside the element’s bottom border.
margin-bottom: length | percentage | auto;Margin-Left
CSSmargin-leftsets the space outside the element’s left border.
margin-left: length | percentage | auto;Background Properties
CSS backgroundproperties are used to manipulate the background of elements. It can be used to apply a single background image or multiple background images, as well as defining the background color, size, position, repeat behavior, and other related properties.
background
CSSbackgroundis shorthand for background-related properties.
background: color | image | position | size | repeat | attachment | origin | clip | initial | inherit;background-attachment
CSSbackground-attachmentspecifies the position of the background relative to the viewport, either fixed or scrollable.
background-attachment: scroll | fixed | local | initial | inherit;background-clip
CSSbackground-clipcontrols how far a background image extends beyond the element’s padding or content box.
background-clip: border-box | padding-box | content-box | initial | inherit;background-color
CSSbackground-colorsets the background color of an element.
background-color: color | transparent | initial | inherit;background-image
CSSbackground-imagesets one or more background image(s) on an element.
background-image: url(imageURL) | none | initial | inherit;background-origin
CSSbackground-originsets the origin of the background.
background-origin: border-box | padding-box | content-box | initial | inherit;background-position
CSSbackground-positionsets the initial position of each image in a background.
background-position: value | initial | inherit;Note:The values are: <left top, left center, left bottom, right top, right center, right bottom, center top, center center, and center bottom>, <x% y%>, and <xpos ypos>.
background-position-x
CSSbackground-position-xsets the initial horizontal position of each image in a background.
background-position-x: left | center | right | length | percentage | initial | inherit;background-position-y
CSSbackground-position-ysets the initial vertical position of each image in a background.
background-position-y: top | center | bottom | length | percentage | initial | inherit;background-repeat
CSSbackground-repeatcontrols the repetition of an image in the background.
background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit;background-size
CSSbackground-sizecontrols the size of the background image.
background-size: auto | length | percentage | cover | contain | initial | inherit;background-blend-mode
CSSbackground-blend-modedetermines how an element’s background images blend with each other.
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | luminosity | color | initial | inherit;Shadow Properties
There are two types of shadow properties existed in CSS as mentioned and described below.
- Text Shadow:This is used to add a shadow effect to text. It allows you to specify the color, offset, blur-radius, and spread-radius of the shadow.
- Box Shadow:This is used to add shadow effect around an element. One or more shadow effects can be added, separated by commas.
text-shadow
CSStext-shadowis used to add a shadow effect to text.
text-shadow: <h-shadow><v-shadow> blur-radius color | none | initial | inherit;box-shadow
CSSbox-shadowis used to add a shadow effect around an element.
box-shadow: none | h-offset v-offset blur spread color | inset | initial | inherit;Border Properties
Borderproperties are used to create a border around an element, such as a div, image, or text. It allows you to customize the appearance of the border, including its color, width, and style.
border
CSSbordersets all the border properties in one declaration.
border: border-width border-style border-color | initial | inherit;border-bottom
CSSborder-bottomsets the bottom border of an element.
border-bottom: border-width border-style border-color | initial | inherit;border-bottom-color
CSSborder-bottom-colorsets the color of the bottom border of an element.
border-bottom-color: color | transparent | initial | inherit;border-bottom-width
CSSborder-bottom-widthsets the width of the bottom border of an element.
border-bottom-width: length | thin | medium | thick | initial | inherit;border-bottom-style
CSSborder-bottom-stylesets the style of the bottom border of an element.
border-bottom-style: none | solid | dotted | dashed | double | groove | ridge | inset | outset | initial | inherit;border-color
CSSborder-colorsets the color of the border of an element.
border-color: color | transparent | initial | inherit;border-left
CSSborder-leftsets the left border of an element.
border-left: border-width border-style border-color | initial | inherit;border-left-color
CSSborder-left-colorsets the color of the left border of an element.
border-left-color: color | transparent | initial | inherit;border-left-width
CSSborder-left-widthsets the width of the left border of an element.
border-left-width: length | thin | medium | thick | initial | inherit;border-left-style
CSSborder-left-stylesets the style of the left border of an element.
border-left-style: none | solid | dotted | dashed | double | groove | ridge | inset | outset | initial | inherit;border-right
CSSborder-rightsets the right border of an element.
border-right: border-width border-style border-color | initial | inherit;border-right-color
CSSborder-right-colorsets the color of the right border of an element.
border-right-color: color | initial | inherit;border-right-width
CSSborder-right-widthsets the width of the right border of an element.
border-right-width: length | thin | medium | thick | initial | inherit;border-right-style
CSSborder-right-stylesets the style of the right border of an element.
border-right-style: none | solid | dotted | dashed | double | groove | ridge | inset | outset | initial | inherit;border-style
CSSborder-stylesets the style of the border of an element.
border-style: none | solid | dotted | dashed | double | groove | ridge | inset | outset | initial | inherit;border-top
CSSborder-topsets the top border of an element.
border-top: border-width border-style border-color | initial | inherit;border-top-color
CSSborder-top-colorsets the color of the top border of an element.
border-top-color: color | initial | inherit;border-top-width
CSSborder-top-widthsets the width of the top border of an element.
border-top-width: length | thin | medium | thick | initial | inherit;border-top-style
CSSborder-top-stylesets the style of the top border of an element.
border-top-style: none | solid | dotted | dashed | double | groove | ridge | inset | outset | initial | inherit;border-width
CSSborder-widthsets the width of the border of an element.
border-width: length | thin | medium | thick | initial | inherit;border-image
CSSborder-imagesets the border image for an element.
border-image: source slice width outset repeat | initial | inherit;border-image-outset
CSSborder-image-outsetsets the image outset (how far the border image area extends beyond the border box).
border-image-outset: length | initial | inherit;border-image-repeat
CSSborder-image-repeatdefines whether the border image should be repeated, rounded, spaced, or stretched.
border-image-repeat: stretch | repeat | round | space | initial | inherit;border-image-source
CSSborder-image-sourcesets the source/path of an image to be used as a border for an element.
border-image-source: image | none | initial | inherit;border-image-slice
CSSborder-image-slicedefines how to slice an image for use in a border.
border-image-slice: number | percentage | fill | initial | inherit;border-image-width
CSSborder-image-widthsets the width of the image to be used as a border.
border-image-width: length |number | percentage | auto | initial | inherit;CSS Flexbox
Flexboxorganizes elements within a container along a single dimension, which can be either horizontally or vertically aligned.
flex-direction
CSSflex-directionsets the flex direction of the flex items.
flex-direction: row | row-reverse | column | column-reverse | initial | inherit;flex-wrap
CSSflex-wrapsets whether flex items should wrap onto the next line.
flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;justify-content
CSSjustify-contentsets the alignment of flex items along the main axis.
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | initial | inherit;align-items
CSSalign-itemssets the alignment of flex items along the cross axis.
align-items: normal | stretch | flex-start | flex-end | center | baseline | initial | inherit;align-content
CSSalign-contentsets the alignment and spacing of flex lines within the flex container.
align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly | initial | inherit;flex-flow
CSSflex-flowsets both the flex-direction and flex-wrap properties.
flex-flow: flex-direction flex-wrap | initial | inherit;flex-grow
CSSflex-growsets a flex item to grow within a flex container.
flex-grow: number | initial | inherit;flex-shrink
CSSflex-shrinksets a flex item to shrink in size to fit the available space.
flex-shrink: number | initial | inherit;flex-basis
CSSflex-basissets the initial size of a flex item.
flex-basis: number auto | initial | inherit;flex
CSSflexis a shorthand property that combines flex-grow, flex-shrink, and flex-basis.
flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;align-self
CSSalign-selfsets the alignment of a specific flex item along the cross-axis.
align-self: auto | flex-start | flex-end | center | baseline | stretch | initial | inherit;order
CSSorderis used to specify the order in which flex items appear inside their flex container.
order: number | initial | inherit;CSS Grid
CSS Gridis a convenient and concise way to define the grid layout of an element.
display
CSSdisplaydefines whether an element is a grid container or an inline grid container.
display: grid | inline-grid | initial | inherit;gap
CSSgapdefines the gap between rows and columns.
gap: row-gap column-gap | initial | inherit;grid-area
CSSgrid-areadefines the location and size of the grid item within a grid layout.
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | item name | initial | inherit;grid-column
CSSgrid-columncontrols the placement of a grid item within the grid container in the column direction.
grid-column: auto | grid-column-start | grid-column-end | initial | inherit;grid-row
CSSgrid-rowcontrols the placement of a grid item within the grid container in the row direction.
grid-row: auto | grid-row-start / grid-row-end | initial | inherit;grid-template
CSSgrid-templatespecifies the grid columns, grid rows, and grid areas.
grid-template: none | grid-template-rows / grid-template-columns | grid-template-areas | initial | inherit;grid-auto-columns
CSSgrid-auto-columnsdetermines the size of automatically generated grid column tracks or a pattern of such tracks.
grid-auto-columns: auto | length | percentage | max-content | min-content | minmax(min,max) | fit-content() | initial | inherit;grid-auto-rows
CSSgrid-auto-rowsdetermines the size of automatically generated grid row tracks or a pattern of such tracks.
grid-auto-rows: auto | length | percentage | max-content | min-content | minmax(min, max)| fit-content() | initial | inherit;grid-auto-flow
CSSgrid-auto-flowspecifies the arrangement of the grid items within the grid.
grid-auto-flow: row | column | dense | row dense | column dense | initial | inherit;Gradient
CSS Gradientsallows to design custom colors for HTML elements by creating a smooth transition between two or more colors.
CSS defines three types of gradients.
Linear Gradient
Goes from left to right, up to down or diagonally.
linear-gradient()
/* to right, black, yellow, green */Radial Gradient
Start from center to edges.
radial-gradient()
/* circle, black, yellow, green */Conic Gradient
Revolve around a center point.
conic-gradient()
/* black, yellow, green */Classification Properties
CSS classificationproperties allow you to control how to display an element, set where an image will appear in another element, position an element relative to its normal position, position an element using an absolute value, and how to control the visibility of an element.
clear
CSSclearsets which margins of an element must not be adjacent to a floating element; the element is moved down until that margin is clear.
clear: none | left | right | both | inline-start | inline-end | initial | inherit;cursor
CSScursordefines the shape of the cursor.
cursor: auto | default | pointer | text | wait | crosshair | move | not-allowed | grab;Code Example:
display
CSSdisplaycontrols how an element is displayed.
display: none | block | inline | flex | grid | inline-block | inline-flex | inline-grid | table | inline-table | contents;float
CSSfloatdetermines if an element floats to the left or right, allowing text to wrap around it or be displayed inline.
float: none | left | right | initial | inherit;position
CSSpositionsets the positioning model for an element.
position: static | relative | absolute | fixed | sticky;visibility
CSSvisibilitydetermines if an element is visible in the document.
visibility: visible | hidden | collapse | initial | inherit;CSS Functions
CSS functions can be used to add style and formatting to your website or application and can greatly improve the user experience.
Follow the below list of functions types to know each one of them.
Transform Functions
CSSTransform Functionsdefine how an element is visually transformed.
transform: <transform-function> <transform-function>*;Commontransform functionsused in CSS are:rotate(),rotate3d(),scale(),scale3d(),skew(),translate(), andtranslate3d().
Math Functions
CSSMath Functionsperform mathematical operations within CSS properties.
property: calc(expression);Commontransform functionsused in CSS are:calc(),max(),min(),round()andtrigonometric functions.
Filter Functions
CSSFilter Functionsapply graphical effects like blur, brightness, and contrast.
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();Color Functions
CSSColor Functionsdefine colors in multiple formats.
color(colorspace c1 c2 c3[ / A])Image Functions
CSSImage Functionsgenerate images or gradients.
<image> = <url> | <image-list> | <element-reference> | <gradient></gradient>Counter Functions
CSSCounter Functionswork with the content property for automatic numbering.
content: counter(name, style);Shape Functions
CSSShape Functionsdefine clipping and shape effects.
clip-path: circle(radius) | ellipse(rx ry) | polygon(x1 y1, x2 y2, ...);Reference Functions
CSSReference Functionsallow referencing values defined elsewhere.
property: var(--custom-property, fallback-value);Grid Functions
CSS Grid Functions define grid layouts.
grid-template-columns: none | auto | max-content | min-content | minmax() | length | percentage | fit-content() | repeat() | subgrid | initial | inherit;Font Functions
CSSFont Functionscontrol font rendering dynamically.
font-variant-alternates: normal | stylistic(<feature>) || historical-forms || styleset(<feature>) || character-variant(<feature>) || swash(<feature>) || ornaments(<feature>) || annotation(<feature>);Easing Functions
CSSEasing Functionscontrol animation timing.
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2);Note:To know in details about each function please check the articleCSS Functions.
Media Queries
Media Queriesallow to apply CSS styles to a webpage based on the characteristics of the device or browser viewing the page. With media queries, we can create designs that adapt to different screen sizes, resolutions, and orientations.
- CSS Media Types
- CSS Media Features
CSS Media Types
all:Suitable for all devices.
print:Intended for paged, opaque material and for documents viewed on screen in print preview mode. Please consult the section on paged media.
@media print {
selector {
css-property: value;
}
}screen:Intended primarily for color computer screens.
@media screen {
selector {
css-property: value;
}
}CSS Media Features
orientation:To check whether the device’s screen or page is in a portrait or landscape orientation.
@media (orientation: portrait) {
div {
background: lightgreen;
}
}aspect-ratio:To check the aspect ratio of the viewport or the rendering surface.
@media (max-aspect-ratio: 3/2) {
div {
background:violet;
}
}display-mode:To check the display mode of a web-application.
@media (display-mode: fullscreen) {
body {
background-color: violet;
color: white;
}
}overflow-block:To determine how the user device handles content that goes beyond the initial container’s boundaries in a vertical direction.
@media (overflow-block: paged) {
p {
color: green;
}
}overflow-inline:To determine how the user device handles content that goes beyond the initial container’s boundaries in a horizontal direction.
@media (overflow-inline: scroll) {
p {
color: blue;
}
}height:To determine the height of the viewport.
@media (height: 150px) {
div {
background:violet;
}
}width:To determine the width of the viewport.
@media (width: 200px) {
div {
background: pink;
}
}Conclusion
Following this Cheat Sheet will keeps you revised on CSS, if your are new to CSS then we will recommend you to follow our freeCSS Tutorial.
You can check our other Cheat SheetsHTML Cheat SheetC Language Cheat Sheet
CSS Selectors
<strong>CSS Selectors</strong> are used to select the HTML elements you want to style on a web page. They allow you to target specific elements or groups of elements to apply styles like colors, fonts, margins, and more.
There are 12 types of CSS Selectors are mentioned below.
<div class="table-wrapper">
<table class="table table-bordered">
<tr>
<th style="text-align:center;">Property</th>
<th style="text-align:center;">Description</th>
<th style="text-align:center; width: 110px;">Snippet</th>
</tr>
<tr>
<td>Universal Selectors</td>
<td>It is used to select all elements of the HTML</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>Element Selectors</td>
<td>This is used to select particular HTML elements like p, span, header, etc.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>Class Selectors</td>
<td>This is used to select class defined by your own.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>Id Selectors</td>
<td>This is used to select id defined by your own.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>Attribute Selectors</td>
<td>This is used to select particular HTML attributes.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>Group Selectors</td>
<td>This is used to select multiple elements and style them together.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>Pseudo-element Selectors</td>
<td>This is used to select Pseudo-element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>Pseudo-class Selectors</td>
<td>This is used to select Pseudo-class.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>Descendant Selectors</td>
<td>This is used in css to style all the tags which are child of a particular specified tag. </td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>Child Selectors</td>
<td>This is used to select all the direct child of a particular element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>Adjacent Sibling Selectors</td>
<td>This is used to select an element that is immediately preceded by a specified element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>General Sibling Selectors</td>
<td>This is used to select all the element that is preceded by a specified element.</td>
<td>``<div>Try It</div>``</td>
</tr>
</table>
</div>
CSS Pseudo Classes and Elements
There are pseudo classes and elements both have the individual purposes to use, as described below.
CSS Pseudo-classes
<strong>Pseudo-classes</strong> in CSS are used to select and style elements based on their state or position within the document tree, without the need for adding extra classes or IDs to the HTML elements.
Example of CSS Pseudo-classes
<pre class="demo-code language-html" data-lang="html"><!DOCTYPE html>
<html>
<head>
<style>
::backdrop {
background-image: url(border.png);
}
:modal {
border: 8px inset blue;
background-color: lightpink;
box-shadow: 3px 3px 10px rgba(0 0 0 / 0.5);
}
</style>
</head>
<body>
<dialog>
<button autofocus>Close</button>
<p>The modal dialog has a beautiful backdrop!</p>
<p>And see my styling using :modal pseudo-class</p>
</dialog>
<button>Open the dialog</button>
<script>
const dialog = document.querySelector(“dialog”);
const showButton = document.querySelector(“dialog + button”);
const closeButton = document.querySelector(“dialog button”);
// “Show the dialog” button opens the dialog modally
showButton.addEventListener(“click”, () => {
dialog.showModal();
});
// “Close” button closes the dialog
closeButton.addEventListener(“click”, () => {
dialog.close();
});
</script>
</body>
</html>
</pre>
CSS Pseudo-element
<strong>Pseudo-element</strong> is used to style a specific part of an element. Pseudo-elements are not part of the DOM (Document Object Model) and do not exist in the HTML markup, but they can be targeted and styled using CSS.
Example of CSS Pseudo-classes
<pre class="demo-code language-html" data-lang="html"><html>
<head>
<style>
p::first-letter {
font-size: 2em;
color: green;
}
</style>
</head>
<body>
<p>
Tutorials point
</p>
</body>
</html>
</pre>
Font Properties
<strong>CSS Font</strong> is a set of text characters with a consistent design and style. It includes the shape, size, weight, and other attributes of the characters in a typeface.
<div class="table-wrapper">
<table class="table table-bordered">
<tr class="p-4 mx-3">
<th style="text-align:center;">Property</th>
<th style="text-align:center;">Description</th>
<th style="text-align:center; width: 110px;">Snippet</th>
</tr>
<tr>
<td>font</td>
<td>Shorthand font property.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-family</td>
<td>Specifies the font family or list of font families to be used for text.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-feature-settings</td>
<td>Controls advanced typographic features in OpenType fonts.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-kerning</td>
<td>Determines the way specific pairs of letters are spaced.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-language-override</td>
<td>Overrides the typeface behavior for a particular language.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-optical-sizing</td>
<td>Sets whether rendering of text should be optimized to view at different sizes.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-palette</td>
<td>Allows the usage of one of the various palettes that are contained in a font.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-size</td>
<td>Sets the size of the text.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-size-adjust</td>
<td>Specifies a font’s aspect value (numeric ratio) that controls its x-height.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-stretch</td>
<td>Adjusts the width of the text (condensed or expanded).</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-style</td>
<td>Specifies the style of the text, such as “italic”, “oblique”, or “normal”.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-weight</td>
<td>Sets the thickness or boldness of the text.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-synthesis</td>
<td>Shorthand font-synthesis property.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-synthesis-small-caps</td>
<td>Determines whether or not the browser should synthesize the small-caps typeface, that is missing in a font-family.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-synthesis-style</td>
<td>Determines whether or not the browser should synthesize the oblique typeface, that is missing in a font-family.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-synthesis-weight</td>
<td>Determines whether or not the browser should synthesize the bold typeface, that is missing in a font-family.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-variant</td>
<td>Controls the use of small caps for lowercase letters in the text.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-variant-alternates</td>
<td>Controls the usage of alternate glyphs.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-variant-caps</td>
<td>Controls the usage of alternate glyphs for capital letters.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-variant-east-asian</td>
<td>Controls the usage of alternate glyphs for East-Asian scripts like Chinese and Japanese.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-variant-ligatures</td>
<td>Controls the textual content of element as to which ligature or contextual form should be used.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-variant-numeric</td>
<td>Controls the usage of alternate glyphs for numbers, fractions and ordinal markers.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-variant-position</td>
<td>Controls the usage of alternate, smaller glyphs, positioned as superscript or subscript.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>font-variation-settings</td>
<td>Specifies the four-letter axis names of variable font characteristics.</td>
<td>``<div>Try It</div>``</td>
</tr>
</table>
</div>
Text Properties
A <strong>text</strong> refers to a piece of written or printed information in the form of words or characters that can be read and understood. Texts can include content such as books, articles, emails, messages, web pages, etc.
Styling a text involves modifying its appearance to make it more visually appealing or to convey a particular message. This chapter demonstrates how to manipulate text using CSS properties.
<div class="table-wrapper">
<table class="table table-bordered">
<tr>
<th style="text-align:center;">Property</th>
<th style="text-align:center;">Description</th>
<th style="text-align:center; width: 110px;">Snippet</th>
</tr>
<tr>
<td>color</td>
<td>Sets the color of an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>direction</td>
<td>Defines direction of the flow of an element content.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>line-height</td>
<td>Sets the distance between adjacent text baselines.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>text-align</td>
<td>Sets the text alignment style for an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>text-decoration</td>
<td>Defines any decoration for the text; values may be combined.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>text-indent</td>
<td>Defines the indentation of the first line of text in an element; default is 0.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>text-shadow</td>
<td>Creates text drop shadows of varying colors and offsets.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>text-transform</td>
<td>Transforms the text in the element accordingly.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>vertical-align</td>
<td>Sets the vertical positioning of an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>white-space</td>
<td>Defines how whitespace within an element is handled.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>word-spacing</td>
<td>Inserts additional space between words.</td>
<td>``<div>Try It</div>``</td>
</tr>
</table>
</div>
Background Properties
<strong>CSS background</strong> properties are used to manipulate the background of elements. It can be used to apply a single background image or multiple background images, as well as defining the background color, size, position, repeat behavior, and other related properties.
<div class="table-wrapper">
<table class="table table-bordered">
<tr>
<th style="text-align:center;">Property</th>
<th style="text-align:center;">Description</th>
<th style="text-align:center; width: 110px;">Snippet</th>
</tr>
<tr>
<td>background</td>
<td>Shorthand for background related properties.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>background-attachment</td>
<td>Specifies the position of the background relative to the viewport, either fixed or scrollable.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>background-clip</td>
<td>Controls how far a background image extends beyond the element’s padding or content box.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>background-color</td>
<td>Sets the background color of an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>background-image</td>
<td>Sets one or more background image(s) on an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>background-origin</td>
<td>Sets the origin of the background.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>background-position</td>
<td>Sets the initial position of each image in a background.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>background-position-x</td>
<td>Sets the initial horizontal position of each image in a background.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>background-position-y</td>
<td>Sets the initial vertical position of each image in a background.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>background-repeat</td>
<td>Controls the repetition of an image in the background.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>background-size</td>
<td>Controls the size of the background image.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>background-blend-mode</td>
<td>Determines how an element’s background images blend with each other.</td>
<td>``<div>Try It</div>``</td>
</tr>
</table>
</div>
Shadow Properties
There are two types of shadow properties existed in CSS as mentioned and described below.
<ul>
<li>``<strong>Text Shadow:</strong> This is used to add a shadow effect to text. It allows you to specify the color, offset, blur-radius, and spread-radius of the shadow.</li>
<li>``<strong>Box Shadow:</strong> This is used to add shadow effect around an element. One or more shadow effects can be added, separated by commas.</li>
</ul>
<div class="table-wrapper">
<table class="table table-bordered">
<tr>
<th style="text-align:center;">Property</th>
<th style="text-align:center;">Description</th>
<th style="text-align:center; width: 110px;">Snippet</th>
</tr>
<tr>
<td>text-shadow</td>
<td>This is used to add a shadow effect to text.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>box-shadow</td>
<td>This is used to add a shadow effect around an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
</table>
</div>
Border Properties
<strong>Border</strong> properties are used to create a border around an element, such as a div, image, or text. It allows you to customize the appearance of the border, including its color, width, and style.
<div class="table-wrapper">
<table class="table table-bordered">
<tr>
<th style="text-align:center;">Property</th>
<th style="text-align:center;">Description</th>
<th style="text-align:center; width: 110px;">Snippet</th>
</tr>
<tr>
<td>border</td>
<td>Sets all the border properties in one declaration</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-bottom</td>
<td>Sets bottom border of an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-bottom-color</td>
<td>Sets the color of bottom border of an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-bottom-width</td>
<td>Sets the width of bottom border of an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-bottom-style</td>
<td>Sets the style of bottom border of an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-color</td>
<td>Sets border color of an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-left</td>
<td>Sets left border of an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-left-color</td>
<td>Sets the color of left border of an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-left-width</td>
<td>Sets the width of left border of an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-left-style</td>
<td>Sets the style of left border of an element.</td>
<td>``<div>Try It</div>``</td>
<tr>
<td>border-right</td>
<td>Sets right border of an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-right-color</td>
<td>Sets the color of right border of an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-right-width</td>
<td>Sets the width of right border of an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-right-style</td>
<td>Sets the style of right border of an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-style</td>
<td>Sets style of border of an element</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-top</td>
<td>Sets top border of an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-top-color</td>
<td>Sets the color of top border of an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-top-width</td>
<td>Sets the width of top border of an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-top-style</td>
<td>Sets the style of top border of an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-width</td>
<td>Sets border width of an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-image</td>
<td>Sets border image.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-image-outset</td>
<td>Sets the image outset i.e how much the border image area extends beyond the border box.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-image-repeat</td>
<td>Define whether the border image should be repeated, rounded, spaced or stretched.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-image-source</td>
<td>Sets the source/path of an image to be passed as a border to an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-image-slice</td>
<td>This property shows how to slice up an image in a border.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>border-image-width</td>
<td>Sets the width of the image to be set as a border.</td>
<td>``<div>Try It</div>``</td>
</tr>
</table>
</div>
CSS Flexbox
<strong>Flexbox</strong> organizes elements within a container along a single dimension, which can be either horizontally or vertically aligned.
<div class="table-wrapper">
<table class="table table-bordered">
<tr>
<th style="text-align:center;">Property</th>
<th style="text-align:center;">Value</th>
<th style="text-align:center; width: 110px;">Example</th>
</tr>
<tr>
<td>flex-direction</td>
<td>Sets the flex direction of the flex items.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>flex-wrap</td>
<td>Sets whether flex items should wrap onto the next line</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>justify-content</td>
<td>Sets the alignment of flex items along the main axis.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>align-items</td>
<td>Sets the alignment of flex items along the cross axis.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>align-content</td>
<td>Sets the alignment and spacing of flex lines within the flex container.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>flex-flow</td>
<td>Sets both the flex-direction and flex-wrap properties.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>flex-grow</td>
<td>Sets flex item to grow within a flex container.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>flex-shrink</td>
<td>Sets flex item to shrink in size to fit the available space.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>flex-basis</td>
<td>Sets the initial size of a flex item.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>flex</td>
<td>Shorthand property, combines three flex-related properties: flex-grow, flex-shrink, and flex-basis.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>align-self</td>
<td>Sets the alignment of a specific flex item along the cross-axis.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>order</td>
<td>Used to specify the order in which flex items appear inside their flex container.</td>
<td>``<div>Try It</div>``</td>
</tr>
</table>
</div>
CSS Grid
<strong>CSS Grid</strong> is a convenient and concise way to define the grid layout of an element.
<div class="table-wrapper">
<table class="table table-bordered">
<tr>
<th style="text-align:center;">Property</th>
<th style="text-align:center;">Description</th>
<th style="text-align:center; width: 110px;">Snippet</th>
</tr>
<tr>
<td>display</td>
<td>Define whether an element is a grid container or an inline grid container.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>gap</td>
<td>Defines the gap between rows and columns.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>grid-area</td>
<td>Defines the location and size of the grid item within a grid layout.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>grid-column</td>
<td>Control the placement of a grid item within the grid container in the column direction.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>grid-row</td>
<td>Control the placement of a grid item within the grid container in the row direction.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>grid-template</td>
<td>Specify the grid columns, grid rows and grid areas.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>grid-auto-columns</td>
<td>Determines the size of automatically generated grid column tracks or a pattern of such tracks.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>grid-auto-rows</td>
<td>Determines the size of automatically- generated grid rows tracks or a pattern of such tracks.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>grid-auto-flow</td>
<td>Specifies arrangement of the grid item within the grid.</td>
<td>``<div>Try It</div>``</td>
</tr>
</table>
</div>
Gradient
<strong>CSS Gradients</strong> allows to design custom colors for HTML elements by creating a smooth transition between two or more colors.
CSS defines three types of gradients.
<ul>
<li>``<strong>Linear Gradient:</strong> Goes from left to right, up to down or diagonally.</li>
<li>``<strong>Radial Gradient:</strong> Start from center to edges.</li>
<li>``<strong>Conic Gradient:</strong> Revolve around a center point.</li>
</ul>
Snippet
In this Snippet you can check all three types of gradient in one Snippet.
<pre class="just-code language-css" data-lang="css">
linear-gradient()
/* to right, black, yellow, green */
radial-gradient()
/* circle, black, yellow, green */
conic-gradient()
/* black, yellow, green */
</pre>
Example of Gradient
<pre class="demo-code language-html" data-lang="html"><!DOCTYPE html>
<html>
<head>
<style>
.InnerFrame-container {
font-family: Arial, sans-serif;
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
width: 110px;
}
.InnerFrame-color-picker {
display: flex;
}
.InnerFrame-color-options {
display: flex;
flex-direction: column;
margin-right: 20px;
width: 100%;
gap: 10px;
}
.InnerFrame-color-options button {
background-color: rgb(0, 153, 51);
border: 2px solid grey;
border-radius: 10px;
padding: 10px;
cursor: pointer;
color: white;
font-family: monospace;
}
.InnerFrame-color-options button:hover {
background-color: rgb(0, 125, 51);
}
.InnerFrame-output-display {
border: 2px solid grey;
width: 110px;
border-radius: 10px;
width: 100%;
}
</style>
</head>
<body>
<div class=“InnerFrame-container”>
<div class=“InnerFrame-color-picker”>
<div class=“InnerFrame-bg InnerFrame-color-options”>
<button onclick=“setGradient(this, ‘linear’)“>Linear Gradient</button>
<button onclick=“setGradient(this, ‘radial’)“>Radial Gradient</button>
<button onclick=“setGradient(this, ‘conic’)“>Conic Gradient</button>
</div>
<div class=“InnerFrame-output-display” id=“InnerFrame-colorDisplay”>
Choose a gradient for background
</div>
</div>
</div>
<script>
let previousButton = null;
function setGradient(button, type) {
let colorDisplay = document.getElementById(‘InnerFrame-colorDisplay’);
if (type === ‘linear’) {
colorDisplay.style.backgroundImage = ‘linear-gradient(to right, black, yellow, green)’;
} else if (type === ‘radial’) {
colorDisplay.style.backgroundImage = ‘radial-gradient(circle, black, yellow, green)’;
} else if (type === ‘conic’) {
colorDisplay.style.backgroundImage = ‘conic-gradient(black, yellow, green)’;
}
if (previousButton) {
previousButton.style.backgroundColor = ‘rgb(0, 153, 51)’;
}
button.style.backgroundColor = ‘rgb(0, 100, 25)‘;
previousButton = button;
}
</script>
</body>
</html>
</pre>
Classification Properties
CSS classification properties allow you to control how to display an element, set where an image will appear in another element, position an element relative to its normal position, position an element using an absolute value, and how to control the visibility of an element.
<div class="table-wrapper">
<table class="table table-bordered">
<tr>
<th style="text-align:center;">Property</th>
<th style="text-align:center;">Description</th>
<th style="text-align:center; width: 110px;">Snippet</th>
</tr>
<tr>
<td>clear</td>
<td>Sets which margins of an element must not be adjacent to a floating element; the element is moved down until that margin is clear.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>cursor</td>
<td>Defines shape of the cursor.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>display</td>
<td>Controls how an element is displayed.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>float</td>
<td>Determines if an element floats to the left or right, allowing text to wrap around it or be displayed inline.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>position</td>
<td>Sets the positioning model for an element.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>visibility</td>
<td>Determines if an element is visible in the document or table.</td>
<td>``<div>Try It</div>``</td>
</tr>
</table>
</div>
CSS Functions
CSS functions can be used to add style and formatting to your website or application and can greatly improve the user experience.
Follow the below list of functions types to know each one of them.
<div class="table-wrapper">
<table class="table table-bordered">
<tr>
<th style="text-align:center;">CSS Function</th>
<th style="text-align:center;">Description</th>
<th style="text-align:center; width: 110px;">Snippet</th>
</tr>
<tr>
<td>Transform Functions</td>
<td>These Functions are used to represents visual transformations and is employed as a value within the transform property.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>Math Functions</td>
<td>These functions can be used in CSS to represent numeric values using math functions.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>Filter Functions</td>
<td>These functions denotes a graphical effect capable of changing the look of an input image. It’s used within the filter and backdrop-filter properties.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>Color Functions</td>
<td>These functions are used to defines various ways to represent colors.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>Image Functions</td>
<td>These functions offers graphical representations of images or gradients.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>Counter Functions</td>
<td>CSS counter functions can theoretically be used anywhere a <string> is available, however they are typically used in conjunction with the content property.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>Shape Functions</td>
<td>These functions signifies a visual shape and is employed in properties such as clip-path, offset-path, and shape-outside.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>Reference Functions</td>
<td>These functions are order to reference a value defined elsewhere, the following functions are used as a value of properties.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>Grid Functions</td>
<td>These functions are used to define a CSS Grid.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>Font Functions</td>
<td>These functions are used to managed through the use of CSS font functions in combination with the font-variant-alternates property.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>Easing Functions</td>
<td>These functions are used for transition and animation properties come from the following functions.</td>
<td>``<div>Try It</div>``</td>
</tr>
</table>
</div>
<strong>Note:</strong> To know in details about each function please check the article <strong>CSS Functions</strong>.
Media Queries
<strong>Media Queries</strong> allow to apply CSS styles to a webpage based on the characteristics of the device or browser viewing the page. With media queries, we can create designs that adapt to different screen sizes, resolutions, and orientations.
<ul>
<li>CSS Media Types</li>
<li>CSS Media Features</li>
</ul>
<div class="table-wrapper">
<table class="table table-bordered">
<tr>
<th style="text-align:center;">CSS Media Types</th>
<th style="text-align:center;">Description</th>
<th style="text-align:center; width: 110px;">Snippet</th>
</tr>
<tr>
<td>all</td>
<td>Suitable for all devices.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>print</td>
<td>Intended for paged, opaque material and for documents viewed on screen in print preview mode. Please consult the section on paged media.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>screen</td>
<td>Intended primarily for color computer screens.</td>
<td>``<div>Try It</div>``</td>
</tr>
</table>
</div>
<div class="table-wrapper">
<table class="table table-bordered">
<tr>
<th style="text-align:center;">CSS Media Features</th>
<th style="text-align:center;">Description</th>
<th style="text-align:center; width: 110px;">Snippet</th>
</tr>
<tr>
<td>orientation</td>
<td>To check whether the device’s screen or page is in a portrait or landscape orientation.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>aspect-ratio</td>
<td>To check the aspect ratio of the viewport or the rendering surface.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>display-mode</td>
<td>To check the display mode of a web-application.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>overflow-block</td>
<td>To determine how the user device handles content that goes beyond the initial container’s boundaries in a vertical direction.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>overflow-inline</td>
<td>To determine how the user device handles content that goes beyond the initial container’s boundaries in a horizontal direction.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>height</td>
<td>To determine the height of the viewport.</td>
<td>``<div>Try It</div>``</td>
</tr>
<tr>
<td>width</td>
<td>To determine the width of the viewport.</td>
<td>``<div>Try It</div>``</td>
</tr>
</table>
</div>
Conclusion
Following this Cheat Sheet will keeps you revised on CSS, if your are new to CSS then we will recommend you to follow our free <strong>CSS Tutorial</strong>.
<blockquote>You can check our other Cheat Sheets<br>
<ul>
<li>HTML Cheat Sheet</li>
<li>C Language Cheat Sheet</li>
</ul>
</blockquote>