CSS_Quiz.md - brainchildservices/curriculum GitHub Wiki

Browser Developer Toolbar introduction

what is developer toolbar?
- A: Developer Tools is a set of web developer tools built into the browser. You can use them to examine, edit, and debug HTML, CSS, and JavaScript.
is it possible to use Developer toolbar in Every browser?
- A: Yes
Explain how to Access Developer Toolbar?
- A: There are 3 ways to access developer toolbar
  1. by clicking F12
  2. ctrl+ shift + I
  3. right-click on the web page and click on the Inspect option.
How to Use Developer toolbar for Website Diagnosis?
- A: DevTools offer several ways to tweak and troubleshoot a webpage.
  1. you can see how your website look in Mobile view, also you can change the CSS properties, without affecting the original file. Developer toolbar will allow you to Access the Source Files of a Webpage.
Explain how to Perform Live Edits to a Webpage?
- A: Once you switch to the developer tools, you can edit a website's HTML content by clicking on the Elements option. Then, right-click on any point you want to apply changes to within the code editor and select Edit as HTML.
What is Devtools Console?
- A: By default, the console reports any JavaScript issues on your website. You can find the console at the lower part of the DevTools or access it by clicking on the Console option at the top of the Chrome DevTools window.
How to Audit Your Website with DevTools Console?
- A: Chrome DevTools has a feature that lets you check the overall performance of your website based on specific parameters. To access that feature, select the Lighthouse option at the top of the DevTools window.

CSS Revision

_What is CSS Selector? Why use it? _
- A: CSS selectors are used to "find" (or select) the HTML elements you want to style.
How to use CSS Element selector with an example?
- The id selector uses the id attribute of an HTML element to select a specific element.
How to use CSS ID Selector?
- A: The id of an element is unique within a page, so the id selector is used to select one unique element!, To select an element with a specific id, write a hash (#) character, followed by the id of the element.
_what is the use of CSS CLASS SELECTOR? _
- A: The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name.
is it possible to refer more than one class in a single element?
- A: HTML elements can also refer to more than one class, Example <p class="center large">
What is CSS UNIVERSAL SELECTOR?
- A: The universal selector (*) selects all HTML elements on the page.
what is the use of CSS COLOR?
- A: The color CSS data type represents a color in the sRGB color space.
how to use CSS Color?
- A: Using a keyword (such as blue or transparent), The color keywords all represent plain, solid colors, without transparency. The RGB color model defines a given color according to its red, green, and blue components.
which component represents the color's transparency ?
- A: An optional alpha component
The HSL color model defines a given color according to, which components?
- A: it defines a given color according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency.
Explain CSS POSITION?
- A: The position property can help you manipulate the location of an element
how many values for a position property?
- A: There are six values for the position property: static, relative, absolute, fixed, sticky (experimental), inherit
What is CSS Fonts?
- A: The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. The font names should be separated with comma.
What is CSS ALIGNMENT?
- A: The text-align property is used to set the horizontal alignment of a text. A text can be left or right aligned, centered, or justified.
what is vertical-align?
- A: The vertical-align property sets the vertical alignment of an element.

CSS Images

What is border-radius Property in CSS?
- A: border-radius help us to set a border. we can create rounded borders using border-radius property. This property allows you to add rounded corners to elements!
This property can have from one to four values, which are they?
- A: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner)

Float

What is float Property?
- A: The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.
The float property can have one of the following values, which are they?
- A: left, right, none, inherit
What is the use of Float Next To Each Other?
- A: Normally div elements will be displayed on top of each other. However, if we use float: left we can let elements float next to each other:

CSS BOX MODEL

What is a CSS box model?
- A: CSS box model is a container which contains multiple properties including borders, margin, padding and the content itself. The web browser renders every element as a rectangular box according to the CSS box model.
What is Border Area?
- A: It is the area between the box’s padding and margin. Its dimensions are given by the width and height of border.
What is Margin Area?
- This area consists of space between border and margin. The dimensions of Margin area are the margin-box width and the margin-box height. Margins are used to create space around elements, outside of any defined borders.
What is Padding Area?
- A: It includes the element’s padding. This area is actually the space around the content area and within the border box. Its dimensions are given by the width of the padding-box and the height of the padding-box.
What are the 4 Different Padding Properties?
- A: padding-top, padding-right, padding-bottom, padding-left.