Brainscape's Knowledge GenomeTM

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


See full index

CSS > Background and Border Properties > Flashcards

Background and Border Properties Flashcards

1
Q

Shorthand property for setting all the background properties in one declaration

A

background

background: 
color 
image position/size 
repeat 
origin 
clip 
attachment 
initial | inherit;
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

I need to specify the position of a background image

[syntax and types of values]

A

The background-position property sets the starting position of a background image.

background-position: value;

words
percent
units
initial
inherit
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

I need to set whether this background image is fixed, or scrolls with the rest of the page.

[syntax and available values]

A

The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.

background-attachment:

scroll
fixed
local
initial
inherit;
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

background-position

[using words]

A

background-position: [left-right-center/top-center-bottom];

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

background-position

[using %]

A

background-position: x% y%;

x% y%
The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 0% 0%

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

background-position

[using units]

A

background-position: xpos ypos;

xpos ypos
The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions

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

The background scrolls along with the element.

A

background-attachment: scroll;

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

The background is fixed with regard to the viewport

A

background-attachment: fixed;

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

The background scrolls along with the element’s contents

A

background-attachment: local;

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

I need to blend a specified background image with a gradient.

[syntax and available modes] CSS3

A

The background-blend-mode property defines the blending mode of each background layer (color and/or image).

background-blend-mode: 
normal
multiply
screen
overlay
darken
lighten
color-dodge
saturation
color
luminosity;
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

I need to change the background color of this element

[syntax and options]

A

The background-color property sets the background color of an element.

The background of an element is the total size of the element, including padding and border (but not the margin).

background-color: 
color
transparent (default)
initial
inherit;
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

I want to use an image for the background

A 
background-image: 
url('URL')
none
initial
inherit;

To specify more than one image, separate the URLs with a comma

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

I need to make the background repeat

[syntax and options]

A

The background-repeat property sets if/how a background image will be repeated.

By default, a background-image is repeated both vertically and horizontally.

Tip: The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element’s top left corner.

background-repeat:
repeat (default)
repeat-x
repeat-y
no-repeat
initial
inherit;
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Repeat the background image both vertically and horizontally.

A

background-repeat: repeat;

DEFAULT

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

Repeat the background image only horizontally.

A

background-repeat: repeat-x;

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

Repeat the background image only vertically.

A

background-repeat: repeat-y;

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

Keep the background image from repeating.

A

background-repeat: no-repeat;

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

I need to specify the painting area of the background relative to the box model

[syntax and options] CSS3

A

background-clip:

border-box
padding-box
content-box
initial
inherit;
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Clip background to border box

A

background-clip: border-box;

DEFAULT

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

Clip background to padding box

A

background-clip: padding-box;

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

Clip background to content box

A

background-clip: content-box;

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

I need to specify where the background image is positioned relative to the box model

[syntax and options] CSS3

A

The background-origin property specifies where the background image is positioned.

Note: If the background-attachment property is set to “fixed”, this property has no effect.

background-origin: 
padding-box
border-box
content-box
initial
inherit;
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Start the background image from the upper left corner of the padding edge

A

background-origin: padding-box;

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

Start the background image from the upper left corner of the border

A

background-origin: border-box;

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

Start the background image from the upper left corner of the content

A

background-origin: content-box;

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

I need to specify the size of a background image

[syntax and options] CSS3

A

The background-size property specifies the size of the background images.

background-size: 
auto
length
cover
contain
initial
inherit;
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

Keep the background image’s width and height the same as the image

A

background-size: auto;

DEFAULT

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

Shorthand property for setting all of the border properties in one declaration

A

The border shorthand property sets all the border properties in one declaration.

It does not matter if one of the values below are missing, e.g. border:solid #ff0000; is allowed.

border: 
border-width 
border-style 
border-color
initial | inherit;
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

Shorthand property for setting all of the bottom border properties in one declaration

A

The border-bottom shorthand property sets all the bottom border properties in one declaration.

The properties that can be set, are (in order): border-bottom-width, border-bottom-style, and border-bottom-color.

It does not matter if one of the values above are missing, e.g. border-bottom:solid #ff0000; is allowed.

30
Q

I need to set the color of the bottom border

A

The border-bottom-color property sets the color of an element’s bottom border.

border-bottom-color: [color];

Default is color of the element.

Note: Always declare the border-style property before the border-bottom-color property. An element must have borders before you can change the color.

