CSS Cheat Sheet

By | January 26, 2020
CSS Cheat Sheet
  • 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.

Vamware

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 Also Read:

Leave a Reply

Your email address will not be published. Required fields are marked *