CSS Cheat Sheet

Posted in /   /  

CSS Cheat Sheet

Vinay Khatri
Last updated on July 19, 2022

    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, and 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:

    Leave a Comment on this Post

    0 Comments