Skip to content
Related Articles

Related Articles

CSS Cheat Sheet – A Basic Guide to CSS

View Discussion
Improve Article
Save Article
  • Last Updated : 02 May, 2022
View Discussion
Improve Article
Save Article

What is CSS?

CSS i.e. Cascading Style Sheets is a stylesheet language used to describe the presentation of a document written in a markup language such as HTML, XML, etc. CSS enhances the look and feel of the webpage by describing how elements should be rendered on screen or in other media.

What is a CSS Cheat Sheet?

CSS Cheat Sheet provides you with the most common style snippets CSS gradient, background, button, font family, order, radius, box, and text-shadow generators, color picker, and more tools to add more visual weight to your document. All these and other useful web design tools can be found on a single page.

Table of Content:

CSS Basics: Cascading Style Sheet(CSS) is used to set the style in web pages that contain HTML elements, here we will see in how many ways we can add CSS for our HTML, there three different ways to do so one by one we will see those procedure.

External CSS: External CSS contains a separate CSS file with a .css extension which contains only style property with the help of tag attributes.

selector{
property1: value1;
property2: value2;
}

Include external CSS file: The external CSS file is linked to the HTML document using a link tag.

<link rel="stylesheet" type="text/css" href="/style.css" />

Internal CSS or Embedded: CSS is embedded within the HTML file using a style HTML tag when a single HTML document must be styled uniquely.

<style type="text/css">
div { color: #444;}
</style>

Inline CSS: It contains CSS properties in the body section specified within HTML tags using the style attribute.

<tag style="property: value"> </tag>

Clearfix: It is used to clear floats to select or keep control of your margins and padding.

.clearfix::after {
 content: "";
 clear: both;
 display: block; 
}

Selectors: CSS selectors are used to find or selecting the HTML elements you want to style. These are categorized as follows:

Basic SelectorsDescriptionSyntax
UniversalSelects all elements on the pages. ‘*’ symbol is used to denote the selector as a universal selector.*{property:value;}
TypeType selector or tag name/element selector selects an HTML tag/element in your document. It selects all elements of the given type within a document.p {
CSS declarations;
}
IdSelects an element based on the value of its unique id attribute(One id only applied to one element). An ID selector begins with a # rather than a dot character.#id {css declarations; }
ClassSelects all elements in the document that have the given class attribute. It class selector starts with a dot (.) character..class {
css declarations;
}
AttributeSelects all elements that have a specified attribute. Elements grouped based on some attribute value can be styled using an attribute selector.a[attribute=value] {
property: value;
}
CombinatorsCombinators are complex selectors consisting of more than one selectors having some relationship between them. These are the font-family General Sibling selector, Adjacent sibling selector, child selector, Descendant selector.selector1 selector2/ selector 1+selector2 / selector 1> selector 2 {property: value;}
PseudoA Pseudo class in CSS is used to define the special state of an element to add an effect to an existing element based on its states. For ex. change of state on hover, click, focus, when a link is visited, etc.selector: pseudo-class{
property: value;
}

CSS




<!DOCTYPE html>
<html>
<head>
   <title>* Selectors</title>
   <!-- CSS Selectors are in used -->
   <style>
      /* universal selector */
      * {
      background-color: hsl(325, 63%, 82%);
      text-align: center;
      }
      /* type selector */
      span {
      background-color: skyblue;
      }
      /* id selector */
      #div1 {
      color: green;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      }
      /* class selector */
      .div2 {
      color: orange;
      text-align: left;
      font-size: 10px;
      font-weight: bold;
      }
      /* attribute selector */
      div[style] {
      text-align: center;
      color: purple;
      font-size: 20px;
      font-weight: bold;
      margin-bottom: -20px;
      }
      /* combinator selector */
      div>p {
      color: #009900;
      font-size: 32px;
      font-weight: bold;
      margin: 0px;
      text-align: center;
      }
      /* class selector */
      .box {
      background-color: yellow;
      width: 300px;
      height: 100px;
      margin: auto;
      font-size: 30px;
      text-align: center;
      }
      /* pseudo selector */
      .box:hover {
      background-color: orange;
      }
   </style>
</head>
<body>
   <p>
      *(Universal) Selector here gives a pink background
   </p>
   <br>
   <span>This span is styled using type selector.
   <br><br>
   <div id="div1">
      This div is styled using id selector 
   </div>
   <br>
   <div class="div2 ">
      This div is styled using class selector
   </div>
   <br>
   <div style="color:green">
      This div is styled using attribute selector
   </div>
   <br>
   <div style="text-align:center;">
      This div is styled using combinators
      <p>child selector</p>
   </div>
   <br>
   <p>psuedo selector:</p>
   <div class="box">
      My color changes if you hover over me!
   </div>
</body>
</html>

Font Properties: CSS font properties are used to set the font’s content of the HTML element as per requirement.

PropertyDescriptionSyntax
Font-familyCSS font-family property specifies the font family to be used for the element’s text content. Different font names can be given to make a fallback system in case first in priority is unavailable.font-family: family-name |generic-family |initial |inherit;
Font-styleCSS font-style property is used to style the text content in a normal, italic, or oblique face from its font-family.font-style: normal |italic |oblique |initial |inherit;
Font-variantCSS font-variant property is used to convert all lowercase letters into uppercase letters. The converted uppercase letters appear smaller in font-size than the original uppercase letters.font-variant: normal| small caps | initial;
Font-weightCSS font-weight property is used to specify thickness or weight of the font in the text content of the HTML and separated color elements.font-weight: normal| bold |number |initial |inherit |unset;
Font-sizeCSS font-size property is used to specify the size of the text in HTML document.font-size: small |medium |large |initial |inherit;

CSS




<!DOCTYPE html>
<html>
<head>
   <title>Font properties</title>
   <style>
      .style1 {
      font-family: "Times New Roman", "sans-serif";
      font-weight: bold;
      font-size: 30px;
      color: #090;
      text-align: center;
      font-style: normal;
      font-variant: normal;
      }
      .style2 {
      font-family: "sans-serif";
      font-weight: 5px;
      font-size: 15px;
      color: blueviolet;
      text-align: left;
      font-style: italic;
      font-variant: normal;
      }
      .style3 {
      font-family: "arial";
      font-weight: 10px;
      font-size: 20px;
      color: black;
      text-align: right;
      font-style: oblique;
      font-variant: small-caps;
      }
   </style>
</head>
<body>
   <p>Normal text aligned center sized 10 px</p>
   <div class="style1">Geeks for Geeks</div>
   <p>Italic text aligned left sized 15px</p>
   <div class="style2">Geeks for geeks</div>
   <p>Oblique text aligned right sized 20px, in small caps</p>
   <div class="style3">Geeks for geeks</div>
</body>
</html>

Text-properties: CSS text formatting properties are used to format and style text by setting their color, alignment, spacing, etc. as per requirement.

PropertyDescriptionSyntax
Text-colorCSS text-color property is used to set the color of the text. It can be set using a comma-separatedcolor name, its hex value, or RGB value.color: value;
Text-alignmentCSS Text alignment property is used to set the horizontal alignment of the text as left, right, centered, and justified.text-align: left|right|center|justify|initial|inherit;
Text-decorationCSS Text decoration is used to add or remove text- decorations like underline, overline, line-through or none.text-decoration: decoration-type;
Text-transformationCSS text transformation property is used to change the case of text (Uppercase or lowercase) or capitalize text.none|capitalize|uppercase|lowercase|initial|inherit;
Text-indentationCSS text indentation property is used to indent the first line of text block. The size can be in px, cm, pt. size should be non-negative.text-indent: length|initial|inherit;
Letter spacingCSS letter-spacing property is used to specify space between the characters of the text. size can be in px.letter-spacing: normal|length|initial|inherit;
Line heightCSS line spacing property is used to specify the space between the lines of the text block.line-height: normal|number|length|percentage|initial|inherit;
Text-shadowCSS text-shadow property is used to add shadow to the text. Using this property you can specify the shadow color, horizontal size,and and vertical size for the text.text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit
Word spacingCSS word-spacing property is used to specify space between words of lines in the text block.word-spacing: normal|length|initial|inherit;

