CSS stands for Cascading Style Sheet. It’s a style sheet language that determines how the elements/contents in the page are looked/shown. CSS is used to develop a consistent look and feel for all the pages.

CSS or Cascading Style Sheets is a styling language that is simple enough for HTML elements that find usage in web designing. Besides, the application of CSS is also found in XHTML.

CSS was developed and is maintained by the World Wide Web Consortium (W3C). It was first released on December 17, 1996. The CSS Working group currently working with different browser vendors to add/enforce the new feature/ specifications in all the browsers.

CSS3 or Cascading Style Sheets Level 3 is the third version of the CSS standard that is used to style and format web pages. CSS3 incorporates CSS2 standard with some improvements over it.

A rectangle box is wrapped around every HTML element. The box model is used to determine the height and width of the rectangular box. The CSS Box consists of Width, height, padding, borders and margin.

SGML (Standard Generalized Markup Language) is the origin of CSS. It is a language that defines markup languages.

Some of them are:
 

• Foundation
• Bootstrap
• Gumby
• Ukit
• Semantic UI

• CSS 4
• CSS 3
• CSS 2.1
• CSS 2
• CSS 1

• Separation of content from presentation - CSS provides a way to present the same content in multiple presentation formats in mobile or desktop or laptop.
• Easy to maintain - CSS, built effectively can be used to change the look and feel complete by making small changes. To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
• Bandwidth - Used effectively, the style sheets will be stored in the browser cache and they can be used on multiple pages, without having to download again.

• Inline method - It is used to insert style sheets in HTML document
• Embedded/Internal method - It is used to add a unique style to a single document
• Linked/Imported/External method - It is used when you want to make changes on multiple pages.

• Browser Compatibility: Some style selectors are supported and some are not.
• Cross Browser issue: Some selectors behave differently in a different browser.
• There is no parent selector: Currently, Using CSS, you can’t select a parent tag.

• Bandwidth
• Site-wide consistency
• Page reformatting
• Accessibility
• Content separated from presentation

A universal selector is a selector that matches any element type's name instead of selecting elements of a particular type.

• Box Model
• Selectors
• Text effects
• Backgrounds and Borders
• Animations
• 2D/3D Transformations
• User Interface
• Multiple Column Layout

An Embedded style sheet is a CSS style specification method used with HTML. You can embed the entire stylesheet in an HTML document by using the STYLE element.

Universal Selector

Element Type Selector

ID Selector

Class Selector

Descendant Combinator

Child Combinator

General Sibling Combinator

Adjacent Sibling Combinator

Attribute Selector

A CSS Preprocessor is a tool used to extend the basic functionality of default vanilla CSS through its own scripting language.

It helps us to use complex logical syntax like – variables, functions, mixins, code nesting, and inheritance to name a few, supercharging your vanilla CSS.

SASS	SCSS
SASS is based on indentation	SCSS(Sassy CSS) is not
SASS uses .sass extension.	SCSS uses .scss extension.
SASS doesn’t use curly brackets or semicolons.	SCSS uses it, just like the CSS.

• You can create classes for use on multiple tag types in the document.
• You can use selector and grouping methods to apply styles in complex situations.
• No extra download is required to import the information.

The ruleset is used for the identification of selectors, which can be attached with 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

• Selector
• Property
• Value

It’s a CSS unit used to measure the height and width in percentage with respect to the viewport. It is used mainly in responsive design techniques. 

CSS2	CSS3
Everything is present in a single document.	categorized into multiple sections called modules.
CSS2 versions do not support new browsers.	CSS3 versions support many new browsers.
CSS2 have old selectors.	CSS3 introduces many new selectors.

The CSS opacity property is used to specify the transparency of an element. In simple word, you can say that it specifies the clarity of the image.

Reset CSS - CSS resets aim to remove all built-in browser styling. ex: margins, paddings, font-sizes of all elements are reset to be the same. 

Normalize CSS - Normalize CSS aims to make built-in browser styling consistent across browsers. It also corrects bugs for common browser dependencies

It is used for defining percentage values.

RGB represents colors in CSS. The three streams are namely Red, Green, and Blue.

Image scroll in the background can be controlled using the background-scroll property.

Block Element - The block elements always start on a new line. They will also take space for an entire row or width. List of block elements are <div>, <p>.

Inline Elements - Inline elements don't start on a new line, they appear on the same line as the content and tags beside them. Ex: <a>, <span> , <strong>, and <img> tags. 

Inline Block Elements - Inline-block elements are similar to inline elements, except they can have padding and margins and set height and width values.

CSS was developed to define the visual appearances of websites. It allows developers to separate the structure and content of a website that was not possible before.

The background-repeat property repeats the background image horizontally and vertically. Some images are repeated only horizontally or vertically.

Class is a way of using HTML elements for styling. They are not unique and have multiple elements.

ID is unique and it can be assigned to a single element.

Z-index is used to specify the stack order of elements that overlap each other. Its default value is zero and 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.

In order to center the block-level elements, we need to set the margin-right and margin-left properties to explicit values.

It’s most important to test a website in different browsers when you’re first designing it, or when making major changes. However, it’s also important to repeat these tests periodically, since browsers go through a lot of updates and changes.

You can use the following positions-
 

• center
• top
• bottom
• right

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

Pseudo-elements allows us to create items that do not normally exist in the document tree. Ex: ::after.
 

• ::before
• ::after
• ::first-letter
• ::first-line
• ::selection

Pseudo-classes select regular elements but under certain conditions like when the user is hovering over the link.
 

• :link
• :visited
• :hover
• :active
• :focus

No, it doesn’t affect the inline elements. Inline elements flow with the contents of the page.

RWD stands for Responsive Web Design. This technique is used to display the designed page perfectly on every screen size and device, for example, mobile, tablet, desktop and laptop. 

You don't need to create a different page for each device.

Multiple elements can be targeted by separating with a comma -

It is maintained using the World Wide Web Consortium.

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

CSS is not case-sensitive but the URLs of images and font families are case-sensitive. Only in case of usage of XML declarations with XHTML DOCTYPE on the page, we find CSS to be case-sensitive.

The float property is used for positioning the HTML elements horizontally either towards the left or right of the container.

• Physical tags are newer versions, on the other hand, logical tags are old and concentrate on content.
• Physical tags are referred to as presentational markup while logical tags are useless for appearances.

• font- style
• variant
• weight
• family
• size

It is basically a catalog of directions comprising the property, followed by a colon, and finally the value enclosed within braces.

CSS Grid Layout is the most powerful layout system available in CSS.

It is said to be a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system.

• display: none
• visibility: hidden
• position: absolute

• It is the process of generating intermediate frames between two images.
• In CSS3, Transforms (matrix, translate, rotate, scale) module can be used to achieve tweening.
• It gives the impression that the first image has smoothly evolved into the second one.
• It is an important method used in all types of animations.

The style is having the important will have the highest precedence and it overrides the cascaded property.