Brainscape's Knowledge GenomeTM

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


See full index

Web Development > CSS > Flashcards

CSS Flashcards

1
Q

What does CSS stand for?

A

Cascading Style Sheets

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

What are the two parts of a CSS rule-set?

A

A CSS rule-set consists of a selector and a declaration block

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

What are the five categories of CSS selectors?

A

Simple, Combinator, Pseudo-class, Pseudo-elements, and Attribute selectors

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

What is the CSS Universal selector?

A

*

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

How do you group multiple selectors?

A

With a comma between them?

Ex: h1, h2, p {…}

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

What symbol is used for id selectors?

A

#

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

What symbol is used for class selectors?

A

.

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

True or False: Elements can only have one class for styling.

A

False, HTML elements can refer to more than one class.

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

How can you specify that only specific HTML elements (such as h1) should be affected by a class (such as header)?

A 
You would have the element followed by the class with a period in between and no spaces.
h1.header {...}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What symbols do you use to hold CSS comments?

A

/* CSS comments in here */

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

CSS colors are specified using predefined color name or…

A

RGB, HEX, HSL, RGBA, HSLA values

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

What does the A in HSLA and RGBA mean?

A

The A stands for alpha channel - which specifies the opacity for a color

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

What is the formula for a RGB value?

A

rgb(red, green, blue)

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

What is the formula for a HSL value?

A

hsl(hue, saturation, lightness)

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

What is the formula for a HEX value?

A

rrggbb [r = red, g = green, b = blue]

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

How do you insert an background image?

A

background-image: url(“path”);

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

True or False: The background-image property repeats an image both horizontally and vertically by default.

A

True.

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

What is used to repeat a background horizontally? Vertically?

A

Horizontally –> background-repeat: repeat-x;

Vertically –> background-repeat: repeat-y;

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

What is used to show the background image only once?

A

background-repeat: no-repeat;

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

Using “fixed” or “scroll” what property can specify whether the background image should scroll or not with the rest of the page?

A

background-attachment

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

What is the shorthand for specifying all the background properties? And what is the order of the property values?

A

background: (color) (image) (repeat) (attachment) (position);

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

How many different border-styles are there? And what are they?

A

10.

dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden

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

What are the different values for the border-style property, if not using one for all?

A

top, right, bottom, and left border

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

What property specifies the width of the four borders?

A

The border-width property

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

What property sets the color of the four borders?

A

The border-color property

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

What is the ordering of border properties for the border shorthand? And which one is required?

A

border: (width) (style) (color);

style is required

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

What is property is used to add rounded borders to an element?

A

The border-radius property

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

What CSS property is used to create space around elements, outside of any defined borders?

A

CSS margin

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

Setting the CSS margin to “auto” does what?

A

Setting the margin property to “auto” horizontally centers the element within its container

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

What value would you use for a CSS margin if you wanted the child element to copy the styling of the parent element?

A

“Inherit”

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

What is margin collapse?

A

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

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

What CSS property is used to create space around an element’s content, inside of any defined borders?

A

CSS padding

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

True of False: Negative values are allowed for CSS Padding.

A

False, negative values are not allowed.

34
Q

What CSS problem can you solve by adding the “box-sizing: border-box;” property?

A

The issue of padding being added after the width, giving the element a larger content area than desired. Box-sizing fixes that, keeping the padding within the already created and desired total width of the element.

35
Q

What does the CSS Box Model consist of?

A

Margin, border, padding, and the actual content; in that order.

36
Q

Outlines are similar to borders, but how are they different?

A

The outline is drawn outside the element’s border and may overlap other content. The outline is NOT a part of the element’s dimensions.

37
Q

For W3C compliant CSS, what must you define with the “color” property?

A

You must also define the “background-color” property.

38
Q

What does “text-align: justify” do?

A

Each line is stretched so that every line has equal width, and the left and right margins are straight

39
Q

What do the “direction: rtl” and “unicode-bidi: bidi-override” do?

A

The direction and unicode properties can be used to change the text direction of an element

40
Q

What property sets the vertical alignment of an element?

A

The vertical-align property sets the vertical alignment of an element

41
Q

What are the optional values of the “text-decoration” property?

A

none, overline, line-through, underline

42
Q

What property is connected to these values; uppercase, lowercase, capitalize?

A

The “text-transform” property

43
Q

What does the “text-indent” property do?

A

The “text-indent” property is used to specify the indentation of the first line of a text

44
Q

What does the “letter-spacing” property do?

A

The “letter-spacing” property is used to specify the space between the characters in a text

45
Q

What does the “line-height” property do?

A

The “line-height” property is used to specify the space between lines

46
Q

What does the “word-spacing” property do?

