Brainscape's Knowledge GenomeTM

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


See full index

Front end software development > CSS > Flashcards

CSS Flashcards

1
Q

Why CSS?

A

Allow removing presentation information from the content (document).

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

Why creating an external css file?

A

Organization and reutilization.

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

Who maintains css?

A

W3C. World wide web consortium.

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

When css1 was released?

A

1996

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

When to check which browsers support which version of css?

A

Quirksmode.org/css/contents.html

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

What are selectors?

A

Define where the style need to be applied.

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

What are the variations of the selectors?

A

By element, e.g: body

ID selector, e.g #menu

Class selector, e.g .bookTitle

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

What are the variations of the selectors?

A

By element, e.g: body

ID selector, e.g #menu

Class selector, e.g .bookTitle

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

How to make multiple selectors in one line?

A

H1,h2

Comma

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

What’s a descendant selector?

A

Define css for a specific element or any other thing when anywhere inside another element or thing:

Div p

Apply css to any paragraph at any level inside a div

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

What’s a child selector?

A

Apply the css to a element or thing inside directly beneath the other element or thing

Div > p

Apply css to any p that is direct child of a div

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

What’s an attribute selector?

A

Apply css to a element or thing that has a specific attribute and value

Img[alt=spacer]

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

What are css property variation for keyword?

A

Thin, thick and larger.

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

What’s a pseudo class selector?

A

Is a selector that is given by the browser and extends common css selectors. e.g: li: last-child or element state (such as hover).

Apply css to a if it was already visited

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

What are css property values for physical measurements?

A

Inches (in), points (pt), picas (pc)

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

How to specify css property values for screen measurements?

A

Px, % and em

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

How to specify colors?

A

rgbhexa and rgb(r,g,b)

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

What’s a functional notation?

A

Means it looks like a function: rgb()

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

Where the css can come from?

A

Can come from:

  • The author of the website itself (inline, embedded or css files);
  • User stylesheet (the user, or website consume can define styles for every website it visits)
  • The browser also can have a its own styles where there are no other rules in place.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What’s CSS precedence?

A

When the same element’s property is applied more than once and one has more weight than other. The cascade part of CSS means precedence.

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

What’s the css precedence for each css source?

A

default > user > website author

Website author has the highest weight.

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

How to override css precedence?

A

!important

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

What happens if the same element property is defined more than once in the same source?

A

If the same css rule is applied to the same element the last defined wins. The browser tool shows a strikethrough in the property.

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

how to import css from another file?

A

@import url(myOtherCSSFile.css)

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

what does dom stand for?

A

Document object model.

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

whats a css reset?

A

Removes any css defined by the browser or any other source.

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

What is specificity?

A

Decides who wins in the style definition.

The more specific the more badass. Inline wins everything.

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

What’s ABC?

A 
A= Count of ID selectors
B = Count of class and attribute selector
C = Count of type selectors

A = Strongest

  • applies to everything, super low specificity.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

What’s inheritance in css?

A

Means some styles might be applied to child elements, like font. Not all properties are “inheretable”.

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

What’s a box model?

A

Every element generates boxes.

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

What are the main box properties

A

border, padding and margin. Padding push the content inwards and margin outwards.

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

The padding and margin border can be only defined equally?

A

No. There are properties that can be defined for each side, such as as padding-left.

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

What’s the shortcut syntax to define all four sides of the boxes?

A

margin: 0 3px 0 3px. clockwise: top, right, bottom and left.

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

What happens when bot and bottom margins overlaps/touch each other?

A

They do NOT stack up. Margin sets the space between elements.

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

What’s display and visibility properties?

A

It means the element will be inline or occupy a new line. Visibility means if it is going to be shown.

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

How to define font in CSS?

A

font-family

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

What happens if the font is not available in the user’s browser? How to overcome font outage?

A

CSS will fallback to a default available font. It can be overcome by defining up to three fonts separated by comma.

38
Q

How fonts are propagated to the element and its direct and indirect child?

A

