Quiz Weeks 5/6

Question 1

Gradient Definition/Basics

Answer 1

Is a transition from one color to another, sometimes through multiple colors.

A gradient is considered an image created on the fly and can be applied to any element an image can be applied to.

A gradient image has no intrinsic size or proportions; the size matches the element it gets applied to.

Question 2

Advantages of Gradients

Answer 2

They do not require an extra call to the server and require fewer bytes to download than images.

Question 3

Disadvantages of Gradients

Answer 3

On the other hand, all that rendering on the fly requires time and processing power that can hurt performance.

Question 4

Two types of gradients

Answer 4

1. Linear gradients change colors along a line, from one edge of the element to the other.
2. Radial gradients start at a point and spread outward in a circular or elliptical shape.

Question 5

Linear-gradient() notation

Answer 5

Provides the angle of the gradient line and one or more points along that line where the pure color is positioned.

Question 6

Can use degrees or keywords to describe angle of linear

Answer 6

With degrees, 0deg points upward, and positive angles go around clockwise so that 90deg points to the right.

The keywords describe direction in increments of 90° (to top, to right, to bottom, to left).

Question 7

Color length

Answer 7

You can use percentages or any length measurement to set color lengths in a gradient.

If no positions are specified, the colors are spaced evenly across the length of the gradient line.

Question 8

Radial gradients

Answer 8

Radiate out from a point in a circle along a gradient ray (like a gradient line, but it always points outward from the center).

At minimum, a radial gradient requires two color stops.

Question 9

Radial-gradient() notation

Answer 9

Allows you to specify the shape, size, and center position of the gradient.

In most cases, the shape of the radial gradient will result from the shape of the element or an explicit size you apply to it, but you can also specify the shape by using the circle or ellipse keywords.

The size of the radial gradient can be specified in length units or percentages, which apply to the gradient ray, or with keywords. If you supply just one length, it is used for both width and height, resulting in a circle. When you provide two lengths, the first one is the horizontal measurement and the second is vertical.

Question 10

Radial-gradient position notation

Answer 10

Closest-side, closest-corner, farthest-side, and farthest-corner—that set the length of the gradient ray relative to points on the containing element.

By default, the center of the gradient is positioned at center center, but you can change that by using the positioning syntax we covered for the background-position property.

Question 11

Radial-gradient repeating notation

Answer 11

Use the repeating-linear-gradient() or repeating-radial-gradient() notation.

Question 12

The box model definition/basics

Answer 12

According to the box model, every element in a document generates a box to which properties such as width, height, padding, borders, and margins can be applied.

Every element in a document, both block-level and inline, generates a rectangular element box.

Question 13

Parts of an element box: Content area

Answer 13

At the core of the element box is the content itself. The edges of the content area are referred to as the inner edges of the element box.

In real pages, the edge of the content area is invisible.

Question 14

Parts of an element box: Padding

Answer 14

The padding is the area between the content area and an optional border. Padding is optional.

Question 15

Parts of an element box: Border

Answer 15

The border is a line (or stylized line) that surrounds the element and its padding. Borders are also optional.

Question 16

Parts of an element box: Margin

Answer 16

The margin is an optional amount of space added on the outside of the border.

In reality, margins are always transparent, allowing the background of the parent element to show through.

Question 17

Parts of an element box: Outer edge

Answer 17

The outside edges of the margin area make up the outer edges of the element box. This is the total area the element takes up on the page, and it includes the width of the content area plus the total amount of padding, border, and margins applied to the element.

In real web pages, the edge of the margin is invisible.

Question 18

Specifying box dimensions: width/height (properties)

Answer 18

Values: length | percentage | auto
Default: auto
Applies to: block-level elements and replaced inline elements (such as images)
Inherits: no

Question 19

Specifying box dimensions: box-sizing (properties)

Answer 19

Values: content-box | border-box
Default: content-box
Applies to: all elements
Inherits: no

Question 20

Auto value in width/height of block element/box

Answer 20

By default, the width and height of a block element are calculated automatically by the browser. However, you can use the width and height properties to make the content area of an element a specific width or height.

Question 21

There are two ways to specify the size of an element

Answer 21

1. The default method: Applies the width and height values to the content box. That means that the resulting size of the element will be the dimensions you specify plus the amount of padding and borders that have been added to the element.
2. Using box-sizing property: applies the width and height values to the border box, which includes the content, padding, and border. With this method, the resulting visible element box, including padding and borders, will be exactly the dimensions you specify.

Question 22

Width and height for block-level vs. inline

Answer 22

