(i) What are the different parts of a CSS style rule?

A CSS style rule consists of a selector and a declaration block. The selector targets the HTML element to style, and the declaration block contains one or more declarations separated by semicolons. Each declaration includes a property and a value pair.

(ii) Define Inline Styles, Embedded Style Sheet and External Style Sheet.

Inline styles are CSS rules applied directly within an HTML tag using the 'style' attribute. An embedded style sheet is a block of CSS rules included within a 'style' tag in the 'head' section of an HTML document. An external style sheet is a separate .css file linked to an HTML document using a 'link' tag.

(iii) What is an element selector? Give an example.

An element selector targets HTML elements based on their tag name. For example, 'p' selects all paragraph elements.

(iv) What is a class selector? Give an example.

A class selector targets elements with a specific class attribute value. It is prefixed with a period. For example, '.button' selects all elements with the class 'button'.

(v) What is an id selector? Give an example.

An id selector targets a unique element with a specific id attribute value. It is prefixed with a hash symbol. For example, '#navbar' selects the element with the id 'navbar'.

(vi) What are contextual selectors in CSS? Give an example.

Contextual selectors target elements based on their context within the HTML structure. For example, 'ul li' selects all 'li' elements that are descendants of a 'ul' element.

(vii) What is an attribute selector? Give an example.

An attribute selector targets elements based on the presence or value of an attribute. For example, '[type="text"]' selects all elements with a 'type' attribute value of 'text'.

(viii) What is a pseudo selector? Give an example.

A pseudo selector targets elements in a specific state or position. For example, 'p:first-child' selects every 'p' element that is the first child of its parent.

(ix) What are the three cascade principles used by browsers when style rules conflict?

The three cascade principles are importance (e.g., '!important' declaration), specificity (more specific selectors override more general ones), and source order (later rules override earlier ones).

(x) What are CSS variables?

CSS variables, also known as custom properties, are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using the '--' prefix and accessed using the 'var()' function.