CSS

Question 1

Width value types?

Answer 1

The are 5 different types of width value types they are
1. px, the most common one
2. percentage: the percentage of parent width
3. vw: view port width
4. em: the font size if it’s element
5. rem: the font size of root element

Question 2

What is Box Model?

Answer 2

Box model is the fundamental concept in css that describes how contents laid in a web page. every element in a web page is represented by a rectangular box, which is made up of four parts. content,padding, border, margin

content: is the actual content of the element. it might be text or image.
padding: is the space between the content and the border
border: is the line that surrounds the padding and content
margin: is the space between the border of the content and another element

Question 3

What is the latest CSS version?

Answer 3

CSS3

Question 4

What are the new features in CSS3?

Answer 4

1. Box-model:- box-sizing, border-radius, box-shadow
2. Selectors:- psudo-classes and attribute selectors
3. text-effect: text-shadow, text-overflow, text-wrap
4. transforms: rotate, scale, translate
5. Animation:- animation, transition, keyframes

Question 5

Block vs Inline-Block vs Inline?

Answer 5

Block elements takes the full width of there parent elements and stack on top of each other, h1, div and p

Inline-Block elements have similar characterstics with block level elements but they don’t take the full width, they flow inline with other elements, button and img

Inline elements flow inline with other elements they don’t create inline break, they don’t have specific width or hight , a ,span input

Question 6

What is CSS Specificity?

Answer 6

is a set of rule to determine which css style are applied to the element when multiple conflict styles are defiend

Question 7

What is Border-radius?

Answer 7

border radius is a property that we use to create a rounder corner on the border

Question 8

Transition and Transformation?

Answer 8

are a properties that allow us to create animation and interactivity on a web page

transition is a gradual change like color,width, height
transition: color 1s

transform: in other hand change position, size and shape
transform: rotate(45deg)

Question 9

What is Box-sizing?

Answer 9

is a property that allow us to define how the total height and width is calculated
if border-box: content-box (which is the default one) is calculated as content + padding + border

the other one is border-box is equal to content + padding but not border

Question 10

Different positions?

Answer 10

1. Static: This is the default position for all elements. Elements with static positioning follow the normal flow of the document and are not affected by the top, bottom, left, or right properties.
2. Relative: Elements with relative positioning are positioned relative to their normal position in the document flow. By using the top, bottom, left, and right properties, you can move the element in any direction from its original position. Other elements are not affected by the element with relative positioning.
3. Absolute: Elements with absolute positioning are removed from the normal flow of the document and positioned relative to their closest positioned ancestor (ancestor with a position value other than static) or to the initial containing block if no positioned ancestor is found. The top, bottom, left, and right properties are used to position the element precisely.
4. Fixed: Elements with fixed positioning are removed from the normal flow and positioned relative to the browser window. They remain in a fixed position even when the page is scrolled. Fixed elements are often used for creating headers, footers, or sidebars that remain visible while scrolling.
5. Sticky: Elements with sticky positioning are positioned based on the user’s scroll position. The element is initially in the normal flow, but once it reaches a certain position relative to the viewport, it “sticks” to that position. Sticky positioning is often used for creating sticky headers or navigation menus.

Question 11

Different values for display?

Answer 11

1. block: Elements with “display: block;” are rendered as block-level elements. They take up the full width available and start on a new line. Examples of block-level elements include <div>, <p>, <h1> to <h6>, and <li>.
2. inline: Elements with “display: inline;” are rendered as inline-level elements. They do not start on a new line and only take up the necessary width to accommodate their content. Examples of inline elements include <span>, <a>, <strong>, and <em>.
3. inline-block: Elements with “display: inline-block;” are rendered as inline-level elements but behave like block-level elements in terms of taking up space and allowing for height, width, padding, and margin properties. Examples of inline-block elements include <input>, <button>, and <img>.
4. none: Elements with “display: none;” are completely removed from the document flow and are not rendered at all. They are effectively invisible and do not take up any space. This can be used to hide elements dynamically or conditionally.
5. flex: Elements with “display: flex;” are rendered as flexible box containers. They allow for flexible layout and alignment of child elements along a horizontal or vertical axis. The child elements within a flex container can have their own display values.
6. grid: Elements with “display: grid;” are rendered as grid containers. They allow for creating complex grid-based layouts with precise control over rows, columns, and their sizing.

Question 12

Flexbox questions?

Answer 12

Flexbox is a CSS layout module that provides a flexible and efficient way to create dynamic layouts and align elements within a container. It introduces a set of properties for both the container (flex container) and the child elements (flex items) to control their positioning, sizing, and spacing.

Key Concepts in Flexbox:

1. Flex Container: The parent element that has its display property set to “flex” becomes a flex container. It establishes a new flex formatting context and acts as a containing block for its flex items.
2. Flex Items: The child elements of a flex container are referred to as flex items. They can be aligned, arranged, and sized within the flex container.

Main Flexbox Properties for the Container:

