Absolutely, here’s the CSS cheat sheet formatted for better readability:
CSS Cheat Sheet
What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to describe the
presentation of a document written in a markup language like 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?
A CSS Cheat Sheet provides you with the most common style snippets, includ-
ing:
• Gradient
• Background
• Button
• Font family
• Order
• Radius
• Box
• Text-shadow
• Color picker
• More tools to add visual weight to your document
All these and other useful web design tools can be found on a single page.
Table of Contents
• 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’ll see three different ways to add CSS for your HTML:
• External CSS: An external CSS file with a .css extension contains only
style properties with the help of tag attributes.
1
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
Selectors are 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 a 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
2
Complex selectors consisting of more than one selector 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;
}
Font Properties
CSS font properties are used to set the font’s content of the HTML element as
per requirements.
• 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 an HTML document. | font-size:
small | medium | large | initial | inherit;
Text Properties
CSS text formatting properties are used to format and style text by setting their
color, alignment,
