Mod 4

Question 1

What is a CSS selector?

Answer 1

A selcetor selects the HTML elements to which the rule applies. This is followed by one or more declarations placed inside a pair of curly braces. Each declaration is a property value pair, specifying a property of the element and then the value we want to set for that property. A colon : separates a property and its value, while different declarations are separated by a semi-colon ;.

h1 {
color: red;
font-size: 25pt;
}

Question 2

What is a CSS Type Selector?

Answer 2

The type selector matches elements based on the element type, i.e., the tag name. We just saw an example of this which is reproduced below:

h1 {
color: red;
font-size: 25pt;
}

Question 3

What is a CSS ID Selector?

Answer 3

vvip {

The ID selector selects the single element with a matching ID and is of the form #id.

font-weight: bold; }

Question 4

What is a CSS Class Selector?

Answer 4

The class selector selects all elements in which the attribute class has that value. The syntax is .class, i.e., we add a . before the value of the class.

Example
The selector .navigation will apply to all elements with the class attribute of navigation.

.navigation {
font-size: 16pt;
}

Question 5

When should use classes vs. IDs as selectors in our rules?

Answer 5

IDs are good for anchoring and specifying unique blocks, whereas classes are more about design properties that get used again and again.

Question 6

What are some forms of location based selectors?

Answer 6

Descendant: y x
Child: y>x
Adjacent Sibling: y+x
General Sibling: y~x

Question 7

What is a CSS Pseudo Selector?

Answer 7

CSS also supports selectors that are based on the state of an element. We can specify pseudo selectors using a selector followed by a pseudo-classLinks to an external site. where a pseudo-class is a keyword preceded by a :. Here is the general syntax:

selector:pseudo-class {
property: value;
}

Question 8

What are the 3 ways to add style to HTML documents?

Answer 8

1. External CSS using separate stylesheet.
2. Internal CSS using the style element.
3. Inline CSS using the style attribute of an element.

Question 9

What are 4 general rules for CSS rule precedence?

Answer 9

1. Later rules overrule earlier rules.
2. Rules with a more specific selector take precedence over those with more general selectors.
3. Rules associated with id override rules associated with class
4. Rules associated with class override rules associated with tags

Question 10

What is the ratio between points and inches?

Answer 10

1pt = 1/72 of an inch

Question 11

What is the ratio between pixels and inches?

Answer 11

1 px = 1/96th of an inch. Many browsers ignore this definition, and instead use pixel size based on the resolution of the screen

Question 12

What are em and rem in CSS?

Answer 12

• em is a relative unit based on the current font size of the parent element. For example, 2em means two times the parent element’s current font size.
• rem is a relative unit based on the current font size of the root element. For example, 2rem means two times the current font size of the root element.

Question 13

What is the difference between block-level and inline elements?

Answer 13

Recall that elements such as h1, p, ul, li are block-level elements and start on a new line, whereas elements such as img, b, i are inline elements and do not start a new line.

Question 14

Describe the 4 size properties in a box model.

Answer 14

1. Element.
   We can specify width and height properties to override element defaults.
2. Padding.
   We can specify the size of the padding using the properties padding-top, padding-right, padding-bottom and padding-left.
3. Margin.
   We can specify the size of the margin using the properties maring-top, margin-right, margin-bottom and margin-left.
4. Border.
   We can specify the color, style, and width of the border at the top, bottom, left, and right, using 12 different properties.
   The names of the properties for controlling the border at the top are border-top-color, border-top-style and border-top-width.

The declaration padding: 10px 20px 30px 40px; specifies the 4 padding sizes in the order top, right, bottom, and left.

Question 15

What is static positioning?

Answer 15

Static positioning is the default method which uses the browsers default positioning algorithm to stack each block level element on a new line.

Question 16

What is relative positioning?

Answer 16

Elements with relative positioning are moved in relation to where they would be placed by the static positioning. The properties top, right, bottom and left can be used to specify the offset by which element should be moved from the position it would be placed in if static positioning were being used.

Question 17

What is absolute positioning?

Answer 17

Elements with absolute positioning are positioned in relation to the parent element. The properties top, right, bottom and left can be used to specify the offset by which element should appear relative to its parent element.

Question 18

What is fixed positioning?

Answer 18

Elements with fixed positioning are positioned with respect to the document window. If we scroll the page, the fixed element will scroll with the page. Using fixed position, we can, for example, make a nav bar always appear at the top of the page.

Question 19

What are the three ways to move in a binary tree?

Answer 19

1. Up: To parent
2. Down: To child
3. Sideways: To sibling

Question 20

What is a Document Object Model

Answer 20

DOM is a standard that provides APIs for manipulating not just HTML, but also other types of documents, such as CSS and XML (a markup language popular for data exchange) . DOM consists of interfaces rather than the description of the API in a particular programming language. DOM specification is programming language neutral. Many programming languages have implemented the DOM specification so that programs written in that language can use the DOM API.

Question 21

What is the difference between a DOM node’s textContent and innerHTML properties?

Answer 21

textContent of an element contains its text content and that of its child elements concatenated as a string, but it does not contain HTML tags or any elements that are not text. On the other hand, the innerHTML property contains all the HTML content, including the tags of child elements and attributes inside the element.

Question 22

What are two steps to create a node in a DOM tree?

Answer 22

1. Create the node by calling the appropriate method on the document object.
   The newly created node does not yet appear in the DOM tree.
2. As the second step, we insert the new node at the desired position in the DOM tree.

Question 23

Event handling requires specifying 3 things:

Answer 23

1. What happened, i.e., what is the event of interest?
2. Where did this event occur, i.e., what is the element of interest?
3. What to do, i.e., what JavaScript code to invoke when the event occurs on this element?

Question 24

What are 4 important properties of an Event Object?

Answer 24

1. type: the name of the event, e.g., click, mouseup, etc.
2. timeStamp: the time that the event was created.
3. target: the element that dispatched the event.
4. currentTarget: the element on which the event listener was registered.

Question 25

What are the two main uses of Load Events?

Answer 25

1. To execute some JavaScript code as soon as a resource is loaded
2. To attach event handlers to nodes in the DOM tree

Question 26

What is another type of Load Event?

Answer 26

The DOMContentLOADED event, which is raised as soon as the browser finishes parsing and loading the original HTML document, i.e., without waiting for images, stylesheets, etc., to be loaded.