Brainscape's Knowledge GenomeTM

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


See full index

Programming > CSS > Flashcards

CSS Flashcards

1
Q

What is CSS?

A

CSS is a language for specifying how documents are presented to users.

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

How does CSS affect documents?

A

We browsers apply CSS rules to a document to affect how they are displayed.

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

What is a document?

A

Usually a text file structured using a markup language like HTML, SVG or XML.

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

From what is formed a CSS rule?

A

A CSS rule is formed from:

  • A set of properties, which have values set to update how the HTML content is displayed.
  • A selector, which selects the element(s) you want to apply the updated properties values to.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

How does the browser combine a document’s content with its style information?

A
  1. The browser converts HTML and CSS into the DOM, representing the document in the computer’s memory.
  2. The browser displays the content of the DOM.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What are the 3 different ways to apply CSS to the HTML?

A
  1. External stylesheet ==> advised: referenced with < link rel=”stylesheet” href=”path/to/css” >
  2. Internal stylesheet: place the CSS rules within a < style > element.
  3. Inline styles affecting one element only: < element style=”CSS properties…” >
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

How is formed a CSS rules?

A
  1. A property paired with a value is called a CSS declaration.
  2. CSS declarations are put within CSS declaration blocks.
  3. CSS declaration blocks are paired with selectors to produce CSS rules.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What happens if a property is unknown or a value is invalid for a given property?

A

The declaration is deemed invalid and is ignored by the browser’s CSS engined.

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

What is the standard spelling for CSS?

A

US spelling.

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

What happens if a single selector in a chain or group of selectors is invalid?

A

The group of selectors is still valid, except for the invalid selector.

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

What are “at-rules” or @ rules?

A

They are used in CSS to convey metadata, conditional information or other descriptive information.

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

What about the syntax and semantics of @ rules?

A

Each type of @ rule has its own internal syntax and semantics.

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

What are nested statements?

A

Nested statements are a specific subset of @ rule, the syntax of which is a nested block of CSS rules that will only be applied to the document if a specific ocndition is matched.

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

What are the different types of @ rules used with nested statements?

A
  • @media: content is applied only if the device which runs the browser matches the expression.
  • @supports: content is applied only if the browser actually supports the tested feature.
  • @document: content is applied only if the current page matches some condition.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What does one need to be careful with whitespaces when within CSS?

A

Whitespaces around the properties and their values ==> margin: 0 auto; is right and margin: 0auto; is wrong.

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

How to write comments in CSS?

A

Comments start with /* and end with */.

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

What are shorthand properties?

A

Properties that allow to set several property values in a single line.

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

What are the different types of selectors?

A
  • Simple selectors.
  • Attribute selectors.
  • Pseudo-classes.
  • Pseudo-elements.
  • Combinators.
  • Multiple selectors.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What is a simple selector?

A

A selector that matches one or more elements based on element:

  • type: h1 { … }
  • class: .className { … } ==> Note the .
  • id: #someID { … } ==> Note the #
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What is a attribute selector?

A

A selector that matches one or more elements based on their attributes/attribute value. Their generic syntax consists of square brackets [] containing an attribute name foolowed by an optional condition to match against the value of the attribute.

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

What is a pseudo-class selector?

A

A selector that matches one or more elements that exist in a certain state.

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

What is a pseudo-element selector?

A

A selector that matches one or more parts of content that are in a certain position in relation to an element.

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

What are combinators?

A

A mean to combine two or more selectors for even more specific selections.

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

How can you apply the same CSS rule to multiple selectors without rewriting it multiple times?

A

Put these multiple selectors separated by a comma as you would you with one selector.

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

What is a class name?

A

A class name is any value, without spaces, placed within an HTML class attribute.

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

What is the relationship between elements and class values?

A
  • Multiple elements can have the same class value.
  • A single element can have multiple class values separated by white spaces.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

What is an ID for elements?

A

