Practice
Resources
Contests
Online IDE
New
Free Mock
Scaler Events New
Practice
Improve your coding skills with our resources
Contests
Compete in popular contests with top coders
Scaler
Explore Offerings by SCALER
Events
Checkout Scaler Academy Events
New

Before you go!

Take this "CSS Cheat Sheet" interview guide with you

CSS Cheat Sheet

Download PDF


Your requested download is ready!
Click here to download.

INTRODUCTION TO CSS

To specify formatting within an HTML document (fonts, layout, background, colours, etc. ), authors have to apply separate tags to different parts to format. The term CSS pertains to Cascading Style Sheets, which are used to specify your document's style. While HTML is utilized for structuring a web page (the headlines and paragraphs, as well as the ability to include images, video, and other elements), CSS specifies your page layout, colours, and fonts. CSS is used to bring style to your web pages.

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 colour, are assigned values within the brackets following the name of the element to style, called the CSS selector.

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.

Crack your next tech interview with confidence!
Take a free mock interview, get instant⚡️ feedback and recommendation💡
Events | Powered By

Learn CSS: Basics to Advanced Concepts

1. CSS Selectors

COMMAND DESCRIPTION SYNTAX
UNIVERSAL SELECTOR The CSS universal selector (*) matches elements of any type. When utilising @namespace, universal selectors can be namespaced.
{}
ID SELECTOR The CSS ID selector matches an element based on the value of the element’s id attribute. This is what you'd use to refer to that one-of-a-kind element with an id.
id {}
CLASS SELECTOR The CSS class selector matches elements based on the contents of their class. 
.class {}
TYPE SELECTOR It selects all elements of the given type within a document. In other words, the type selector in CSS matches components based on their node names.
h1, h2 ,h3 {}
ADJACENT SIBLING SELECTOR The adjacent sibling combinator (+) separates two selectors. It comes right after the first element, and they're both children of the same parent.
h1 + p {}
CHILD SELECTOR The child combinator (>) is placed between two CSS selectors.
ul > li {}
GENERAL SIBLING SELECTOR Select all elements that follow the first element such that both are children of the same parent.
h1 ~ p {}
DESCENDANT SELECTOR Any selector with white space between two selectors without a combinator.
p a {}

2. Pseudo-classes and Pseudo-elements

A pseudo-class is used to define a special state of an element. A CSS pseudo-element is used to style specified parts of an element.

COMMANDS DESCRIPTION SYNTAX
Mouse over selector Triggered when the user hovers over an element with the cursor. You can use the hover selection to target an element that a user hovers over with their cursor.
a:hover {}
Active Link Selector The :active pseudo-class is commonly used on <a> and <button> elements. When a link is clicked, you can provide a style for it with this selector.
a:active {}
Focus Selector Triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.
input:focus {}
Visited Links Selector Represents that the link has already been visited. Its styles for URLs that the user has already visited are defined.
:visited {}
Link Selector  This represents that the link has not yet been visited.
.class:link {}
Checked selector element Represents radio, checkbox, or option element that is checked or toggled to an on-state. When the page loads, it specifies that an <input> element should be already selected (checked).
input:checked {}
Disabled elements selector An element is disabled. It represents that the element is currently disabled, To pick the disabled element, the :disabled selector is used.
input:disabled {}
Enabled elements selector An element is enabled. It represents that the element is currently available.
input:enabled {}
Not a Specified Element Selector Represents elements that do not match a list of selectors.
:not(p) {}
First Line Selector Applies styles to the first line of a block-level element. It is used in the first line of an element to style it.
p::first-line {}
First Letter Selector Applies styles to the first letter of the first line. The style is applied to the first letter of the first line of a block-level element if it is not preceded by other content.
::first-letter {}
First Child Selector Represents the first element among a group of sibling elements. It is used to find all elements that are children of a given element.
:first-child {}
Last Child Selector Represents the last. It indicates the last sibling element in a collection of siblings.
:last-child {}
Only Child Selector Represents an element without any siblings. You can use the CSS:only-child selector to target an element which is the only child of its parent.
:only-child {}
:nth-child Selector Matches elements based on their position.
:nth-child()
First Element of its Parent Selector  Represents the first element. In CSS, you may use the:first-of-type selector to target an element's first appearance within the container.
P:first-of-type {}
Elements that have no Children Selector Represents any element that has no children. Any element with no children is represented by this. Either element nodes or text can be children.
p:empty {}
Before Element Used to add cosmetic content to an element with the content property.The::before pseudo-element is used to define created stuff that comes before the content of an element.
class::before {}
After Element Used to add cosmetic content to an element with the content propertyThe::after pseudo-element is used to define created stuff that comes after the content of an element.
.class::after {}

