CSS is one of the key technologies that facilitate web development. If you are a front-end web developer, you need to work with CSS day in, day out. As you may already know, CSS makes it possible to style web pages. While you create web pages using a markup language, preferably HTML, you need to use CSS to style pages and make them visually appealing.
Following are the key highlights of CSS that you need to know:
- CSS stands for Cascading Style Sheets.
- CSS provides styling to web pages.
- It intends to replace the line-by-line styling attributes.
- CSS executes at the client-side on the browser.
- It is not a programming language.
In this article, we have discussed the most common CSS cheat snippets that cover CSS gradient, background, button, font-family, border, radius, box and text-shadow, color picker, and lots more.
CSS Buzzwords
- CSS3
- Bootstrap
- Bootstrap4
CSS3 is the most popular and widely used version of CSS which has many new features.
Bootstrap is an open-source CSS framework.
Bottstrap4 is the most popular 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 the property and bold is value.
| 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 class name |
| 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. The following table highlights 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 the table tag to insert a table in the web page. Here are some of the 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 default size of the box 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 displayed on web pages.
| 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 | color, 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 that we provide to the properties such as color, length, angle, time, etc. Here are some basic Value Units available 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 |
Conclusion
This CSS cheat sheet covers everything that can help you to work more efficiently with CSS. As a web developer, it is important for you to be aware of the most common CSS properties so that you can style web pages with ease.
People are also reading: