Top 105 CSS Interview Questions and Answers

CSS interview questions and answers for students who have completed web development training or css training. All the interview questions for css are prepared by experienced professionals. with adequate knowledge of CSS and web development technologies.
Find the top Interview Questions and Answers on CSS

Cascading Style Sheets fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages.
More importantly, CSS enables you to do this independent of the HTML that makes up each web page. CSS is easy to learn and understood, but it provides powerful control over the presentation of an HTML document.

We use CSS because of the following reasons:

• CSS saves time: You can write CSS once and reuse the same sheet on multiple HTML pages.
• Easy Maintenance: To make a global change simply change the style, and all elements in all the webpages will be updated automatically.
• Search Engines: CSS is considered a clean coding technique, which means search engines won’t have to struggle to “read” its content.
• Superior styles to HTML: CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.
• Offline Browsing: CSS can store web applications locally with the help of an offline cache. Using of this we can view offline websites.

• CSS plays an important role, by using CSS you simply got to specify a repeated style for an element once & use it multiple times because CSS will automatically apply the required styles.
• The main advantage of CSS is that style is applied consistently across a variety of sites. One instruction can control several areas which are advantageous.
• Web designers need to use a few lines of programming for every page improving site speed.
• Cascading sheet not only simplifies website development but also simplifies maintenance as a change of one line of code affects the whole website and maintenance time.
• It is less complex therefore the effort is significantly reduced.
• It helps to form spontaneous and consistent changes.
• CSS changes are device friendly. With people employing a batch of various range of smart devices to access websites over the web, there’s a requirement for responsive web design.
• It has the power for re-positioning. It helps us to determine the changes within the position of web elements that are there on the page.
• These bandwidth savings are substantial figures of insignificant tags that are indistinct from a mess of pages.
• Easy for the user to customize the online page
• It reduces the file transfer size.

• CSS, CSS 1 up to CSS3, result in creating confusion among web browsers.
• With CSS, what works with one browser might not always work with another. The web developers need to test for compatibility, running the program across multiple browsers.
• There exists a scarcity of security.
• After making the changes we need to confirm the compatibility if they appear. A similar change affects all the browsers.
• The programing language world is complicated for non-developers and beginners. Different levels of CSS i.e. CSS, CSS 2, CSS 3 are often quite confusing.
• Browser compatibility (some style sheets are supported and some are not).
• CSS works differently on different browsers. IE and Opera support CSS as different logic.
• There might be cross-browser issues while using CSS.
• There are multiple levels that create confusion for non-developers and beginners.

CSS3 is the latest version of CSS.

CSS frameworks are libraries that make web page styling easier. Some examples are Foundation, Bootstrap, Gumby, Ukit, and Semantic UI. 

A universal selector matches the name of any element type instead of selecting elements of a particular type.

Example:

<style>
* {
   color: blue;
   font-size: 10px;
}
</style>

The ruleset is used to identify selectors, which can be attached to other selectors. The two parts of a ruleset are:

• Declaration block: contains one or more semicolon-separated declarations
• Sector: indicates the HTML element needed to be styled

The CSS box model defines the layout and design of CSS elements. The elements are content (like text and images, padding (the area around content), border (the area around padding), and margin (the area around the border). 

The main difference between CSS3 and CSS2 is that CSS divides different sections into modules and supports many browsers. It also contains new General Sibling Combinators responsible for matching similar elements. 

There are three ways of integrating CSS into HTML: using style tags in the head section, inline styling, writing CSS in a separate file, and linking to the HTML page by the link tag.

This is one of the most frequently asked CSS interview questions. Z-index is used to specify the stack order of elements that overlap each other. Its default value is zero, and it can take both negative and positive values. A higher z-index value is stacked above the lower index element. It takes the following values- auto, number, initial, and inherit. 

With CSS sprites, loading multiple images is not an issue. 

• Blinking is not seen. 
• Advanced downloading of assets does not take place until needed. 

Multiple elements can be targeted by separating with a comma:

h2, h3 {color: red;}

The different media types allowed by CSS are: 

• speech
• audio
• visual
• tactile media
• continuous or paged media
• grip media or bitmap
• interactive media

The background-repeat property is used to control the image. Example:

h3 {
background-repeat: none;
 }

The background-attachment property sets whether the background image is fixed or scrolls with the rest of the page. Example for a fixed background image:

body {
  background-image: url(‘url_of_image’);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

The font-related attributes are Font- style, variant, weight, family, size, etc. 

In CSS, contextual selectors allow developers to specify styles for different parts of the document. Styles can be assigned directly to specific HTML tags or created as independent classes and assigned tags to them. 

Responsive Design is a web page creation approach that uses flexible images, layouts, and CSS media queries. This design approach aims to build web pages that detect visitors’ orientation and screen size so that the layout can be changed accordingly.

In CSS, the styling commands are written in value and property fashion. CSS includes a system terminator—a semicolon. The entire style is wrapped in curly braces and attached to the selector. This creates a style sheet that can be applied to an HTML page.

• CSS does not always guarantee compatibility with every browser; you need to be cautious when choosing the style selector.
• The parent selector tag is not available; thus, you can’t select the parent selector tag.
• Some selectors can lead to cross-browser issues due to their less browser-friendly behavior.
• We cannot request a webpage through CSS.

• A link tag allows you to include an external style sheet file as a CSS file in your HTML file.
• You can add CSS styles to your HTML page and write it in the stand-alone stylesheet form of CSS.
• CSS can be included directly in the HTML tag by adding an inline style to HTML elements.
• One can import an external stylesheet file as a new CSS file by using the @import rule. 

Universal Selector, Element type Selector, ID selector, Class selector, Descendant combinatory, Child Combinator, General Sibling Combinator, Adjacent sibling combinator, and Attribute selector.

CSS preprocessor is a tool that enhances basic functionality and allows us to use complex logical syntax, such as variables, functions, mixins, and code nesting, within vanilla CSS scripts.

• Sass (Syntactically Awesome Style Sheets) uses .sass extension. It is used for indentation; it doesn’t use semicolons or curly brackets.
• Less (Leener Stylesheets) uses .less extension. Adding to any JavaScript Project is easy by using NPM or less.js file. Here, @ is used to define the variables. 
• Stylus provides great flexibility in writing syntax. It can use native CSS and exclude brackets, colons, and semicolons. There is no need to use @ or $ to define the variables.

People use SASS, LESS, and Stylus to extend the basic functionality of vanilla CSS.

VH and VW are CSS units used to measure viewport height and width, respectively, in percentage form in responsive design techniques. For example, if the browser’s height is 1000px, then VH is 1/100 of the height of the viewport, which is 1000px*(1/100) = 10px, which is the browser’s height. The same applies to VW (viewport width).

• Reset CSS removes all built-in styles in the browser, such as paddings, margins, and font sizes. It can be reset using all the elements.
• Normalize CSS is used to make all built-in styles in the browser consistent and correct bugs as per varying browsers.

• Block Elements are <div> and <p>. They usually start on a new line and can take space for an entire row or width.
• Inline elements are <a>, <span>, <strong>, and <img> tags. They don’t start on a new line. However, they appear on the same line as the content and tags beside them.
• Inline block elements have padding and margins and set height and width values. Though, they are similar to inline elements. 

Yes, it is the most crucial trial to do when you design a webpage and make changes to it for the first time. Testing your website periodically in different browsers will help you make every webpage compatible with it, as browsers have undergone many updates.

Pseudo-classes are pseudo-elements that don’t exist in a normal document tree. It allows selecting the regular elements under certain conditions, especially when we try to hover over the link; the anchor tags are :link, :visited, :hover, :active, :focus

In this example, the color will be red on the anchor tag when it’s hovered.
/* mouse over link */
a:hover {
color: #FFOOFF;
}

The CSS mainly uses four different units: px, em, pt, and percentage (%).

• Px (Pixel) is used for fine-grained control and alignment, not cascade. To get it sharp, we can use 1px or multiple of px.
• Em is used to maintain relative size and responsive fonts. 1em = 16px, which is also the same font size. In common practice, it is advisable to set the font size to 10px.
• Pt (point) is a fixed-size unit that is used in print. 1pt = 1/72 inch.
• Percentage (%) is used to set the font size relative to the font size of the body. Thus, it is necessary to set a reasonable font size for the body.

No, mMargin-top or margin-bottom does not affect the inline elements.

The font-family property is used to change the font face that is applied to the element in the DOM.

Adaptive Design

• Main focus is to develop a website in multiple fixed layout sizes.
• Offers good control over the design to develop variation in screens.
• Building the best possible adaptive design is very time-consuming and requires a lot of effort, as examining it will require considering many options with respect to the realities of the end user.
• There are six standard screen sizes for the appropriate layouts: 320px, 480px, 760px, 960px, 1200px, and 1600px.

Responsive Design

• Main focus is to show content concerning browser space.
• Offers less control over the design.
• The design takes less time to build, and there is no screen size issue regardless of content.
• It uses CSS media queries to design the screen layouts for specific devices and property changes.

Initially, there is a filtration of elements in the DOM via browsers concerning key selectors that are traversed until we get the parents’ elements to determine the matches. Then, the browser works on finding all the span elements present in the DOM and traverses them to parent elements to check whether they match paragraph p elements. At last, when the browser finds all matches as parents, the matching process will be stopped, and a black color will be applied to the content.

Border boxes consist of properties such as content, padding, and the border with respect to height and width. However, Content boxes are a default value property used for box-sizing. It also helps to add a border and padding to give the box proper height and width without having border and padding properties.

Opacity measures content transparency. It ranges from 0 to 1. Value 1 means the content is completely opaque and not supported by the internet browser. Also, 60% opacity applies in the div section, where we need to apply the filter property (polyfill) to make it completely opaque.

Cascading is defined as the process of style declaration and its weight, which helps the browser select the styling rules with respect to time.

DOM reflow occurs when you insert, move, update, remove, and animate the elements in the DOM, as well as when you modify the page’s content and style.

Content-box, Padding-box and Border-box

A div inside another div A is center aligned with the help of aligning div property to content via HTML script and CSS to the element in the DOM.

The CSS grid system is a powerful layout for 2-dimensional systems with respect to columns and rows.

display: none, visibility: hidden, position: absolute

The: root selector pseudo-class refers to the CSS selector level 3. It helps to target the highest-level parent element present in the DOM.

Accessibility is making the system accessible so that the website should have text-to-speech capability for people with physical disabilities, designed using software or hardware combinations.

keyword “initial” is used to restore the default value of a property.

• CSS Grid Layout is a two-dimensional system along with rows and columns. It is used for large-sized layouts.
• Flexbox is a Grid layout with a one-dimensional system either within a row or a column. It is used for an application’s components.

Calc can be used to specify the result of the mathematical operation of two or more elements. For example to specify the width elements by the addition of two or more elements, we can write as

.foo {
Width: calc(100px+50px)
}

CSS Custom properties variables are defined for CSS variables as well as cascading variables with specific values that can be reused.

• CSS variables don’t need a pre-processor. It is cascaded, accessed, and manipulated in JavaScript.
• Preprocessor variables don’t cascade.

Box-sizing: The border box provides the inner dimension for the elements in the document by providing padding and a border with respect to the height and width of the content.

The style “!important” in the CSS has the highest precedence. Also, the cascaded property will be overridden with it.

Progressive rendering is the process of improving the performance of a webpage for loading time to display the content speedily. The use of loading the lazy loading of the image with the help of Intersection Observer API via viewport. 

No. The CSS file will be downloaded via browser in order to appear on the HTML page.

@support tag in the CSS is used to scan and determine whether the browser supports a certain feature or not.

Absolute positioning is used to place the element which is then removed from the HTML document from the normal workflow without creating any space for the element in the HTML page layout. The element can be positioned respectively to the closest positioned ancestor; otherwise, if the ancestor is not found, the element is placed with respect to the initial container box. The values provided to the top, right, left and bottom determine the final position of the element.

Overflow: The hidden property is used to specify the content’s clipping. We need to add scrollbars to the content area when the specified container size exceeds the content limit where the content gets enclosed. This makes the content invisible via clipping, and the overflow value will also be hidden.

Translate is a CSS transform value. On changing opacity or transform, browser reflow or repaint is not triggered. Transform requires the browser to create a GPU layer for elements but using the CPU changes absolutes positioning properties. Translate () is more efficient and results in shorter paint times. On using translate (), element occupies original space, unlike in changing absolute positioning. 

The positioning property specifies the positioning method type. The five different position values are fixed, static, absolute, sticky, and relative. The elements are positioned using top, left, right, and bottom properties. These properties need to be set first, and they work depending on position value. 

A mixin is similar to a function block of code returning a single value—mixin output lines of Sass code that directly compiles into CSS styles. At the same time, the function returns a value that becomes the value for a CSS property or something that can be passed to another mixin.

Identify and control ‘content areas’ of the website. A website generally has a footer, header, sidebar, navbar, and main content area. Most of the work is done by controlling the content area. So, conquer print media without changing the website’s integrity by using page breaks, creating a stylesheet for print, size your page for print, and avoid unnecessary HTML tables.  

When a browser displays a document, it combines style information and document content. The document is processed in two stages:
Conversion of HTML and CSS into Document Object Model
DOM displays contents of browser

ID Selector:

<style>
{
text-align: right;
color: blue;
}
</style>

CSS class Selector:

<style>
.right {
text-align: right;
color: blue;
}
</style>

The float property of CSS positions an image to the right or left as needed, including text wrapping around it. All properties of elements used before it remain unchanged. 

Pseudo-elements provide special effects to some selectors. CSS is used to apply styles in HTML markups. If additional markup or style is not feasible for a document, pseudo-elements help by allowing extra markup without interfering with the original document. 

Logical tags mainly focus on content and are older than physical ones. In terms of aesthetics, logical tags are not used much, while physical ones are. 

The four types of media properties are print, speech, and screen. Example of using print-media type: 

@media print {
h2 {
background-color: blue;
 }
}

The overflow property in CSS controls how bigger content is handled. It decides whether to clip the content or add scrollbars to the element. The property can have the following values:

Visible: Content is not clipped and can overflow outside the element box.

Hidden: Content is clipped, and the overflow is not visible.

Scroll: The content is clipped, but scrollbars are added so the user can view the rest of the content.

Auto: A scrollbar is added automatically when the content overflows.

The overflow-x and overflow-y properties differ simply:

Overflow-x controls the overflow of content on the horizontal axis.

Overflow-y controls the overflow of content on the vertical axis.

These properties allow for more specific control over how content overflows in different directions.

In CSS, it is possible to overlap elements. One simply applies the position property (either absolute, relative, or fixed). The stacking order of these items is controlled by the z-index property, which establishes which element is displayed first when they overlap.

Syntax for z-index: 

z-index: auto | number | initial | inherit;

The types of floating properties in CSS:

Property Value	Description
left	Floats the element to the left of its containing block.
right	Floats the element to the right of its containing block.
none	Default value. The element does not float.
inherit	The element inherits the float property from its parent.

Example:

.element-left {
  float: left;
}
.element-right {
  float: right;
}
.element-none {
  float: none;
}

CSS image reflection is an effect that allows you to create a mirrored or reflective image beneath the original image, simulating a reflection on a surface like glass or water. This effect is achieved using CSS properties like box-reflect, transform, or using pseudo-elements.

Example (using transform for a simple reflection effect):

<div class=”image-container”>
  <img src=”image.jpg” alt=”Image” class=”reflect”>
</div>
.image-container {
  position: relative;
.reflect {
  display: block;
  width: 100%;
  transform: scaleY(-1); /* Flip the image vertically */
  opacity: 0.5; /* Make it look like a reflection */
  filter: blur(2px); /* Optional: Add a blur effect to the reflection */
  position: absolute;
  top: 100%;
  left: 0;
}

It applies a blur effect to the reflection, making it appear more like a reflection on water or glass.

CSS counters properties are used to create and manage numerical values that can be used for automatic numbering or sequencing in a document. The main CSS counter properties are as follows:

counter-reset: Resets a counter to a specified value (default is 0).
Syntax: counter-reset: myCounter;
counter-increment: Increments the counter’s value.
Syntax: counter-increment: myCounter;
content: Used to display the value of a counter using counter() or counters() functions.
Syntax: content: counter(myCounter);

These properties allow for the initialization, incrementation, and display of counters in HTML elements. It is useful for automatic numbering, such as in ordered lists or section headers.

One CSS file can be included in another using the @import rule. Stylesheets can be imported into the main stylesheet, and media queries can be used to load styles according to particular screen sizes or device attributes. Any @charset declaration must be immediately followed by the @import rule at the start of the document.

Key Points about @import:
You can import an external stylesheet into your current one using the @import rule.
As it supports media queries, you can import stylesheets according to various media conditions, including device kind or screen size.
It should always appear before other rules at the top of the CSS file.

Syntax:
@import url(“stylesheet.css”);
You can also use it with media queries:
@import url(“stylesheet.css”) screen and (max-width: 600px);

The * selector can be used to select all of the items in an HTML document in CSS. Additionally, it chooses every element that is inside of another element. Another name for it is the universal selector.

Syntax:
* {
   // CSS property
}

In CSS, pagination divides the document into pages by providing specific numbers.

Some different types of pagination in CSS are:

Type of Pagination	Description
Simple Pagination	Basic pagination with links for navigation.
Active and Hoverable Pagination	Pagination with hover effects and an active page indicator.
Rounded Active and Hoverable Buttons	Pagination with rounded buttons that are active and hoverable.
Hoverable Transition Effect	Pagination buttons with hover effects and smooth transitions.
Bordered Pagination	Pagination with borders around each button.
Rounded Border Pagination	Pagination with rounded borders around each button.
Centered Pagination	Pagination with items centered within the container.
Space Between Pagination	Pagination with space distributed between items.
Pagination Size	Pagination with adjustable button size for large or small buttons.

To choose an element with a certain attribute or attribute value, we can use the CSS Attribute Selector. Grouping HTML components according to certain characteristics is a great method to style them, and the attribute selector will choose elements with comparable properties.

There are many different types of attribute selectors in CSS: 

Selector	Description
[attribute]	Selects all elements with the specified attribute, regardless of its value.
[attribute = “value”]	Selects elements where the attribute has an exact value match with the specified value.
[attribute~=”value”]	Selects elements where the attribute contains a list of space-separated values, one of which matches the specified value.
[attribute|=”value”]	Selects elements with an attribute containing a hyphen-separated list of values starting with the given value, is a whole word or followed by a hyphen.
[attribute^=”value”]	Selects elements where the attribute value begins with the specified value.
[attribute$=”value”]	Selects elements where the attribute value ends with the specified value.
[attribute*=”value”]	Selects elements where the attribute value contains the specified value anywhere within it.

Media queries are very important for responsive web design. Hence, it ensures a web page’s view varies based on screen or media types. They check the viewport, device width and height, orientation, and resolution. If true, a style sheet is applied. This ensures that the page’s viewing experience is according to the device.

CSS Animations is a web page technique that alters the appearance and behavior of elements by adjusting their motions or display. It consists of CSS properties and keyframes.

@keyframes Rule Syntax:

@keyframes animationName {
    from {
        /* Initial state */
    }
    to {
        /* Final state */
    }
}

Applying Animation to an Element:

selector {
    animation: animationName duration timing-function delay iteration-count direction;
}

Example:

@keyframes slide {
    from
        transform: translateX(0);
    }
    to {
        transform: translateX(100px);
    }
}.element {
    animation: slide 2s ease-in-out 0s infinite;
}

The four main CSS properties used for creating transitions are:

Property	Description	Values
transition-property	Defines properties to animate.	none, all, property
transition-duration	Sets the animation time.	s, ms
transition-timing-function	Sets the speed curve of the transition.	ease, linear, etc.
transition-delay	Delays the animation start.	s, ms

We can combine all four individual transition properties into one single declaration to use the shorthand transition property in CSS. The order of the values is important.

Syntax for the shorthand:

transition: <property-name> <duration> <timing-function> <delay>;

Modern web projects require speed, flexibility, and streamlined code. Tailwind CSS is popular for designing and styling web pages efficiently and responsively. Its advantages include rapid development, extensive customization options, reduced CSS file size, and a well-documented, supportive community. 

In Tailwind CSS, the ‘utility-first approach’ means it provides a collection of utility classes that allow developers to style elements directly within HTML. There is no need for separate CSS files. This method promotes simplicity and modular design and also enables faster, more efficient development by applying small, reusable classes directly to elements.

These are the aspects of Tailwind CSS vs. other frameworks: 

Feature	Tailwind CSS	Other CSS Frameworks
Core Philosophy	Utility-first, encourages building custom designs	Component-based, promotes using pre-designed elements
Design Control	Complete control over design; no default styling	Limited control; predefined styles require overrides
Setup Complexity	Simple, but configuration needed for full customization	Simple, with ready-to-use components
Customization	Highly customizable; controlled via config files	Some customization but limited to theme variables
Responsive Design	Built-in responsive utilities; easy custom breakpoints	Responsive support often limited to specific breakpoints
Component Flexibility	Custom components need to be built from scratch	Comes with fully styled components like navbars, buttons
File Size Management	Small size in production with unused CSS purged	Tends to be larger due to bundled component styles
Learning Curve	Moderate; requires understanding of utility classes	Easy; based on familiar pre-styled components
Ideal for	Unique, highly customized designs	Quick project setup with standard design components

There are different ways to center an image with Tailwind CSS:

Using Flexbox: Apply flex, justify-center, and items-center to center an image horizontally and vertically.

Using Margin Auto: Apply m-auto along with other positioning utilities if you want a simple, centered alignment.

Yes, Tailwind CSS provides several classes for overscroll behavior customization. Some examples include:

overscroll-auto: Sets default scrolling behavior.

overscroll-contain: Limits scroll behavior to the element, preventing scroll-chaining.

overscroll-none: Prevents scroll-chaining entirely, stopping scroll overflow at the element’s boundary.

In Tailwind CSS, you can position elements on opposite sides using flex classes. Start by setting the container to flex, then apply justify-between to push one element to the left and the other to the right. Additionally, you can use items-center to vertically center-align the items. The flow-root class is also available to clear floated content within containers, introduced in Tailwind v2.0 or later. For earlier versions, replace flow-root with clearfix for similar layout control.

To center-align form elements, Tailwind CSS provides the justify-center and items-center properties as alternatives to standard flex properties. Examples of other flex properties for aligning purposes are flex-col, justify-center, and items-center.

Syntax:
<div class=”flex flex-col justify-center items-center”>
    …
</div>

We can use the fixed or sticky classes along with top-0 and inset-x-0 for positioning to create a fixed or sticky header in Tailwind CSS.

Syntax:

<header class=”fixed top-0 inset-x-0″>…</header>
<header class=”sticky top-0 inset-x-0″>…</header>

Ensure the parent element has the relative class for the correct positioning of the sticky header. The fixed class keeps the header at the top while scrolling, whereas sticky makes it stay at the top only when it reaches that position.

State-based styling in Tailwind CSS can be achieved using variant utilities, such as hover, focus, and active.

Syntax:

hover:{property}
focus:{property}
active:{property}

Description of Variants:

Hover: Styles the element when the user hovers over it.
Focus: Styles the element when it has focus (e.g., clicked or tabbed).
Active: Styles the element when actively clicked or tapped.

Tailwind CSS has different rotation utility classes in store for both clockwise and anti-clockwise rotation.

Clockwise Rotation: rotate-0, rotate-1, rotate-2, rotate-3, rotate-6, rotate-12, rotate-45, rotate-90, and rotate-180.
Anti-Clockwise Rotation: -rotate-0, -rotate-1, -rotate-2, -rotate-3, -rotate-6, -rotate-12, -rotate-45, -rotate-90, and -rotate-180.

Syntax:
<element class=”rotate-{degree}”>…</element>

CSS3 is divided into modules and is supported by almost every browser. It introduces many graphics-related characteristics, such as box shadow, Border Radius, and flexbox. A user can create precise multiple background images using properties like background position, background repeat, and background image styles. 

With a CSS selector, we can choose the content we want to style to bridge between HTML files and style sheets. CSS selector syntax is “select” HTML elements created based on their class, id, type, etc. 

A group of images placed into one image is a CSS image script. It can reduce load time and project multiple images into a single web page. 

CSS specificity is a rank or score that decides style declaration to be used for an element. ID selectors have high specificity, while universal selector * has low specificity. The four CSS categories that authorize the selector’s specificity level are IDs, inline style, elements/pseudo-elements, and classes and attributes. 

A property of CSS that allows displaying smooth transformation between two or more specified colors. The types of gradients are linear and radial. 

The properties of flexbox are flex-direction, wrap, flow, content, and align-items, and content. 

The CSS Box model is a box binding HTML element that includes padding, border, margin, and the actual content. With the box model, we get the authority to add a border all around elements and define space between elements. 

The four-position states in CSS are relative, static, absolute, and fixed. The default position state is static. 

The main difference is that relative is used for the same tag in CSS. If we write right:20 px, then padding shifts 20 px on the right. Whereas absolute is relative to the non-static parent, i.e., if we write right:20 px, the result will be 20 px far from the right edge of the parent element.  

Both class and ID are used in HTML to assign a value from CSS. The ID is used as an element, whereas the class is used as a block.