CSS Cheatsheet 2022 | CSS Cheatsheet For Interview | CSS Interview Questions

Do you regularly use CSS? This CSS cheatsheet should be useful to you whether you’re an experienced web developer or just someone who wants to learn web development.

I created it first for myself but ultimately wanted to share it on Techno-RJ.

So there it is a complete CSS tutorial, CSS crash course which is divided into various paragraphs that cover a wide range of topics, including backgrounds, borders, fonts, texts, columns, colors, grid layout, and much more (including UI).

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

And oh! All of the new CSS3 tags and divs are also listed which will helps you in cracking CSS interviews or Web Development interviews.

Enjoy Reading! Let’s get started with the Introduction Of CSS or the fundamentals of CSS.

An Ultimate Guide To CSS || CSS Cheatsheet

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.

TYPES OF CSS: 

There are 3 types of CSS:

  1. External CSS
  2. Internal CSS
  3. Inline CSS

1. External CSS: For using an external style sheet, your .html files need to include a header section that links to an external style sheet. Since the CSS code is in a separate document, your HTML files will have a cleaner structure and are smaller in size.

You can use the same .css file for multiple pages.

For example:

<head>
<link rel=”stylesheet”  type=”text/css”  href=mysitestyle.css”>
</head>

2. Internal CSS: These CSS instructions are written directly into the header of a specific .html page. This CSS style is an effective method of styling a single page.

For example:

<head>
<style>
Body  {  background-color:thistle;  }
P  {  font-size:20px;  color:mediumblue;  }
</style>
</head>

3. Inline CSS: Lastly, inline styles are CSS blocks that are written directly into a single instance of HTML code.

For example:

<h1  style=”font-size:55px;color:orange;”>Check out this headline!</h1>

The most efficient way of implementing CSS on a website is to use external style sheets, whereas internal style sheets and inline styles are suitable for case-by-case changes.

What is CSS Syntax?

CSS syntax is relatively simple. Various attributes, such as font size and background color, are assigned values within the brackets following the name of the element to style, called the CSS selector.

Checkout CSE Cheatsheet: https://technorj.com/others-2/cheatsheet/

What are CSS Selectors?

A CSS property value pattern is a pattern of elements, such as HTML elements, that instruct the browser which elements to select when applying the CSS property values.

What is CSS Clearfix: 

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

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

CSS Text Styling || CSS Fonts

COMMANDDESCRIPTIONSYNTAX 
Font styleIt sets the font style. We can set our text as normal, bold, italic, oblique as per our requirementfont-style: normal | italic | oblique
Font VariantIt sets the font variation. We can set the variant of the font as uppercase or lowercase, small-caps etc as per required by the user. font-variant: normal | small-caps
Font WeightSets the font weight. It helps us to set the weight of the font as normal, bold,  bolder lighter and we can also set it in numerics.font-weight: normal | bold | bolder | lighter | 100 - 900
Vertical AlignmentSets the alignment i.e. where text is shown. It will help to adjust our text where it will appear.vertical-align: baseline | 10px | sub | super | top | text-top | middle | bottom | text-bottom | initial
Text TransformIt sets how text is written. It will define the text as uppercase, lowercase or capitalized.text-transform: capitalise | lowercase | uppercase
Font SizeIt sets the font size. It helps us to define the size of our font to make our web page more attractive.font-size: 12px | 0.8em | 80%
Space Between CharactersIt defines the space between characters. It helps to adjust the spacing between two characters.letter-spacing: normal | 4px
Line HeightIt sets the height of the line. It defines the height of the line.line-height: normal | 3em | 34%
Horizontal AlignmentSets the horizontal alignment of the content. It helps to align the text horizontally whether it is left, right, centre or align.text-align: left | right | center | justify
Text Align LastThe text-align-last CSS property specifies how the last line of a block or line should be oriented before a forced line break.text-align-last: auto | left | right | center | justify | start | end | initial | inherit
Text DecorationText-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness are all shorthand for this property.text-decoration: none | underline | overline | line-through
Indent First Line The indentation of the initial line in a text block is controlled by the text-indent attribute.text-indent: 25px
Font FamilySets the font family of the text by linking the font families from google to the HTML.font-family: 'Open Sans', sans-serif
Text JustifySpecifies the justification method of text when text-align is set to “justify”.text-justify: auto | inter-word | inter-character | none
Text OverflowSets how hidden overflow content is signalled to the user.text-overflow: clip | ellipsis | string | initial | inherit
Text ShadowSets the shadow of text in any direction.text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit

Checkout More Articles:

What is Freelancing? Is Freelancing Better in 2022?
How do I Permanently Delete My Signal Account?
What are the Subfields in Computer Science Engineering?

CSS 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-separated color name, its hex value, or RGB value.color: value;
Text alignment CSS 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 the text (Uppercase or lowercase) or capitalize text.none|capitalize|uppercase|lowercase|initial|inherit;
Text- indentation CSS text indentation property is used to indent the first line of the text block. The size can be in px, cm, pt. size should be non-negative.text-indent: length|initial|inherit;
Letter-spacing CSS 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-height CSS 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-shadowThe CSS text-shadow property is used to add shadow to the text. Using this property you can specify the shadow color, horizontal size, 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 Background

COMMANDSDESCRIPTIONSYNTAX
Background ImageSets the background image in a div. An element’s background-image attribute specifies one or more background images.background-image: url()
Background RepeatSets whether the background is to be repeated or not, in other words, it determines whether or not the background picture will be repeated.background-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat
Background AttachmentSets the background image scroll or fixed. CSS’s background-attachment attribute controls how the background moves in relation to the viewport.background-attachment: scroll | fixed | local | initial | inherit
Background Color Set the background color of the div or container.background-color: #2AA9E0
Background PositionSets the position of the background.background-position: top | right | bottom | left | center
Background OpacityThe opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 – 1.0. The lower value, the more transparent it is.div {background-color: green; and opacity: 0.3};

CSS Box Model

COMMANDDESCRIPTIONSYNTAX
Box SizingSets the width and height of the box. Building CSS layouts with the box-sizing property may be a lot more straightforward.box-sizing: border-box | content-box
MarginSets the margin from all the sides of the box. This CSS tutorial explains how to use the CSS property called margin with syntax and examples.margin: 2px 4px 6px 8px | 0 auto | inherit
PaddingSets the area inside the box from the content. CSS’s box-sizing attribute determines how the box model is applied to the element to which it applies.padding: 2px 4px 6px 8px | 100% | inherit |
Border Color Sets the color of the border of the box.border-color: #2AA9E0
Border Style Sets the style of the border.border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Border WidthSets the width of the border. The width of an element’s borders is determined by the border-width attribute. The value of this characteristic can range from one to four.border-width: 10px

For example, in the following code,

img{
      Border-radius: 8px:
}

CSS Position

COMMANDDESCRIPTIONSYNTAX
PositionSet the position of the elements in a document.position: static | relative | absolute | fixed | sticky
Position PropertiesDefines the position of an element in a document.top | right | bottom | left
Float ElementDefines the position of an element in a document text and inline elements to wrap around.float: left | right | none
Clear Floating ElementsWhether an element must be moved below (cleared) floating elements that precede it.clear: none | left | right | both
Z IndexSets overlapping elements with a larger z-index cover those with a smaller one.z-index: 3 | auto | inherit

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 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 Styling Lists

COMMANDSDESCRIPTIONSYNTAX
List TypeIt sets the type of list. The List is of many types. You can select the type of list you want to add whether it is an ordered or unordered list.list-style-type: disc | circle | square | none
List PositionSets the position of the list.list-style-position: inside | outside
List ImageSets the background image of the list.list-style-image: url()

CSS Flexbox

COMMANDDESCRIPTIONSYNTAX
Flex DirectionSets how flex items are placed in the flex container.flex-direction: row | row-reverse | column | column-reverse
Flex WrapSets whether flex items are forced onto one line or can wrap onto multiple lines.flex-wrap: nowrap | wrap | wrap-reverse
Justify ContentDefines how the browser distributes space between and around content items.justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
Align ItemsIt sets the align-self value on all direct children as a group.gn-items: flex-start | flex-end | center | baseline | stretch
Align ContentSets the distribution of space between and around content.align-content: flex-start | flex-end | center | space-between | space-around | stretch
OrderSets the order to lay out an item in a flex or grid container.order: 0
Flex GrowIt sets the flex-grow factor. Flex-grow is a term that refers to a system that allows you to The flex-grow factor of a flex item’s main size to be controlled by the CSS property flex grow factor. flex-grow: 0
Flex ShrinkIt sets the flex shrink factor of a flex item. The flex-shrink is a method of reducing the size of a flexible object The flex-shrink factor of a flex item is controlled by the CSS attribute.flex-shrink: 0
Flex BasisSets the size of the content box. The flex-basis is a system that allows you to change your mind at any A flex item’s initial primary size is determined by a CSS attribute. Unless box-sizing is used, it determines the size of the content box.flex-basis: 3px | auto
Align SelfIt aligns the item inside the grid area.gn-self: auto | flex-start | flex-end | center | baseline | stretch