It is a unique ID name set with the id attribute. It is the most efficient way to select a single element.

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

What does the universal selector (*) do?

A

It selects all elements in a page. often used in combination with other selectors. Not advised in general because of its impact on performance.

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

What are the 3 types of presence and value attribute selectors?

A
30
Q

What are the two types of attribute selectors?

A
  • Presence and value attribute selectors.
  • Substring value selectors.
31
Q

What are the 4 types of substring value attribute selctors, also called “RegExp-like selectors”?

A
  • [attr|=val] : select all elements with the attribute attr for which the value is exactly val or starts with val- .
  • [attr^=val] : select all elements with the attribute attr for which the value starts with val.
  • [attr$=val] : select all elements with the attribute attr for which the value ends with val.
  • [attr*=val] : select all elements with the attribute attr for which the value contains the substring val.
32
Q

What is a CSS pseudo-class?

A

A CSS pseudo-class is a keyword added to the end of a selector, preceded by a colon (:), which is used to specify that you want to style the selected element but only when it is in a certain state.

Examples: :active, :checked, :hover…

33
Q

What are the link-related only pseudo class selectors?

A
  • :link ==> same behaviour as a[href]
  • :visirted ==> select links already visited by the current browser.
  • :hover
  • :active ==> select a link while it is being activated (being clicked on or otherwise activated).
  • Memo technique: LVHA ==> LOVE HATE
34
Q

What are input and link-related pseudo class selectors?

A
  • :focus ==> select links, inputs and text areas that are the current focus of the keyboard.
  • :target ==> match when the hash tag in the current URL matches an element ID. Example: #home:target and www.site.com/#home.
  • :enabled ==> select inputs that are in the default state of enabled and ready to use.
  • :disabled ==> select inputs that gave the disabled attribute.
  • :checked ==> select checkboxes that are checked.
  • :indeterminate ==> select radio buttons that are in the neutral state of neither chosen or unchosen. (Ee.g. when a page loads with radio buttons choices but no default is set).
  • :required ==> select inputs with the required attribute.
  • :optional ==> select inputs that do not have the required attribute.
  • :read-only / :read-write ==> select elements based on a combination of readonly and disabled attributes.
  • It is usually a good idea to define a :focus style for anything that has a :hover style.
35
Q

What are position/number-based pseudo class selectors?

A
  • :root ==> element at the root of the document (most probably the html element)
  • :first-child
  • :last-child
  • :nth-child(algebraic_expression) ==> e.g. 2n
36
Q

What are relational pseudo class selectors?

A
  • :not(selector_to_remove) ==> removes elements from an existing matched set that match the selector inside the parameter of :not().
  • :empty ==> selects elements which contain no text and no child elements.
37
Q

What are text-related class selectors/elements?

A
  • ::first-letter
  • ::first-line
  • :lang ==> match anything that either has or is a descendant of an element with a matching lang attribute.
38
Q

What are content-related pseudo “elements”?

A
  • ::before ==> able to add content before a certain element. E.g. opening quote before a blockquote.
  • ::after ==> able to add content after a certain element.
39
Q

What are the different rules of combinators?

A
  • Descendant selector (A B): any element matching B that is a descendant of an element matching A.
  • Child selector (A > B): any element matching B that is a direct child of an element matching A.
  • Adjacent sibling selector (A + B): any element matching B that is the next sibling of an element matching A.
  • General sibling selector (A ~ B): any element matching B that is one of the next siblings of an element matching A.
40
Q

What are the most common classes of number value?

A
  • Absolute units (always the same size):
    • px
    • mm, cm, in
  • Relative units:
    • em ==> 1em is the same size as the font-size of the current element. Default font-size is 16px but font-size can be inherited.
    • rem (root em): 1 rem is always equal to the default base font-size.
    • vw, vh: respectively 1/100th of the width,height of the viewport.
  • Unitless values:
    • Can act as a multiplior factor.
    • Number of animations.
