Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

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
What property sets the color of the four borders?
The border-color property
26
What is the ordering of border properties for the border shorthand? And which one is required?
border: (width) (style) (color); | style is required
27
What is property is used to add rounded borders to an element?
The border-radius property
28
What CSS property is used to create space around elements, outside of any defined borders?
CSS margin
29
Setting the CSS margin to "auto" does what?
Setting the margin property to "auto" horizontally centers the element within its container
30
What value would you use for a CSS margin if you wanted the child element to copy the styling of the parent element?
"Inherit"
31
What is margin collapse?
Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.
32
What CSS property is used to create space around an element's content, inside of any defined borders?
CSS padding
33
True of False: Negative values are allowed for CSS Padding.
False, negative values are not allowed.
34
What CSS problem can you solve by adding the "box-sizing: border-box;" property?
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
What does the CSS Box Model consist of?
Margin, border, padding, and the actual content; in that order.
36
Outlines are similar to borders, but how are they different?
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
For W3C compliant CSS, what must you define with the "color" property?
You must also define the "background-color" property.
38
What does "text-align: justify" do?
Each line is stretched so that every line has equal width, and the left and right margins are straight
39
What do the "direction: rtl" and "unicode-bidi: bidi-override" do?
The direction and unicode properties can be used to change the text direction of an element
40
What property sets the vertical alignment of an element?
The vertical-align property sets the vertical alignment of an element
41
What are the optional values of the "text-decoration" property?
none, overline, line-through, underline
42
What property is connected to these values; uppercase, lowercase, capitalize?
The "text-transform" property
43
What does the "text-indent" property do?
The "text-indent" property is used to specify the indentation of the first line of a text
44
What does the "letter-spacing" property do?
The "letter-spacing" property is used to specify the space between the characters in a text
45
What does the "line-height" property do?
The "line-height" property is used to specify the space between lines
46
What does the "word-spacing" property do?
The "word-spacing" property is used to specify the space between the words in a text
47
What does the "white-space" property do?
The "white-space" property specifies how white-space inside an element is handled
48
What is the ordering used for a "text-shadow"?
text-shadow: "horizontal shadow" "vertical shadow" "blur effect" "color"
49
What are the generic font families in CSS?
"Serif", "Sans-serif", "Monospace", "Cursive", "Fantasy"
50
How should you create your font-family in your CSS file?
The "font-family" property should hold several font names as a fallback system to ensure maximum compatibility between browsers/operation systems
51
What are the best web safe fonts for HTML and CSS, according to w3schools?
``` Arial Verdana Helvetica Tahoma Trebuchet MS Times New Roman Gerogia Garamond Courier New Brush Script MT ```
52
What property is connected to these values; normal, italic, oblique?
The "font-style" property
53
What does the "font-weight" property do?
The "font-weight" property specifies the weight of a font; such as normal, bold, or a number
54
What are the different option size types you can use for setting the "font-size" property? (ex: px)
px em % vw
55
What is the ordering of the "font" property?
font: "font-style" "font-variant" "font-weight" "font-size"/"line-height" "font-family";
56
What does the "font-variant" property specify?
The "font-variant" property specifies whether or not a text should be displayed in a small-caps font
57
True or False: You can bring in icons from other sources, like Google Icons, in the "head" of your HTML.
True, you can link it like a style sheet.
58
What element is used for html icons?
"i" elements
59
What property is used to remove underlines from links?
text-decoration
60
What are the 4 states of links?
link, visited, hover, active
61
What are the order rules for links?
a: link and a:visited BEFORE a: hover BEFORE a: active
62
What are the 2 main types of lists?
unordered (ul) | ordered (ol)
63
What does the "list-style-type" property specify for list elements?
The "list-style-type" property specifies the type of list item marker
64
What is the order of the list-style shorthand?
list-style: list-style-type, list-style-position, list-style-image
65
What are the 2 options for the "list-style-position" property?
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
How do you use an image for the "list-style-image" property?
list-style-image: url('image-name.jpg');
67
What property sets whether the table borders should be pushed into a single border or not?
border-collapse
68
How would you create a style that only applies to every even rows in a table?
Use nth-child(even) {...} to create the style
69
If your table is too large horizontally, what would need to be added to add a scroll bar?
overflow-x: auto;
70
What does it mean if an element has a property of "display: block;"?
It means the element always starts on a new line and takes up the full width available.
71
What does it mean if an element has a property of "display: inline;"?
It means the element does not start on a new line and only takes up as much width as necessary.
72
What is "display: none;" used for?
It is commonly used with JavaScript to hide and show elements without deleting and recreating them.
73
What's the difference between "display: none;" and "visibility: hidden;"?
"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
What should you do with the following div element to ensure that it a responsive design? div { width: 500px; margin: auto; }
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
What are the 5 different position property values? | And which one is the default.
``` static (default) relative fixed absolute sticky ```
76
How are static elements positioned?
Static elements are always positioned according to the normal flow of the page
77
How are relative elements positioned?
Relative elements are positioned relative to its normal position
78
How are fixed elements positioned?
Fixed elements are positioned relative to the viewport, which means they always stay in the same place even if the page is scrolled
79
How are absolute elements positioned?
Absolute elements are positioned relative to the nearest positioned ancestor, but if there is no positioned ancestors it will act as fixed
80
How are sticky elements positioned?
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
What does the z-index property do?
The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others)
82
True or False: An element's stack order (z-index) is within the range of 0 and 1.
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.
© 2025 Bold Learning Solutions. Terms and Conditions