What is CSS?

CSS stands for Cascading Style Sheets.

It's a language used for describing the look and formatting of a document written in HTML or XML.

It provides the stylistic features such as colors, fonts, and layouts to HTML.

CSS also provides the ability to adapt the presentation to different types of devices, such as large screens, small screens, or printers.

How is it used?

CSS can be implemented in three ways: inline, internal, and external.

Inline CSS is used to apply styles to individual HTML elements directly in the HTML code.

Internal CSS is used to apply styles to an entire HTML document and is typically placed inside the head tag.

External CSS, the most common method, involves linking an external .css file to your HTML document. This method promotes reusability and clean coding practices.

What does * { box-sizing: border-box; } do?

box-sizing: border-box; It's a CSS rule that includes an element's padding and border in its width and height, ensuring consistency in layout sizing.

Need -

To accurately control the size of elements in CSS, box-sizing: border-box; comes in handy as it includes padding and borders in an element's size. Without box-sizing: border-box;, managing layouts becomes complex as padding and borders affect an element's final rendered width, disrupting design consistency.

How is it used-

It is applied in the root css file as * { box-sizing: border-box; } via a universal selector.

What are Selectors in CSS?

CSS selectors are patterns used to select the elements you want to style. They can select elements based on their type, class, id, attribute, and more.

How is it used?

Element Selector: This is used when we want to select an HTML element type to apply style.

Eg: p {color: red;} will make the text color of all paragraphs red.

Class Selector: This is used when we want to select elements with a specific class attribute. It starts with a period.

Eg: .myClass {font-size: 20px;} will apply the style to all elements with class="myClass".

ID Selector: This is used to select a unique element with a specific ID. It starts with a hash or pound symbol (#).

Eg: #myID {background-color: blue;} will apply the style to the element with id="myID".

Attribute Selector: This is used when we want to select elements with a specific attribute or attribute value.

Eg: a[target="_blank"] {font-weight: bold;} will make all links opening in a new tab bold.

Pseudo-class Selector: This is used to select elements based on their states, like visited, hovered, active, etc.

Eg: a:hover {color: green;} will change the link color to green when hovered over.

What are Pseudo elements and Pseudo classes?

Pseudo Elements: Pseudo elements are virtual elements that allow us to style specific parts of an element. They are denoted by double colons (::) in CSS.

Pseudo Classes: Pseudo classes are used to select and style elements based on their states or actions. They are denoted by a single colon (:) in CSS.

How are they used?

Pseudo Elements:

::before: Inserts content before the selected element.

::after: Inserts content after the selected element.

::first-letter: Selects the first letter of the selected element.

::first-line: Selects the first line of the selected element.

::selection: Selects the portion of the text that is selected by the user.

Pseudo Classes:

:hover: Applies styles when the element is hovered over.

:active: Applies styles when the element is being clicked or activated.

:visited: Applies styles to visited links.

:focus: Applies styles when the element is in focus.

:nth-child(n): Selects elements based on their position in a parent container.

:nth-of-type(n): Selects elements based on their position among siblings of the same type.

What is a z-index, how does it function?

z-index is a CSS property used to control the stacking order of elements in a webpage.

How is it used?

z-index values can be assigned to elements to determine their position in the stacking order. Higher values place elements on top of lower ones.

Elements with a higher z-index value will overlap elements with lower values.

By default, elements have a z-index value of 0.

Negative z-index values move elements behind the default stacking order.