CSS




<!DOCTYPE html>
<html>
<head>
   <title>Text formatting properties</title>
</head>
<body>
   <div style=" color: red">
      Color property used here
   </div>
   </br>
   <div style=" text-align: center">
      Text align property used here
   </div>
   </br>
   <div style=" text-decoration: underline">
      Text decoration property used here
   </div>
   </br>
   <div style="text-transform: lowercase">
      Text transform property used here
   </div>
   </br>
   <div style="text-indent: 80px">
      Text indent property used here
   </div>
   </br>
   <div style=" letter-spacing: 4px">
      Text line spacing property used here
   </div>
   </br>
   <div style="line-height: 40px">
      Text line height property used here
   </div>
   </br>
   <div style="text-shadow: 3px 1px blue;">
      Text shadow property used here
   </div>
   </br>
   <div style="word-spacing: 15px;">
      Text word spacing property used here
   </div>
</body>
</html>

Background properties: The CSS background properties are used to design the background and define the background effects for elements.

PropertyDescriptionSyntax
Background-colorCSS background-color property is used to specify the background color of an element.background-color: color_name;
Background-imageCSS background-image property is used to add one or more background images to an element.background-image: url(‘url’);
Background-repeatCSS background-repeat property is used to add or remove repeat the background image both horizontally and vertically.background-repeat: repeat |repeat-x |repeat-y |no-repeat |initial |inherit;
Background-positionCSS body-position property is mainly used to specify the positioning of the image in a certain way.background-position: value;
Background-originCSS background-origin property is used to adjust the background image of the webpage.background-origin: padding-box |border-box |content-box | initial| inherit;
Background-attachmentCSS background-attachment property is used to specify the kind of attachment of the background image with respect to its container.background-attachment: scroll |fixed |local |initial |inherit;
Background-clipCSS background-clip property is used to define how far the background (color or image) should extend within an element.background-clip: border-box| padding-box| content-box| initial |inherit;

CSS