A

The “word-spacing” property is used to specify the space between the words in a text

47
Q

What does the “white-space” property do?

A

The “white-space” property specifies how white-space inside an element is handled

48
Q

What is the ordering used for a “text-shadow”?

A

text-shadow: “horizontal shadow” “vertical shadow” “blur effect” “color”

49
Q

What are the generic font families in CSS?

A

“Serif”, “Sans-serif”, “Monospace”, “Cursive”, “Fantasy”

50
Q

How should you create your font-family in your CSS file?

A

The “font-family” property should hold several font names as a fallback system to ensure maximum compatibility between browsers/operation systems

51
Q

What are the best web safe fonts for HTML and CSS, according to w3schools?

A 
Arial
Verdana
Helvetica
Tahoma
Trebuchet MS
Times New Roman
Gerogia
Garamond
Courier New
Brush Script MT
52
Q

What property is connected to these values; normal, italic, oblique?

A

The “font-style” property

53
Q

What does the “font-weight” property do?

A

The “font-weight” property specifies the weight of a font; such as normal, bold, or a number

54
Q

What are the different option size types you can use for setting the “font-size” property? (ex: px)

A

px
em
%
vw

55
Q

What is the ordering of the “font” property?

A

font: “font-style” “font-variant” “font-weight” “font-size”/”line-height” “font-family”;

56
Q

What does the “font-variant” property specify?

A

The “font-variant” property specifies whether or not a text should be displayed in a small-caps font

57
Q

True or False: You can bring in icons from other sources, like Google Icons, in the “head” of your HTML.

A

True, you can link it like a style sheet.

58
Q

What element is used for html icons?

A

“i” elements

59
Q

What property is used to remove underlines from links?

A

text-decoration

60
Q

What are the 4 states of links?

A

link, visited, hover, active

61
Q

What are the order rules for links?

A

a: link and a:visited BEFORE
a: hover BEFORE
a: active

62
Q

What are the 2 main types of lists?

A

unordered (ul)

ordered (ol)

63
Q

What does the “list-style-type” property specify for list elements?

A

The “list-style-type” property specifies the type of list item marker

64
Q

What is the order of the list-style shorthand?

A

list-style: list-style-type, list-style-position, list-style-image

65
Q

What are the 2 options for the “list-style-position” property?

A

outside and inside. This is for if the bullet point (or any list-item marker) is inside or outside of the border (if you were to use a border)

66
Q

How do you use an image for the “list-style-image” property?

A

list-style-image: url(‘image-name.jpg’);

67
Q

What property sets whether the table borders should be pushed into a single border or not?

A

border-collapse

68
Q

How would you create a style that only applies to every even rows in a table?

A

Use nth-child(even) {…} to create the style

69
Q

If your table is too large horizontally, what would need to be added to add a scroll bar?

A

overflow-x: auto;

70
Q

What does it mean if an element has a property of “display: block;”?

A

It means the element always starts on a new line and takes up the full width available.

71
Q

What does it mean if an element has a property of “display: inline;”?

A

It means the element does not start on a new line and only takes up as much width as necessary.

72
Q

What is “display: none;” used for?

A

It is commonly used with JavaScript to hide and show elements without deleting and recreating them.

73
Q

What’s the difference between “display: none;” and “visibility: hidden;”?

A

“display: none”, acts as if the element is not there at all, while “visibility: hidden” makes the element appear hidden but the layout will stay the same.

74
Q

What should you do with the following div element to ensure that it a responsive design?

div { width: 500px; margin: auto; }

A

div { max-width: 500px; margin: auto; }

Using max-width ensures the div changes size if the window it’s in goes below the designated width.

75
Q

What are the 5 different position property values?

And which one is the default.

A 
static (default)
relative
fixed
absolute
sticky
76
Q

How are static elements positioned?

A

Static elements are always positioned according to the normal flow of the page

77
Q

How are relative elements positioned?

A

Relative elements are positioned relative to its normal position

78
Q

How are fixed elements positioned?

A

Fixed elements are positioned relative to the viewport, which means they always stay in the same place even if the page is scrolled

79
Q

How are absolute elements positioned?

A

Absolute elements are positioned relative to the nearest positioned ancestor, but if there is no positioned ancestors it will act as fixed

80
Q

How are sticky elements positioned?

A

Sticky elements are positioned based on the user’s scroll position. Sticky elements toggle between relative and fixed, it is positioned relative until a given offset position is met in the viewport then it “sticks” in place

81
Q

What does the z-index property do?

A

The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others)

82
Q

True or False: An element’s stack order (z-index) is within the range of 0 and 1.

A

False, an element can have a positive or negative stack order, using any number.

Web Development (4 decks)

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