Regardless of the method you choose, you can specify the width and height only for block-level elements and non-text inline elements such as images.

The width and height properties do not apply to inline text (non-replaced) elements and are ignored by the browser.

Question 23

Box-sizing: content-box

Answer 23

By default, the width and height properties are applied to the content box. But, you can explicitly specify this behavior by setting box-sizing: content-box.

Question 24

Box-sizing: border-box

Answer 24

The other way to specify the size of an element is to apply width and height dimensions to the entire visible box, including the padding and border. Not the default browser behavior, and needs to be set to box-sizing: border-box in the style sheet. Many developers simply set everything in the document to use the border-box model by setting it on the root (html) element, then setting all other elements to inherit, like this:
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}

Question 25

Border-box warning

Answer 25

Avoid using max- and min- widths and heights with the border-box model. They are known to cause browser problems.

Question 26

Height property in relation to width

Answer 26

Works just the same as width. In general practice, it is less common to specify the height of elements. Not including allows the height to be calculated automatically, allowing the element box to change based on the font size, user settings, or other factors.

Question 27

Overflow property

Answer 27

When an element is sized too small for its contents, you can specify what to do with the content that doesn’t fit by using the overflow property.

Question 28

Overflow property (properties)

Answer 28

Values: visible | hidden | scroll | auto
Default: visible
Applies to: block-level elements and replaced inline elements (such as images)
Inherits: no

Question 29

Values of overflow property: visible

Answer 29

The default value is visible, which allows the content to hang out over the element box so that it all can be seen.

Question 30

Values of overflow property: hidden

Answer 30

When overflow is set to hidden, the content that does not fit gets clipped off and does not appear beyond the edges of the element’s content area.

Question 31

Values of overflow property: scroll

Answer 31

When scroll is specified, scrollbars are added to the element box to let users scroll through the content. Be aware that they may become visible only when you click the element to scroll it. Is a simpler alternative to overflow:scroll for mobile.

Question 32

Values of overflow property: auto

Answer 32

The auto value allows the browser to decide how to handle overflow. In most cases, scrollbars are added only when the content doesn’t fit and they are needed.

Question 33

Box-shadow property

Answer 33

Applies a drop shadow around the entire visible element box (excluding the margin).

Question 34

Box-shadow property (properties)

Answer 34

Values: ‘horizontal offset’ ‘vertical offset’ ‘blur distance’ ‘spread distance’ color inset | none
Default: none
Applies to: all elements
Inherits: no

Question 35

Box-shadow values ‘horizontal offset’ ‘vertical offset’ ‘blur distance’ ‘spread distance’

Answer 35

You can specify the horizontal and vertical offset distances, the amount the shadow should blur, and a color. Same as foreground color unless overridden. You can also specify a spread amount, which increases (or decreases with negative values) the size of the shadow.

Question 36

Box-shadow value inset

Answer 36

You can make the shadow render inside the edges of the visible element box by adding the inset keyword to the rule.

Question 37

Transparent or translucent background on box-shadow

Answer 37

If the element has a transparent or translucent background, you will not see the box shadow in the area behind the element. Example: box-shadow: 6px 6px 5px 10px gray; /* 5px blur, 10px spread */

Question 38

There are two main ways to specify colors in style sheets

Answer 38

With a predefined color name and more commonly, with a numeric value that describes a particular RGB color.

Question 39

Color name

Answer 39

It has to be one of the color keywords predefined, not just any color name. CSS3 adds support for the extended set of 140 (rather fanciful) color names. CSS3 also added the transparent keyword, which can be used with any property that has a color value. Helpful, but limited.

Question 40

RGB color

Answer 40

Computers create the colors you see on a monitor by combining three colors
of light: red, green, and blue. Known as the RGB color model. The amount of light in each color “channel” is typically described on a scale from 0 (none) to 255 (full blast), although it can also be provided as a percent. The closer the three values get to 255 (100%), the closer the resulting color gets to white.

Question 41

Why 255?

Answer 41

In true RGB color, 8 bits of information are devoted to each color channel. Because 8 bits can describe 256 shades (2^8 = 256), colors are measured on a scale from 0 to 255.

Question 42

Truecolor

Answer 42

Taken together, 255 colors in each channel can define around 16.7 million
color combinations. This color space of millions of colors is known as Truecolor.

Question 43

sRGB

Answer 43

There are different ways to encode truecolor (that is, convert them to bytes for computers), and the web uses an encoding called sRGB.

Question 44

Writing color values in CSS (3 types)

Answer 44

CSS allows RGB color values to be specified in a number of formats.