Fonts are automatically propagated to the element and its child elements unless overwritten.

39
Q

How to to font sizing?

A

Via defining an absolute value in px (precise control) or relative in “em” (good for accessibility).

40
Q

How does the browser deal with tabs and crlf?

A

They don’t care.. If you want to keep the style, you need to define a “pre” element so that all the text within will have stuff kept.

41
Q

What are special text manipulation?

A

Defining indent, space between words, space between letters, alignments, justify text and etc.

42
Q

What are layout properties?

A

Properties that refer to where the elements will be positioned.

43
Q

What’s the default position?

A

Static (will stack elements one after the other) - block level elements. Anything different that static means the element is a “positioned element”.

44
Q

What’s an absolute position?

A

Will stay in the defined position no matter what. Fixed is similar, but will keep itself in a relative position in the browser area (e.g, always 10px from the top).

45
Q

What is the relative position?

A

Allows to define position properties and it will be applied in a relative position to where the element would be positioned in the first place.

46
Q

What’s a float position?

A

You can define where the element is going to be presented: left or right… useful to have elements one after another other than below. Align is deprecated.

47
Q

What’s three-column layout?

A

Layout that shows the webpage as three big vertical columns where the content is in the middle. There are several places where this is discussed.

48
Q

What are the four positioning types?

A

Static, Absolute, Fixed and Float.

49
Q

What is the overall css precedence and it’s order?

A

Inline css > a more specific selector takes the precedence > rules that applies later in the code overrides if both have the same specifity

Note: !important always win

50
Q

What happens when only one float item is defined in a container?

A

It will properly float and all elements will respect it.

Note: Remember the behavior of float left and right inside a div.

51
Q

What to do when your float element is bigger than its container?

A

You have to clear: left, right or both. This clear can be applied as a sibling (next) div or with the so called Clearfix.

52
Q

What are the four numbers of specificity, what do they mean?

A 
0,0,0,0
from left (more important) to right: !important, inline, #ID, .class, element

They will be turned into the number of occurrences of each selector when the condition is met. The higher the number, the more “weight” it has.

53
Q

What is the recommendation about IDs when writing styles? Is this also applied to the !important flag? What to use then?

A

Use as less as possible, the same applies to the !important flag. Using classes instead reduces the complexity of the CSS.

54
Q

What is the Clearfix? How to apply it?

A

Is a fix created by two guys that fixes the float issues. Apply by defining the class group to the desired elements.

/* clearfix */

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  zoom: 1;
}
55
Q

What properties do the box model consists of (from inner to outside)?

A

content area (e.g the text), padding area (surrounding text), border area (surrounding the padding area) and the margin area (surrounding the border).

56
Q

What is the overflow property? What is the default value? What happens when the value is set to auto?

A

Defines what happens to an element, when it doesn’t fit the parent’s area. The default value is Visible (meaning the element will appear outside the boundaries) and auto means that scroll bars will appear if necessary.

57
Q

What is a positioned element?

A

Any element which its position is different than the default static.

58
Q

What attributes I can set to positioned elements?

A

Top, right, bottom and left for customized placements.

59
Q

What is Z-Index? When can be used?

A

Defines which element will be shown in case of overlaps. Works for positioned elements only.

60
Q

What to do when I want to define the height to 120px in total? Do I need to sum stuff?

A

You need to sum the margin(twice), border (twice), padding (twice) and apply the rest as the height.

61
Q

How to hide an existing horizontal scrollbar?

A

overflow-x: hidden;

62
Q

Should we follow the DRY principle when writing CSS as well? What are the 4 tips to achieve it?

A

Yes.
1 - Define fonts in higher-level containers;
2 - If you need to define a specific style multiple times, you can CSS select them all using commas and then define the style only once.
3 - Using selector abstraction.
4 - Using shorthands like margin 0 0 0 0 (no commas) instead of top, right and etc.

63
Q

What is the selector abstraction?

A

It is when you generalize a specific class to use it multiple times and specialize another one for the final touches. e.g button class=”button orange-background”. button by default is gray and its background color is going to be overridden by the next class. The css order in the class=”asd asd” matters.

64
Q

What is the display default behavior of a block and inline elements?

A

The block element will fulfill the width, will add a break line before and after it and the full box model can be manipulated.
The inline element is exactly the opposite: only occupies the needed space and no like breaks.

65
Q

What is an inline-block display type?

A

When your block element behaves as an inline element but you can still manipulate the box model.

66
Q

How to centralize a block-level element?

A

define a width to it and then define the margin as 0 auto

67
Q

What is the so called collapsing margins? Can it vary?

A

It is when the margin won’t sum up with other margins. Yes, this behavior might not happen when one or more block-level elements has padding or border, relative or absolute positioning or a float left or right.

68
Q

What happens when two block level elements one above the other and one defines a margin of 40px and the below one has a margin of 20px? Will they sum up?

A

They won’t sum up. The largest margin will be applied.

69
Q

Should we apply margins to all block elements when the content may vary? Why?

A

Because some of the content might be removed and the margin, if defined in some of the elements, might break the layout.

70
Q

Even though we create specific classes for the elements we want, is it a good idea to have defined common css to other elements?

A

Yes… for maintenance purpose.

71
Q

how to select a paragraph with the class my-class?

A

p.my-class {

}

72
Q

Where images that are part of the layout should be included?

A

In the background using css. e.g:

background: url(myimage.jpg)
height: 250px
weight: 250px

73
Q

Where images that are part of the content be included?

A

They should be included as html elements. e.g: img src=

74
Q

What is a easy way to make the images fit the block-level element? How to improve it further and make the image to not crop at all? How to make it to work with landscape images?

A

overflow: hidden. An improvement is defining the height of the image and let the weight adapt itself. Fixing the width and let the height vary.

75
Q

What is a trick to change a sprite (image) when the mouse hover without having the delay caused by the new http request? Are there online tools to deal with sprites?

A

Combine both images and move the image to show the other instead. e.g:
.logo: hover, .logo:focus {
background-position: 0 -100px;
}
yes.. there are online tools such as spritecow.com

76
Q

Why base64 encoding images on a page? What situations to apply? What are the downsides?

A

To improve load times. Use it for small icons and images. The downside is that they are not going to be indexed on google search engine.

77
Q

Can the pseudo classes be combined?

A

Yes… e.g: p:first-of-type:first-line {}

78
Q

What does line-spacing and letter-spacing css properties do?

A

Add space between lines and letters.

79
Q

What is a web safe font?

A

Font that is supported by most browsers.

80
Q

How to define more than one font.. how are they read?

A

separate by ,. Read left to right (the first supported is used)

81
Q

Where to easily find fonts? What happens if we select all styles within the same font?

A

fonts.google.com. The website may become slow to load, so select only the styles that are going to be used.

82
Q

What happens if you defined the font-weight to bold and the font does not have that available?

A

Font-synthesis will kick and “try” to adjust the font to the desired style.

83
Q

What usually happens when font-synthesis kick in?

A

The font might look sharpy and weird.

84
Q

How does relative units are calculated?

A

Based on the parent size. e.g: 50% (of the parent element)

85
Q

How to define a relative size value based on the size the parent font? Is it %?

A

Defined using em. The parent font will be taken into consideration. e.g: 1em = 100%

86
Q

How to define a relative size value based on the root element (e.g body and html)?

A

Defined using rem. The root element font will be taken into consideration.

87
Q

What is padding?

A

Adds whitespace inside an element.

88
Q

What is marging?

A

Adds whitespace outside of an element.

89
Q

What is margin collapse?

A

Means that margins applied to the above element and the bellow one (touching each other) will not be summed up. The biggest value is applied.

90
Q

What is border?

A

Adds whitespace outside an element, after the padding.

91
Q

Which of these affects the element final size:

padding, margin and border?

A

padding and border.

92
Q

How to use pseudo classes to style odd and even rows?

A

tr:nth-of-type(odd)

Front end software development (12 decks)

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