<!DOCTYPE html>
<html>
<head>
   <title>Background Properties</title>
   <style>
      .a {
      background-image:
      url(
      }
      .b {
      background-image:
      url(
      background-repeat: no-repeat;
      }
      .c {
      background-image:
      url(
      background-repeat: no-repeat;
      background-position: center;
      }
      .d {
      background-image:
      url(
      background-repeat: no-repeat;
      background-origin: initial;
      }
      .e {
      background-image:
      url(
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      }
   </style>
</head>
<body>
   <div style="background-color: blue">Background color property</div>
   </br>
   <div class="a" style="height: 200px; width: 100%">
      <h3> Background Image property</h3>
   </div>
   <br><br>
   <div class="b" style="height: 200px; width: 100%">
      <h3> Background repeat property: no-repeat</h3>
   </div>
   <br><br>
   <div class="c" style="height: 200px; width: 100%">
      <h3> Background position property</h3>
   </div>
   <br><br>
   <div class="d" style="height: 200px; width: 100%">
      <h3>Background origin property: The background-origin is a property defined in
         CSS which helps in adjusting the background image of the webpage.
         This property is used to set the origin of the image in the background.
      </h3>
   </div>
   <br><br>
   <div class="e" style="height: 400px; width: 100%; text-align:center;">
      <h3> Background-attachment property</h3>
      <p>The property background-attachment property in CSS is used
         to specify the kind of attachment of the background image with
         respect to its container. It can be set to scroll or remain fixed.
      </p>
      <br><br>
      <p>The property background-attachment property in CSS is used
         to specify the kind of attachment of the background image with
         respect to its container. It can be set to scroll or remain fixed.
      </p>
      <br><br>
      <p> The property background-attachment property in CSS is used
         to specify the kind of attachment of the background image with
         respect to its container. It can be set to scroll or remain fixed.
      </p>
   </div>
   <br>
</body>
</html>

Box Properties: The CSS box model is essentially a box that wraps around every HTML element consisting of the border, padding, margin, and content. The CSS properties used to attain the box model are:

PropertyDescriptionSyntax
MarginIt sets the margin as top, left, bottom, or right by specifying length or percentage.margin: value;
PaddingIt describes the amount of space between the border and the content of the selector.padding: value;
BorderIt sets the element’s border width by specifying border or top, right, bottom or left border. It is also used to set the style, and color of an element’s border.border: value;
WidthIt sets an element’s width as a length, a percentage, or an auto.width: value;
HeightIt sets an element’s height as a length, a percentage, or as auto.height: value;

CSS




<!DOCTYPE html>
<head>
    <title>CSS Box Model</title>
    <style>
    .main {
        font-size: 20px;
        font-weight: bold;
        Text-align: left;
    }
      
    .gfg {
        margin-left: 60px;
        border: 50px solid #009900;
        width: 300px;
        height: 200px;
        text-align: center;
        padding: 50px;
    }
      
    .gfg1 {
        font-size: 42px;
        font-weight: bold;
        color: #009900;
        margin-top: 60px;
        background-color: #c5c5db;
    }
      
    .gfg2 {
        font-size: 18px;
        font-weight: bold;
        background-color: #c5c5db;
    }
    </style>
</head>
<body>
    <div class="main">CSS Box-Model Property</div>
  
    <div class="gfg">
        <div class="gfg1">GeeksforGeeks</div>
        <div class="gfg2">
            A computer science portal for geeks
        </div>
    </div>
</body>
</html>

Shadow properties: These shadow properties are used to add shadow to text or boxes or frames of elements to enhance the visual quality of the webpage.

PropertyDescriptionSyntax
Text shadowIt is used to add shadow to text. It accepts a comma-separated list of shadow properties to be applied to the text.text-shadow: h-shadow v-shadow blur-radius color| none |initial | inherit;
Box shadowIt is used to give a shadow-like effect to the box or frames of an element. It accepts multiple comma separated effects .It is described using X and Y offsets relative to the element, blur and spread radius, and color.box-shadow: h-offset v-offset blur spread color |none |inset |initial | inherit;

CSS




<!DOCTYPE html>
<html>
<head>
   <title>CSS box-shadow Property</title>
   <style>
      .gfg1 {
      border: 1px solid;
      padding: 10px;
      /* box-shadow: h-offset v-offset blur */
      box-shadow: 5px 10px 10px;
      }
        
      /* text-shadow: h-shadow v-shadow
         blur-radius color */
      h2 {
      text-shadow: 5px 5px 8px #00FF00;
      }
   </style>
</head>
<body>
   <div class="gfg1">
      <h1>Welcome to GeeksforGeeks!</h1>
   </div>
   <br><br>
   <h2>GeekforGeeks</h2>
</body>
</html>

Gradient: The CSS gradient property is used to create a smooth and progressive transition between two or more specified colors. Transition can go up/down/right/left/diagonal/radial using different color stops, angles, or percentage.

GradientDescriptionSyntax
Linear GradientThis property is used to create smooth color transitions going up, down, left, right, and diagonally. It requires a minimum of two colors, a starting point, and the direction for the gradient effect.background-image: linear-gradient(direction, color-stop1, color-stop2, …);
Radial GradientA radial gradient is used to obtain an elliptical shape gradient. It starts at a single point and emanates outward. The first color starts at the center position of the element and then fades to the end color towards the edge of the element at an equal pace until specified.background-image: radial-gradient(shape size at position, start-color, …, last-color);

CSS




<!DOCTYPE html>
<html>
<head>
    <title>CSS Gradients</title>
    <style>
    #main1 {
        height: 200px;
        background-color: white;
        background-image: linear-gradient(white, green);
    }
    #main2 {
        height: 350px;
        width: 700px;
        background-color: white;
        background-image: radial-gradient(#090,
                                #fff, #2a4f32);
    }
  
      
    .gfg {
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        padding-top: 80px;
    }
      
    .geeks {
        font-size: 17px;
        text-align: center;
    }
    </style>
</head>
  
<body> 
    <!-- Linear gradient -->
    <div id="main1">
        <div class="gfg">GeeksforGeeks</div>
        <div class="geeks">
        Linear Gradient
        </div>
    </div>
    <br><br>
    <!-- Radial Gradient -->
    <div id="main2">
        <div class="gfg">GeeksforGeeks</div>
        <div class="geeks">
        Radial Gradient
    </div>
</body>
</html>

Border Properties: The CSS border properties allow you to specify how the border of the box representing an element should look. It is used to specify the color type and width of the looks border to give the element the desired look.

PropertyDescriptionSyntax
Border ColorIt specifies the color of the border of the box containing the element. It works only when the border-style property is defined first, it will not work alone. If this property is not set then it inherits the color of the element.border-color: color-value;
Border StyleIt sets the style or look of the border as solid, dotted, rigged, etc. It takes one to four values at a time.border-style: value;
Border WidthIt sets the width of the border of the element in length in px , cm, etc., or as thin medium, and thick.border-width: length |thin |medium |thick |initial |inherit

CSS




<!DOCTYPE html>
<html>
  
<head>
    <title> Border Properties</title>
    <style>
        #gfg1 {
            border: 2px solid blue;
            width: 60%;
        }
  
        #gfg2 {
            border: thick dashed green;
            width: 60%;
        }
    </style>
</head>
<body>
    <div id="gfg1">
       Demonstration of solid thick border of color blue
    </div><br><br>
    <div id="gfg2">
       Demonstration of dotted 2px width border of color green
    </div>
</body>
  
</html>

Classification Properties: The CSS classification properties allow you to specify how and where an element is displayed.

PropertyDescriptionSyntax
DisplayDisplay property defines how elements are displayed in the web page.display: inline |block |flex |grid |table |group |none| inherit;
FloatIt defines flow of content by determining if an element floats to the left or right, allowing text or image to wrap around it or be displayed inline.float: none| left| right| initial| inherit;
PositionIt specifies the positioning method of html entity on the web page. It places an element in a fixed, static, absolute, relative or sticky position.position: fixed| static| absolute |relative |sticky;
ClearIt is used to set the sides of an element where no other floating elements are allowed.clear: left |right |both | none;
VisibilityIt is used to set an element as visible or not.visibility: visible |hidden | collapse |initial |inherit;
CursorIt is used to specify the type or shape of cursor to be displayed.cursor: auto |default |pointer |crosshair |help | e-resize | all-scroll |progress |initial |inherit;

CSS




<!DOCTYPE html>
<html>
  
<head>
    <title>Classification properties</title>
    <style>
        #geeks1 {
            height: 50px;
            width: 100px;
            background: teal;
            display: block;
        }
  
        #geeks2 {
            height: 50px;
            width: 100px;
            background: cyan;
            display: block;
        }
  
        #geeks3 {
            height: 50px;
            width: 100px;
            background: green;
            display: block;
        }
  
        .pos {
            position: relative;
            left: 30px;
            border: 3px solid #73AD21;
        }
  
        .clr {
            width: 100px;
            height: 100px;
            background-color: green;
            color: white;
            font-weight: bold;
            font-style: itallic;
            font-size: 25px;
            text-align: center;
            float: left;
            padding: 15px;
        }
  
        p.GFG {
            clear: left;
        }
  
        h1,
        h2 {
            color: green;
            text-align: center;
        }
  
        .wait {
            cursor: wait;
        }
    </style>
    <h3>Classification properties</h3>
