Advanced CSS

Question 1

What property can be used to add a corner to each corner of a box?

Answer 1

border-radius

Example: border-radius: 20px;
Example: border-radius: 6px 12px 18px 24px;
Example: border-radius: 50px/100px;

Question 2

How to create an ellipse with CSS?

Answer 2

Specify different horizontal and vertical radii by splitting values with a “/”

Example: border-radius: 50px/100px;

Question 3

What is the standard CSS property to apply shadows to a box?

Answer 3

box-shadow

Example: box-shadow: 5px 5px 3px 1px #999

Question 4

What are the possible box-shadow values?

box-shadow: 5px 5px 3px 1px #999

Answer 4

1. ) horizontal offset – how far the shadow is nudged to the right (or left if it’s negative)
2. ) vertical offset – how far the shadow is nudged downwards (or upwards if it’s negative)
3. ) blur radius — the higher the value the less sharp the shadow. (“0” being absolutely sharp).
4. ) spread distance — the higher the value, the larger the shadow (“0” being the inherited size of the box)
5. ) color
6. ) inset - apply shadows to the inside of a box

Question 5

What is the standard CSS property to apply shadows to text?

Answer 5

text-shadow

Example: text-shadow: -2px 2px 2px #999;

Question 6

What is the universal selector?

Answer 6

Using an asterisk (“ * ”), you can target everything.

Example: * { } Target everything on a page
Example: #contact * { } Target everything under this ID

Question 7

What is a universal selector is commonly used for?

Answer 7

The universal selector is commonly used to “reset” many of a browser’s default styles.

Question 8

What is a child selector?

Answer 8

A greater-than symbol (“>”) can be used to specify something that is a child of something else.

Example: #genus_examples > li { border: 1px solid red }

Question 9

What is an adjacent selector?

Answer 9

A plus sign (“+”) is used to target an adjacent sibling of an element, essentially, something immediately following something.

Example: h1 + p { font-weight: bold }

Question 10

What is the general sibling selector?

Answer 10

A general sibling selector uses a tilde (“~”) and will match an element following another regardless of its immediacy.

Example: h1 ~ p { font-weight: bold }

Question 11

What does HSL stand for?

Answer 11

hue, saturation, and lightness

Question 12

What is the a in RGBa?

Answer 12

Alpha, as in “alpha transparency”.

This allows you to set the transparency of a box or text.

Example: color: rgba(0,0,0,0.8);

Question 13

True or False? Anywhere where you can use rgb, you can used rgba.

Answer 13

True

Question 14

What is Hue, saturation, and lightness?

Answer 14

It gives you direct control over the aspects of a color’s shade rather than its logical ingredients.

Example: color: hsl(36, 100%, 50%)

1. ) Hue from 0 to 360 on a color wheel
2. ) Saturation from 0% to 100% or grey to full color
3. ) Lightness from 0% (black) to 100% (white) 50% (normal)

Question 15

What is HSLa?

Answer 15

HSLa combines hue, saturation, and lightness with alpha transparency

Example: hsla(0, 75%, 75%, 0.5)

Question 16

They can be used to import other CSS files, apply CSS to a particular media, or embed uncommon fonts

Answer 16

At-Rules

Question 17

What are the three types of At-Rules?

Answer 17

1. ) @import
2. ) @media
3. ) @font-face

Question 18

What is the @import rule used for?

Answer 18

This is used to bolt another stylesheet onto your existing one. @import rules must be placed at the top of a stylesheet.

Example: @import url(morestyles.css);

Question 19

What are media rules?

Answer 19

@media can be used to apply styles to a specific media, such as print

Example: @media screen, projection { }

Question 20

How would you embed fonts in a web page so that a typeface can be used even if it isn’t sitting on the user’s computer?

Answer 20

The at-rule @font-face

Example:
@font-face { 
    font-family: "font of all knowledge";
    src: url(fontofallknowledge.woff);
}

Question 21

What are attribute selectors?

Answer 21

Attribute selectors allow you to style an element’s box based on the presence of an HTML attribute or of an attribute’s value

Example: abbr[title]
Example: input[type=text]
Example: input[type=text][disabled]
Example: [attribute^=something] (starts with something)
Example: [attribute$=something] (ends with something)
Example: [attribute*=something] (contains something)

Question 22

_______ allow you to easily animate parts of your design without the need for JavaScript.

Answer 22

Transitions

Example:  
a:link {
    transition: all .5s linear 0;
    color: hsl(36,50%,50%);
}

a:hover {
color: hsl(36,100%,50%);
}

Question 23

What is the difference between transitions and states?

Answer 23

States: Binary animations are either on or off

Transitions: Smooth animation, slowly transitioning from state to state

Question 24

True or False? You can apply multiple background images to a single element.

Answer 24

True.

Example:
background-image: url(this.jpg), url(that.gif), url(theother.png);

Question 25

The ________ property allows you to stretch or compress a background image.

Answer 25

background-size

Question 26

The _____ property defines where the background area of a box actually starts

Answer 26

background-origin

Question 27

What provides powerful manipulation of the shape, size, and position of a box and its contents?

Answer 27

Transforms

Example: transform: rotate(-10deg)
Example: transform: skew(20deg,10deg);
Example: transform: scale(2);
Example: transform: translate(100px,200px);
Example: transform: rotate(-10deg) scale(2);

Question 28

Manipulating a box over two dimensions, transform can be used to do what 4 things?

Answer 28

1. ) Rotate - Turn the box
2. ) Skew - Tip the horizontal and vertical
3. ) Scale - Change width and height
4. ) Translate - Shift a box horizontally and vertically

Question 29

What does the matrix function do?

Answer 29

Combines transforms into one function – rotating, skewing, scaling, and translating.

Question 30

________ are used to show a smooth dissolve from one color to another.

Answer 30

Gradients

Question 31

What are the two types of gradients?

Answer 31

Linear and Radial

Example: background: linear-gradient(yellow, red);
Example: background: radial-gradient(yellow, green);
Example: background: repeating-linear-gradient(white, black 15px, white 30px);

Question 32

_______ enable you to specify different design choices depending on screen size?

Answer 32

Media Queries

Question 33

What do media queries target?

Answer 33

Mobile phones, tablets, and varying browser window sizes

Question 34

What type of screen sizes do media queries target?

Answer 34

1.) Browser-size
Example: @media screen and (max-width: 1000px) { }

2.) Orientation-specific
Example: @media screen and (orientation: landscape) { }
Example: @media screen and (orientation: potrait) { }

3.) Device-specific
Example: @media screen and (min-device-height: 768px) and (max-device-width: 1024px) { }