Brainscape's Knowledge GenomeTM

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


See full index

front-end: css > Basics > Flashcards

Basics Flashcards

1
Q

Selector

A

The beginning of the ruleset used to target the element that will be styled.

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

Declaration Block

A

The code in-between (and including) the curly braces ({ }) that contains the CSS declaration(s).

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

Declaration

A

The group name for a property and value pair that applies a style to the selected element.

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

Property

A

The first part of the declaration that signifies what visual characteristic of the element is to be modified.

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

Value

A

The second part of the declaration that signifies the value of the property.

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

Opening Tag

A

The start of an HTML element. This is the element that will be styled.

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

CSS can select HTML elements by ____, ____, ____, and _____.

A

type, class, ID, and attribute

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

How can you select all elements?

A

Using a universal selector *

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

An element can have different states using what type of selector?

A 
pseudo-class selector
e.g) :hover
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

T or F: Multiple CSS classes can be applied to one HTML element

A

TRUE

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

______ can be reusable, while ____ can only be used once.

A
  1. Classes

2. IDs

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

Multiple selectors can be chained together to select an _______.

A

element. Multiple selectors can be chained together to select an element. This raises the specificity but can be necessary.

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

Nested elements can be selected by separating selectors with a _____.

A

space

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

Multiple unrelated selectors can receive the same styles by separating the selector names with _____.

A

commas.

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

Which one is more specific: Classes or IDs?

A

IDs. IDs will override any styles from a class

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

Which one is more specific: Classes or Type?

A

Classes. Classes will override any styles from a type selector

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

What property defines the typeface of an element?

A

font-family

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

What property controls the size of text displayed?

A

font-size

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

What property places text in the left, right, or center of its parent container?

A

text-align

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

What are the two different attributes that control color?

A

color and background-color

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

What property can make an element transparent?

A

Opacity

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

What property can set the background of an element to an image?

A

background-image

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

What is the flag that will override any style, however it should almost never be used, as it is extremely difficult to override?

A

!important

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

What is the content area?

A

The width and height of the content

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

What is the box model?

A

It comprises a set of properties used to create space around and between HTML elements.

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

Horizontal margins add, so the total space between the borders of adjacent elements is equal to the sum of the right margin of one element and the left margin of the adjacent element.

A

https://www.youtube.com/watch?v=qKiz9gdJdr8

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

Vertical margins collapse, so the space between vertically adjacent elements is equal to the larger margin.

A

https://www.youtube.com/watch?v=qKiz9gdJdr8

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

margin: 0 auto

A

horizontally centers an element inside of its parent content area, if it has a width.

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

The overflow property can be set to…

A

display, hide, or scroll, and dictates how HTML will render content that overflows its parent’s content area.

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

The visibility property can

A

hide or show elements.

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

In the default box model, what affects box dimensions?

A

Border thickness and padding

32
Q

What property controls the box model used by the browser?

A

box-sizing

33
Q

What is the default value of the box-sizing property?

A

content-box

34
Q

What is the value for the new box model?

A

border-box

35
Q

What is the difference between the default box model and the border-box model?

A

The default box model, box dimensions are affected by border thickness and padding.

The border-box model is not affected by border thickness or padding

36
Q

What is the flow of elements in HTML?

A

A browser will render the elements of an HTML document that has no CSS from left to right, top to bottom, in the same order as they exist in the document.

37
Q

What are the five properties for adjusting the position of HTML elements in the browser?

A

position, display, z-index, float, and clear

38
Q

What is the default position for block-level elements?

A

Block-level elements create a block the full width of their parent elements.

39
Q

What property changes the default position of a block-level element?

A

The position property

40
Q

What are the five values of the position property?

A

static, relative, absolute, fixed, and sticky

41
Q

If you favor the default position of an HTML element, should you set the position property or not?

A

NO

42
Q

What are the offset properties of position: relative;

A

