Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • GfG 160: Daily DSA
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • HTML Cheat Sheet
  • CSS Cheat Sheet
  • JS Cheat Sheet
  • Bootstrap Cheat Sheet
  • jQuery Cheat Sheet
  • Angular Cheat Sheet
  • SDE Sheet
  • Facebook SDE Sheet
  • Amazon SDE Sheet
  • Apple SDE Sheet
  • Netflix SDE Sheet
  • Google SDE Sheet
  • Wipro SDE Sheet
  • Infosys SDE Sheet
  • TCS SDE Sheet
  • Cognizant SDE Sheet
  • HCL SDE Sheet
  • Mass Recruiters Sheet
  • Product-Based Coding Sheet
  • Company-Wise Practice Sheet
  • Love Babbar Sheet
Open In App
Next Article:
JavaScript Cheat Sheet - A Basic Guide to JavaScript
Next article icon

CSS Cheat Sheet - A Basic Guide to CSS

Last Updated : 05 Jul, 2023
Comments
Improve
Suggest changes
Like Article
Like
Report

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
  • Selectors
  • Font Properties
  • Text Properties
  • Background Properties
  • Box Properties
  • Shadow Properties
  • Gradient
  • Border Properties
  • Classification Properties
  • CSS functions
  • Media Queries

  • 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.

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

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

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

    Clearfix: It clears floats to select or control margins and padding.

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

    Selectors: Used to find or select the HTML elements you want to style. These are categorized as follows:

    Basic Selectors Description Syntax
    Universal Selects all elements on the pages. *{property:value;}
    Type Selects all HTML tag/element of given type in your document. p {property:value;}
    Id Selects an element based on the value of its unique id attribute #id {property:value;}
    Class Selects all elements in the document that have the given class attribute. .class {property:value;}
    Attribute Selects all elements that have a specified attribute. a[attribute=value] {property:value;}
    Combinators Complex selectors consisting of more than one selectors having some relationship between them. selector1 selector2/ selector 1+selector2 / selector 1> selector 2 {property: value;}
    Pseudo Define the special state of an element to add an effect to an existing element based on its states. 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>pseudo 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.

    Property Description Syntax
    Font-family Specifies the font family to be used for the element's text content. font-family:
    family-name |generic-family |initial |inherit;
    Font-style Styles the text content in a normal, italic, or oblique face from its font-family. font-style:
    normal |italic |oblique |initial |inherit;
    Font-variant Converts all lowercase letters into uppercase letters. font-variant:
    normal| small caps | initial;
    Font-weight Specifies thickness or weight of the font font-weight:
    normal| bold |number |initial |inherit |unset;
    Font-size Specifies 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.

    Property Description Syntax
    Text-color Sets the color of the text. color: value;
    Text-alignment Defines the horizontal alignment of the text. text-align:
    left|right|center|
    justify|initial|inherit;
    Text-decoration Add or remove text- decorations. text-decoration:
    decoration-type;
    Text-transformation Changes the case(uppercase|lowercase) of text. text-transform:
    none|capitalize|uppercase|
    lowercase|initial|inherit;
    Text-indentation Indents the first line of text block. text-indent:
    length|initial|inherit;
    Letter spacing Specifies spacing between the characters of the text. letter-spacing:
    normal|length|
    initial|inherit;
    Line height Specifies the space between the lines of the text. line-height:
    normal|number|length|
    percentage|initial|inherit;
    Text-shadow Adds shadow to the text. text-shadow:
    h-shadow v-shadow
    blur-radius
    color|none|initial|inherit
    Word spacing Specifies space between words of lines. 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.

    Property Description Syntax
    Background-color Specifies the background color of an element. background-color:
    color_name;
    Background-image Adds one or more background images to an element. background-image:
    url('url');
    Background-repeat Adds or remove repeat the background image both horizontally and vertically. background-repeat:
    repeat|repeat-x|repeat-y|
    no-repeat|initial|inherit;
    Background-position Specifies the positioning of the image in a certain way. background-position:
    value;
    Background-origin Used to adjust the background image of the webpage. background-origin:
    padding-box |border-box
    |content-box | initial| inherit;
    Background-attachment Specifies the kind of attachment of the background image in its container/td> background-attachment:
    scroll|fixed|local|initial|inherit;
    Background-clip Used to define how far the background (color or image) should extend. background-clip:
    border-box|padding-box|content-box|initial|inherit;
    CSS
    <!DOCTYPE html>
    <html>
    <head>
        <title>Background Properties</title>
        <style>
            .a {
                background-image:
                url(
    "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");
                }
            .b {
                background-image:
                url(
    "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");
                background-repeat: no-repeat;
            }
            .c {
                background-image:
                url(
    "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png");
                background-repeat: no-repeat;
                background-position: center;
            }
            .d {
                background-image:
                url(
    'https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png');
                background-repeat: no-repeat;
                background-origin: initial;
            }
            .e {
                background-image:
                url(
    "https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png");
                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 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 
        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:

    Property Description Syntax
    Margin Used to set the margin margin: value;
    Padding Specifies the space between the border and the content of the selector. padding: value;
    Border Sets the element's border width and set the style, and color of an element's border. border: value;
    Width Used to set an element's width. width: value;
    Height Used to set an element's height 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.

    Property Description Syntax
    Text shadow Adds shadow to text. text-shadow:
    h-shadow v-shadow blur-radius color| none |initial | inherit;
    Box shadow Gives shadow-like effect to the box or frames of an element. 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 transition between two or more specified colors

    Gradient Description Syntax
    Linear Gradient Creates smooth color transitions. background-image:
    linear-gradient(direction, color-stop1, color-stop2, ...);
    Radial Gradient Used to obtain an elliptical shape gradient. 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.

    Property Description Syntax
    Border Color Specifies the color of the border of the box. Works only when the border-style property is defined. border-color:
    color-value;
    Border Style Sets the style of the border as solid, dotted, rigged, etc. border-style:
    value;
    Border Width Sets the width of the border of the element. 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.

    Property Description Syntax
    Display Defines how elements are displayed in the web page. display:
    inline|block|flex|
    grid|table|group|none|inherit;
    Float Defines flow of content float:
    none|left|right|
    initial| inherit;
    Position Specifies the positioning method of html entity on the web page. position:
    fixed|static|absolute
    |relative |sticky;
    Clear Sets the sides of an element where no other floating elements are allowed. clear:
    left|right|both|none;
    Visibility Set an element as visible or not. visibility:
    visible|hidden|collapse|initial|inherit;
    Cursor Specifies the type or shape of cursor 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>
    </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:

    Function Description Syntax
    attr() Retrieves the value of an attribute of the selected elements attr( attr_name );
    calc() Takes a single mathematical expression as its parameter and performs operations calc( Expression );
    max() Returns the largest number of the given set of comma separated numbers. max(value 1, value2, value3...)
    url() Takes a string URL as a parameter and is used to load images, fonts and content url( <string> <url-modifier>* )
    var() Inserts the value of a custom property. 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(
    "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png");
                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 function</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 CSS Media Query is used to make the web page more responsive according to the different screens or media types. Media queries include a block of CSS only if a certain expression is true.

    Syntax:

    @media not | only mediatype and (expression) {
        // Code content
    Media Type Description
    All It is used for all media devices.
    Print It is used when printer is in use.
    Screen It is used for computer screens, smartphones etc.
    Speech It is used for screen readers that read the screen aloud.

    Next Article
    JavaScript Cheat Sheet - A Basic Guide to JavaScript

    A

    akankshasingh39
    Improve
    Article Tags :
    • Web Technologies
    • CSS
    • GFG Sheets
    • Web-Dev Sheet

    Similar Reads

      HTML Cheat Sheet
      HTML (HyperText Markup Language) serves as the foundational framework for web pages, structuring content like text, images, and videos. HTML forms the backbone of every web page, defining its structure, content, and interactions. Its enduring relevance lies in its universal adoption across web devel
      15+ min read
      CSS Cheat Sheet
      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
      13 min read
      JavaScript Cheat Sheet
      JavaScript is a lightweight, open, and cross-platform programming language. It is omnipresent in modern development and is used by programmers across the world to create dynamic and interactive web content like applications and browsersJavaScript (JS) is a versatile, high-level programming language
      15+ min read
      jQuery Cheat Sheet
      What is jQuery?jQuery is an open-source, feature-rich JavaScript library, designed to simplify the HTML document traversal and manipulation, event handling, animation, and Ajax with an easy-to-use API that supports the multiple browsers. It makes the easy interaction between the HTML & CSS docum
      15+ min read
      Angular Cheat Sheet
      Angular is a client-side TypeScript-based, front-end web framework developed by the Angular Team at Google, that is mainly used to develop scalable single-page web applications(SPAs) for mobile & desktop. Angular is a great, reusable UI (User Interface) library for developers that helps in build
      15+ min read
      Bootstrap Cheat Sheet
      Bootstrap is a free, open-source, potent CSS framework and toolkit used to create modern and responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, websites are perfect for all browsers and all
      15+ min read
      ReactJS Cheat Sheet
      React is an open-source JavaScript library used to create user interfaces in a declarative and efficient way. It is a component-based front-end library responsible only for the view layer of a Model View Controller (MVC) architecture. React is used to create modular user interfaces and promotes the
      9 min read
      HTML Complete Guide
      What is HTML ? HTML stands for Hypertext Markup Language. It is a standard markup language used to design the documents displayed in the browsers as a web page. This language is used to annotate (make notes for the computer) text so that a machine can understand it and manipulate text accordingly. M
      7 min read
      CSS Complete Guide
      What is CSS ?CSS stands for "Cascading Style Sheet". It is used to style HTML Documents. CSS simplifies the process of making web pages presentable. It describes how web pages should look it prescribes colors, fonts, spacing, and much more.CSS Complete GuideWhat is CSS Complete Guide ?CSS Complete G
      4 min read
      JavaScript Complete Guide
      JavaScript is a lightweight, cross-platform, single-threaded, and interpreted compiled programming language. It is also known as the scripting language for web pages. Some of the key features of JavaScript are:Lightweight and Fast: JavaScript is a lightweight programming language that runs quickly i
      6 min read
    geeksforgeeks-footer-logo
    Corporate & Communications Address:
    A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
    Registered Address:
    K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
    GFG App on Play Store GFG App on App Store
    Advertise with us
    • Company
    • About Us
    • Legal
    • Privacy Policy
    • In Media
    • Contact Us
    • Advertise with us
    • GFG Corporate Solution
    • Placement Training Program
    • Languages
    • Python
    • Java
    • C++
    • PHP
    • GoLang
    • SQL
    • R Language
    • Android Tutorial
    • Tutorials Archive
    • DSA
    • Data Structures
    • Algorithms
    • DSA for Beginners
    • Basic DSA Problems
    • DSA Roadmap
    • Top 100 DSA Interview Problems
    • DSA Roadmap by Sandeep Jain
    • All Cheat Sheets
    • Data Science & ML
    • Data Science With Python
    • Data Science For Beginner
    • Machine Learning
    • ML Maths
    • Data Visualisation
    • Pandas
    • NumPy
    • NLP
    • Deep Learning
    • Web Technologies
    • HTML
    • CSS
    • JavaScript
    • TypeScript
    • ReactJS
    • NextJS
    • Bootstrap
    • Web Design
    • Python Tutorial
    • Python Programming Examples
    • Python Projects
    • Python Tkinter
    • Python Web Scraping
    • OpenCV Tutorial
    • Python Interview Question
    • Django
    • Computer Science
    • Operating Systems
    • Computer Network
    • Database Management System
    • Software Engineering
    • Digital Logic Design
    • Engineering Maths
    • Software Development
    • Software Testing
    • DevOps
    • Git
    • Linux
    • AWS
    • Docker
    • Kubernetes
    • Azure
    • GCP
    • DevOps Roadmap
    • System Design
    • High Level Design
    • Low Level Design
    • UML Diagrams
    • Interview Guide
    • Design Patterns
    • OOAD
    • System Design Bootcamp
    • Interview Questions
    • Inteview Preparation
    • Competitive Programming
    • Top DS or Algo for CP
    • Company-Wise Recruitment Process
    • Company-Wise Preparation
    • Aptitude Preparation
    • Puzzles
    • School Subjects
    • Mathematics
    • Physics
    • Chemistry
    • Biology
    • Social Science
    • English Grammar
    • Commerce
    • World GK
    • GeeksforGeeks Videos
    • DSA
    • Python
    • Java
    • C++
    • Web Development
    • Data Science
    • CS Subjects
    @GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
    We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
    Lightbox
    Improvement
    Suggest Changes
    Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
    geeksforgeeks-suggest-icon
    Create Improvement
    Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
    geeksforgeeks-improvement-icon
    Suggest Changes
    min 4 words, max Words Limit:1000

    Thank You!

    Your suggestions are valuable to us.

    '); // $('.spinner-loading-overlay').show(); let script = document.createElement('script'); script.src = 'https://assets.geeksforgeeks.org/v2/editor-prod/static/js/bundle.min.js'; script.defer = true document.head.appendChild(script); script.onload = function() { suggestionModalEditor() //to add editor in suggestion modal if(loginData && loginData.premiumConsent){ personalNoteEditor() //to load editor in personal note } } script.onerror = function() { if($('.editorError').length){ $('.editorError').remove(); } var messageDiv = $('
    ').text('Editor not loaded due to some issues'); $('#suggestion-section-textarea').append(messageDiv); $('.suggest-bottom-btn').hide(); $('.suggestion-section').hide(); editorLoaded = false; } }); //suggestion modal editor function suggestionModalEditor(){ // editor params const params = { data: undefined, plugins: ["BOLD", "ITALIC", "UNDERLINE", "PREBLOCK"], } // loading editor try { suggestEditorInstance = new GFGEditorWrapper("suggestion-section-textarea", params, { appNode: true }) suggestEditorInstance._createEditor("") $('.spinner-loading-overlay:eq(0)').remove(); editorLoaded = true; } catch (error) { $('.spinner-loading-overlay:eq(0)').remove(); editorLoaded = false; } } //personal note editor function personalNoteEditor(){ // editor params const params = { data: undefined, plugins: ["UNDO", "REDO", "BOLD", "ITALIC", "NUMBERED_LIST", "BULLET_LIST", "TEXTALIGNMENTDROPDOWN"], placeholderText: "Description to be......", } // loading editor try { let notesEditorInstance = new GFGEditorWrapper("pn-editor", params, { appNode: true }) notesEditorInstance._createEditor(loginData&&loginData.user_personal_note?loginData.user_personal_note:"") $('.spinner-loading-overlay:eq(0)').remove(); editorLoaded = true; } catch (error) { $('.spinner-loading-overlay:eq(0)').remove(); editorLoaded = false; } } var lockedCasesHtml = `You can suggest the changes for now and it will be under 'My Suggestions' Tab on Write.

    You will be notified via email once the article is available for improvement. Thank you for your valuable feedback!`; var badgesRequiredHtml = `It seems that you do not meet the eligibility criteria to create improvements for this article, as only users who have earned specific badges are permitted to do so.

    However, you can still create improvements through the Pick for Improvement section.`; jQuery('.improve-header-sec-child').on('click', function(){ jQuery('.improve-modal--overlay').hide(); $('.improve-modal--suggestion').hide(); jQuery('#suggestion-modal-alert').hide(); }); $('.suggest-change_wrapper, .locked-status--impove-modal .improve-bottom-btn').on('click',function(){ // when suggest changes option is clicked $('.ContentEditable__root').text(""); $('.suggest-bottom-btn').html("Suggest changes"); $('.thank-you-message').css("display","none"); $('.improve-modal--improvement').hide(); $('.improve-modal--suggestion').show(); $('#suggestion-section-textarea').show(); jQuery('#suggestion-modal-alert').hide(); if(suggestEditorInstance !== null){ suggestEditorInstance.setEditorValue(""); } $('.suggestion-section').css('display', 'block'); jQuery('.suggest-bottom-btn').css("display","block"); }); $('.create-improvement_wrapper').on('click',function(){ // when create improvement option clicked then improvement reason will be shown if(loginData && loginData.isLoggedIn) { $('body').append('
    '); $('.spinner-loading-overlay').show(); jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.unlocked-status--improve-modal-content').css("display","none"); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { showErrorMessage(e.responseJSON,e.status) }, }); } else { if(loginData && !loginData.isLoggedIn) { $('.improve-modal--overlay').hide(); if ($('.header-main__wrapper').find('.header-main__signup.login-modal-btn').length) { $('.header-main__wrapper').find('.header-main__signup.login-modal-btn').click(); } return; } } }); $('.left-arrow-icon_wrapper').on('click',function(){ if($('.improve-modal--suggestion').is(":visible")) $('.improve-modal--suggestion').hide(); else{ } $('.improve-modal--improvement').show(); }); const showErrorMessage = (result,statusCode) => { if(!result) return; $('.spinner-loading-overlay:eq(0)').remove(); if(statusCode == 403) { $('.improve-modal--improve-content.error-message').html(result.message); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); return; } } function suggestionCall() { var editorValue = suggestEditorInstance.getValue(); var suggest_val = $(".ContentEditable__root").find("[data-lexical-text='true']").map(function() { return $(this).text().trim(); }).get().join(' '); suggest_val = suggest_val.replace(/\s+/g, ' ').trim(); var array_String= suggest_val.split(" ") //array of words var gCaptchaToken = $("#g-recaptcha-response-suggestion-form").val(); var error_msg = false; if(suggest_val != "" && array_String.length >=4){ if(editorValue.length { jQuery('.ContentEditable__root').focus(); jQuery('#suggestion-modal-alert').hide(); }, 3000); } } document.querySelector('.suggest-bottom-btn').addEventListener('click', function(){ jQuery('body').append('
    '); jQuery('.spinner-loading-overlay').show(); if(loginData && loginData.isLoggedIn) { suggestionCall(); return; } // script for grecaptcha loaded in loginmodal.html and call function to set the token setGoogleRecaptcha(); }); $('.improvement-bottom-btn.create-improvement-btn').click(function() { //create improvement button is clicked $('body').append('
    '); $('.spinner-loading-overlay').show(); // send this option via create-improvement-post api jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { showErrorMessage(e.responseJSON,e.status); }, }); });
    "For an ad-free experience and exclusive features, subscribe to our Premium Plan!"
    Continue without supporting
    `; $('body').append(adBlockerModal); $('body').addClass('body-for-ad-blocker'); const modal = document.getElementById("adBlockerModal"); modal.style.display = "block"; } function handleAdBlockerClick(type){ if(type == 'disabled'){ window.location.reload(); } else if(type == 'info'){ document.getElementById("ad-blocker-div").style.display = "none"; document.getElementById("ad-blocker-info-div").style.display = "flex"; handleAdBlockerIconClick(0); } } var lastSelected= null; //Mapping of name and video URL with the index. const adBlockerVideoMap = [ ['Ad Block Plus','https://media.geeksforgeeks.org/auth-dashboard-uploads/abp-blocker-min.mp4'], ['Ad Block','https://media.geeksforgeeks.org/auth-dashboard-uploads/Ad-block-min.mp4'], ['uBlock Origin','https://media.geeksforgeeks.org/auth-dashboard-uploads/ub-blocke-min.mp4'], ['uBlock','https://media.geeksforgeeks.org/auth-dashboard-uploads/U-blocker-min.mp4'], ] function handleAdBlockerIconClick(currSelected){ const videocontainer = document.getElementById('ad-blocker-info-div-gif'); const videosource = document.getElementById('ad-blocker-info-div-gif-src'); if(lastSelected != null){ document.getElementById("ad-blocker-info-div-icons-"+lastSelected).style.backgroundColor = "white"; document.getElementById("ad-blocker-info-div-icons-"+lastSelected).style.borderColor = "#D6D6D6"; } document.getElementById("ad-blocker-info-div-icons-"+currSelected).style.backgroundColor = "#D9D9D9"; document.getElementById("ad-blocker-info-div-icons-"+currSelected).style.borderColor = "#848484"; document.getElementById('ad-blocker-info-div-name-span').innerHTML = adBlockerVideoMap[currSelected][0] videocontainer.pause(); videosource.setAttribute('src', adBlockerVideoMap[currSelected][1]); videocontainer.load(); videocontainer.play(); lastSelected = currSelected; }

    What kind of Experience do you want to share?

    Interview Experiences
    Admission Experiences
    Career Journeys
    Work Experiences
    Campus Experiences
    Competitive Exam Experiences