- CSS stands for Cascading Style Sheets
- CSS provides styling to the static HTML page
- CSS introduced to replace the line-by-line styling attributes.
- CSS executes at client-side on the browser
- It is not a Programming language.
Animation-delay: Specifies the delay before an animation starts playing: animation-direction: Defines if the animation plays in reverse or alternate cycles: animation-duration: Sets the duration of an animation cycle: animation-fill-mode: Sets the style for an element while the animation is not active (finished or delayed) animation-iteration-count. Creating animation in CSS; Loader project; Let’s start. Animation properties. Setting an animation is done by assigning animate property while styling the element or its sub-properties. That’s why to start creating awesome animations in CSS, you have to know how you can set the duration, timing, delay, and some more.
Here we have provided the most common CSS cheat snippets which cover CSS gradient, background, button, font-family, border, radius, box and text-shadow generators, color picker and lots more.
CSS buzzwords.
- CSS3
- Bootstrap
- Bootstrap4
CSS3 is the newest version of CSS which has many new features.
Bootstrap is an open-source framework of CSS, which is written on CSS3.
Bottstrap4 is the newest version of Bootstrap.
CSS Cheat Codes:
Basic CSS Cheat Codes:
| Type | Syntax |
| Include external CSS file | <link rel=”stylesheet” type=”text/css” href=”/file_name.css” /> |
| selector | selector{ property1: value1; property2: value2; } |
| Internal Style CSS | <style type=”text/css”> class{ color: #444; } </style> |
| Inline CSS | <tag style=”property: value”> </tag> |
Selectors
Selectors are the HTML tags or class names on which we want to apply styling.
Example
Here div is selector font-weight is property and bold is value.
Examples:
| Selector Syntax | Description |
| * { } | To select all the tags |
| div { } | To select all div tags |
| div,h1 { } | To select all div and heading 1 tags |
| Div h2{ } | To select all heading 2 tags inside all div tags |
| div > h1{ } | All h1 tags one level deep in div |
| div + h1{ } | h1 tags immediately after div |
| div ~ h1{ } | h1 tags preceded by div |
| .classname{ } | all elements with class |
| div.classname{ } | divs with certain classname |
| div#id_name{ } | div with certain ID |
| #id_name *{ } | all elements inside #idname |
Background
There are many CSS properties associated with the background of any tag.
| Background Properties | Accepting Values |
| background-image | URL or None |
| background-position | Top left, top right, center, bottom left, bottom right, bottom center x-% y-% x-po y-pos |
| background-size | Length or auto |
| background-repeat | Repeat or no repeat |
| background-attachment | Scroll | fixed |
| background-break | Bounding-box| each box| continuous |
| background-clip | Length |
| background-origin | Border-box or padding box or content box |
| background-color | Color or transparent |
Example
Border:
There are many sub-properties associated with the border tag.
| border Properties | Accepting Values |
| border-color | Color |
| border-width | Length, thin, medium thick |
| border-style | None, hidden, dotted dashed, solid, double, groove, ridge, inset, outset |
| border-image | Image |
| border-collapse | Collapse, separate |
| border-left-color | Color |
| border-left-style | None, hidden, dotted dashed, solid, double, groove, ridge, inset, outset |
| border-left-width | Length, thin, medium thick |
| border-bottom-style | None, hidden, dotted dashed, solid, double, groove, ridge, inset, outset |
| border-bottom-color | Color |
| border-bottom-width | Length, thin, medium thick |
| border-right-color | Color |
| border-right-style | None, hidden, dotted dashed, solid, double, groove, ridge, inset, outset |
| border-right-width | Length, thin, medium thick |
Example:
Fonts:
The font deal with the writing style and size of the characters shown on the display here are some common font properties.
| font Properties | Accepting Values |
| font-style | italic, oblique, normal |
| font-variant | normal, small-caps, inherit |
| font-weight | bold, lighter, 100, 200, 300, inherit, normal |
| font-size | xx-small, x-small, small, large, length, % |
| font-family | Generic-name, inherit, font-family name |
| font-size-adjust | none, inherit number |
| font-align | right, left, center, justify |
| font-transform | Capitalize, uppercase, lowercase |
| font-stretch | normal, wider, narrower, extra-condensed, semi-condensed, inherit |
Example:
Table
In HTML we often use table tag so here are some most common table properties used in CSS.
| table Properties | Accepting Values |
| border-collapse | collapse, separate |
| border-spacing | length |
| caption-side | top, bottom, left, right |
| empty-cells | show or hide |
| table-layout | auto or fixed |
Example:
Animation
CSS help to animate the HTML elements without using JavaScript. Here are some important CSS Animations properties
| Animation Properties | Accepting Values |
| animation-delay | time |
| animation-direction | normal, alternate |
| animation-duration | time |
| animation-iteration-count | inherit number |
| animation-paly-state | running, paused |
| animation-name | none, ident |
| animation-timing-function | linear, ease, ease-in, ease-out, cubic-bezier |
Example:
Box Model
In HTML, every tag has its own box-like structure and all its content is limited to that box, the size of the box default depends upon the tag content size. With CSS Box model properties, we can style each tag box.
| Box-Model Properties | Accepting Values |
| width | length, % |
| border | length, % |
| margin | auto, length, % |
| padding | length, % |
| max-width | length, % |
| min-width | length, % |
| height | length, % |
| min-height | length, % |
| max-height | length, % |
| margin-bottom | length, % |
| margin-left | length, % |
| margin-right | length, % |
| rotation | angle |
| rotation-point | position |
| visibility | visible, hidden, collapse |
| display | inline, block, list-item, run-in, table, etc, |
| clear | left, right, none, both |
| overflow | visible, hidden, scroll, no-display, overflow-x, overflow-y |
| padding-right | length, % |
| padding-top | length, % |
| padding-left | length, % |
Example:
Text
There are many CSS properties associated with the text we see on our webpages.
| Text Properties | Accepting Values |
| text-align | left, center, justify, right, start, end |
| text-align-last | left, center, justify, right, start, end |
| text-decoration | underline, overline, line-through, blink |
| text-emphasise | none, [[accent, dot, circle,] [before, after]] |
| text-indent | length, % |
| text-justify | auto, inter-word, inter-ideograph |
| text-outline | colour, length |
| text-shadow | color, length |
| text-transform | capitalize, uppercase, lowercase |
| text-wrap | unrestricted, suppress |
| white-space | pre, nowrap, pre-wrap, pre-line |
| word-spacing | normal, length, % |
| word-wrap | break-word |
| direction | ltr, rtr |
| hanging-punctuation | start, end, end-edge |
| letter-spacing | length, % |
| punctuation-trim | start, end, end-edge |
Example:
Value Units
There are many types of values we provided to the properties such as color, length, angle, time etc here are some basic Value Unites present in CSS:
Length
| Units | Description |
| % | percentage |
| cm | centimetres |
| in | inches |
| mm | millimeters |
| pt | points 1pt = 1/72 inches |
| pc | pica 1 pica = 12 points |
Angle
| Angle Units | Description |
| deg | degrees |
| grad | grads |
| rad | radian |
| turn | turns |
Time
| Time Units | Description |
| ms | milli-seconds |
| S | seconds |
Frequency
| Frequency Units | Description |
| Hz | hertz |
| Khz | kilo-hz |
Color
| Type | value |
| color name | red, green, yellow, etc |
| rbg(x,y,z) | red= rbg(255,0,0) |
| rbg(x%,y%,z%) | red = rbg(100%,0,0) |
| #rrggbb | red = #ff000 |
| hsl(heu, saturation, lightness) | red = hsl(0,100%,50%) |
| currentcolor | put the value of currentcolor keyword |
People Also Read:
A
| align-content | Packs text lines to the left of the flex container |
| align-items | Specifies the default alignment for items inside a specific flex container |
| align-self | Specifies the alignment for a selected item in a flex container |
| all | Resets all the properties to either inherited or initial value |
| animation | A shorthand for the eight properties used for animation |
| animation-delay | Specifies the delay before an animation starts playing |
| animation-direction | Defines if the animation plays in reverse or alternate cycles |
| animation-duration | Sets the duration of an animation cycle |
| animation-fill-mode | Sets the style for an element while the animation is not active (finished or delayed) |
| animation-iteration-count | Defines the number of times an animation should normally repeat |
| animation-name | Specifies the name of the animation |
| animation-timing-function | Specifies the duration of time for an element to transition from one set of styles to another |
B
| backface-visibility | Defines if the element’s back is visible when it is not facing the screen |
| background | A shorthand for the eight properties used for background |
| background-clip | Specifies the area to which a background should extend |
| background-color | Sets a background color |
| background-image | Sets a background image for an element |
| background-origin | Specifies where to position the background image |
| background-position | Specifies the initial position of the background image |
| background-size | Defines the size of the background image |
| border | A shorthand for the three properties used for borders |
| border-bottom-left-radius | Defines the rounded corners for an element |
| border-image | Specifies the image to be used instead of a regular border |
| border-image-outset | Specifies how much of the border image goes outside of the border box |
| border-image-repeat | Specifies if the border image is rounded, repeated or stretched |
| border-image-slice | Specifies how a border image should be sliced |
| border-image-source | Specifies the path to access the image that you want to use as a border |
| border-image-width | Specifies the border image width |
| border-radius | A shorthand for the four properties used for border radius |
| border-style | Defines the style of the border lines |
| border-top-left-radius | Defines the shape of the top left corner border |
| border-top-right-radius | Defines the shape of the top right corner border |
| border-bottom-left-radius | Defines the shape of the bottom left corner border |
| border-bottom-right-radius | Defines the shape of the bottom right corner border |
| box-shadow | Adds a shadow to a box element |
| box-sizing | Specifies whether the height and width values represent the content box or the border box |
C
| color | Sets the color of text |
| column-count | Specifies the number of columns an element should be divided into |
| column-gap | Defines the gap between columns |
| column-rule | A shorthand for the three properties used for column rules |
| column-rule-color | Specifies the color of the column rule |
| column-rule-style | Specifies the style of the column rule |
| column-rule-width | Specifies the width of of the column rule |
| column-span | Specifies how many columns an element should span across |
| column-width | Specifies the optimal width of a column |
| columns | A shorthand for column-width and column-count |
D
| display | Specifies what kind of container the element will use |
F
| filter | Defines visual effects for elements |
| flex | A shorthand for flex-grow, flex-shrink and flex-basis |
| flex-basis | Sets the initial length of a flex item |
| flex-direction | Specifies the placement of flex items |
| flex-flow | A shorthand for flex-direction and flex-wrap |
| flex-grow | Specifies how much a flex item should grow when there's too much space in a flex container |
| flex-shrink | Specifies how much a flex item should shrink when there's too little space in a flex container |
| font | A shorthand for the seven properties used for fonts |
| font-family | Defines what font an element will use when it has text in it |
| font-size | Sets the default size of text characters |
| font-size-adjust | Controls the sizing of lowercase letters |
| font-stretch | Defines how wide or narrow the characters should be |
| font-style | Defines the text font style |
| font-weight | Defines how thick or thin the characters should be |
H
| hanging-punctuation | Defines if punctuation marks should be displayed outside of the lines to keep them properly aligned |
J
| justify-content | Aligns flex items along the horizontal axis of the container |
L
| line-height | Defines the line height |
M
| margin | Adds space around an element |
N
| nav-down | Defines where the web page will navigate when the downwards arrow navigation key is pressed |
| nav-index | Sets the sequence of navigation, or tabbing, order for elements |
| nav-left | Defines where the web page will navigate when the left arrow navigation key is pressed |
| nav-right | Defines where the web page will navigate when the right arrow navigation key is pressed |
| nav-up | Defines where the web page will navigate when the upwards arrow navigation key is pressed |
O
| opacity | Sets the opacity level for an element |
| order | Defines the position of a specific flex item in the order of items in the same container |
| outline | Draws a line outside the element |
| outline-offset | Adds space between the outline and the border of the element |
| overflow | Defines how the element behaves when the content cannot fit within its borders |
| overflow-x | Defines how left and right sides of a container react to overflowing content |
| overflow-y | Defines how top and bottom sides of a container react to overflowing content |
P
| padding | Adds space around an element |
| perspective | Defines how far away an object is to create a 3D perspective |
| perspective-origin | Specifies where a 3D element originates from on the x– and y– axis |
| position | Specifies how an element is positioned |
R
| resize | Specifies whether a user can resize the element |
T
| tab-size | Defines how much space the tab character is going to take up in the text |
| text-align | Defines the horizontal text alignment inside of an element |
| text-align-last | Defines the horizontal alignment for the last line of text |
| text-decoration | A shorthand for the three properties used for text decoration lines |
| text-decoration-color | Sets the color for all text decoration lines |
| text-decoration-line | Specifies where text decoration line is displayed (below, above or through the text) |
| text-decoration-style | Defines the style of text decoration line |
| text-emphasis | A shorthand for text-emphasis-style and text-emphasis-color |
| text-overflow | Defines how the presence of overflowed content that is not displayed will be shown to the user |
| text-shadow | Adds a shadow to the text |
| text-transform | Controls the capitalization of the text |
| transform | Applies various transformations to an element |
| transition | A shorthand for the four properties used for transition |
| transition-delay | Specifies the transition starting point in time |
| transition-duration | Specifies how long a transition takes to finish |
| transition-property | Defines the CSS property that is affected by the transition effect |
| transition-timing-function | Specifies the speed curve of a transition |
V
| vertical-align | Specifies the vertical alignment for items inside an element |
W
| word-break | Defines the line breaking rules for words when they reach the end of the line |
| word-wrap | Allows breaking long words and wrapping them in the next line |
Z
Css Code Cheat Sheet
| z-index | Defines a position of an element on the z-axis |
Css Animation Cheat Sheet
:@
Css Animation Cheat Sheet
| :hover | Defines how elements should be styled when they are hovered on |
| @font-face | Allows you to use a font file and define the name of the font instead of having to use a web-safe font |
| @keyframes | Allows specifying code for the animation |
| @media | Specifies different style rules for different devices and/or media types |