CSS Cheat Sheet

By | March 25, 2022
CSS Cheat Sheet

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.

Vamware

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 {

Vamware

property1: value1;

property2: value2;

}

 

Internal Style CSS <style type=”text/css”>

class{ color: #444;  }

Vamware

</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:

Author: Vinay Singh

I am a Full Stack Developer with a Bachelor's Degree in Computer Science, who also loves to write technical articles that can help fellow developers.

Leave a Reply

Your email address will not be published.