CSS

Question 1

What is CSS

Answer 1

Cascading Style Sheets (CSS) is a markup language used to apply styles to HTML elements. CSS is used for colors, background images, layouts and more.

Question 2

Basic Anatomy of a CSS Rule

Answer 2

A CSS rule is made up of two main parts: a selector and a declaration block. A selector is a pattern used in CSS to identify and target specific HTML elements for styling. A declaration block applies a set of styles for a given selector or selectors.

Question 3

meta name=”viewport”

Answer 3

meta element gives the browser instructions on how to control the page’s dimensions and scaling on different devices, particularly on mobile phones and tablets.

Question 4

Inline CSS

Answer 4

hese styles are written directly within an HTML element using the style attribute. Most of the time you will not be using inline CSS due to separation of concerns.

Question 5

Internal CSS

Answer 5

These styles are written within the <style> tags inside the head section of an HTML document. This can be useful for creating short code examples, but usually you will not need be using internal CSS.</style>

Question 6

External CSS:

Answer 6

These styles are written in a separate CSS file and linked to the HTML document using the link element in the head section. For most projects, you will use an external CSS file over internal or inline CSS.

Question 7

width Property

Answer 7

This property specifies the width of an element. If you do not specify a width, then the default is set to auto. This means the element will take up the full width of its parent container.

Question 8

Descendant Combinator

Answer 8

This combinator is used to target elements that are descendants of a specified parent element. The following example will target all li items inside ul elements.

Question 9

Child Combinator (>)

Answer 9

This combinator is used to select elements that are direct children of a specified parent element. The following example will target all p elements that are direct children of the container class.

Question 10

Next-sibling Combinator (+)

Answer 10

This combinator selects an element that immediately follows a specified sibling element. The following example will select the paragraph element that immediately follows the h2 element.

Question 11

Subsequent-sibling Combinator (~)

Answer 11

This combinator selects all siblings of a specified element that come after it. The following example will style only the second paragraph element because it is the only one that is a sibling of the ul element and shares the same parent.

Question 12

Inline Level Elements

Answer 12

nline elements only take up as much width as they need and do not start on a new line. These elements flow within the content, allowing text and other inline elements to appear alongside them. Common inline elements are span, anchor, and img elements.

Question 13

Block Level Elements

Answer 13

Block-level elements start on a new line and take up the full width available to them by default, stretching across the width of their container. Some common block-level elements are div, paragraph, and section elements

Question 14

inline-Block Level Elements

Answer 14

you can set an element to inline-block by using the display property. These elements behave like inline elements but can have a width and height set like block-level elements.

Question 15

margin Property

Answer 15

This property is used to apply space outside the element, between the element’s border and the surrounding elements.

Question 16

padding Property

Answer 16

This property is used to apply space inside the element, between the content and its border

Question 17

margin Shorthand

Answer 17

The margin property can be set using the shorthand syntax, which allows you to set the margin for all four sides of an element at once. The values are applied in the order top, right, bottom, left

Question 18

padding Shorthand

Answer 18

The padding property can also be set using the shorthand syntax, which allows you to set the padding for all four sides of an element at once. The values are applied in the order top, right, bottom, left.

Question 19

Inline CSS Specificity

Answer 19

Inline CSS has the highest specificity because it is applied directly to the element. It overrides any internal or external CSS. The specificity value for inline styles is (1, 0, 0, 0)

Question 20

Internal CSS Specificity

Answer 20

Internal CSS is defined within a style element in the head section of the HTML document. It has lower specificity than inline styles but can override external styles.

Question 21

External CSS Specificity

Answer 21

External CSS is linked via a link element in the head section and is written in separate .css files. It has the lowest specificity but provides the best maintainability for larger projects

Question 22

Universal Selector (*)

Answer 22

a special type of CSS selector that matches any element in the document. It is often used to apply a style to all elements on the page, which can be useful for resetting or normalizing styles across different browsers. The universal selector has the lowest specificity value of any selector. It contributes 0 to all parts of the specificity value (0, 0, 0, 0)

Question 23

Type Selectors

Answer 23

These selectors target elements based on their tag name. Type selectors have a relatively low specificity compared to other selectors. The specificity value for a type selector is (0, 0, 0, 1).

Question 24

Class Selectors

Answer 24

These selectors are defined by a period (.) followed by the class name. The specificity value for a class selector is (0, 0, 1, 0). This means that class selectors can override type selectors, but they can be overridden by ID selectors and inline styles

Question 25

ID Selectors

Answer 25

ID selectors are defined by a hash symbol (#) followed by the ID name. ID selectors have a very high specificity, higher than type selectors and class selectors, but lower than inline styles. The specificity value for an ID selector is (0, 1, 0, 0).

Question 29

!important keyword

Answer 29

used to give a style rule the highest priority, allowing it to override any other declarations for a property. When used, it forces the browser to apply the specified style, regardless of the specificity of other selectors

Question 30

Cascade Algorithm

Answer 30

An algorithm used to decide which CSS rules to apply when there are multiple styles targeting the same element. It ensures that the most appropriate styles are used, based on a set of well-defined rules.

Question 31

CSS Inheritance

Answer 31

The process by which styles are passed down from parent elements to their children. Inheritance allows you to define styles at a higher level in the document tree and have them apply to multiple elements without explicitly specifying them for each element.