41
Q

What is the use of percentage values?

A

Use percentage values to specify most things that can be specified by specific numerical values. Example: create bozes whose width will always shift to be a certain % of their parent container’s width.

42
Q

How to specify color values?

A
  • Color keywords e.g. red, yellow…
  • Hexadecimal values: e.g. #FFFFFF ==> each pair of values (16 x 16) represents one of the channel (red, green, blue).
  • RGB: e.g. rgb(256, 256, 256)
  • HSL: e.g. hsl(0, 100%, 50%)
    • Hue: base shade of the color, between 0 and 360, presenting the angles around a color wheel.
    • Saturation: 0% is no color (black) and 100% is full light (white).
    • Lightness: 0% is no light (black) and 100% is full light (white).
  • rgba() and hsla() takes a 4th parameter (0 to 1) which is the opacity/transparency of a color.
  • opacity (property): value from 0 (completely transparent) to 1 9completely opaque), sets the transaprency of all selected elements and their children.
43
Q

What are the 3 factors on which depend the “order” of CSS rules?

A

Listed in order of weight, meaning earlier rules overrule later ones:

  1. Importance.
  2. Specificity.
  3. Source order.
44
Q

How to make sure that a certain declaration always win over all others?

A

Put !important after the value of the declaration (but before the ;).

Using !important is not advised.

45
Q

What is the only way to override a !important declaration?

A

Include another !important declaration of the same specificity later in the source order, or one with higher specificity.

46
Q

What is specificity?

A

Specificity is a measure of how specific a selector is = how many elements it could match.

47
Q

How is measured specificity?

A

It is measured using four different values thought of as thousands, hundreds, tens and ones:

  • Thousands: score one if the declaration is in a style attribute. Otherwise 0.
  • Hundreds: score one in this column for each ID selector contained inside the overall selector.
  • Tens: score one in this column for each class selector, attribute selector or pseudo-class selector contained inside the overall selector.
  • Ones: score one in this column for each element selector or pseudo-element contained inside the overall selector.
48
Q

What is source order?

A

Later (closer to the bottom of the stylesheet) rules win over earlier (closer to the top of the stylesheet) rules.

49
Q

Do rules override rules or properties override properties?

A

Entire rules do not override other rules. When several CSS rules match the same element, they are all applied to that element. Only after that are any conflicting properties evaluated to see which individual styles will win over others.

50
Q

What is the basic idea of inheritance?

A

Some property values applied to an element are inherited by that element’s children (e.g. font-family, color…) and some are not (e.g. margin, padding, border…). Default inheritance can be checked in the CSS Reference.

51
Q

What are the four universal property values used to control inheritance?

A
  • inherit: child gets the property value of parent.
  • initial: child gets the property value set in the browser’s default style sheet. If no value is set and the property is naturally inherited, then the property value is set to inherit.
  • unset: resets the property to inherit if it is naturally inherited, otherwise it acts like initial.
  • revert: set value to user stylesheet’s value. If not value is set, use user-agent’s default stylesheet.
52
Q

What is the use of the all property?

A
  • The value of the all property can be set to any of the inheritance values so as to apply the set value to almost all properties at once.
  • Usually used to get a clean starting point.
53
Q

What is the box model?

A

Each element is represented as a rectangular box with the box’ s:

  • content within the
  • padding within the
  • border within
  • margin.
54
Q

What are the basic properties of the box model?

A
  • width, height, max-width, min-width, max-height, max-width.
  • padding (shorthand):
    • padding-top, padding-right, padding-bottom, padding-left.
  • border (shorthand): e.g. 1px solid black
    • border-top, border-right, border-bottom, border-left.
    • border-width, border-style, border-color
    • border-top-width, border-top-style, border-top-color, etc…
  • margin (shorthand):
    • margin-top, margin-right, margin-bottom, margin-left.
55
Q

What is margin collapsing?

A