Scale from 0-255= color: rgb(200, 178, 230);
Percentage= color: rgb(78%, 70%, 90%);
Or, you can provide the six-digit hexadecimal (or hex for short) version= color: #C8B2E6;

Question 45

Hexadecimal shorten

Answer 45

If your value happens to be made up of three pairs of double digits or letters, such as color: #FFCC00; or color: #993366;
You can condense each pair down to one digit or letter, like #FC0 and #936. Reduces size of file.

Question 46

Structure of hexadecimal notation

Answer 46

The hexadecimal numbering system uses 16 digits: 0–9 and A–F (for representing the quantities 10–15).

Question 47

RGBa color

Answer 47

RGBa color allows you to specify a color and make it as transparent or as
opaque as you like. The “a” in “RGBa” stands for alpha, which is an additional channel that controls the level of transparency on a scale from 0 (fully transparent) to 1 (fully opaque).
Example: color: rgba(0, 0, 0, .5);
The first three values in the parentheses are regular old RGB values, in this case creating the color black. The fourth value, .5, is the transparency level.

Question 48

HSL color

Answer 48

Hue (color), Saturation, and Lightness (or Luminosity). Saturation is a percentage value from 0% (gray) to 100% (color at full blast). Lightness (or brightness) is also a percentage value from 0% (darkest) to 100% (lightest). In CSS, HSL values are provided as the hue value and two percentages. Example: color: hsl(265, 51%, 80%);

Question 49

HSLa color

Answer 49

As with RGB, you can add an alpha channel to set the transparency of HSL colors, resulting in the HSLa color model. As for RGBa, the fourth value is the degree of transparency on a scale from 0 (fully transparent) to 1 (fully opaque).
Example: color: hsla(70, 60%, 58%, .65);

Question 50

Foreground color

Answer 50

The foreground of an element consists of its text and border (if one is specified). You specify a foreground color with the color property.

Question 51

Foreground color (properties)

Answer 51

Values: color value (name or numeric).
Default: depends on the browser and user’s preferences.
Applies to: all elements.
Inherits: yes.

Question 52

Background color

Answer 52

Use background-color to apply a background color to any element. A background color fills the canvas behind the element that includes the content area, and any padding (extra space) added around the content, extending behind the border out to its outer edge. By default, if your border has gaps, the background will show through. Use the dfn element and class to create highlighted backgrounds for inline text.

Question 53

Background color (properties)

Answer 53

Values: color value (name or numeric) | transparent
Default: transparent
Applies to: all elements
Inherits: no

Question 54

Transparent value in background-color property

Answer 54

Background colors do not inherit, but because the default background setting for all elements is transparent, the parent’s background color shows through its descendant elements.

Question 55

Background painting area

Answer 55

The area on which fill colors are applied. The background painting area of an element extends all the way out to the outer edge of the border. Use background-clip property to give designers more control over where the painting area begins and ends.

Question 56

Background-clip (properties)

Answer 56

Values: border-box | padding-box | content-box
Default: border-box
Applies to: all elements
Inherits: no

Question 57

Border-box value in background-clip property

Answer 57

The default border-box value draws the painting area to the outside edge of the border.

Question 58

Padding-box value in background-clip property

Answer 58

Starts the painting area on the outside edge of the padding area for the element (and to the inside edge of the border).

Question 59

Content-box value in background-clip property

Answer 59

Allows the background to fill only the content area for the element.

Question 60

Opacity property

Answer 60

There is another way to make an entire element slightly see-through: the opacity property.

The value for opacity is a number between 0 (completely transparent) and 1 (completely opaque). A value of .5 gives the element an opacity of 50%.

Question 61

Opacity property (properties)

Answer 61

Values: number (0 to 1)
Default: 1
Applies to: all elements
Inherits: no

Question 62

Opacity vs RGBa color

Answer 62

The opacity setting applies to the entire element—both the foreground and the background. Use an RGBa color value instead to mark one but not the other.

Question 63

Background-image property

Answer 63

Adds a background image to any element. Its primary job is to provide the location of the image file.

Question 64

Background-image property (properties)

Answer 64

Values: url(location of image) | none
Default: none
Applies to: all elements
Inherits: no

Question 65

Value of background-image property

Answer 65

The value of background-image is a sort of URL holder that contains the location of the image. Use root site relative or relative URLs. For site root relative URLs, you won’t be able to test it locally (from your own computer) unless you have it set up as a server.

Question 66

3 Best practices for background images

Answer 66

Use a simple image that won’t interfere with the legibility of the text over it.