</head>
  
<body>
    <p>display Property: block </p>
    <div>
        <div id="geeks1">Block 1 </div>
        <div id="geeks2">Block 2</div>
        <div id="geeks3">Block 3</div>
    </div>
    <br>
    <p>Float Property:left</p>
    <div style="font-size:20px; color:#006400; float:right;">
         Content floats right 
    </div>
    <br>
    <p>Position Property:relative</p>
    <div class="pos">
        This div element has position: relative;
    </div><br>
    <p>Clear property: left</p>
    <div class="clr">
        <pre>GFG</pre>
    </div>
    <p>
        GeeksforGeeks:
        A computer science portal for geeks
    </p>
    <p class="GFG">GeeksforGeeks</p>
    <br>
    <p>Visibility property: visible/ hidden</p>
  
    <div style="visibility: visible;">Content here is visible</div>
    <div style="visibility: hidden">Content here is hidden</div>
    <br>
    <p>Cursor property: wait</p>
    <p class="wait">
       Mouse over the words to change the mouse cursor.
    </p>
</body>
</html>

CSS Functions: CSS has a range of inbuilt functions. These are used as a value for various CSS properties. Some of the CSS functions can be nested as well. It ranges from simple color functions to mathematical, shape, color, transform, gradient, and animations functions. Some of the key functions are:

