Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Exam 70-480: Programming in HTML5 with JavaScript and CSS3 > Use CSS3 in applications (25%) > Flashcards

Use CSS3 in applications (25%) Flashcards

1
Q

Why do HTML elements usually appear differently in different browsers?

A

The browsers are applying different default styles

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Which CSS property is used to specify the text color?

A

color

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What three ways can you specify a color for the CSS color property?

A

hex, color name, and rgb values

h1 {
    color:#00FF00;
}
h2 {
    color: green;
} 
h3 {
    color: rgb(0,255,0);
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

How do you make text appear in bold?

A

Set the CSS font-weight property to bold.

p {
font-weight: bold;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What values can be specified for the CSS font-weight property?

A

lighter, normal, bold and bolder

or

100 (lighter), 200, 300, 400, 500, 600, 700, 800, 900 (darker)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

How do you make text appear in italics?

A

Set the CSS font-weight property to italic.

p {
font-style:italic;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

How do you specify the font to use for text?

A

Set the CSS font-family property.

p {
font-family:Arial,’Times New Roman’,Webdings;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

How do you use a font that may not be installed on the client?

A

Add a @font-face rule and provide a WOFF (Web Open Font Format) for download.

@font-face {
    font-family: "My Nicer Font";
    src: url('fonts/my_woff_font.eot');
    src: url('fonts/my_woff_font.woff');
}

p {
font-family: ‘My Nicer Font’;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

How do you change the size of text relative to the default text size of the browser?

A

Set the CSS font-size property to one of these values: xx-small, x-small, smaller, small, medium, large, larger, x-large, and xx-large.

p {
font-size: x-large;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

How do you change the horizontal alignment for text?

A

Set the CSS text-align property.

p {
text-align: center;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What are the possible values for the CSS text-align property (other than initial and inherit)?

A

left, center, right, justify

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What does the value initial for a CSS property signify?

A

That the property use its default value.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What does the value inherit for a CSS property signify?

A

That the property get its value from the parent element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What CSS property is used to indent text?

A

text-indent

p {
text-indent: 50px;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What CSS property is used to change the amount of spacing between letters?

A

letter-spacing

p {
letter-spacing: 8px;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What CSS property is used to change the amount of spacing between words?

A

word-spacing

p {
word-spacing: 8px;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What CSS property is used to change how a sentence or word wraps or breaks at the end of the line?

A

hyphens

div {
hyphens: none;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What are the possible values for the CSS hyphens property?

A

none, auto, manual

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What CSS properties are used to change an element’s size?

A

height and width

table {
height: 50%;
width: 50%;
}

div {
width: 200px;
height: 100px;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What CSS properties are used to change an element’s border?

A

border, border-style, border-color, border-spacing, border-width

p{
    border-style: solid ; 
    border-color: black; 
    border-spacing: 250px; 
    border-width: 5px;
}

div {
border: 5px solid black;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What is the order that values must be specified for the CSS border property?

A

size style color

div {
border: 5px solid black;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

What is the space surrounding an element outside its border called?

A

margin

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What is the space inside an element’s border surrounding its content called?

A

padding

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

From inside to outside, what are the CSS properties that affect the spacing of elements?

A

padding, border, margin

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

What CSS property is used to change the transparency of an element?

A

opacity

p {
opacity: 0.4;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

What CSS property is used to change the opacity of an element?

A

opacity

p {
opacity: 0.4;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

What is the range of values for the CSS opacity property?

A

0.0 to 1.0

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

In a CSS file, how are partial URL’s interpreted?

A

They are interpreted relative to the location of the style sheet (.css file), not relative to the document.

p {
background-image: url(‘orange.jpg’); /* assumes orange.jpg is in the same directory as the file containing this CSS definition */
color: white;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

What CSS property is used to specify a background image for an element?

A

background-image

p {
background-image: url(‘orange.jpg’); /* assumes orange.jpg is in the same directory as the file containing this CSS definition */
color: white;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

What configuration options are available for the CSS background-image property?

A

size, repeat, clip, position-x/position-y

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

What two types of gradients are supported in CSS?

A

linear and radial

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

What CSS function is used with the CSS background property to apply a linear gradient?

A

linear-gradient

background: linear-gradient(black, gray);

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

What are the parameters of the CSS linear-gradient function?

A

direction (optional) and a list of color stops

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

What are the possible values for the direction parameter of the CSS linear-gradient function?

A

to left, to right, to bottom left, to bottom right, to top left, to top right, to top, to bottom

-or-

degrees specified by 0deg to 360deg

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

Which CSS properties apply shadow effects to elements?

A

box-shadow and text-shadow

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

Which CSS property applies controls the shadow effect around the box of an HTML element?

A

box-shadow

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

Which CSS property applies controls the shadow effect around text?

A

text-shadow

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

What are the parameters of the CSS box-shadow property?

A

h-shadow, v-shadow, blur, spread, color, inset

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

Which parameters of the CSS box-shadow property are required?

A

h-shadow and v-shadow

div
{
box-shadow: 10px 10px;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

What are the parameters of the CSS text-shadow property?

A

h-shadow , v-shadow, blur, color

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

Which parameters of the CSS text-shadow property are required?

A

h-shadow and v-shadow

p
{
text-shadow: -10px -10px;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

Which CSS property allows you to apply clipping to HTML elements?

A

clip

clip: rect(25px, 50px, 50px, 25px);

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
Q

What value does the CSS clip property take?

A

The shape and size of the element to make visible specified by the CSS rect function.

clip: rect(25px, 50px, 50px, 25px);

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

What are the parameters of the CSS rect function?

A

top, right, bottom, left

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
45
Q

What must be specified for the CSS position property in order to use the CSS clip property?

A

fixed or absolute

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
46
Q

What is the default value for the CSS position property?

A

relative

For the exam, be sure you understand that each HTML element is a box and each box be- gins its own new coordinate system. If you place a div element on the page at (50px,50px), any elements placed inside it are not placed at a coordinate starting at (50px, 50px) just because that is where the div element is. The child elements inside the div start at coordinate (0,0), which is the top left corner of the div itself. All child elements are positioned relative to the container in which they are placed.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
47
Q

What values may be specified for the CSS position property?

A

fixed, relative, absolute, float

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
48
Q

What is fixed positioning?

A

Elements are placed relative to the browser window.????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

49
Q

What is relative positioning?

A

Elements are placed relative to their position in normal flow.

50
Q

What is absolute positioning?

A

Elements are placed relative to its first parent element.

51
Q

Where do the left and right properties start their measurements?

A

From the outermost edge of the box.

52
Q

What CSS property is used to specify layers for overlapping elements?

A

z-index

53
Q

What is float positioning?

A

Elements automatically move to the left or right of surrounding content. This is most commonly used to place images in line with text to force the text to wrap around the image.

54
Q

What are the possible values for the CSS float property?

A

left and right

55
Q

What is a flexbox?

A

A CSS construct that provides a way to lay out elements that flow either from horizontally or vertically.

56
Q

Which types of HTML elements can be made into flexboxes?

A

Container elements, such as the div element

57
Q

How is an HTML element made into a flexbox in CSS?

A

Set the CSS display property of the element to flexbox.

<div>
</div>

#flexbox1 {
  display: flex;
  border: 1px solid black;
  margin-top: 100px;
  min-height: 15px;
}
58
Q

What are the elements within a flexbox called?

A

Flexbox items

59
Q

What CSS properties are available for the flexbox?

A

flex-direction and flex-pack

60
Q

What are the available options for the CSS flex-direction property?

A

row, row-reverse, column, and column-reverse

61
Q

What are the available options for the CSS flex-pack property?

A

start, end, center, and distribute

62
Q

What value do you specify for the CSS flex-direction property to layout elements vertically?

A

column

63
Q

What value do you specify for the CSS flex-direction property to layout elements horizontally?

A

row

64
Q

What CSS property is used on the child elements of a flexbox to ????????????????????????????????????designate the space each should occupy?

A

flex

65
Q

How does the values for the CSS flex property determine how much space each element takes up in a flexbox?

A

The sizes are determined as a percentage to the total of the values for the CSS flex property. Setting all the values to the same number makes every element equal in size. Setting one value to 1 and two other values to 2 will make the first element take 20% of the space and the rest of the elements take 40% each.

66
Q

What CSS property can be used to specify the order in which flexbox items appear in a flexbox?

A

order

67
Q

What CSS property is used to specify the wrapping behavior of the flexbox when its elements are larger than the flexbox?

A

flex-wrap

68
Q

What CSS property combines the flex-direction and flex-wrap in one single property?

A

flex-flow

69
Q

In what order are the values specified for the CSS flex-flow property?

A

flex-direction flex-wrap

ex:

flex-flow: row wrap

70
Q

What two CSS properties can be used to layout an element’s content in multiple columns?

A

column-count and columns

#c_lo {
  width: 80%;
  height: 400px;
  border: 1px solid black;
  column-count: 5;
  column-rule-color: black;
  column-rule-style: dashed;
  column-rule-width: 2px;
  column-gap: 5px;
}
#c_lo {
  columns: 3 50px;
}
71
Q

What CSS properties are used to configure how multi-column elements are laid out?

A

column-count, column-gap, ?????????????????column-rule-color, column-rule-style, column-rule-width, column-rule, column-width, and columns

72
Q

What CSS property can be used to change the behavior of the CSS float property?

A

wrap-flow

73
Q

What are the available values for configuring the CSS wrap-flow property?

A

auto, both, start, end, maximum, and clear

74
Q

Which CSS property and value can be used to layout elements in a grid without using a table element?

A

display: grid

75
Q

Which CSS properties are used to define the number and sizes of columns and rows in a grid layout?

A

grid-columns and grid-rows

#mainGrid {
    display: grid;
    grid-columns: 150px 150px 150px 150px;
    grid-rows: 75px 75px;
}
<div id="mainGrid">
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
</div>
76
Q

What are layout regions?

A

A CSS3 constructs that allows you to have content flow through various regions in a web page.

77
Q

What two things are required to use layout regions?

A

a content source and the regions that will display the content

Example HTML with regions:

    <div class="regionLayout">
        <div></div>c
        <div></div>
        <div></div>
        ...
        <div></div>
    </div>
78
Q

Where can the content for layout regions come from?

A

an iframe or another element on the page (the latter is not supported by browsers yet)

79
Q

What two CSS properties are required to control the flow of content from the source to the destination regions?

A

flow-into and flow-from

.content_source{
flow-into: myflow;
}

.content_regions{
flow-from: myflow;
}

80
Q

What is a responsive user interface?

A

A user interface that can adapt itself automatically based on the size of the screen that is available.

81
Q

What is a CSS transition?

A

A technique for changing a CSS property in a visible gradual fashion (over time).

In the following code, the div will move to the right and slowly fade from gray to white when the mouse hovers over it. See this link for a live example: https://jsfiddle.net/hzpmt2eb/

div {
            width: 100px;
            height: 100px;
            background-color: gray;
            margin-left: 250px;
            margin-top:250px;
            transition: background-color 1s, margin-left 1s ;
}

div:hover {
margin-left: 350px;
background-color: white;
}

82
Q

Which CSS property can be used to specify multiple properties for transition?

A

transition

transition: background-color 1s, margin-left 1s ;

83
Q

How should the value for the CSS transition property be specified?

A

A comma-delimited list of properties and lengths of time.

transition: background-color 1s, margin-left 1s ;

84
Q

Which CSS property is used to specify the property that will be transitioned?

A

transition-property

85
Q

Which CSS property is used to specify the total length of time for a transition?

A

transition-duration

86
Q

Which CSS property is used to specify the length of time before starting a transition?

A

transition-delay

87
Q

How many CSS properties can be transitioned using the individual CSS transition-* properties?

A

Only one

Use the CSS transition property if you need to transition more than one property at a time.

88
Q

Which CSS property can be used to control the speed of a transition?

A

transition-timing-function

89
Q

What are the available values for the CSS transition-timing-function property?

A

ease, linear, ease-in, ease-out, ease-in-out, cubic bezier

90
Q

Which CSS property is used to apply 2D and 3D transformations?

A

transform

div {
transform: rotateX(30deg) rotateY(30deg) rotateZ(30deg);
}

https://jsfiddle.net/7q0kecp8/

91
Q

Which CSS transformation is used to move an element from its current location to a new location?

A

translate - translateX, translateY, translateZ, translate3d

92
Q

Which CSS transformation is used to change the size of an element?

A

scale - scaleX, scaleY, scaleZ, scale3d

93
Q

Which CSS transformation is used to spin an element on the x-axis, y-axis, and/or the z-axis?

A

rotate - rotateX, rotateY, rotateZ, rotate3d

transform: rotateX(30deg) rotateY(30deg) rotateZ(30deg);
transform: rotate3d(1, 1, 1, 30deg);

94
Q

Which CSS transformation is used to combine all other 3D transformations in a single value?

A

matrix - matrixX, matrixY, matrixZ, matrix3d

95
Q

Which 3D transformations are available in CSS?

A

translate, scale, rotate, matrix

96
Q

What are CSS media queries?

A

CSS definitions that apply CSS properties based on the size of the screen

@media screen and (min-width: 1200px) {
    #blogPage {
        display: -ms-grid;
        grid-columns: 15% 1fr 25%;
        grid-rows: (20%)[5];
        width: 90%;
        height: 95%;
        border: 1px dotted black;
        margin: auto;
    }
}
97
Q

Which attribute of the link element can be used to apply a CSS file based on a CSS media query?

A

media

<link></link>

<link></link>

<link></link>

98
Q

Other than using a smart-phone or tablet, how can use test the affects of your CSS media queries?

A

Resize the browser window to different sizes.

Media queries are based on the size of the browser view point and not on the browser type or operating system.

99
Q

Which CSS selector affects all elements of the specified element type?

A

Element selector

div {
}

body {
}

100
Q

Which CSS selector affects all elements whose class attribute contains the specified value?

A

Class selector

.myClass {
}

<div></div>

101
Q

Which CSS selector affects all elements with the specified attribute?

A

Attribute selector

div[required] {
}

<div>CSS is applied</div>

<div>CSS is NOT applied</div>

102
Q

What operators are available for use in CSS attribute selectors?

A

=, ~=, ^=, $=, *=

103
Q

Which operator is used to create a CSS attribute selector that targets attributes with a specific value?

A

=

104
Q

Which operator is used to create a CSS attribute selector that targets attributes with any one of a list of specific values?

A

~=

105
Q

Which operator is used to create a CSS attribute selector that targets attributes whose value begins with the specified text?

A

^=

106
Q

Which operator is used to create a CSS attribute selector that targets attributes whose value ends with the specified text?

A

$=

107
Q

Which operator is used to create a CSS attribute selector that targets attributes whose value contains with the specified text?

A

*=

108
Q

What are CSS pseudo-classes?

A

A way to apply styles to an element based on its state, interaction with the user, or its position in the document.

109
Q

What are CSS pseudo-elements?

A

A way to insert content into the page in locations relative to the elements that the CSS is being applied to.

110
Q

Which three CSS pseudo-classes are used to style anchor tags?

A

:link, :visited, :hover

a:link {
color: green;
}
a:hover {
color: red;
}
a:visited {
color: black;
}

111
Q

Which CSS pseudo-class is used to apply styles to elements that are checked?

A

:checked

input[type=”checkbox”]:checked {
display: none;
}

112
Q

Which CSS pseudo-class is used to apply styles to elements that have the required attribute?

A

:required

input:required {
border: 2px solid red;
}

113
Q

Which CSS pseudo-classes are used to apply styles to elements based on their enabled/disabled state?

A

:enabled and :disabled

input:enabled {
background-color: white;
}

input:disabled {
background-color: blue;
}

114
Q

Which CSS pseudo-class is used to apply styles to the first element in a list?

A

:first-child

https://jsfiddle.net/dedzhfgm/

<div>
    <p>Lorem Ipsum ...</p>
    <p>Lorem Ipsum ...</p>
    <p>Lorem Ipsum ...</p>
    <p>Lorem Ipsum ...</p>
</div>

p:first-child {
background-color:green;
}

115
Q

Which CSS pseudo-class is used to apply styles to the first letter in the specified element?

A

:first-letter

p:first-letter {
font-size: xx-large;
}

116
Q

Which CSS pseudo-classes are used to insert content before or after the specified element?

A

:before and :after

p:before {
content: ‘’;
}
p:after {
content: ‘’;
}

117
Q

Which CSS pseudo-class is used to apply styles to the first line in the specified element?

A

:first-line

p:first-line {
color:green;
font-size: x-large;
}

118
Q

Which can be added to a CSS rule to force it to be applied regardless of other conflicting CSS rules?

A

!important

p{
    font-family: serif;
    color: blue;
} 
p{
    color: purple !important;
}
p{
    color: yellow;
}

Exam 70-480: Programming in HTML5 with JavaScript and CSS3 (4 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions