C777 Unit 2: Cascading Style Sheets (CSS)

element[attribute$=value]

Which selector targets every instance of a specified HTML element whose specified attribute ends with the specified value?

element[attribute*=value]

Which selector targets every instance of a specified HTML element whose specified attribute contains the specified substring value?

element[attribute^=value]

Which selector targets every instance of a specified HTML element whose specified attribute begins with the specified value?

element:checked

Which selector targets every checked instance of a specified HTML element?

element:disabled

Which selector targets every disabled instance of a specified HTML element?

element:enabled

Which selector targets every enabled instance of a specified HTML element?

element:first-of-type

Which selector targets every instance of a specified HTML element that is the first of its parent?

element:last-of-type

Which selector targets every instance of a specified HTML element that is the last of its parent?

element1~element2

Which selector targets every instance of element2 that is preceded by an instance of element1?

background

Properties are in this order:

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

Which property allows you to set different background properties in one declaration?

background-clip

Key values for this property:

border-box - extends behind the border

padding-box - extends to the inside edge of the border

content-box - extends to the edge of the content box

Which property specifies whether the background extends into the border or not?

background-origin

Key values for this property:

padding-box - from the upper left corner of the padding edge

border-box - from the upper left corner of the border

content-box - from the upper left corner of the content

Which property positions the background-image relative to an element's border, padding or content?

background-size

Key values for this property:

length - specifies width and height in fixed units

percentage - specifies width and height in in relation to the parent element

cover - cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges

contain - resize the background image to make sure the image is fully visible

Which property defines the size of background images?

border-image

Which property creates a border that uses an image instead of a line?

border-radius

Which property defines the shape or curve of a border around an HTML element?

box-shadow

Which property applies shadows to edges of HTML elements to create visual depth?

h-shadow and v-shadow

Which two values are required to create a box-shadow?

opacity

Which property specifies transparency for an HTML element?

resize

Which property defines whether an HTML element can be resized by the user and how it can be resized?

text-overflow

Which property cuts off, or clips, text that extends beyond its container?

text-shadow

Which property applies shadows to edges of text characters to create visual depth?

@font-face

Which rule allows developers to specify custom fonts?

font-family — specifies the font name

src — identifies the font file's location by URL

Which two properties are required to specify a custom font?

font-stretch

Which property specifies how the font should be stretched or spaced?

font-style

Which property specifies how the font should be styled vertical or slanted?

font-weight

Which property specifies the weight or thickness of each character in the font?

unicode-range

Which property specifies the range of UNICODE characters that should be downloaded for the font, based on availability?

hanging-punctuation

Which property specifies whether (and how) punctuation characters can appear outside the line box at the beginning or end of a full line of text?

punctuation-trim

Which property specifies whether (and how) punctuation characters can be trimmed or sized when they appear at the beginning or end of a line?

text-align-last

Which property specifies a justification style for the last line in a text block whose text-align property is set to "justify"?

text-emphasis

Which property applies emphasis style and color to an HTML element's text in a single declaration?

text-justify

Which property specifies a justification style for text whose text-align property is set to "justify"?

text-wrap

Which property specifies whether lines of text in a text area can break, and where a line can be broken. This property is no longer supported?

word-break

Key values for this property:

break-all - word may be broken at any character

break-word - word may be broken at arbitrary points

Which property specifies whether lines of text in a text area can break, and where a line can be broken?

word-wrap

Key values for this property:

normal - Break words only at allowed break points

break-word - Allows unbreakable words to be broken

Which property specifies that long words in a text area may be broken without a hyphen and wrap to the next line?

transform

Which property applies a 2D or 3D transformation to an HTML element, including rotating, moving, skewing, scaling and so forth?

transform-origin

Which property allows you to change a transformed HTML element's position?

transform-style

Which property specifies whether child elements will retain the parent element's position in 3D space?

perspective-origin

Which transform value specifies the bottom position of a 3D element?

backface-visibility

Which transform value defines whether or not an element is visible when it is rotated to face away from the viewer?

transform:rotate(angle)

Which transform value rotates the HTML element clockwise at the specified degree?

transform:scale(x,y)

Which transform value increases or decreases the size of the HTML element, based on specified parameters for width and height?

transform:scaleX(n)

Which transform value changes the HTML element's width?

transform:scaleY(n)

Which transform value changes the HTML element's height?

transform:matrix(n,n,n,n,n,n)

Which transform value combines all of the 2D transform methods into one?

transform:translate(x,y)

Which transform value moves the HTML element from its current position, based on the specified parameters for the left and top position?

transform:translateX(n)

Which transform value moves the HTML element horizontally?

transform:translateY(n)

