Brainscape's Knowledge GenomeTM

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


See full index

HTML & CSS > CSS > Flashcards

CSS Flashcards

1
Q

p.center {
text-align: center;
color: red;
}

A

< p> elements with class=”center” will be center-aligned

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q
  • {
    text-align: center;
    color: blue;
    }
A

Universal Selector

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

h1, h2, p {
text-align: center;
color: red;
}

A

grouped selectors

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

<link></link>

A

External CSS

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

hsla, rbga

A

color hsla(9, 100%, 64%, 0)

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

background-image: url(“paper.gif”);

A

background image

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

background-repeat: repeat-x;

A

repeat-x, repeat-y, no-repeat

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

background-attachment: fixed

A

fixed, scroll

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

background: #ffffff url(“img_tree.png”) no-repeat right top;

A

background shorthand

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

border-style: solid;

border-width: 5px;

A

dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

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

border-width: 2px 10px 4px 20px;

A

border-width: 5px;

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

border-color: green;

A

border-color: red green blue yellow;

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

border: 5px solid red;

A

border-width
border-style (required)
border-color

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

border-left: 6px solid red;

background-color: lightgrey;

A

border-bottom: 6px solid red;

background-color: lightgrey;

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

border-left: 6px solid red;

background-color: lightgrey;

A

border-bottom: 6px solid red;

background-color: lightgrey;

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

margin: 25px 50px 75px;

A

top margin is 25px
right and left margins are 50px
bottom margin is 75px

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

margin: 25px 50px;

A

top and bottom margins are 25px

right and left margins are 50px

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

max-width

A 
The value of the max-width property overrides width
max-height	
max-width	
min-height	
min-width
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q 
outline-style
outline-color
outline-width
outline-offset
outline
A

outline: 5px solid yellow;

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

text-align

A

center / left/ right/ justify

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

a {
text-decoration: none;
}

A

h1 {
text-decoration: overline;
}

h2 {
text-decoration: line-through;
}

h3 {
text-decoration: underline;
}

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

text-transform

A

p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}

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

text-indent

A

p {
text-indent: 50px;
}

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

letter-spacing

A

h2 {
letter-spacing: -3px;
}

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

line-height

A

p.small {
line-height: 0.8;
}

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

direction

A

The direction property is used to change the text direction of an element:
p {
direction: rtl;
}

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

word-spacing

A

h1 {
word-spacing: 10px;
}

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

font-family

A

font-family: “Times New Roman”, Times, serif;

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

font-weight

A

p.normal {
font-weight: normal;
}

p.thick {
font-weight: bold;
}

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

a: link - a normal, unvisited link
a: visited - a link the user has visited
a: hover - a link when the user mouses over it
a: active - a link the moment it is clicked

A

a: hover MUST come after a:link and a:visited
a: active MUST come after a:hover

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

list-style-type

A

ul.a {
list-style-type: circle; or none
}

32
Q

Table Borders

A

table, th, td {
border: 1px solid black;
}

33
Q

border-collapse: collapse;

A

The border-collapse property sets whether the table borders should be collapsed into a single border:

34
Q

td {
height: 50px;
vertical-align: bottom;
}

A

The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in or

35
Q

tr:hover {background-color: #f5f5f5;}

A

Use the :hover selector on to highlight table rows on mouse over:

36
Q

tr:nth-child(even) {background-color: #f2f2f2;}

A

For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:

37
Q

display: none;

A

display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them. Take a look at our last example on this page if you want to know how this can be achieved.

38
Q

visibility:hidden;

A

visibility:hidden; also hides an element. However, the element will still take up the same space as before. The element will be hidden, but still affect the layout:

39
Q

position

A 
static
relative
fixed
absolute
sticky
40
Q

div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}

A

An element with position: relative; is positioned relative to its normal position.

41
Q

div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}

A

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

42
Q

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}

A

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: A “positioned” element is one whose position is anything except static.

43
Q

div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}

A

