- 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.
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
div {
font-weight: bold;
}
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
body {
background-image: url("car.png");
background-repeat: repeat-x;
background-position: right top;
background-attachment: fixed;
}
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:
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
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:
p {
font-style: normal;
}
h2{
font-style: italic;
}
h1 {
font-style: oblique;
}
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:
table { border-collapse: collapse; border: 1px solid black; }
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:
div {
width: 100px;
height: 100px;
background-color: blue;
animation-name: go;
animation-duration: 8s;
}
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:
div {
width: 200px;
padding: 8px;
border: 6px solid red;
margin: 1;
}
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:
p {
text-align: center;
}
h2 {
text-align: left;
direction: rtl;
}
h3 {
text-align: top;
}
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 are also reading: