CSS Cheat Sheet - A Basic Guide to CSS

Last Updated : 05 Jul, 2023

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:

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.

JavaScript Cheat Sheet - A Basic Guide to JavaScript

akankshasingh39

Improve

Article Tags :

CSS Cheat Sheet - A Basic Guide to CSS

Similar Reads