top, bottom, left (moves the element away from the left side (to the right), right ( moves the element away from the right side (to the left)

43
Q

What does the position: relative; property do?

A

It moves the element from its default static position.

Offsetting the relative element will not affect the positioning of other elements.

44
Q

What does the position: absolute; property do?

A

All the other elements on the page will ignore the element and act like it is not present on the page.

The element will be positioned relative to its closest positioned parent element, while offset properties can be used to determine the final position from there.

45
Q

What does the position: fixed; property do?

A

It is removed from the flow of the HTML document

46
Q

Which position properties stay in the normal flow of the document:

a. fixed
b. relative
c. static
d. absolute

A

b. relative
c. static

Since static and relative positioned elements stay in the normal flow of the document, when a user scrolls the page (or parent element) these elements will scroll too.

47
Q

Which position properties remove elements from the document flow?

a. fixed
b. relative
c. static
d. absolute

A

a. fixed
d. absolute

Fixed and absolute positioned elements are removed from the document flow, when a user scrolls, these elements will stay at their specified offset position

48
Q

The default ‘display’ for some elements, such as <em>, <strong>, and <a>, is called what?</a></strong></em>

A

inline

49
Q

What are inline elements?

A

Inline elements have a box that wraps tightly around their content, only taking up the amount of space necessary to display their content and not requiring a new line after each element

50
Q

Can inline elements be altered in size with the height or width CSS properties?

A

No. It is displayed on the same line as the surrounding text, and it will only be as wide as necessary to contain its content.

51
Q

What is the display property?

A

The display property allows you to control how an element flows vertically and horizontally in a document.

52
Q

What are block elements?

A

block elements take up the width of their container and can have manually adjusted heights.

53
Q

What are float properties?

A

The float property can move elements as far left or as far right as possible on a web page.

54
Q

What are inline-block elements?

A

inline-block elements can have set width and height, but they can also appear next to each other and do not take up their entire container width.

55
Q

What is the clear property?

A

You can clear an element’s left or right side (or both) using the clear property.

56
Q

What are CSS Hexadecimal Colors?

A

Hexadecimal is a number system with has sixteen digits, 0 to 9 followed by “A” to “F”.

Hex values always begin with # and specify values of red, blue, and green using hexadecimal numbers such as #23F41A.

Six-digit hex values with duplicate values for each RGB value can be shorted to three digits.

57
Q

What are CSS Color Alpha Values?

A

Alpha values determine the transparency of colors in CSS. Alpha values can be set for both RGB and HSL colors by using rgba() and hsla() and providing a fourth value representing alpha. Alpha values can range between 0.0 (totally transparent) and 1.0 (totally opaque).

The CSS transparent value can also be used to create a fully transparent element.

58
Q

What are CSS rgb() Colors?

A

CSS colors can be declared with RGB colors using rgb() syntax.

rgb() should be supplied with three values representing red, green, and blue. These values range can from 0 to 255.

59
Q

What are CSS HSL Colors?

A

CSS colors can be declared with the HSL color system using hsl() syntax. This syntax contains three values: hue (the color value itself), saturation (intensity), and lightness.

Hue values range from 0 to 360 while saturation and lightness values are represented as percentages.

60
Q

What does HSL stand for?

A

hue-saturation-lightness

61
Q

What is Saturation?

A

Saturation refers to the intensity or purity of the color. The saturation increases towards 100% as the color becomes richer. The saturation decreases towards 0% as the color becomes grayer.

62
Q

What is Lightness?

A

Lightness refers to how light or dark the color is. Halfway, or 50%, is normal lightness. Imagine a sliding dimmer on a light switch that starts halfway. Sliding the dimmer up towards 100% makes the color lighter, closer to white. Sliding the dimmer down towards 0% makes the color darker, closer to black.

63
Q

You can add opacity to color in RGB and HSL by adding a fourth value, ____, which is represented as a percentage.

A

a (alpha)

64
Q

A font-weight of 400 is equal to _____.

A

normal

65
Q

A font-weight of 700 is equal to _____.

A

bold

66
Q

What is Typography?

A

The art of arranging text on a page

67
Q

Text can appear bold or thin with the ____-_____ property.

A

font-weight

68
Q

Text can appear in italics with the ____-_____ property.

A

font-style

69
Q

The vertical spacing between lines of text can be modified with the ____-_____ property.

A

line-height

70
Q

What are fallback fonts?

A

Used when a certain font is not installed on a user’s computer

71
Q

The ____-____ property changes how far apart individual words are.

A

word-spacing

72
Q

The ____-_____ property changes how far apart individual letters are.

A

letter-spacing

73
Q

The ____-_____ property changes the horizontal alignment of text

A

text-align

74
Q

Local fonts can be added to a document with the _______ property and the path to the font’s source.

A

@font-face

75
Q

Google Fonts provides free fonts that can be used in an HTML file with the _____ tag or the @font-face property.

A

tag

front-end: css (20 decks)

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