Options:
color
transparent
inherit | initial

31
Q

I need to give the border a rounded bottom-left edge

[syntax and options]

CSS3

A

The border-bottom-left-radius property defines the shape of the border of the bottom-left corner.

border-bottom-left-radius: [values];

length
Defines the shape of the bottom-left corner. Default value is 0

percent
Defines the shape of the bottom-left corner in %

initial | inherit

Note: The two length or percentage values of the border-bottom-left-radius properties define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge. The first value is the horizontal radius, the second the vertical radius. If the second value is omitted it is copied from the first. If either length is zero, the corner is square, not rounded. Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box.

32
Q

I need to give the border a rounded bottom-right edge

[syntax and options]

CSS3

A

The border-bottom-right-radius property defines the shape of the border of the bottom-left corner.

border-bottom-right-radius: [values];

length
Defines the shape of the bottom-left corner. Default value is 0

percent
Defines the shape of the bottom-left corner in %

initial | inherit

Note: The two length or percentage values of the border-bottom-right-radius properties define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge. The first value is the horizontal radius, the second the vertical radius. If the second value is omitted it is copied from the first. If either length is zero, the corner is square, not rounded. Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box.

33
Q

I need to give an element a dotted bottom border

A

border-bottom-style: dotted;

34
Q

I need to give an element a dashed bottom border

A

border-bottom-style: dashed;

35
Q

I need to give an element a solid bottom border

A

border-bottom-style: solid;

36
Q

I need to give an element a double bottom border

A

border-bottom-style: double;

37
Q

I need to give an element a 3D grooved bottom border

A

border-bottom-style: grooved;

Specifies a 3D grooved border. The effect depends on the border-color value

38
Q

I need to give an element a 3D ridged bottom border

A

border-bottom-style: ridge;

Specifies a 3D ridged border. The effect depends on the border-color value

39
Q

I need to give an element a 3D inset bottom border

A

border-bottom-style: inset;

Specifies a 3D inset border. The effect depends on the border-color value

40
Q

I need to give an element a 3D outset bottom border

A

border-bottom-style: outset;

Specifies a 3D outset border. The effect depends on the border-color value

41
Q

I need to specify a border, that I don’t want to be seen, for the sake of border conflict resolution for table elements

A

border-bottom-style: hidden;

42
Q

I need to set the width of the bottom border to the default value

A

border-bottom-width: medium;

43
Q

I need to set the width of the bottom border to be thin

A

border-bottom-width: thin;

44
Q

I need to set the width of the bottom border to be thick

A

border-bottom-width: thick;

45
Q

I want to specify the width of the bottom border with units

A

border-bottom-width: [length];

46
Q

Shorthand for setting all border colors with one declaration

[syntax and values]

A

The border-color property sets the color of an element’s four borders. This property can have from one to four values.

border-color: [top] [right] [bottom] [left];
border-color: [top] [right and left] [bottom];
border-color: [top and bottom] [right and left];
border-color: [all];

color (default color is black)
transparent
initial
inherit

47
Q

Shorthand for creating a border using an image instead of a line, in one declaration

[syntax and values] CSS3

A

The border-image property allows you to specify an image to be used instead of the normal border around an element.

The border-image property is a shorthand property for setting the border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat properties.

border-image: 
source 
slice 
width 
outset 
repeat
initial | inherit;
48
Q

I need to specify how much the border image area extends beyond the border box

A

border-image-outset: length | number;

Note: The border-image-outset property can take from one to four values (top, right, bottom, and left sides). If the fourth value is omitted, it is the same as the second. If the third one is also omitted, it is the same as the first. If the second one is also omitted, it is the same as the first.

length
A length unit specifying how far from the edges the border-image will appear. Default value is 0

number
Represent multiples of the corresponding border-width

49
Q

I need to specify whether the border image needs to be repeated, rounded, or stretched

A

The border-image-repeat property specifies whether the border image should be repeated, rounded or stretched.

border-image-repeat: stretch | repeat | round;

stretch
Default value. The image is stretched to fill the area

repeat
The image is tiled (repeated) to fill the area

round
The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so it fits

space
The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles

50
Q

I need to slice the image specified by border-image-source…what are my options?

CSS3

A

The border-image-slice property specifies how to slice the image specified by border-image-source. The image is always sliced into nine sections: four corners, four edges and the middle.

