Brainscape's Knowledge GenomeTM

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


See full index

Web Dev > Intermediate CSS > Flashcards

Intermediate CSS Flashcards

1
Q

You can define your own selectors in the form of _______ selectors

A

class and id

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

What is the benefit of classes and ids?

A

The benefit of this is that you can have the same HTML element, but present it (style it) differently depending on its class or id

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

A class selector is a name preceded by a _______

A

full stop (“.”)

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

An ID selector is a name preceded by a ________

A

hash character (“#”)

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

What is the difference between an ID and a class?

A

An ID can be used to identify one element, a class can be used to identify more than one

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

p.jam { property: value; }

A

Style only paragraph elements that have the class “jam”.

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

Two ways you can simplify HTML and CSS

A

Grouping and Nesting

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

What is grouping?

A

You can give the same properties to a number of selectors without having to repeat them. Separate selectors with commas in one line

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

You can specify properties to selectors within other selectors using _______

A

Nesting

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

_________ are bolted on to selectors to specify a state or relation to the selector

A

Pseudo classes

selector:pseudo_class { property: value; }

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

a:link {
color: blue;
}

A

Target unvisited links with a pseudo class and color them blue

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

a:visited {
color: purple;
}

A

Target visited links with a pseudo class and color them purple

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

Commonly used for links, the _________ can be used to apply styles when something happens to something

A

dynamic pseudo classes

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

a:active {
color: red;
}

A

dynamic pseudo class used to target a link activated by the user, and then color it red

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

a:hover {
color: blue;
}

A

dynamic pseudo class used to target a link hovered over by the user, and then color it blue

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

input:focus, textarea:focus {
background: #eee;
}

A

dynamic pseudo class used to target an input field or textarea that has focus, and then color the background

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

Target something only if it is the very first descendant of an element

A

The first-child pseudo class

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

p:first-child {
font-weight: bold;
font-size: 40px;
}

A

Style the first paragraph

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

margin-top: 1px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 20px;

To shorthand

A

margin: 1px 5px 10px 20px;

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

What do these values target?

padding: 1em 10em;

A

The first value will be the top and bottom

The second value will be the right and left

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

This combines which properties?

border: 1px red solid;

A

border-width
border-color
border-style

22
Q

This combines which properties?

font: italic bold 12px/2 courier;

A 
font-style
font-weight
font-size
line-height
font-family
23
Q

True or False?

Background-images can be used in most HTML elements - not just for the body

A

True

24
Q

What is Specificity?

A

If you have two (or more) conflicting CSS rules that point to the same element, there are some basic rules that a browser follows to determine which one is most specific and therefore wins out.

25
Q

If the selectors are the same then _________ will always take precedence.

A

The last one

26
Q

When calculating specificity – An ID selector will be given

A

A value of 100

27
Q

When calculating specificity – A class selector will be given

A

A value of 10

28
Q

When calculating specificity – An HTML selector will be given

A

A value of 1

29
Q

When calculating specificity what is the total of?

body #content .alternative p

A

HTML selector + id selector + class selector + HTML selector, 1+100+10+1 = 112

30
Q

The most fundamental types of display are _______ and they can be manipulated with the display property

A

inline, block and none

31
Q

Boxes that follow the flow of a line are using which display type?

A

inline

32
Q

_______ display type makes a box standalone, fitting the entire width of its containing box, with an effective line break before and after it.

A

block

33
Q

_______ will keep a box inline but lend the greater formatting flexibility of block boxes, allowing margin to the right and left of the box

A

inline-block

34
Q

Which display type doesn’t display a box at all?

A

display: none;

35
Q

What is the difference between display: none and visibility: hidden?

A

display: none completely removes the bo, whereas visibility: hidden keeps the box and its flow in place without visually representing its contents

36
Q

You can create tables with CSS. True or False?

A

True. CSS tables can be created using the display property. display: table; display: table-row; display: table-column

37
Q

What does the display: list-item property do?

A

Displays a box in the way that you would usually expect an li HTML element to be displayed. To work properly elements displayed this way should be nested in a ul or ol element

38
Q

_______ makes a box either in-line or block depending on the display of its parent

A

run-in

39
Q

What is first-letter?

A

pseudo element applies to the first letter inside a box

40
Q

Pseudo element that applies to the top-most displayed line in a box?

A

first-line

41
Q

Is p::first-line a pseudo element or class?

A

Element uses two colons instead of one

42
Q

The ________ pseudo elements are used in conjunction with the content property to place content either side of a box without touching the HTML.

A

before and after

43
Q

You can layout page elements _______ to another page element.

A

absolute, relative, static or fixed

44
Q

What property is used to do page layout?

A

position

45
Q

What is the default position value?

A

static - the default value and renders a box in the normal

46
Q

______ is much like static but the box can be offset from its original position with the properties top, right, bottom and left.

A

relative

47
Q

What is the absolute box?

A

The absolute box can be placed anywhere on the page using top, right, bottom and left

48
Q

________ behaves like absolute, but it will absolutely position a box in reference to the browser window as opposed to the web page, so fixed boxes should stay exactly where they are on the screen even when the page is scrolled.

A

fixed

49
Q

What is Floating a box?

A

Floating a box will shift it to the right or left of a line, with surrounding content flowing around it.

50
Q

What is floating typically used for?

A

Floating is normally used to shift around smaller chunks within a page, such as pushing a navigation link to the right of a container, but it can also be used with bigger chunks, such as navigation columns.

51
Q

What are the two values used with float?

A

Left or Right

52
Q

If you do not want the next box to wrap around the floating objects, you can apply the ______ property

A

clear: left or right or both

Web Dev (9 decks)

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