Brainscape's Knowledge GenomeTM

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


See full index

FULL STACK DEV > 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

How is CSS applied to HTML?

A

An HTML Link Tag

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

What are the two ways CSS can be applied to HTML?

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

What is the ruleset application of CSS?

A

A ruleset is defined either within the HTML document itself or in a sperate file with the .css extension.

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

What is the inline application of CSS?

A

CSS that is applied using the ‘style’ attribute in the HTML directly.

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

What are a few instances where inline style is commonly used?

A
  1. The style being applied to the markup is unique and won’t be repeated.
  2. The HTML markup is dynamically generated, and the CSS is static.
  3. Other situations where styling isn’t possible from a sperate file
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What are the Ruleset Terms? (SDDPV)

A
  1. Selector
  2. Declaration Block { }
  3. Declaration
  4. Property
  5. Value
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What are the Inline Style Terms?

A
  1. Opening Tag
  2. Attribute
  3. Declaration
  4. Property
  5. Value
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

When using the inline styling, how many styles can you add?

A

As many as you want, just keep adding the style attribute. Make sure they end with a semicolon every time.

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

Does the style attribute use double quotes or single quotes?

A

Either, just like any other attribute. (I totally knew this before I started learning CSS)… (totally)

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

How do you create an internal stylesheet?

A

Use the ‘< style >’element nested within the ‘< head >’ element. Once created you can code in CSS.

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

Where does the link to your CSS code need to be in the HTML?

A

Nested cozy inside of the ‘< head >’ element.

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

What two attributes does the ‘< link >’ need to have in order to work properly?

A

The ‘href’ attribute designating the location, and the ‘rel’ attribute describing the relationship, which in CSS’s case it’s ‘stylesheet’.

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

How do you decide which elements get a style?

A

A selector

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

How do you decide what style is applied to an element?

A

A declaration

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

What selector takes straight from the element in HTML?

A

The type selector. Also referred to as the tag name or element selector.

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

How do you select to style everything?

A

The universal selector which is denoted with a ‘*’

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

How do you select a class attribute in CSS?

A

Infront of the classes value, add a ‘.’

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

How can you create a correlation between multiple classes in HTML and CSS?

A

In the HTML class attribute add the values of the corresponding CSS styling. So ‘class=”bold green” in HTML and ‘.bold’ + ‘.green’ in CSS

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

What do you give an HTML element if it needs to be styled uniquely?

A

Give it the ‘id’ attribute. The id attribute’s value can only be used once per page.

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

What do you prepend the id with when styling in CSS?

A

Use the ‘#’ sign

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

What type of selector selects based off attributes?

A

An attribute selector

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

What surrounds an attribute when using the attribute selection method in CSS?

A

Brackets: [ ]

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

In CSS what is the syntax for selecting not only an attribute, but it’s value as well?

A

type[attribute*=’value’]

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

What are a few instances where pseudo-class selectors are at play?

A
  1. When text changes color to show that it is in focus
  2. When a link is clicked and upon return the originally blue text is purple
  3. When a button is greyed out before form completion but then normally colored to show that it’s active
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

How do you apply pseudo-classes to text?

A

Type the normal selector then choose a pseudo-class

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

What is the order from least specific selector to most specific?

A
  1. Type
  2. Class
  3. ID
    A more specific selector will always override a less specific. It is best practice to use the lowest degree of specificity possible.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

What is chaining and how would it look if you wanted all you ‘< h2 >’ elements with the ‘ class=”headerz” ‘ to be styled the same?

A

Chaining is using multiple selectors in one rule selection. That would look like: ‘ h2.headerz ‘

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

What is descendant selection and how do you use it?

A

Descendant selection selects all the children of an element using its class value. For example, if you wanted to style all the ‘< li >’ in an unordered list than the ‘< ul class=”listz” >’ would be selected:
.listz li (class then descendant elements)

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

How can you separate selectors and apply the same styling to multiple types?

A

Just use a coma

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

How do you change the type face on your website?

A

Use the property ‘font-family’

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

What is best practice when a font is more than one word?

A

Enclose it in quotes

33
Q

How do you change the font size of text?

A

Use ‘font-size’

34
Q

What controls how thin or bold the text appears?

A

‘font-weight: normal, bold, lighter, bolder’

35
Q

How do you control where text is aligned?

A

‘text-align: left, center, right, justify’

36
Q

What are the two color options?

A
  1. ‘color’
  2. ‘background-color’
37
Q

What is the opacity and what is it’s value?

A

‘opacity’ and it’s from 0 to 100 in decimal.
0 is invisible, 100 is full.

38
Q

What syntax adds a background image?

A

‘background-image: url(‘www.url.com’)

39
Q

What is used rarely but overrides all other styling?

A

Adding ‘!important’ in the value of a property

40
Q

What is the box model?

A

The area that elements live in when put on a website.

41
Q

What is height and width in the box model?

A

The height and width of the content area.

42
Q

