Brainscape's Knowledge GenomeTM

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


See full index

CSS > CSS - Core Concepts > Flashcards

CSS - Core Concepts Flashcards

1
Q

True or False, percentage values are calculated relative to their parent element

A

True, percentage values are calculated relative to their parent element, e.g. a div with a width of 80% would use 80% of its parent element

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

which css will be applied in the following?

  1. link href=”style1.css” rel=”stylesheet”
  2. style

.btn-lg { size : 20px;} /style

  1. link href=”style2.css” rel=”stylesheet”
A
  1. link href=”style2.css” rel=”stylesheet” will be applied since it is the last css that is loaded, hence its called css - cascading style sheet
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

what is specificity

A

specificity is the means by which the browser determines which css property values are most relevant and therefore applicable to an element

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

what is a css reset?

A

a css reset is a collection of styles that nullify the default browser styles

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

what does a selector do?

A

A selector tells css which element to style, eg p {font-size: 15px}

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

a css declaration contains _ and _

A

a css declaration contains a property and a value div + p { font-size : 16px } - font-size is the property and 16px is the value

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

what are absolute values, give examples

A

Absolute values are fixed values, well suited for devices with a known output size. Examples are inches, cm, mm, pt and picas

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

what are relative values(units)

A

relative values are values whose value is relative to the length of another property. They are well suited for devices like screens, where the device size and resolution is not known or could change. examples are em, ex, px, gd - grids, rem - root ems, etc

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

why are pixels relative values

A

pixels are relative because they are relative to the size of the device they are displayed, for example, if you change the resolution, the pixel will change its size as well

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

explain em

A

em means the value of text at its default size, if for example, 1em is a font size, and the parent of the element which is 1em is 16px, then 1em is 16px. If the child element is 2em, then its actual value is 32px

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

What are some disadvantages of inline styles

A
  1. cumbersome html, tough to read
  2. does not provide consistency
  3. difficult to maintain
  4. inline styles take precedence over page-level style declarations and external stylesheets..this may result in accidental overriding of some styles
  5. you cannot style pseudo-elements and classes within inline styles
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What are some of the disadvantages of embedded or internal style sheets

A
  1. this method cant be used for multiple web pages
  2. page load is slower
  3. large file size
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What are advantages of using external style sheets?

A
  1. full control of page structure
  2. reduced file size
  3. less load time
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Why is it generally discouraged to import stylesheets using @import?

A

with import, the css files are loaded slower, one by one, whereas with link, the files are loaded in parallel, and therefore faster

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

Give an example of a group selector

A

h1, h2, p {

font-family: helvetica;

}

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

What is a hack?

A

A hack is browser-specific code designed to cirmuvent an error

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

What are some disadvantages with using hacks?

A
  1. fixing a problem in one browser can occassionally lead to an error in another
  2. hacks add weight to your code and makes it harder to maintain
  3. hacks often break in future browsers
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Describe a strategy to deal with browser inconsistencies

A
  1. try to avoid conditions that trigger the browser error. This requires familiarity with rendering errors and what triggers them
  2. place all IE-specific code fixes in a seperate stylesheet and serve them through conditional comments
  3. design according to existing web standards, ensuring that the design will work across the largest possible browser and device base
  4. add flexibility in designs, resulting in minor differences going unnoticed
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What does display : block do ?

A

display : block displays the affected elemented as a block element

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

What is the difference between class and Id?

A

Class and ID are both html attributes that are utilized by css as selectors. The difference between them is:

  • ID - can only be used once in an html document, duplicating an ID name can cause your page to fail validation
  • Class - can be used multiple times in an html document, and you can have more than one class name for a single html element
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

If there is a styling conflict between id and class, which selector would css use? In other words, if an element has both class and id defined, which would be applied?

A

If there is a styling conflict between id and class, css would apply the id selector’s style because id is more specific, in terms of specificity

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

Describe a strategy to use when adding classes and ids on an html page

A

Only add classes and ids on a page when they help extend meaning, not merely for styling purposes

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

Give an example of an element specific selector

A

An example of an element specific selector is h2.artist {} , which would target all h2 elements with a specified class of artist

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

Describe the advantages and disadvantages of specific element selectors

A

Specific element selector, example, h2.artist {}

Advantage

  • Allow you to target specific elements

Disadvantage

  • Require more processing work from the browser. Thats why it is important to use only when necessary
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

What is the universal selector?

A

A universal selector is a selector that affects every element on the page, example is * { color : red} , every element on the page will be red

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

What is the difference between a universal selector and inheritance

A

The difference between a universal selector and inheritance is

  • With inheritance, child elements can override the parent style
  • With a universal selector, child elements cannot override the parent style
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

What is the disadvantage of using the universal selector in css reset?

A

The disadvantage of using the universal selector is css reset is that since the universal selector affects all elements on the page, and the child elements cannot override, you will have to make sure that you explicitly change the individual elements, for example * { padding: 0} , all elements will have a padding of 0, and you will have to remember to change the padding of the elements you do not want to have a padding of 0

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

Give an example of a descendant selector

A

An example of a descendant selector is header h1 { color: blue}, which targets an h1 element inside a header element

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

How can you make a descendant selector efficient?

A

You can make a descendant selector efficient by reducing the number of specified selectors, e.g. instead of article aside p {}, you could just have aside p. This reduces the overhead the browser requires to process the css

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

What are child selectors?

A

Child selectors are selectors that target elements that are direct children of a parent, meaning, the children are not nested in another element. An example of a child selector is aside>h2

32
Q

Give an example of a child selector combined with a descendant selector

A

An example of a child selector combined with a descendant selector is aside header>p, targeting direct p children of the header element that are descendants of the aside element

33
Q

What are adjacent selectors?

A

Adjacent selectors are selectors that allow you to style an element based on what element comes before it, provided the elements belong to the same parent. An example is h2 + p, which would target the p element that is directly after the h2 element

34
Q

What are attribute selectors?

A

Attribute selectors are selectors that allow you to target elements based on their attributes, and the value of those attributes

35
Q

Give an example of an attribute selector

A

An example of an attribute selector is a[href^=”http://”], which targets elements with an href attribute, whose value starts with http://

36
Q

What are pseudo-class selectors?

A

Pseudo-class selectors are selectors that allow you to target elements or instances that lie outside of the DOM, or that are too specific for simple selectors to target

37
Q

Give an example of a pseudo-class selector

A

An example of a pseudo-class selector is :hover

38
Q

What are structural pseudo-class selectors?

A

Structural pseudo-class selectors are selectors that target elements based on specialized information within the DOM that simple selectors cannot get to

39
Q

Give an example of a structural pseudo-class element

A

An example of a structural pseudo-class element is span:first-child { } , meaning find every span that is the first child of a parent element

40
Q

What is an nth-child pseudo-class selector?

A

An nth-child selector is a structural pseudo-class selector that allows us to select elements that match a certain pattern within a parent

41
Q

Give an example of an n-th child selector

A
  • An example of an n-th child selector is li:nth-child(2) { }, meaning find the second element of type list
  • Another example is li:nth-child(2n) { }, meaning find every second element of li type
  • Another example is li:nth-child(5n+5) { }, meaning find the element starting at 5, and then every 5th element after that
42
Q

Give an example of a pseudo-element selector

A
  • An example of a pseudo-element selector is p::first-line { }, meaning select the first line of the p element
  • Another example is a::after { content: “ hello “ }, which places the text hello after the a element
43
Q

Describe cascading

A

Cascading can be described as, the last rule applied, wins. This means that styles are applied in the order they are found, and in the case of a conflict, that last rule specified is the style that is applied

44
Q

When working with inheritance, placing your most _ , _ styles on _ elements is an efficient way to _ elements site-wide

A

When working with inheritance, placing your most basic , default styles on top-level elements is an efficient way to style elements site-wide

45
Q

What 4 concepts come into play when resolving style conflicts?

A

4 concepts that come into play when dealing with style conflicts are

  • inheritance
  • specificity
  • cascading
  • !important
46
Q

What is specificity?

A

Specificity refers to how specific an element is specified in the selector

47
Q

How is specifity measured?

A
48
Q

What are some general guidelines to dealing with style conflicts?

A

Some general guidelines to dealing with style conflicts are

  • Avoid using local styles when possible
    • they add an unnecessary extra layer of complexity to a site
    • updating or modifying them can be difficult
  • Do not use inline styles
  • Develop a strategy for rule specificity before you begin writing your styles
    • Dont mix class and ID selectors without having a plan that guides when to use them
  • Use inheritance to your advantage
    • if you are familiar with your page structure, you should be able to identify global formatting across your site
  • Think about how styles will relate to each other
49
Q

What is the text transform property used for? Give an example

A

The text transform transform is used to control capitalization. An example is h1 { text.transform : uppercase}, which will convert the h1 text to uppercase

50
Q

Give an example of font shorthand notation

A

An example of font shorthand notation is font: bold 1em/1.4 Arial, Helvetica. The order is weight, font size/line height and font-type. If you dont specify font weight, the default normal will be specified

51
Q

What does inline-block do?

A

inline-block elements display like inline elements but they can also have properties of height and width

52
Q

When specifying line height in the body element as an inherited value, why is it important to use multiples, instead of ems

A

When specifying line height in the body element as an inherited value, is it important to use multiples, instead of ems because

  • if you use ems, the inherited line height will be based on the calculated line height, for example, 1.2 em * 16px = 32px
  • if you use multiples, then the inherited value is, for example, 1.2 times of the indiviadual inheriting font size, in other words, the line height is relative to the individual elements font sizes.
53
Q

True or false, margin and padding do not inherit, ie cannot be passed from parent to child

A

True, margin and padding do not inherit, ie cannot be passed from parent to child

54
Q

What is the box model?

A

The box model refers to the physical properties of an element’s rectangular box. These physical properties are

  • margins
  • borders
  • padding
  • content
  • width
  • height
55
Q

What does padding do?

A

Padding holds a space between the edges of a child element and that of a parent element

56
Q

Describe the behavior of block level elements

A

Block level elements occupy their own space within an html document, and when left to their own device, they stretch to the length of their parent element

57
Q

What happens if you dont specify the width of an element, but then add padding and a border to that element?

A

If you dont specify the width of an element, but then add padding and a border to that element, the width of that element is reduced because the padding and border take away width space from that element

58
Q

body { width: 600px }

div { padding: 10px; margin: 10px; border: 1px }

how much space does the content within the div occupy

A

body { width: 600px }

div { padding: 10px; margin: 10px; border: 1px }

  • padding occupies 20px : 10px left + 10px right
  • margin occupies 20px : 10px left + 10px right
  • border occupies 2px : 1px left + 1px right

20px + 20px + 2px = 42px

660px - 42px = 552px

59
Q

True or false, margin space is sacrified if an element’s width is close to overflowing?

A

True, margin space is sacrified if an element’s width is close to overflowing. This means that the margin space is reclaimed to fit the content of the element

60
Q

What do margins do?

A

Margins help control the space between elements

61
Q

What is vertical margin collapse?

A

Vertical margin collapse is when two vertical margin values that touch each other merge into one, for example if two vertical margin of 20px each will collapse into a 20px margin, instead of 40px. If the margins are 20 and 10, the margins will collapse into 20, the larger value, instead of 30

62
Q

True or false, adding a border can prevent margin collapse?

A

True , adding a border can prevent margin collapse

63
Q

What does auto mean?

A

Auto means take up the rest of the available space, if a width or height has been specified. For example margin 0 auto evenly splits the remaining space between left and right margins, thereby centering the affected element

64
Q

Why does applying a background color to the body element affect the entire page, even if the body’s width is less than the page’s width?

A

Applying a background color to the body element affects the entire page, even if the body’s width is less than the page’s width because

  • applying a background color to the body affects the entire document automatically, not just the body
65
Q

True or false, a floating element is one that is taken out of the normal flow and placed along the right or left side of its container, and inline elements can wrap around it

A

True, a floating element is one that is taken out of the normal flow and place on the left or right side of its container, and inline elements can wrap around it

66
Q

The interior space within an element is controlled through which properties?

A

The interior space within an element is controlled through the properties:

  • width
  • height
  • padding
67
Q

True or false, the padding area is the space between the element and its border?

A

True, the padding area is the space between the element and its border

68
Q

True or false, when you add padding-top and padding-bottom to an element, the height of that element is increased?

A

True, when you add padding top and bottom to an element, the height of that element is increased

69
Q

True or false, with background-position, if you declare one value, that value will be the horizontal offset. The browser sets the vertical offset to center.

A

True, with background-position, if you declare one value, that value will be the horizontal offset. The browser sets the vertical offset to center.

70
Q

Using percentages, how would you position a background image in the center?

A

Using percentages, you position a background image in the center using background-position: 50% 50%

71
Q

What does background-attachment: fixed do?

A

background-attachment: fixed attaches the background image as a fixed position element, and it moves with regards to the viewport

72
Q

What does the property background:attachment do?

A

The property background:attachment specifies the attachment of the background image to the containing element

73
Q

True or false, if a block level element does not have a specified width and height, it fills its containing element?

A

True, if a block level element does not have a specified width and height, it fills its containing element

74
Q

True or false, margins do not increase the width of an element, but they increase the space an element occupies?

A

True, margins do not increase the width of an element, but they increase the space an element occupies

75
Q

What is overflow?

A

Overflow is when a content block does not fit into its containing element

CSS (1 decks)

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