CSS Cheat Sheet – A Basic Guide to CSS

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.

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

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

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

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

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:

Shadow properties: These shadow properties are used to add shadow to text or boxes or frames of elements.

Gradient: The CSS gradient property is used to create transition between two or more specified colors

Border Properties: The CSS border properties allow you to specify how the border of the box representing an element should look.

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

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:

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