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;
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
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;
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
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%
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
7
Q
The background scrolls along with the element.
A
background-attachment: scroll;
8
Q
The background is fixed with regard to the viewport
A
background-attachment: fixed;
9
Q
The background scrolls along with the element’s contents
A
background-attachment: local;
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;
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;
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
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;
14
Q
Repeat the background image both vertically and horizontally.
A
background-repeat: repeat;
DEFAULT
15
Q
Repeat the background image only horizontally.
A
background-repeat: repeat-x;
16
Q
Repeat the background image only vertically.
A
background-repeat: repeat-y;
17
Q
Keep the background image from repeating.
A
background-repeat: no-repeat;
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;
19
Q
Clip background to border box
A
background-clip: border-box;
DEFAULT
20
Q
Clip background to padding box
A
background-clip: padding-box;
21
Q
Clip background to content box
A
background-clip: content-box;
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;
23
Q
Start the background image from the upper left corner of the padding edge
A
background-origin: padding-box;
24
Q
Start the background image from the upper left corner of the border
A
background-origin: border-box;
25
Start the background image from the upper left corner of the content
background-origin: content-box;
26
I need to specify the size of a background image
[syntax and options] CSS3
The background-size property specifies the size of the background images.
```
background-size:
auto
length
cover
contain
initial
inherit;
```
27
Keep the background image's width and height the same as the image
background-size: auto;
DEFAULT
28
Shorthand property for setting all of the border properties in one declaration
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;
```
29
Shorthand property for setting all of the bottom border properties in one declaration
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
I need to set the color of the bottom border
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
I need to give the border a rounded bottom-left edge
[syntax and options]
CSS3
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
I need to give the border a rounded bottom-right edge
[syntax and options]
CSS3
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
I need to give an element a dotted bottom border
border-bottom-style: dotted;
34
I need to give an element a dashed bottom border
border-bottom-style: dashed;
35
I need to give an element a solid bottom border
border-bottom-style: solid;
36
I need to give an element a double bottom border
border-bottom-style: double;
37
I need to give an element a 3D grooved bottom border
border-bottom-style: grooved;
Specifies a 3D grooved border. The effect depends on the border-color value
38
I need to give an element a 3D ridged bottom border
border-bottom-style: ridge;
Specifies a 3D ridged border. The effect depends on the border-color value
39
I need to give an element a 3D inset bottom border
border-bottom-style: inset;
Specifies a 3D inset border. The effect depends on the border-color value
40
I need to give an element a 3D outset bottom border
border-bottom-style: outset;
Specifies a 3D outset border. The effect depends on the border-color value
41
I need to specify a border, that I don't want to be seen, for the sake of border conflict resolution for table elements
border-bottom-style: hidden;
42
I need to set the width of the bottom border to the default value
border-bottom-width: medium;
43
I need to set the width of the bottom border to be thin
border-bottom-width: thin;
44
I need to set the width of the bottom border to be thick
border-bottom-width: thick;
45
I want to specify the width of the bottom border with units
border-bottom-width: [length];
46
Shorthand for setting all border colors with one declaration
[syntax and values]
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
Shorthand for creating a border using an image instead of a line, in one declaration
[syntax and values] CSS3
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
I need to specify how much the border image area extends beyond the border box
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
I need to specify whether the border image needs to be repeated, rounded, or stretched
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
I need to slice the image specified by border-image-source...what are my options?
CSS3
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
I need to slice the image specified by border-image-source using pixels
border-image-slice: [pixels];
| border-image-slice: [pixels] [pixels];
52
I need to slice the image specified by border-image-source using pixels
border-image-slice: %;
| border-image-slice: % %;
53
I need to slice the image specified by border-image-source filling in the center
border-image-slice: % fill;
| border-image-slice: % % fill;
54
I need to specify the path for the image to be used for the border
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
I need to specify the width of a border image
CSS3
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
Shorthand property for setting all the left border properties in one declaration
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
I need to set the color of the left border
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
I need to set the style of the left border
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
I need to specify the width of the left border
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
Set all border radii in one shorthand property
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
Set all right border properties in one declaration
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
I need to set the color of the right border
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
I need to set the style of the right border
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
I need to specify the width of the right border
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
I need to set the style of an element's four borders
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
Set all top border properties in one declaration
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
I need to set the color of the top border
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
I need to set the style of the top border
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
I need to set the width of the top border
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
I need to set the width of an element's four borders
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
I need to give an element a shadow
CSS 3
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;
```