Always provide a background color value that matches the primary color of the background image. If the background image fails to display, at least the overall design of the page will be similar. This is particularly important if the text color would be illegible against the browser’s default white background.

As usual for the web, keep the file size of background images as small as possible.

Question 67

Background-image default (not a value)

Answer 67

The image starts in the top-left corner and tiles horizontally and vertically until the entire element is filled. Like background colors, tiling background images fill the area behind the content area, fill the extra padding space around the content, and extend to the outer edge of the border. Change area with background-clip.

Question 68

All background properties

Answer 68

background-color
background-image
background-repeat
background-position
background-attachment
background-clip
background-size
background.

Question 69

Background-repeat (properties)

Answer 69

Values: repeat | no-repeat | repeat-x | repeat-y | space | round
Default: repeat
Applies to: all elements
Inherits: no

Question 70

Space and round values in background-repeat properties

Answer 70

Attempt to fill the available background painting area an even number of times.

Question 71

Space value in background-repeat properties

Answer 71

The browser calculates how many background images can fit across the width and height of the background area, then adds equal amounts of space between each image.

Question 72

Round value in background-repeat properties

Answer 72

Makes the browser squish the background image horizontally and vertically (not necessarily proportionally) to fit in the background area an even number of times.

Question 73

Background-position property

Answer 73

Specifies the position of the origin image in the background.

Question 74

Background-position property (properties)

Answer 74

Values: length measurement | percentage | left | center | right | top | bottom
Default: 0% 0% (same as left top)
Applies to: all elements
Inherits: no

Question 75

Left, right, top, bottom, and center values in background-position property

Answer 75

Position the origin image relative to the outer edges of the element’s padding. For example, left positions the image all the way to the left edge of the background area. The default origin position corresponds to left top. When there is only one value, it assumes the other one is center. Keywords may appear in any order.

Question 76

Length measurements value for background-position property

Answer 76

Specifying position using length measurements indicates an amount of offset from the top-left corner of the element to the top-left corner of the background origin image. Horizontal first. Specifying negative values is allowed and causes the image to hang outside the visible background area.
Percentage values: Are provided in horizontal/vertical pairs, with 0% 0% corresponding to the top-left corner and 100% 100% corresponding to the bottom-right corner. Horizontal first. It is important to note that the percentage value applies to both the canvas area and the image itself.

Question 77

Background-origin

Answer 77

This property defines the boundaries of the background positioning area.

Question 78

Background-origin (properties)

Answer 78

Values: border-box | padding-box | content-box
Default: padding-box
Applies to: all elements
Inherits: no

Question 79

Box values for background-origin property

Answer 79

The border-box (so the origin image is placed under the outer edge of the border, padding-box (outer edge of the padding, just inside the border), or content-box (the actual content area of the element).

Question 80

Background-attachment

Answer 80

With the background-attachment property, you have the choice of whether the background image scrolls with the content or stays in a fixed position.

Question 81

Background-attachment (properties)

Answer 81

Values: scroll | fixed | local
Default: scroll
Applies to: all elements
Inherits: no

Question 82

Local value in background-attachment property

Answer 82

Makes the background image fixed to the content of the scrolling element. This keyword is not supported in IE8 and earlier and may also be problematic on mobile browsers.

Question 83

Background-size (properties)

Answer 83

Values: length | percentage | auto | cover | contain
Default: auto
Applies to: all elements
Inherits: no

Question 84

There are several ways to specify the length of the background image (2)

Answer 84

Most straightforward way is to specify the dimensions in length units such as pixels or ems as a horizontal and then vertical value.

Percentage values are calculated based on the background positioning area, which by default runs to the inside edge of the border, but may have been altered with background-origin. So a horizontal value of 50% does not make the image half its width; rather, it sizes it to 50% of the width of the positioning area.

Okay to mix percentage and length values.

Question 85

Auto value on background-size property

Answer 85

Resizes the image in whatever direction is necessary to maintain its proportions. Some images, such as SVG and CSS gradients, don’t have intrinsic proportions.

Question 86

Cover value on background-size property

Answer 86

The browser resizes a background image large enough to reach all the sides of the background positioning area. There will be only one image because it fills the whole element, and it is likely that portions of the image will fall outside the positioning area if the proportions of the image and the positioning area do not match.

Question 87

Contain value on background-size property

Answer 87

Sizes the image just large enough to fill either the width or the height of the positioning area (depending on the proportions of the image). The whole image will be visible and “contained” within the background area. If there is leftover space, the background image repeats unless background-repeat is set to no-repeat.