FunctionDescriptionSyntax
attr()CSS attr() function is an inbuilt function in CSS that retrieves the value of an attribute of the selected elements and uses it in the stylesheet.attr( attr_name );
calc()CSS calc() function takes a single mathematical expression as its parameter and performs operations based on CSS property. It can be a mix of types, such as length, number, angle and frequency.calc( Expression );
max()CSS max() function returns the largest number of the given set of comma separated numbers.max(value 1, value2, value3…)
url()CSS URL() function takes a string URL as a parameter and is used to load images, fonts and content and allows you to link to a resource, such as an image, web font, a filter, etc.url( <string> <url-modifier>* )
var()CSS var() function is used to insert the value of a custom property which is the required parameter and its name must start with two dashes.var( custom_property, value )

CSS




<!DOCTYPE html>
<html>
  
<head>
    <title>CSS functions</title>
    <style>
        a:before {
            content: attr(href) " =>";
        }
  
        a {
            text-decoration: none;
        }
  
        body {
            text-align: center;
        }
  
  
        .geeks {
            position: absolute;
            left: 50px;
            width: calc(100% - 20%);
            height: calc(100px - 20px);
            background-color: green;
            text-align: center;
        }
  
        .url {
            background-image: url(
            text-align: center;
        }
  
        .gfg1 {
            background-color: var(--main-bg-color);
            padding: 10px;
        }
  
        :root {
            --main-bg-color: Green;
        }
    </style>
</head>
  
<body>
    <p>attribute function</p>
    <a href="https://www.geeksforgeeks.org">GeeksforGeeks</a><br><br>
  
    <p>Calc funtion</p>
    <div class="geeks">
        <h3>The calc() Function</h3>
    </div><br><br>
  
    <p>URL function</p>
    <div class="url" style="height:200px; width:100%">
        <h3>CSS url() function</h3>
    </div><br>
    <p> var function</p>
    <div class="gfg1">demonstration of var function</div><br>
</body>
  
</html>

Media Queries: The CCS Media Query is used to make the web page more responsive according to the different screens or media types. It can be used to check the width and height of the viewport or device, orientation, and resolution of the output device. It consists of a media type that can contain one or more expressions that can be either true or false. Media queries include a block of CSS only if a certain expression is true.

Syntax:

@media not | only mediatype and (expression) {
    // Code content
Media TypeDescription
AllIt is used for all media devices.
PrintIt is used when printer is in use.
ScreenIt is used for computer screens, smartphones etc.
SpeechIt is used for screen readers that read the screen aloud.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!