Css

Question 1

Background-image

Answer 1

background-image: url(‘http://etc.com’);

relative path:

background-image: url(‘images/mountains.jpeg’);

Question 2

Position

Answer 2

Static and relative positioned elements stay in the normal flow of the document.

Fixed and absolute positioned elements are removed from document flow. When a user scrolls, these elements will stay their specified offset position.

Sticky: keeps an element in the document flow as the user scrolls, but sticks to a specified position as the page is scrolled further.

Question 3

Display: inline

Answer 3

Inline elements have a box that wraps tightly around their content, only taking up the amount of space necessary to display their content
Not requiring a new line after each element.
Cant be alter in size with Height and width properties
Eg: em, strong, a

Question 4

Display: block;

Answer 4

Fill entire width of the page by default.
But width property can be set.
Displayed on their own line
No content directly on either side of them
Eg: h1-h6, p, div, footer

Question 5

display: inline-block;

Answer 5

Can appear next to each other
Can specify dimensions by using width and height properties.
Eg: img

Question 6

Floated elements must have a width specified. Otherwise, the element will assume the full width of its containing element, and changing float value will not yield any visible results

Question 7

inline-block is ignored due to the float. If ‘float’ has a value other than ‘none’, the box is floated and ‘display’ is treated as ‘block’

Question 8

When set to RELATIVE, an element’s position is relative to its default position on the page.
When set to ABSOLUTE, an element’s position is relative to its closest positioned parent element. It can be pinned to any part of the web page, but the element will still move with the rest of the document when the page is scrolled.
When set to FIXED, an element’s position can be pinned to any part of the web page. The element will remain in view no matter what.

Question 9

When an element’s position is set to ABSOLUTE, all other elements on the page will ignore the element and act like it is not present on the page. The element will be positioned relative to its closest positioned parent element, while offset properties can be used to determine the final position from there.

Question 10

setting its position property to RELATIVE.

This value allows you to position an element relative to its default static position on the web page.

Question 11

position: RELATIVE will allow offsets like top to start from the element’s DEFAULT position, not the position of its parent elements.

Question 12

Which of the following values will position an element in relation to the nearest non-static element?

Answer 12

Absolute

Question 13

The z-index will be ignored if an element is set to which of the following position values?

Answer 13

Static

Question 14

Select <a> element with an href attribute value containing “florence”:
a[href*=‘florence’] {
color: lightgreen;
}</a>

Question 15

Dom: browser’s interpretation of the source code

Documentation object model

Question 16

Relative file path

Answer 16

• Starting with “/” returns to the root directory and starts there
• Starting with “../” moves one directory backwards and starts there
• Starting with “../../” moves two directories backwards and starts there (and so on…)
• To move forward, just start with the first subdirectory and keep moving forward

Question 17

img {
display: block; //image will occupy whole line
margin-left: auto;
}
Margin left to set the margin to the left of an element (i.e: image) -> push the image to the right of the webpage

Question 18

HSL stands for hue (the color itself), saturation (the intensity of the color), and lightness (how light or dark a color is).

Hsla -> alpha or opacity (0-1)

eg:
color: hsla(200, 20%,, 50%, 0.7)

Question 19

rgb and rgba

Question 20

@font-face {
font-family: ‘MyWebFont’;
src: url(‘myfont.woff2’) format(‘woff2’),
url(‘myfont.woff’) format(‘woff’);
}

Question 21

Tooltip: use title attribute

<a>Link anchor text</a>

Question 22

Link states:

a: link - a normal, unvisited link
a: visited - a link the user has visited
a: hover - a link when the user mouses over it
a: active - a link the moment it is clicked

Question 23

Box shadow:
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

Question 24

Flexbox:

div {
display: flex;
}
Div remains a block element. All child elements of the flex container (div) will become inline elements.

Question 25

Inline-flex:
Creates flex containers that are also inline elements -> div will become an inline elements and their child elements will become inline elements as well.

Question 26

Below are five commonly used values for the justify-content property:
* flex-start — all items will be positioned in order, starting from the left of the parent container, with no extra space between or before them.
* flex-end — all items will be positioned in order, with the last item starting on the right side of the parent container, with no extra space between or after them.
* center — all items will be positioned in order, in the center of the parent container with no extra space before, between, or after them.
* space-around — items will be positioned with equal space before and after each item, resulting in double the space between elements.
* space-between — items will be positioned with equal space between them, but no extra space before the first or after the last elements.
In the definitions above, “no extra space” means that margins and borders will be respected, but no more space (than is specified in the style rule for the particular element) will be added between elements. The size of each individual flex item is not changed by this property.

Question 27

Default value: flex grow and flex shrink
flex-grow: 0
flex-shrink: 1

Question 28

Margins are unaffected by flex-shrink and flex-grow

Question 29

Below are five commonly used values for the align-items property:

• flex-start — all elements will be positioned at the top of the parent container.
• flex-end — all elements will be positioned at the bottom of the parent container.
• center — the center of all elements will be positioned halfway between the top and bottom of the parent container.
• baseline — the bottom of the content of all items will be aligned with each other.
• stretch — if possible, the items will stretch from top to bottom of the container (this is the default value; elements with a specified height will not stretch; elements with a minimum height or no height specified will stretch).

Question 30

Flex-grow and flex-shrink will only be employed if the parent container is too small/large or the browser is adjusted.

Question 31

Align-items: stretch
stretch — if a minimum height or no height is specified, the rows of elements will stretch to fill the parent container from top to bottom (default value).

Question 32

flex containers have two axes: a main axis and a cross axis. By default, the main axis is horizontal and the cross axis is vertical.

The main axis and cross axis are interchangeable. We can switch them using the flex-direction property. If we add the flex-direction property and give it a value of column, the flex items will be ordered vertically, not horizontally.

Question 33

The main axis is used to position flex items with the following properties:

justify-content
flex-wrap
flex-grow
flex-shrink

Question 34

The cross axis is used to position flex items with the following properties:

align-items
align-content

Question 35

row — elements will be positioned from left to right across the parent element starting from the top left corner (default).
row-reverse — elements will be positioned from right to left across the parent element starting from the top right corner.
column — elements will be positioned from top to bottom of the parent element starting from the top left corner.
column-reverse — elements will be positioned from the bottom to the top of the parent element starting from the bottom left corner.

Question 36

Flex-flow can take 2 values: flex-direction and flex-wrap
eg:
.container {
     flex-flow: column wrap;
}

Question 37

flex can take 3 values: flex-grow, flex-shrink, and flex-basis
if 2 values: flex-grow and flex basis

Question 38

GRID:
grid-template-columns: to specify number of columns and size of the columns.
grid-template-rows

eg: 
.grid {
  display: grid;
  width: 1000px;
  height: 500px;
  grid-template-columns: 100px 200px;
  grid-template-rows: 10% 20% 600px;
}

Question 39

GRID-TEMPLATE short hand: 
syntax:
grid-template: row's height / column's width;
eg:
.grid {
  display: grid;
  width: 1000px;
  height: 500px;
  grid-template: 200px 300px / 20% 10% 70%;
}

Question 40

Use FR for fraction to prevent OVERFLOWING: 
eg: 
.grid {
  display: grid;
  width: 1000px;
  height: 400px;
  grid-template: 2fr 1fr 1fr / 1fr 3fr 1fr; // row sizing/column sizing based on total available space
}

Question 41

use FR with other units:

eg: 
.grid {
  display: grid;
  width: 100px;
  grid-template-columns: 1fr 60px 1fr;
}

->
In this example, 60 pixels are taken up by the second column. Therefore the first and third columns have 40 available to split between them. Since each gets one fraction of the total, they both end up being 20 pixels wide.

Question 42

REPEAT function

.grid {
  display: grid;
  width: 300px;
  grid-template-columns: repeat(3, 100px);
}

The repeat function will duplicate the specifications for rows or columns a given number of times. In the example above, using the repeat function will make the grid have three columns that are each 100 pixels wide.

Question 43

the second parameter of REPEAT() function can have multiple values.

grid-template-columns: repeat(2, 20px 50px)

This code will create four columns where the first and third columns will be 20 pixels wide and the second and fourth will be 50 pixels wide.

Question 44

MINMAX() function -> the grid must have a variable width.
.grid {
display: grid;
grid-template-columns: 100px minmax(100px, 500px) 100px;
}

Question 45

column-gap and row-gap

grid gap properties does not add space at the beginning or end of the grid

Question 46

short hand gap property for grid:

gap: 20px 10px // row-gap and column gap

Question 47

make single grid items take up multiple rows: use GRID-GROW (GRID-ROW-START and GRID-ROW-END)

.item {
grid-row-start: 1; // or span 2;
grid-row-end: 3;
}

short hand:
.item {
grid-row: 1 / 3; // or grid-row: 1 / span 2;
}

In this example, the HTML element of class item will take up two rows in the grid, rows 1 and 2. The values that grid-row-start and grid-row-end accept are grid lines.

Question 48

SPAN in grid-column / grid-row:
.item {
  grid-column: 4 / 6;
}
-> 
.item {
  grid-column-start: 4;
  grid-column-end: span 2;
}
OR:
.item {
  grid-column-start: span 2;
  grid-column-end: 6;
}

Question 49

GRID-AREA: sets the starting and ending positions for both the rows and columns of an item.
It takes 4 values in the following order:

grid-row-start
grid-column-start
grid-row-end
grid-column-end

The order for grid-area is: grid-row-start, grid-column-start, grid-row-end, grid-column-end.

eg:
.item {
grid-area: 2 / 3 / 4 / span 5;
}

–> In the above example, the item will occupy rows two and three and columns three through eight.

Question 50

Which of the following would make a grid with 3 columns where the middle column takes up 60% of the space, the first column takes up 1/3 of the remaining space and the last column takes up 2/3 of the remaining space?

Answer 50

grid-column: 1fr 60% 2fr;
Great! The middle column takes up 60% of the width, and then the first and last columns split up the remaining available space into 3 parts, of which the first column takes up 1 part and the last column takes up 2 parts

Question 51

.container {
display: grid;
grid-template-areas: “header header”
“nav nav”
“info services”
“footer footer”;
grid-template-rows: 300px 120px 800px 120px;
grid-template-columns: 1fr 3fr;

}

In each ruleset below .container, we use the grid-area property to tell that section to cover the portion of the page specified.
The header element spans the first row and both columns.
The nav element spans the second row and both columns.
The element with class .info spans the third row and left column.
The element with class .services spans the third row and right column.
The footer element spans the bottom row and both columns.

Answer 51

header {
grid-area: head;
}

nav {
grid-area: nav;
}

.info {
grid-area: info;
}

.services {
grid-area: services;
}

footer {
grid-area: footer;
}

Question 52

Overlapping Elements

use GRID-AREA and set z-index to render an element on top of other elements

Question 53

height: auto;

the element will automatically adjust its height to allow its content to be displayed correctly.

Question 54

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

Question 55

JUSTIFIED-CONTENT property: aligns columns within the container.
JUSTIFIED-ITEMS property: aligns grid items within their tracks (not the entire container)

Answer 55

JUSTIFIED-ITEMS allows you to set a default position for content placed in the grid’s grid items (A grid item being a box in the grid). This is a property of the grid container.

JUSTIFIED-CONTENT allows you to position the grid within it’s grid container. This is why the justify-content property will have no effect if the grid-container is the same size as the grid. (Which is always the case if you use fr units). This is also why it can have the values: space-around, space-between and space-evenly (In addition to start, end, centre and stretch), which will break up the grid and place the grid items within the grid container. This is a property of the grid container.

Question 56

JUSTIFY-ITEMS is a property that POSITION GRID ITEMS along the inline, or row, axis. This means that it positions items from left to right across the web page. This property is declared on grid containers.
–> POSITION ELEMENTS WITHIN THEIR COLUMNS

justify-items accepts these values:

start — aligns grid items to the left side of the grid area
end — aligns grid items to the right side of the grid area
center — aligns grid items to the center of the grid area
stretch — stretches all items to fill the grid area

Question 57

JUSTIFIED-SELF allows you to override the default position of content in an individual cell. This will override the position set by justify-items. Hence, if you use justify-self on all children of the container, setting justify-items on the grid container will have no effect. This is a property of the content inside a grid item.

Note: If you make a grid-item a grid itself, (In other words, the content inside a grid item is a grid) then you can position it within the outer grid item using either the justify-self property or the justify-content property on the inner grid’s grid container, since the inner-grid’s grid container is one of the outer grid’s grid items’s content.

Question 58

We can use justify-content to position the entire grid along the row axis. This property is declared on grid containers.

It accepts these values:

start — aligns the grid to the left side of the grid container
end — aligns the grid to the right side of the grid container
center — centers the grid horizontally in the grid container
stretch — stretches the grid items to increase the size of the grid to expand horizontally across the container
space-around — includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element
space-between — includes an equal amount of space between grid items and no space at either end
space-evenly — places an even amount of space between grid items and at either end

Question 59

ALIGN-ITEMS is a property that positions grid items along the block, or column axis. This means that it positions items from top to bottom. This property is declared on grid containers.
–> positions GRID ITEMS WITHIN THEIR ROWS

align-items accepts these values:

start — aligns grid items to the top side of the grid area
end — aligns grid items to the bottom side of the grid area
center — aligns grid items to the center of the grid area
stretch — stretches all items to fill the grid area

Question 60

ALIGN-CONTENT: POSITIONS THE ROWS along the column axis, or from top to bottom, and is declared on grid containers.

It accepts these positional values:

start — aligns the grid to the top of the grid container
end — aligns the grid to the bottom of the grid container
center — centers the grid vertically in the grid container
stretch — stretches the grid items to increase the size of the grid to expand vertically across the container
space-around — includes an equal amount of space on each side of a grid element, resulting in double the amount of space between elements as there is before the first and after the last element
space-between — includes an equal amount of space between grid items and no space at either end
space-evenly — places an even amount of space between grid items and at either end

Question 61

justify-self specifies how an individual element should position itself with respect to the row axis. This property will override justify-items for any item on which it is declared.

align-self specifies how an individual element should position itself with respect to the column axis. This property will OVERIDE align-items for any item on which it is declared.

These properties are declared on grid items.

They both accept these four properties:

start — positions grid items on the left side/top of the grid area
end — positions grid items on the right side/bottom of the grid area
center — positions grid items on the center of the grid area
stretch — positions grid items to fill the grid area (default)

Question 62

grid-auto-rows specifies the height of implicitly added grid rows.
grid-auto-columns specifies the width of implicitly added grid columns.

Question 63

GRID-AUTO-ROW / GRID-AUTO-COLUMN:

  <div>Part 1</div>   
  <div>Part 2</div>
  <div>Part 3</div>
  <div>Part 4</div>
  <div>Part 5</div>

body {
display: grid;
grid-template: repeat(2, 100px) / repeat(2, 150px);
grid-auto-rows: 50px;
}
In the example above, there are 5 <div>s. However, in the body ruleset, we only specify a 2-row, 2-column grid — four grid cells.

The fifth <div> will be added to an implicit row that will be 50 pixels tall.

If we did not specify grid-auto-rows, the rows would be auto-adjusted to the height of the content of the grid items.</div></div>

Question 64

grid-auto-flow specifies whether new elements should be added to rows or columns, and is declared on grid containers.

grid-auto-flow accepts these values:

row — specifies the new elements should fill rows from left to right and create new rows when there are too many elements (DEFAULT)
column — specifies the new elements should fill columns from top to bottom and create new columns when there are too many elements
dense — this keyword invokes an algorithm that attempts to fill holes earlier in the grid layout if smaller elements are added

Question 65

grid-template-areas specifies grid named grid areas
grid layouts are two-dimensional: they have a row, or inline, axis and a column, or block, axis.
justify-items specifies how individual elements should spread across the row axis
justify-content specifies how groups of elements should spread across the row axis
justify-self specifies how a single element should position itself with respect to the row axis
align-items specifies how individual elements should spread across the column axis
align-content specifies how groups of elements should spread across the column axis
align-self specifies how a single element should position itself with respect to the column axis
grid-auto-rows specifies the height of rows added implicitly to the grid
grid-auto-columns specifies the width of columns added implicitly to the grid
grid-auto-flow specifies in which direction implicit elements should be created

Question 66

Imagine we have a grid with the following CSS properties, with 4 boxes inside of it. If we added a fifth box to the HTML, what WIDTH would it have?

.grid {
  grid-template-rows: repeat(2, 50px);
  grid-template-columns: repeat(2, 100px);
  grid-auto-rows: 60px;
  grid-auto-columns: 70px;
 }

The new box will still be in one of the explicitly defined columns, which are 100px each.

Answer 66

There is a css grid property called grid-auto-flow. If unassigned, it assumes row.
When an html element is added, and the predefined grid (in this case 2 rows and 2 columns) can’t contain it, the grid implicitly adds a new row which receives the grid-auto-rows value for it’s height. In the second question the 5th element is still added to an implicitly added new row, but into the original explicitly defined 1st column, so it gets the width of the grid-template-columns.

If, we added grid-auto-flow: column; to the css, the grid would implicitly add a new column instead of a new row for the 5th element. In that case the 5th element would have the predefined height of the explicitly created row, but the width of the implicitly created new column as defined by grid-auto-columns. –> If instead you used grid-auto-flow: column, then auto-placed items would flow vertically, filling up columns and creating new ones as necessary. Then your fifth item would be 70px wide.

Question 67

Imagine we have a grid with 2 explicitly defined rows and 2 explicitly defined columns and no other grid properties set in the CSS, with the following divs inside of it. If we added a <div class="box">E</div> to the HTML after box D, where would box E appear on the page?

<div>A</div>

<div>B</div>

<div>C</div>

<div>D</div>

Answer 67

underneath box C in a new row

The default is for the grid to implicitly create new rows, unless grid-auto-flow is specifically set to column.

Question 68

EM: font size of current element or the default base font sized set by the browser if none is given.
For example, if the base font of a browser is 16 pixels (which is normally the default size of text in a browser), then 1 em is equal to 16 pixels.

Answer 68

.splash-section {
font-size: 18px;
}

.splash-section h1 {
font-size: 1.5em;
}

–> The example above shows how to use ems without relying on the default font size of the browser. Instead, a base font size (18px) is defined for all text within the splash-section element. The second CSS rule will set the font size of all h1 elements inside of splash-section relative to the base font of splash-section (18 pixels). The resulting font size of h1 elements will be 27 pixels.

Question 69

Rem stands for root em. It acts similar to em, but instead of checking parent elements to size font, it checks the root element. The root element is the tag.

Question 70

When height and width are set using percentages, you learned that the dimensions of child elements are calculated based on the dimensions of the parent element.

NOTE: When percentages are used to set PADDING and MARGIN however, they are calculated based ONLY on the WIDTH of the parent element.

NOTE: Vertical padding and margin are also calculated based on the width of the parent.

Question 71

.container {
  width: 50%;
  height: 200px;
  overflow: hidden;
}

.container img {
  max-width: 100%;
  height: auto;
  display: block;
}

Answer 71

In the example above, .container represents a container div. It is set to a width of 50% (half of the browser’s width, in this example) and a height of 200 pixels. Setting overflow to hidden ensures that any content with dimensions larger than the container will be hidden from view.

The second CSS rule ensures that images scale with the width of the container. The height property is set to auto, meaning an image’s height will automatically scale proportionally with the width. Finally, the last line will display images as block level elements (rather than inline-block, their default state). This will prevent images from attempting to align with other content on the page (like text), which can add unintended margin to the images.

Note: The example above scales the width of an image (or video) to the width of a container. If the image is larger than the container, the vertical portion of the image will overflow and will not display. To swap this behavior, you can set max-height to 100% and width to auto (essentially swapping the values). This will scale the height of the image with the height of the container instead. If the image is larger than the container, the horizontal portion of the image will overflow and not display.

Question 72

Scaling images with Overflow property. Set this property on the container.
eg:
.image-container {
overflow: hidden;
}
-> hides the overflown part of the content.

Question 73

body {
  background-image: url('#');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Answer 73

In the example above, the first CSS declaration sets the background image (# is a placeholder for an image URL in this example). The second declaration instructs the CSS compiler to not repeat the image (by default, images will repeat). The third declaration centers the image within the element.

background-size: cover;
The final declaration, however, is the focus of the example above. It’s what scales the background image. The image will cover the entire background of the element, all while keeping the image in proportion. If the dimensions of the image exceed the dimensions of the container then only a portion of the image will display.

Question 74

Percentages can be used to set padding and margin.

Horizontal and vertical PADDING and MARGIN are set relative to the WIDTH of a parent element.

Question 75

When the ‘height of an image or video is set’, then its width can be set to AUTO so that the media SCALE PROPORTIONALLY. Reversing these two properties and values will also achieve the same result.

Question 76

A background image of an HTML element will scale proportionally when its background-size property is set to cover.

Question 77

First, in style.css, set the overflow property in .image-container to hidden. Run your code.

Take a look at the images once more. At this point, the images partially display. In reality, what we’ve done is constrain them to the dimensions of their container (.image-container). Any part of the image that overflows out of the container will be hidden from view. This will set us up to scale them proportionally.

In style.css, set the maximum width in .image-container img to 100%. This will ensure the full image is always displayed.

Next, we’ll want to make sure the images automatically remain in proportion when the browser is resized.
In .image-container img, set the height to auto.

Finally, within the same CSS rule, set the display to block. This will instruct the images to behave as block-level elements and facilitate scaling (as opposed to their default inline behavior).

Question 78

VIEWPORT: the total viewable area for a user. This area varies depending on device. Viewport is smaller on a mobile device and larger on a desktop.

Question 79

META TAG : used to instruct the browser on how to render webpage’s scale and dimensions.
It is put inside the element.

Question 80

@media only screen and (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

Answer 80

@MEDIA— This keyword begins a media query rule and instructs the CSS compiler on how to parse the rest of the rule.

ONLY SCREEN — Indicates what types of devices should use this rule. In early attempts to target different devices, CSS incorporated different media types (screen, print, handheld). The rationale was that by knowing the media type, the proper CSS rules could be applied. However, “handheld” and “screen” devices began to occupy a much wider range of sizes and having only one CSS rule per media device was not sufficient.
SCREEN is the media type always used for displaying content, no matter the type of device.
The ONLY keyword is added to indicate that this rule only applies to one media type (screen).

AND (MAX-WIDTH: 480px) — This part of the rule is called a MEDIA FEATURE, and instructs the CSS compiler to apply the CSS styles to devices with a width of 480 pixels or smaller. Media features are the conditions that must be met in order to render the CSS within a media query.
CSS rules are nested inside of the media query’s curly braces. The rules will be applied when the media query is met. In the example above, the text in the body element is set to a font-size of 12px when the user’s screen is less than 480px.

Question 81

@media only screen and (max-width: 480px) and (min-resolution: 300dpi) {
    /* CSS ruleset */
}

Question 82

Write a media query that applies when the max-resolution is 150dpi and the screen has a max-width of 480px.

@media only screen and (max-resolution: 150dpi) and (max-width: 480px) {
  .page-description {
    font-size: 20px;
  }
}

Question 83

@media only screen and (min-width: 480px), (orientation: landscape) {
    /* CSS ruleset */
}

In the example above, we used a COMMA (,) to separate multiple rules. The example above requires ONLY ONE OF THE MEDIA FEATURES to be true for its CSS to apply.

Question 84

BREAKPOINTS:
the points at which media queries are set.
are screen sizes at which your webpage does not display properly

Rather than set breakpoints based on specific devices, resize your browser to view where the website naturally breaks based on its content.

https://content.codecademy.com/courses/freelance-1/unit-5/screen-sizes.png?_gl=118b2uqv_gaMTI5MjA5ODcxMi4xNjQ4MTM5Njg2_ga_3LRZM6TM9L*MTY1NDExMjU4MS4xNTMuMS4xNjU0MTEzNDQwLjYw

Question 85

img {
width: 500px;
height: ?
}

Setting height to auto ensures that the height of the image will automatically scale proportionally to the explicitly set width.

Question 86

.container {
  width: 50%;
  height: 200px;
  overflow: hidden;
}

.container img {
  max-width: 100%;
  height: auto;
  display: block;
}

max-width: 100%; makes our .container img element shrink to the full width of the .container element, height: auto; will allow our image to scale proportionally with the width, and the overflow: hidden; property on the .container element ensures that if the image dimensions exceed the container dimensions, the overflowing content will be hidden from view.

Question 87

a {
  transition-property: color;
  transition-duration: 1s;
}
In the example above, transition-property declares which CSS property we will be transitioning, the text color. The second property, transition-duration, declares how long the transition will take — one second.

Question 88

transition-timing-function. The timing function describes the pace of the transition.

The default value is ease, which starts the transition slowly, speeds up in the middle, and slows down again at the end.

Other valid values include:

ease-in — starts slow, accelerates quickly, stops abruptly
ease-out — begins abruptly, slows down, and ends slowly
ease-in-out — starts slow, gets fast in the middle, and ends slowly
linear — constant speed throughout

Question 89

As with the duration property, the default value for transition-delay is 0s, which means no delay.

Question 90

TRANSITION short-hand: must be specified in the following order:
transition-property:
transition-duration:
transition-timing-function: 
transition-delay:

eg: transition: color 1.5s linear 0.5s;
–>
transition-property: color;
transition-duration: 1.5s;
transition-timing-function: linear;
transition-delay: 0.5s;

• > transition: color 1.5s linear 0.5s;
  eg: transition: max-height 750ms linear 400ms;

Question 91

to transition multiple properties -> COMBINE them using COMMA
eg:
transition: color 1s linear,
font-size 750ms ease-in 100ms;

Question 92

transition: all 1.5s linear 0.5s;

ALL means every value that changes will be transitioned in the same way.

Question 93

Many properties’ STATE CHANGES can be transitioned, including color, background color, font size, width, and height. all is also a valid transition property that causes every changing property to transition.