3. CSS Text Styling

COMMAND DESCRIPTION SYNTAX 
Font style It sets the font style. We can set our text as normal, bold, italic, oblique as per our requirement
font-style: normal | italic | oblique
Font Variant It 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 Weight Sets 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 Alignment Sets 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 Transform It sets how text is written. It will define the text as uppercase, lowercase or capitalized.
text-transform: capitalise | lowercase | uppercase
Font Size It 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 Characters It defines the space between characters. It helps to adjust the spacing between two characters.
letter-spacing: normal | 4px
Line Height It sets the height of the line. It defines the height of the line.
line-height: normal | 3em | 34%
Horizontal Alignment Sets 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 Last The 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 Decoration Text-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 Family Sets the font family of the text by linking the font families from google to the HTML.
font-family: 'Open Sans', sans-serif
Text Justify Specifies the justification method of text when text-align is set to "justify".
text-justify: auto | inter-word | inter-character | none
Text Overflow Sets how hidden overflow content is signalled to the user.
text-overflow: clip | ellipsis | string | initial | inherit
Text Shadow Sets the shadow of text in any direction.
text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit
You can download a PDF version of Css Cheat Sheet.

Download PDF


Your requested download is ready!
Click here to download.

4. CSS Table

COMMAND DESCRIPTION SYNTAX
Adding Borders to Tables The CSS border property is the best way to define the borders for the tables.
border: 1px solid black;
Adjusting spacing inside Tables You may easily use the CSS padding property to provide additional space between the table cell contents and the cell borders.
th, td {padding: 15px;}
Setting Table Width and Height The width and height CSS properties can also be used to specify the table's width and height, as well as the width and height of its cells.
table {width: 100%;}  |  th {height: 40px;}
Controlling table layout This property specifies the layout algorithm for table cells, rows, and columns.
 table { width: 300px; table-layout: fixed; }
Horizontal Alignment of Cell Contents You may use the text-align property in the same manner you do with other components to position text inside table cells horizontally.
th {text-align: left;}
Vertical Alignment of Cell Contents Similarly, you may use the CSS vertical-align property to align the content inside the th> and td> elements to the top, bottom, or center.
th {height: 30px; vertical-align: bottom;}
Making a Table Responsive Tables aren't naturally responsive. You may add responsiveness to your tables by allowing horizontal scrolling on tiny displays to support mobile devices. Simply enclose your table in a div> element and use the overflow-x: auto; style.
<div style="overflow-x: auto;"> 
    <table>
        ... table content ...
    </table>
</div>

5. CSS Position

COMMAND DESCRIPTION SYNTAX
Position Set the position of the elements in a document.
position: static | relative | absolute | fixed | sticky
Position Properties Defines the position of an element in a document.
top | right | bottom | left
Float Element Defines the position of an element in a document text and inline elements to wrap around.
float: left | right | none
Clear Floating Elements Whether an element must be moved below (cleared) floating elements that precede it.
clear: none | left | right | both
Z Index Sets overlapping elements with a larger z-index cover those with a smaller one.
z-index: 3 | auto | inherit

6. CSS Background

COMMANDS DESCRIPTION SYNTAX
Background Image Sets the background image in a div. An element's background-image attribute specifies one or more background images.
background-image: url()
Background Repeat Sets 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 Attachment Sets 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 colour of the div or container.
background-color: #2AA9E0
Background Position Sets the position of the background.
background-position: top | right | bottom | left | center
Background Opacity The 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};

Different properties and how it works:

7. CSS Box Model

COMMAND DESCRIPTION SYNTAX
Box Sizing Sets 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
Margin Sets 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
Padding Sets 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 colour 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 Width Sets 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:
}

The output will look like the below:

For this code 

img{
     Border-radius: 50px:
}

Output for the above code looks like the below:

8. CSS Styling Lists

COMMANDS DESCRIPTION SYNTAX
List Type It 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 Position Sets the position of the list.
list-style-position: inside | outside
List Image Sets the background image of the list.
list-style-image: url()

9. CSS Flexbox

COMMAND DESCRIPTION SYNTAX
Flex Direction Sets how flex items are placed in the flex container.
flex-direction: row | row-reverse | column | column-reverse
Flex Wrap Sets whether flex items are forced onto one line or can wrap onto multiple lines.
flex-wrap: nowrap | wrap | wrap-reverse
Justify Content Defines how the browser distributes space between and around content items.
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
Align Items It sets the align-self value on all direct children as a group.
gn-items: flex-start | flex-end | center | baseline | stretch
Align Content Sets the distribution of space between and around content.
align-content: flex-start | flex-end | center | space-between | space-around | stretch
Order Sets the order to lay out an item in a flex or grid container.
order: 0
Flex Grow It 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 Shrink It 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 Basis Sets 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 Self It 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;
}