What is padding in the box model?

A

The amount of space between the content area and the border.

43
Q

What is the border in the box model?

A

The thickness and style of the border surrounding the content area and padding.

44
Q

What is the margin in the box model?

A

The amount of space between the border and the outside edge of the element.

45
Q

When the height and width are set in pixels all devices will have the same size box, therefore…

A

A full laptop screen will overflow on a mobile device.

46
Q

How can you modify an elements border shape?

A

‘border-radius’

47
Q

What syntax centers an element within it’s box?

A

‘margin: 0 auto;’

48
Q

Do vertical or horizontal margins collapse?

A

Vertical

49
Q

What property controls what happens to content that spills outside the box?

A

The ‘overflow’ property which can be set to hidden, scroll, or visible.

50
Q

What is used in the absence of an external stylesheet?

A

A ‘user agent stylesheet’

51
Q

How do you reset the default margins and padding values provided by the user agent stylesheet?

A

Use the universal selector (*) and set margin and padding to ‘0’

52
Q

What is the default value of the box model in a browser?

A

‘content-box’

53
Q

How can you set an entire new box model and avoid all dimensional issues caused by the default value?

A

Use ‘box-sizing: border-box;’

54
Q

What does every element’s box include?

A
  1. A Content Container
  2. Padding
  3. A Border
  4. A Margin
55
Q

How can you change the default positioning of an element?

A

Use the ‘position’ property.

56
Q

What is the default value of ‘property’?

A

‘static’

57
Q

What are the other values for ‘property’ besides ‘static’?

A
  1. Relative
  2. Absolute
  3. Fixed
  4. Sticky
58
Q

What are the four offset properties to accompany the position declaration?

A
  1. Top
  2. Bottom
  3. Left
  4. Right
59
Q

What does the value ‘relative’ do to an elements position?

A

It moves it relative to the default position or static position.

60
Q

What does the value ‘absolute’ do to an elements position?

A

Allows the element to be ignored by all other elements on the webpage and is moved relative to its nearest parent element.

61
Q

What does the value ‘fixed’ do to an elements position?

A

Sets the element on the window despite the user scrolling. The element will be visible throughout the entire page as the user scrolls.

62
Q

What does the value ‘sticky’ do to an elements position?

A

Keeps that element on the page and stuck to a specified position

63
Q

What does the ‘z-index’ property do?

A

Controls how far back or how far forward an element should appear on the web page when the element overlap based on their integer value.

64
Q

What are the three values for the ‘display’ property?

A
  1. Inline
  2. Block
  3. Inline-block
65
Q

What does the value ‘inline’ cause?

A

It makes elements appear inline with other elements. Examples are < em > and < strong > which only change the text they are assigned to without breaking the flow of the paragraph.

66
Q

What does the value ‘block’ cause?

A

It takes up the entire horizontal space of the browser and only the vertical amount needed to accommodate its content. An example is the < p > element.

67
Q

What does the value ‘inline-block’ cause?

A

It causes for example a < p > element to have extra vertical space and also be inline with other < p > elements nearby that are also set to ‘inline-block’. The height and width are set manually.

68
Q

What are the two values of the ‘float’ property and what do they accomplish?

A

The two values are ‘left’ and ‘right’ and they move the element as far in the specified direction as possible.

69
Q

What does the ‘clear’ property do?

A

It determines how elements behave when they “bump” into each other.

70
Q

What are the four values of the ‘clear’ property?

A
  1. Left
  2. Right
  3. Both
  4. None
71
Q

What are the different types of colors in CSS?

A
  1. Named / Keyword Colors
  2. RGB
  3. HSL (Hue Saturation Lightness)
72
Q

How do you adjust the hue, saturation, lightness, and alpha (opacity) in CSS?

A

Use ‘hsla’

73
Q

How do you add a web font to your webpage?

A

Use the ‘< link >’ element nested in the ‘< head >’element of your HTML

74
Q

What is a super useful unit of measurement developed specifically for the grid?

A

‘fr’ or fraction. So, 2fr 1fr 1fr is equal to 50% 25% 25%

75
Q

What is a shorthand way to make an item take up space between one grid row line to another?

A

grid-row: 4 / 6;

This will cause the item to span 2 blocks, the 4th and 5th ones. The same concept applies to columns with ‘grid-column’.

76
Q

What is the property that sizes the rows and columns of a grid item?

A

‘grid-area: ;’

It uses slashes and the first two are the starts beginning with rows and the second two are the ends following the same pattern.

77
Q

What is a shorthand for defining both ‘grid-template-columns’ and ‘grid-template-rows’ in one line?

A

grid-template

78
Q

What is a shorthand for defining both ‘row-gap’ and ‘column-gap’ in one line?

A

gap

79
Q

What is a shorthand for ‘grid-row-start’, ‘grid-column-start’, ‘grid-row-end’, and ‘grid-column-end’, all in one line?

A

grid-area

FULL STACK DEV (5 decks)

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