Given two elements A and B, the distance between their borders is equal to max(margin(A), margin(B)).

56
Q

What are the possible values of the box-sizing property?

A
  • border-content (default): total width of a box is width + padding-right + padding-left + border-right + border-left. Similarly for height.
  • border-box: total width is just the width property’s value. Similarly for height. ==> Easier to work with % this way.
57
Q

What is overflow?

A

When the size of a box is set with absolute values, the content may not fit within the allowed size, in which case the ocntent overflows the box.

58
Q

What are the possible values of the overflow property?

A
  • visible (usually default behaviour): overflowing content is shown outside of the box.
  • auto: overflowing content is hidden and scroll bars are shown to let the user scroll to se the content.
  • hidden: overflowing content is hidden.
59
Q

What are the possible values of the background-clip property?

A

Clip the background color and image at the defined box:

  • border-box (default)
  • padding-box
  • content-box
60
Q

How are box backgrounds set up?

A

Box backgrounds are made up of colors and images drawn under the given box.

61
Q

What is the outline property?

A
  • It behaves like a border between the actual border and the margin, without any effect on the box size.
  • A use case for outline is the highlighting of links when a user clicks on them.
62
Q

What are the 3 types of boxes, which can be defined via the display property?

A
  • block: boxes stacked upon other boxes as defined in the box model.
  • inline:
    • inline elements appear on the same as other inline elements.
    • width and height have no effect.
    • padding, margin and border will update the position of surrounding inline elements, but will not affect the position of surrounding block boxes.
    • inline boxes break on multiple lines if there is not enough room.
  • inline-block: similar to inline elements, but they can be size and they do not break across multiple lines.
63
Q

What does it mean that CSS is permissive?

A

If a declaration or selector is invalid (syntax error or no browser support), the browser just ignores it.

64
Q

What is the classic way to debug CSS?

A
  1. Open developer tools of the browser.
  2. Click on a DOM element to see the CSS rules applied to that element.
    • Invalid properties appear with a line through them and a warning symbol next to them.
    • Each property has a checkbox used to enable/disable it to see how it affect the page.
    • Modify property values and/or add property to see how it affect the page.
65
Q

What is the particularity of box height with respect to relative values?

A
  • Box heights do not observe % lengths.
  • Box height always adopts the height of the content, unless a specific absoulte height is set (e.g. px or em).
66
Q

What is the particularity of borders with respect to relative values?

A

Borders ignore % width settings.

67
Q

What is the normal flow?

A
  • It is the way the browser lays out HTML elements by default:
    • HTML elements are displayed in the exact order in which they appear in the source code, with elements stacked up on top of one another.
    • Block elements are stacked up, while inline elements, such as English language, are on the same line.
68
Q

What are the different methods to change the normal flow?

A
  • display property
  • Float values
  • position property
  • Table layout: designed for styling parts of an HTML table, but can be used on non-table elements.
  • Multi-column layout
69
Q

What is the main method to modify the layout of a page?

A

Change the value of the display property: block, inline, inline-block, flex, grid etc…

70
Q

What are the four possible values of the flow property?

A
  • left: floats element to the left.
  • right: floats element to theright.
  • none (default): no floating at all.
  • inherit: value should be inherited from parent element.
71
Q

How to use float to wrap text around a box pushed to the left?

A
  1. Float a div left.
  2. Give it a margin on the right to push the text away from the element.
72
Q

What are the 5 main types of positioning?

A
  • Static positioning (default): put the element into its normal position in the normal document layout flow.
  • Relative positioning: modify an element’s position oin the page relative to its position in normal flow.
  • Absolute positioning: modify an element’s position relative to the edges of the html element (or nearest positioned ancestor element).
  • Fixed positioning: similar to absolute positioning, except that it fixes an elemetn relative to browser virewport, not another element.
  • Sticky positioning: makes an element act like static until it hits a defined offset from the viewport, at which point it acts like position fixed.

Programming (9 decks)

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