The “middle” part is treated as fully transparent, unless the fill keyword is set.

border-image-slice: 
number 
%
fill
initial | inherit;
number
The number(s) represent pixels for raster images or coordinates for vector images

%
Percentages are relative to the height or width of the image

fill
Causes the middle part of the image to be displayed

Note: The border-image-slice property can take from one to four values. If the fourth value is omitted, it is the same as the second. If the third one is also omitted, it is the same as the first. If the second one is also omitted, it is the same as the first.

51
Q

I need to slice the image specified by border-image-source using pixels

A

border-image-slice: [pixels];

border-image-slice: [pixels] [pixels];

52
Q

I need to slice the image specified by border-image-source using pixels

A

border-image-slice: %;

border-image-slice: % %;

53
Q

I need to slice the image specified by border-image-source filling in the center

A

border-image-slice: % fill;

border-image-slice: % % fill;

54
Q

I need to specify the path for the image to be used for the border

A

The border-image-source property specifies the path to the image to be used as a border (instead of the normal border around an element).

border-image-source: url(“URL”);
border-image-source: none;

Tip: If the value is “none”, or if the image cannot be displayed, the border styles will be used.

Tip: Also look at the border-image property (a shorthand property for setting all the border-image-* properties).

55
Q

I need to specify the width of a border image

CSS3

A

The border-image-width property specifies the width of the border image.

Note: The border-image-width property can take from one to four values (top, right, bottom, and left sides). If the fourth value is omitted, it is the same as the second. If the third one is also omitted, it is the same as the first. If the second one is also omitted, it is the same as the first.

border-image-width: 
number
%
auto
initial | inherit;

number
Default value 1. Represents multiples of the corresponding border-width

%
Refers to the size of the border image area: the width of the area for horizontal offsets, the height for vertical offsets

auto
If specified, the width is the intrinsic width or height of the corresponding image slice

56
Q

Shorthand property for setting all the left border properties in one declaration

A

The border-left shorthand property sets all the left border properties in one declaration.

The properties that can be set, are (in order): border-left-width, border-left-style, and border-left-color.

It does not matter if one of the values above are missing, e.g. border-left:solid #ff0000; is allowed.

border-left: 
border-width 
border-style 
border-color
initial | inherit;

border-left-width
Specifies the width of the left border. Default value is “medium”

border-left-style
Specifies the style of the left border. Default value is “none”

border-left-color
Specifies the color of the left border. Default value is the color of the element

57
Q

I need to set the color of the left border

A

The border-left-color property sets the color of an element’s left border.

border-left-color: [color];

Also: transparent | initial | inherit;

Note: Always declare the border-style property before the border-left-color property. An element must have borders before you can change the color.

58
Q

I need to set the style of the left border

A

The border-left-style property sets the style of an element’s left border.

border-left-style:
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
initial | inherit;

none
Specifies no border. This is default

hidden
The same as “none”, except in border conflict resolution for table elements

dotted
Specifies a dotted border

dashed
Specifies a dashed border

solid
Specifies a solid border

double
Specifies a double border

groove
Specifies a 3D grooved border. The effect depends on the border-color value

ridge
Specifies a 3D ridged border. The effect depends on the border-color value

inset
Specifies a 3D inset border. The effect depends on the border-color value

outset
Specifies a 3D outset border. The effect depends on the border-color value

59
Q

I need to specify the width of the left border

A

The border-left-width property sets the width of an element’s left border.

border-left-width: medium
thin
thick
length
initial | inherit;

medium
Specifies a medium left border. This is default

thin
Specifies a thin left border

thick
Specifies a thick left border

length
Allows you to define the thickness of the left border

60
Q

Set all border radii in one shorthand property

A

The border-radius property is a shorthand property for setting the four border-*-radius properties.

border-radius: 1-4 length | % / 1-4 length | % | initial | inherit;

Note: The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

length
Defines the shape of the corners. Default value is 0

%
Defines the shape of the corners in %

61
Q

Set all right border properties in one declaration

A

The border-right shorthand property sets all the right border properties in one declaration.

The properties that can be set, are (in order): border-right-width, border-right-style, and border-right-color.

It does not matter if one of the values above are missing, e.g. border-right: solid #ff0000; is allowed.

border-right: 
border-width 
border-style 
border-color
initial | inherit;

border-right-width
Specifies the width of the right border. Default value is “medium”