Output:  

10. CSS Grid

COMMAND DESCRIPTION SYNTAX
Grid Template Columns Specifies the size of the columns, and how many columns are in a grid layout.
d-template-columns: 40px 50px auto 50px 40px
Grid Template Rows Specifies the size of the rows in a grid layout.
grid-template-rows: 25% 100px auto
Grid Template Areas Specifies how to display columns and rows, using named grid items.
grid-template-areas: "a b c" | none
Grid Template Property for defining grid columns, rows, and areas.
grid-template: "a a a" 20% "b b b" auto | 100px 1fr / 50px 1fr
Grid Column Gap Sets the size of the gap between columns.
grid-template: "a a a" 20% "b b b" auto | 100px 1fr / 50px 1fr
Grid Row Gap It 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 Items Defines the default justify-self for all items of the box.
justify-items: start | end | center | stretch
Align Items Sets the align-self value on all direct children as a group.
align-items: start | end | center | stretch
Justify Content Specifies how the browser distributes space between and around content.
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
Align Content Distribution of space between and around content items.
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
Grid Auto Columns Specifies the size of an implicitly-created grid column track or pattern of tracks.
grid-auto-columns: 100px | max-content | min-content
Grid Auto Rows CSS 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 Flow Property controls how the auto-placement algorithm works.
grid-auto-flow: row | column | row dense | column dense
Grid Column Start CSS property specifies a grid item’s start position within the grid column.
grid-column-start: 2 | areaname | span 2 | span areaname | auto
Grid Column End Specifies 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 Start A 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 End Specifies 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 Row Specifies 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 Self Overrides a grid or flex item's align-items value.
align-self: start | end | center | stretch

HOW A GIRD LOOKS LIKE:

11. CSS Content(Dynamic)

COMMAND DESCRIPTION SYNTAX
CSS Variable Used in other declarations using the var() function.
 --variable-name: value
Variable Usage Used in other declarations using the var() function.
var(--variable-name)
Counter Reset Create a new counter or reversed counter with the given name on the specified element.
counter-reset: name-of-counter
Counter Increment Increases or decreases the value of a CSS counter by a given.
counter-increment: name-of-counter
Counter Dynamic Value Adjust the appearance of content based on its location in a document.
content: counter(name-of-counter)
Attribute Dynamic Value Adjust the appearance of content based on its location in a document.
content: attr(name-of-attribute)

Recommended Resources

CSS MCQ

1.

Which of the following tags is used to embed CSS in an HTML page?

2.

Which of the following CSS selectors are used to specify a group of elements?

3.

Which type of HTML tag is used to define an internal style sheet?

4.

Which CSS property is used to make the text bold?

5.

The correct syntax to link an external style sheet in the HTML file is?

6.

What will the outcome of the CSS code snippet below be?

Get Placed at Top Product Companies with Scaler Know More 
Get Placed at Top Product Companies with Scaler Know More 
Get Placed at Top Product Companies with Scaler
Sat transparent 640a34d454880bf68e3bfdf33f2389f2214043f59ad18b4c7f7b114e834fb257.svg

Point markers b3add1cc88e4996b2df6e0aedb9f0d1b65fa73c51b7ada8fbee3895a2aa11802.svg Personalised feedback report with solutions
Point markers b3add1cc88e4996b2df6e0aedb9f0d1b65fa73c51b7ada8fbee3895a2aa11802.svg Real life Interview Questions
Point markers b3add1cc88e4996b2df6e0aedb9f0d1b65fa73c51b7ada8fbee3895a2aa11802.svg Identify exact topics to improve

Your feedback is important to help us improve.
Free Mock Assessment
Fill up the details for personalised experience.
All fields are mandatory
Current Employer *
Enter company name *
Graduation Year *
Select an option *
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
Phone Number *
OTP will be sent to this number for verification
+91 *
+91
Change Number
Phone Number *
OTP will be sent to this number for verification
+91 *
+91
Change Number
Graduation Year *
Graduation Year *
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
*Enter the expected year of graduation if you're student
Current Employer *
Company Name *
Please verify your phone number
Edit
Resend OTP
By clicking on Start Test, I agree to be contacted by Scaler in the future.
Already have an account? Log in
Free Mock Assessment
Instructions from Interviewbit
Start Test