An element with position: sticky; is positioned based on the user’s scroll position.
You must also specify at least one of top, right, bottom or left for sticky positioning to work.

44
Q

overflow

A

visible - Default. The overflow is not clipped. The content renders outside the element’s box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
auto - Similar to scroll, but it adds scrollbars only when necessary

45
Q

float

A

left / right / none / inherit

46
Q

clear

A

The clear property specifies what elements can float beside the cleared element and on which side.
none/left/right/both/inherit

47
Q

div p {
background-color: yellow;
}

A

Descendant Selector

The following example selects all <p> elements inside <div> elements:

48
Q

div > p {
background-color: yellow;
}

A

The child selector selects all elements that are the children of a specified element.

49
Q

div + p {
background-color: yellow;
}

A

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.

50
Q

div ~ p {
background-color: yellow;
}

A

The general sibling selector selects all elements that are siblings of a specified element.

51
Q

p:first-child {
color: blue;
}

A

The :first-child pseudo-class matches a specified element that is the first child of another element.

52
Q

p:nth-child(2) {
background: red;
}

A

Specify a background color for every p element that is the second child of its parent:

53
Q

::first-letter

A

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

54
Q

list-style-type

A 
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
55
Q

li a {
display: block;
width: 60px;
}

A

Vertical Navigation Bar

56
Q

:not(p) {
background: #ff0000;
}

A

Set a background color for all elements that are not a <p> element:

57
Q

a[target] {
background-color: yellow;
}

A

CSS [attribute] Selector

58
Q

a[target=”_blank”] {
background-color: yellow;
}

A

CSS [attribute=”value”] Selector

59
Q

[title~=”flower”] {
border: 5px solid yellow;
}

A

The [attribute~=”value”] selector is used to select elements with an attribute value containing a specified word.

60
Q

[class|=”top”] {
background: yellow;
}

A

The [attribute|=”value”] selector is used to select elements with the specified attribute starting with the specified value.

61
Q

[class^=”top”] {
background: yellow;
}

A

The [attribute^=”value”] selector is used to select elements whose attribute value begins with a specified value.

62
Q

[class$=”test”] {
background: yellow;
}

A

The [attribute$=”value”] selector is used to select elements whose attribute value ends with a specified value.

63
Q

[class*=”te”] {
background: yellow;
}

A

The [attribute*=”value”] selector is used to select elements whose attribute value contains a specified value.

64
Q

input[type=text]:focus {
background-color: lightblue;
}

A

Use the :focus selector to do something with the input field when it gets focus:

65
Q

textarea {
resize: none;
}

A

Use the resize property to prevent textareas from being resized (disable the “grabber” in the bottom right corner):

66
Q

border-radius

A

The border-radius property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.

67
Q

html {
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
}

A

Full Size Background Image

68
Q 
.hero-image {
  background: url(img_man.jpg) no-repeat center;
  background-size: cover;
  height: 500px;
  position: relative;
}
A

Hero Image

69
Q

background-image: linear-gradient(direction, color-stop1, color-stop2, …);

A

CSS Linear Gradients

70
Q

background-image: linear-gradient(direction, color-stop1, color-stop2, …);

A

CSS Linear Gradients

#grad1 {
background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow); /* Standard syntax (must be last) */
}
71
Q

background-image: linear-gradient(angle, color-stop1, color-stop2);

A 
#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}
72
Q 
#grad {
  background-image: radial-gradient(red, yellow, green);
}
A 
#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
73
Q

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

A

horizontal shadow and the vertical shadow / blurr / color

74
Q 
p.test1 {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
  text-overflow: ellipsis;
}
A

It can be clipped:

This is some long text that will not fit in the box

or it can be rendered as an ellipsis (…):

This is some long text that will

75
Q

What do you want to eat?

<br></br>

A

We then assign the for attribute of the element with the value of the id attribute of , like so:

76
Q
A

We can also provide a step attribute which creates arrows inside the input field to increase or decrease by the value of the step attribute.

HTML & CSS (1 decks)

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