CSS

Question 1

box-shadow

Answer 1

The box-shadow controls the shadow effect surrounding the box of the HTML element.

Question 2

text-shadow

Answer 2

The text-shadow property controls the shadow of text.

Question 3

clip property

Answer 3

allows you to specify what portion of an element is visible. The clip property takes only one parameter, the shape to clip to. Currently, the only shape supported is a rectangle, so the only parameter value that will yield any results is the rect()

Question 4

position absolute

Answer 4

The element is positioned relative to its first positioned (not static) ancestor element

Question 5

position static

Answer 5

Default value. Elements render in order, as they appear in the document flow

Question 6

position relative

Answer 6

The element is positioned relative to its normal position, so “left:20px” adds 20 pixels to the element’s LEFT position

Question 7

sticky

Answer 7

The element is positioned based on the user’s scroll position

Question 8

word-wrap: normal

Answer 8

Break words only at allowed break points

Question 9

word-wrap: break-word

Answer 9

Allows unbreakable words to be broken

Question 10

word-wrap: break-all

Answer 10

To prevent overflow, word may be broken at any character

Question 11

word-wrap: keep-all

Answer 11

Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value “normal”

Question 12

gt(3)

Answer 12

selects every element after the fourth one

Question 13

eq(4)

Answer 13

selects the fifth element in a hierarchy

Question 14

visibility hidden

Answer 14

does not show but it allocates space for the element

Question 15

display none:

Answer 15

does not show and it does not allocate space

Question 16

@supports (display: grid)

Answer 16

The @supports CSS at-rule lets you specify declarations that depend on a browser’s support for one or more specific CSS features.

Question 17

[attr]

Answer 17

This selector will select all elements with the attribute attr, whatever its value.

Question 18

[attr=val]

Answer 18

[attr=val] : This selector will select all elements with the attribute attr, but only if its value is val.

Question 19

[attr~=val]:

Question 20

[attr^=val]

Answer 20

[attr^=val] : This selector will select all elements with the attribute attr for which the value starts with val.

Question 21

[attr$=val]

Answer 21

[attr$=val] : This selector will select all elements with the attribute attr for which the value ends with val.

Question 22

[attr*=val]

Answer 22

[attr*=val] : This selector will select all elements with the attribute attr for which the value contains the substring val. (A substring is simply part of a string, e.g. “cat” is a substring in the string “caterpillar”.)

Question 23

[data-quantity^=”optional”]

Answer 23

All elements with the attribute “data-quantity”, for which

the value starts with “optional”

Question 24

[data-quantity$=”kg”]

Answer 24

All elements with the attribute “data-quantity”, for which

the value ends with “kg”

Question 25

[data-vegetable*="not spicy"]

Answer 25

All elements with the attribute "data-vegetable" containing | the substring "not spicy" are turned back to green

Question 26

data attributes format - javascript

Answer 26

``` article id="electric-cars" data-columns="3" data-index-number="12314" data-parent="cars"> article ``` const article = document.querySelector('#electric-cars'); article. dataset.columns // "3" article. dataset.indexNumber // "12314" article. dataset.parent // "cars"

Question 27

Pseudo-classes

Answer 27

A CSS pseudo-class is a keyword added to the end of a selector, preceded by a colon (:), which is used to specify that you want to style the selected element but only when it is in a certain state.

Question 28

Pseudo-elements

Answer 28

``` Pseudo-elements are very much like pseudo-classes, but they have differences. They are keywords, this time preceded by two colons (::), that can be added to the end of selectors to select a certain part of an element. ::after ::before ::first-letter ::first-line ::selection ::backdrop ```

Question 29

CSS Selector A, B

Answer 29

Any element matching A and/or B

Question 30

CSS Selector A B

Answer 30

Any element matching B that is a descendant of an element matching A (that is, a child, or a child of a child, etc.)

Question 31

CSS Selector A > B

Answer 31

Any element matching B that is a direct child of an element matching A.

Question 32

CSS Selector A + B

Answer 32

Select and style every p> element that are placed immediately after /p>div> elements: div + p { background-color: yellow; }

Question 33

CSS Selector A ~ B

Answer 33

Set a background color for all ul> elements that are preceded by a p> element with the same parent: p ~ ul { background: #ff0000; }

Question 34

table th + td

Answer 34

All td>s preceded by a th>, within a table>

Question 35

1em

Answer 35

is the same as the font-size of the current element( 16 pixels)

Question 36

overflow: auto

Answer 36

If there is too much content, the overflowing content is hidden and scroll bars are shown to let the user scroll to see all the content.

Question 37

overflow: hidden

Answer 37

If there is too much content, the overflowing content is hidden.

Question 38

overflow: visible

Answer 38

If there is too much content, the overflowing content is shown outside of the box (this is usually the default behavior.)

Question 39

font-style:

Answer 39

1. normal 2. italic, 3. oblique ( if no oblique then italic)

Question 40

font-face format

Answer 40

style type="text/css" media="screen, print"> @font-face { font-family: "Bitstream Vera Serif Bold"; src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf"); } body { font-family: "Bitstream Vera Serif Bold", serif } /style>

Question 41

font-face local

Answer 41

``` .className { @font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; } }In this example, the user's local copy of "Helvetica Neue Bold" is used; if the user does not have that font installed (two different names are tried), then the downloadable font named "MgOpenModernaBold.ttf" is used instead: ```

Question 42

hypens:

Answer 42

hyphens: none; hyphens: manual; - suggesting break opportunities hyphens: auto; - browser is free to break words at hypenantion points

Question 43

difference opacity vs transparency

Answer 43

Opacity sets the opacity value for an element and all of its children; RGBA sets the opacity value only for a single declaration.

Question 44

gradient - format

Answer 44

``` #grad { background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); } ```

Question 45

translate()

Answer 45

translate() method moves an element from its current position

Question 46

rotate()

Answer 46

rotate() method rotates an element clockwise or counter-clockwise according to a given degree.

Question 47

scale()

Answer 47

method increases or decreases the size of an element (according to the parameters given for the width and height). scale(2, 3); two times of its original width, and three times of its original height:

Question 48

matrix()

Answer 48

method combines all the 2D transform methods into one. | transform: matrix(1, -0.3, 0, 1, 0, 0);

Question 49

3d transformations

Answer 49

rotateX() - rotate "below" rotateY() - rotate "to the right" rotateZ() - rotate around its z axis

Question 50

flex-order:

Answer 50

flexbox items can also be explicitly specified by using the order property on the flexbox items.

Question 51

flex-wrap:

Answer 51

1. nowrap Default value. Specifies that the flexible items will not wrap 2. wrap 3. wrap-reverse Specifies that the flexible items will wrap, if necessary, in reverse order

Question 52

link element media query - format

Answer 52

link rel="stylesheet" media="screen and (min-width: 1200px)" href="Desktop.css"/> link rel="stylesheet" media="screen and (max-width: 1199px) and (min-width: 401px)" ref="tablet.css"/> link rel="stylesheet" media="screen and (max-width: 400px)" href="phone.css"/

Question 53

flex-flow

Answer 53

You can combine the two properties flex-direction and flex-wrap into the flex-flow shorthand. flex-flow: row wrap;

Question 54

animation - format repeats every 5 seconds from red to orange

Answer 54

``` #demo{ width: 100px; height: 100px; animation: frames 5s infinite } ``` ``` @keyframes frames{ from { background: red; } to { width: 200px; backgreound: yellow } } ```