Let’s understand flexbox with an example:

 Code:
.flex-container {
    display: flex;
}

CSS Grid

COMMANDDESCRIPTIONSYNTAX
Grid Template ColumnsSpecifies the size of the columns, and how many columns are in a grid layout.d-template-columns: 40px 50px auto 50px 40px
Grid Template RowsSpecifies the size of the rows in a grid layout.grid-template-rows: 25% 100px auto
Grid Template AreasSpecifies how to display columns and rows, using named grid items.grid-template-areas: "a b c" | none
Grid TemplateProperty for defining grid columns, rows, and areas.grid-template: "a a a" 20% "b b b" auto | 100px 1fr / 50px 1fr
Grid Column GapSets the size of the gap between columns.grid-template: "a a a" 20% "b b b" auto | 100px 1fr / 50px 1fr
Grid Row GapIt sets the size of the gap between an element’s grid rows. The space between rows is known as the row gap. The gap between an element’s grid rows is controlled by this attribute.grid-row-gap: 10px
Justify ItemsDefines the default justify-self for all items of the box.justify-items: start | end | center | stretch
Align ItemsSets the align-self value on all direct children as a group.align-items: start | end | center | stretch
Justify ContentSpecifies how the browser distributes space between and around content.justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
Align ContentDistribution of space between and around content items.justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
Grid Auto ColumnsSpecifies the size of an implicitly-created grid column track or pattern of tracks.grid-auto-columns: 100px | max-content | min-content
Grid Auto RowsCSS property specifies the size of an implicitly-created grid row track or pattern of tracks.grid-auto-rows: 100px | max-content | min-content
Grid Auto FlowProperty controls how the auto-placement algorithm works.grid-auto-flow: row | column | row dense | column dense
Grid Column StartCSS property specifies a grid item’s start position within the grid column.grid-column-start: 2 | areaname | span 2 | span areaname | auto
Grid Column EndSpecifies a grid item’s start position within the grid column by contributing a line, a span.grid-column-end: 2 | areaname | span 2 | span areaname | auto
Grid Row StartA grid item’s start position within the grid row by contributing a line.grid-row-start: 2 | areaname | span 2 | span areaname | auto
Grid Row EndSpecifies a grid item’s end position within the grid row by contributing a line.grid-row-end: 2 | areaname | span 2 | span areaname | auto
Grid Column Specifies a grid item’s size and location within a grid column by contributing a line.grid-column: 3 / span 2
Grid RowSpecifies a grid item’s size and location within the grid row.grid-row: 3 / span 2
Justify Self Sets the way a box is justified inside its alignment container along the appropriate axis.justify-self: start | end | center | stretch
Align SelfOverrides a grid or flex item’s align-items value.align-self: start | end | center | stretch

CSS Content(Dynamic)

COMMANDDESCRIPTIONSYNTAX
CSS VariableUsed in other declarations using the var() function.--variable-name: value
Variable UsageUsed in other declarations using the var() function.var(--variable-name)
Counter ResetCreate a new counter or reversed counter with the given name on the specified element.counter-reset: name-of-counter
Counter IncrementIncreases or decreases the value of a CSS counter by a given.counter-increment: name-of-counter
Counter Dynamic ValueAdjust the appearance of content based on its location in a document.content: counter(name-of-counter)
Attribute Dynamic ValueAdjust the appearance of content based on its location in a document.content: attr(name-of-attribute)

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 a printer is in use.
ScreenIt is used for computer screens, smartphones, etc.
SpeechIt is used for screen readers that read the screen aloud.

Hope You Like This CSS Complete Cheatsheet.

Leave a Comment

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker🙏.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock