Advanced CSS

Question 1

vendor prefixes for major browsers:

Answer 1

• moz- : Firefox
• webkit- : Webkit browsers such as Safari and Chrome
• o- : Opera
• ms- : Internet Explorer

Question 2

Give an example of vendor prefixes in action:

Answer 2

• webkit-transition: all 4s ease;
• moz-transition: all 4s ease;
• ms-transition: all 4s ease;
• o-transition: all 4s ease;
  transition: all 4s ease;

Question 3

Even though, in our example, the “transition” property is consistent across all browsers, some browsers have a different syntax for certain properties. Have look at this CSS gradient implementation:

Answer 3

Creating Cross-Browser Linear Gradients with CSS3

-webkit-linear-gradient(left, #999999 0%, #ffffff 100%);

Question 4

Apart from px, pt, %, em, developers have access to:

Answer 4

rem (root em)
vw (viewport width)
vh (viewport height)

Question 5

____ values are relative to the root html element, for instance, if the font-size of the root element is 16px then 1 rem = 16px for all elements.

Answer 5

rem (root em). rem values are relative to the root html element, for instance, if the font-size of the root element is 16px then 1 rem = 16px for all elements.

Question 6

____ whereas the % values are relative tio the containing parent, vw is relative to the sise of the viewport. 1 vw = 1/100th of the viewport’s width.

Answer 6

vw (viewoport width). Whereas the % values are relative tio the containing parent, vw is relative to the sise of the viewport. 1 vw = 1/100th of the viewport’s width.

Question 7

_______ Same as vw, except vh is used for height.

Answer 7

vh (viewport height). Same as vw, except vh is used for height.

Question 8

Commonly used advanced selectors include:

Answer 8

Select:

• multiple elements
• descendant elements
• child elements
• siblings
• adjacent sibling
• by attribute or attribute value
• attribute begins or ends with value
• select NOT elements

Question 9

• multiple elements

Answer 9

div,p{
color:red;
}

Question 10

• descendant elements

Answer 10

div p{
color:red;
}

Question 11

• child elements

Answer 11

div>p{
color:red;
}

Question 12

• siblings

Answer 12

h2 ~ p{
color:red;
}

Question 13

• adjacent sibling

Answer 13

h2 + p{
color:red;
}

Question 14

• by attribute or attribute value

Answer 14

input[autofocus]{
border:1px solid red;
}

input[type=text]{
	border:1px solid red;
	padding:10px;
	background-color:#CCCCCC;
}

Question 15

• attribute begins or ends with value

Answer 15

a[href^=”https://”]{
color:red;
}

a[href$=”.pdf”]{
color:red;
}

Question 16

• select NOT elements

Answer 16

:not(p){
font-weight:bold;
}

Question 17

As mentioned, for a transition to take place, an element must have a change in state, and different styles must be identified for each state.

The easiest way for determining styles for different states is by using the :____, :_____, :____, and :____ pseudo-classes.

Answer 17

As mentioned, for a transition to take place, an element must have a change in state, and different styles must be identified for each state.

The easiest way for determining styles for different states is by using the :hover, :focus, :active, and :target pseudo-classes.

Question 18

The actual syntax for the transform property is quite simple, including the transform property followed by the value. The value specifies the transform type followed by a specific amount inside parentheses.

Answer 18

div {
  -webkit-transform: scale(1.5);
     -moz-transform: scale(1.5);
       -o-transform: scale(1.5);
          transform: scale(1.5);
}

Question 19

2D Rotate (transform property)

Answer 19

.box-1 {
transform: rotate(20deg);
}

Question 20

2D Scale (transform property)

Answer 20

.box-1 {
transform: scale(.75);
}

Question 21

2D Translate (transform property)

Answer 21

.box-1 {
transform: translateX(-10px);
}

Question 22

2D Skew (transform property)

Answer 22

.box-1 {
transform: skewX(5deg);
}

Question 23

Combining Transforms

Answer 23

.box-1 {
transform: rotate(25deg) scale(.75);
}

Question 24

2D Cube Demo

Answer 24

.cube {
  position: relative;
}
.side {
  height: 95px;
  position: absolute;
  width: 95px;
}
.top {
  background: #9acc53;
  transform: rotate(-45deg) skew(15deg, 15deg);
}
.left {
  background: #8ec63f;
  transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
}
.right {
  background: #80b239;
  transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
}