• display: flex;: Defines a flex container.
• flex-direction: row | row-reverse | column | column-reverse;: Sets the direction of the flex items, either horizontally or vertically.
• justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;: Determines the alignment of flex items along the main axis.
• align-items: flex-start | flex-end | center | baseline | stretch;: Controls the alignment of flex items along the cross axis.
• flex-wrap: nowrap | wrap | wrap-reverse;: Specifies whether flex items should wrap onto multiple lines or stay on a single line.

Main Flexbox Properties for the Flex Items:

• flex-grow: <number>;: Defines the ability of a flex item to grow within the flex container.
• flex-shrink: <number>;: Determines the ability of a flex item to shrink if necessary.
• flex-basis: <length> | auto;: Specifies the initial size of a flex item before it grows or shrinks.
• flex: <flex-grow> <flex-shrink> <flex-basis>;: Shorthand property to set all three flex item properties in one declaration.
• align-self: auto | flex-start | flex-end | center | baseline | stretch;: Controls the alignment of a specific flex item along the cross axis, overriding the container’s align-items property.

Flexbox provides a powerful and intuitive way to create responsive and flexible layouts. It simplifies the process of aligning and distributing elements, reducing the need for complex positioning and float-based layouts. Flexbox is widely supported in modern browsers and is commonly used in building various UI components and responsive designs.

Question 13

CSS selectiors?

Answer 13

1. Element Selector: Selects elements based on their HTML tag name. For example, to select all <p> elements, you would use the selector p.
2. Class Selector: Selects elements based on their class attribute. The selector begins with a dot (.) followed by the class name. For example, to select all elements with the class “my-class”, you would use the selector .my-class.
3. ID Selector: Selects a single element based on its ID attribute. The selector begins with a hash (#) followed by the ID name. For example, to select the element with the ID “my-id”, you would use the selector #my-id.
4. Attribute Selector: Selects elements based on their attributes. The selector is written in square brackets ([]) and can include an attribute name and an optional value. For example, to select all <a> elements with a “target” attribute, you would use the selector a[target]. To select elements with a specific attribute value, you can use the syntax attribute=value. For example, input[type="text"] selects all <input> elements with type attribute equal to “text”.
5. Descendant Selector: Selects elements that are descendants of another element. It uses a space between the parent element and the descendant element. For example, to select all <span> elements inside a <div>, you would use the selector div span.
6. Child Selector: Selects elements that are direct children of another element. It uses a greater than sign (>) between the parent element and the child element. For example, to select all <li> elements that are direct children of a <ul>, you would use the selector ul > li.
7. Pseudo-classes and Pseudo-elements: Pseudo-classes and pseudo-elements allow you to select elements based on their state or position within the document. Examples include :hover, :first-child, :last-child, ::before, and ::after.

Question 14

Media querys?

Answer 14

Media queries in CSS allow you to apply different styles based on the characteristics of the device or viewport where the web page is being displayed. They enable you to create responsive designs that adapt to different screen sizes and devices.

Question 15

How to use a css file in your html page?

Answer 15

there are several ways to use css files in html file the first one is using <style> tag in the header of html file and the second one and the mosts prefered way are importing css file in the header and working the css on the css file</style>

Question 16

Psudeo classes and Psudeo elements?

Answer 16

Pseudo-classes and pseudo-elements are special selectors in CSS that allow you to select and style elements based on various conditions or positions within the document. They provide additional control over the appearance and behavior of selected elements. Here’s an explanation of pseudo-classes and pseudo-elements:

1. Pseudo-classes: Pseudo-classes are used to select elements based on specific states or conditions. They are preceded by a colon (:) and can be applied to various elements. Some commonly used pseudo-classes include:
   • :hover: Selects an element when the mouse pointer is over it.
   • :active: Selects an element when it is being activated or clicked.
   • :focus: Selects an element when it has focus (e.g., when it is selected by keyboard navigation).
   • :first-child: Selects the first child element of its parent.
   • :last-child: Selects the last child element of its parent.
   • :nth-child(n): Selects the nth child element of its parent.
   • :nth-of-type(n): Selects the nth element of its type among its siblings.
   Example:
   ```css
   button:hover {
   background-color: red;
   }li:first-child {
   font-weight: bold;
   }
   ```
2. Pseudo-elements: Pseudo-elements are used to style specific parts of an element. They are preceded by two colons (::) and can be applied to certain elements. Some commonly used pseudo-elements include:
   • ::before: Inserts content before the selected element.
   • ::after: Inserts content after the selected element.
   • ::first-line: Selects the first line of text within an element.
   • ::first-letter: Selects the first letter of text within an element.
   Example:
   ```css
   p::before {
   content: “» “;
   }h1::first-letter {
   font-size: 2em;
   }
   ```

Pseudo-classes and pseudo-elements provide additional flexibility in selecting and styling elements, allowing you to create dynamic and targeted styles based on various states, positions, or specific parts of an element. They enhance the styling capabilities of CSS and enable you to create more interactive and engaging web pages.