Which transform value moves the HTML element vertically?

transform:skew(x-angle,y-angle)

Which transform value turns or skews the HTML element to a specified angle, based on the specified parameters for the horizontal and vertical lines?

transform:skewX(angle)

Which transform value turns or skews the HTML element to a specified angle along its X-axis?

transform:skewY(angle)

Which transform value turns or skews the HTML element to a specified angle along its Y-axis?

transform:rotateX(angle)

Which transform value rotates the HTML element around its X-axis at the specified degree?

transform:rotateY(angle)

Which transform value rotates the HTML element around its Y-axis at the specified degree?

transform:rotateZ(angle)

Which transform value rotates the HTML element around its Z-axis at the specified degree?

transform:rotate3d(x,y,z,angle)

Which transform value defines a 3D rotation by specifying the degree for rotation for all axes?

transform:scale3d(x,y,z)

Which transform value increases or decreases the size of the HTML element, based on specified parameters for width, height and depth?

transform:scaleX(x)

Which transform value defines a 3D scale transformation by specifying a value for the X-axis?

transform:scaleY(y)

Which transform value defines a 3D scale transformation by specifying a value for the Y-axis?

transform:scaleZ(z)

Which transform value defines a 3D scale transformation by specifying a value for the Z-axis?

transform:translate3d(x,y,z)

Which transform value defines a 3D translation using specified parameters for positions on the X-axis, Y-axis and Z-axis?

transform:translateX(x)

Which transform value defines a 3D translation using only the value for the X-axis?

transform:translateY(y)

Which transform value defines a 3D translation using only the value for the Y-axis?

transform:translateZ(z)

Which transform value defines a 3D translation using only the value for the Z-axis?

transform:matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

Which transform value defines a 3D transformation using a 4x4 matrix of 16 values?

transform:perspective(n)

Which transform value defines a perspective view for a 3D transformed element?

transition

Properties are in this order:

transition: property duration timing-function delay|initial|inherit;

Which property specifics the four transition properties into a single property?

No transition will occur

If you do not specify the duration for a CSS transition, what happens?

transition-property

Which property specifies the CSS property that the transition will affect?

transition-duration

Which property defines the amount of time that a transition takes?

transition-timing-function

Which property describes the speed of a transition?

transition-delay

Which property defines when the transition will begin?

@keyframes

Which rule defines the animation?

div {

animation: mymove 5s infinite;

}

@keyframes mymove {

0% {top: 0px;}

25% {top: 200px;}

}

How can you define the position of an animation using the @keyframes rule?

By specifying a percentage from 0% to 100%

or by using the keywords "to" and "from"

How can you define the position of an animation using the @keyframes rule?

animation

Properties are in this order:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Which property combines all the animation properties, except animation-play-state?

animation-name

Which property specifies the identifier for the @keyframes animation that binds it to a selector?

animation-duration

Which property specifies how long the animation will take to complete one cycle?

animation-timing-function

Which property specifies how an animation progresses over one cycle?

animation-delay

Which property specifies when the animation will begin?

animation-iteration-count

Which property specifies the number of times that the animation will play?

animation-direction

Which property specifies whether to play the animation in reverse on alternate cycles?

animation-play-state

Which property specifies whether the animation is running or paused?

appearance

Which property makes an HTML element look like a standard user interface element, such as a button or window?

box-sizing

Key values for this property:

content-box - width and height includes only the content

border-box - width and height includes content, padding and border

Which property forces specified HTML elements fit an area in a certain way?

icon

Which property styles an HTML element with an iconic equivalent?

nav-down

Which property specifies where the cursor will navigate to when the user presses the arrow-down key?

nav-index

Which property specifies the tabbing order for an HTML element?

nav-left

Which property specifies where the cursor will navigate to when the user presses the arrow-left key?

nav-right

Which property specifies where the cursor will navigate to when the user presses the arrow-right key?

nav-up

Which property specifies where the cursor will navigate to when the user presses the arrow-up key?

outline-offset

Which property draws an outline beyond the border edge as specified?

The element will display behind other elements.

What happens when you assign a negative z-index value to an element?

z-index

Which property specifies the stack order of an HTML element?

declaration

What consists of a property and a value?

rule

Example: body {background-color: #008080; color: #FFFFFF;}

What is a format instruction that consists of a specified selector and the properties and values applied to it?

selector

What is used to "find" the HTML elements you want to style with CSS?

property

What is an attribute that can be customized to change the way the element renders in the browser?

value

What is a specific selection for a property?

class selector

Which selector targets all elements with a specific HTML class attribute assigned?

id selector

Which selector targets one HTML element with a specific id attribute assigned?