border-right-style
Specifies the style of the right border. Default value is “none”

border-right-color
Specifies the color of the right border. Default value is the color of the element

62
Q

I need to set the color of the right border

A

The border-right-color property sets the color of an element’s right border.

border-right-color: [color];

Also: transparent | initial | inherit;

Note: Always declare the border-style property before the border-right-color property. An element must have borders before you can change the color.

63
Q

I need to set the style of the right border

A

The border-right-style property sets the style of an element’s right border.

border-right-style:
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
initial | inherit;

none
Specifies no border. This is default

hidden
The same as “none”, except in border conflict resolution for table elements

dotted
Specifies a dotted border

dashed
Specifies a dashed border

solid
Specifies a solid border

double
Specifies a double border

groove
Specifies a 3D grooved border. The effect depends on the border-color value

ridge
Specifies a 3D ridged border. The effect depends on the border-color value

inset
Specifies a 3D inset border. The effect depends on the border-color value

outset
Specifies a 3D outset border. The effect depends on the border-color value

64
Q

I need to specify the width of the right border

A

The border-right-width property sets the width of an element’s right border.

border-right-width: medium
thin
thick
length
initial | inherit;

medium
Specifies a medium right border. This is default

thin
Specifies a thin right border

thick
Specifies a thick right border

length
Allows you to define the thickness of the right border

65
Q

I need to set the style of an element’s four borders

A

The border-style property sets the style of an element’s four borders. This property can have from one to four values.

  • top, right, bottom, left
  • top, right and left, bottom
  • top and bottom, right and left
  • all
border-style:
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
initial | inherit;

none
Specifies no border. This is default

hidden
The same as “none”, except in border conflict resolution for table elements

dotted
Specifies a dotted border

dashed
Specifies a dashed border

solid
Specifies a solid border

double
Specifies a double border

groove
Specifies a 3D grooved border. The effect depends on the border-color value

ridge
Specifies a 3D ridged border. The effect depends on the border-color value

inset
Specifies a 3D inset border. The effect depends on the border-color value

outset
Specifies a 3D outset border. The effect depends on the border-color value

66
Q

Set all top border properties in one declaration

A

The border-top shorthand property sets all the top border properties in one declaration.

The properties that can be set, are (in order): border-top-width, border-top-style, and border-top-color.

It does not matter if one of the values above are missing, e.g. border-top: solid #ff0000; is allowed.

border-top: 
border-width 
border-style 
border-color
initial | inherit;

border-top-width
Specifies the width of the right border. Default value is “medium”

border-top-style
Specifies the style of the right border. Default value is “none”

border-top-color
Specifies the color of the right border. Default value is the color of the element

67
Q

I need to set the color of the top border

A

The border-top-color property sets the color of an element’s top border.

border-top-color: [color];

Also: transparent | initial | inherit;

Note: Always declare the border-style property before the border-top-color property. An element must have borders before you can change the color.

68
Q

I need to set the style of the top border

A

The border-top-style property sets the style of an element’s top border.

border-top-style:
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
initial | inherit;

none
Specifies no border. This is default

hidden
The same as “none”, except in border conflict resolution for table elements

dotted
Specifies a dotted border

dashed
Specifies a dashed border

solid
Specifies a solid border

double
Specifies a double border

groove
Specifies a 3D grooved border. The effect depends on the border-color value

ridge
Specifies a 3D ridged border. The effect depends on the border-color value

inset
Specifies a 3D inset border. The effect depends on the border-color value

outset
Specifies a 3D outset border. The effect depends on the border-color value

69
Q

I need to set the width of the top border

A

The border-top-width property sets the width of an element’s top border.

border-top-width: 
medium
thin
thick
length
initial | inherit;

medium
Specifies a medium top border. This is default

thin
Specifies a thin top border

thick
Specifies a thick top border

length
Allows you to define the thickness of the top border

70
Q

I need to set the width of an element’s four borders

A

The border-width property sets the width of an element’s four borders. This property can have from one to four values.

border-width: 
medium
thin
thick
length
initial | inherit;
71
Q

I need to give an element a shadow

CSS 3

A

The box-shadow property attaches one or more shadows to an element.

Note: The box-shadow property attaches one or more shadows to an element. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional inset keyword. Omitted lengths are 0.

box-shadow: 
none OR
h-shadow v-shadow blur spread color OR
inset
initial | inherit;

CSS (2 decks)

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