UI

Question 1

CSS Selectors

Answer 1

element type selector - body {background-color:#cccc99;}

id selector - #menu {background-color:#ffff00;}

class selector - .bookTitle {font-style: italic;}

You can target different selectors using a comma delimited list for example - h1, h2 { background-color:#cccc99;}

Descendant selectors will select based on the hierarchy of the rule. For example the rule below will only select p elements that are in a div element.

div p { background-color:#ddddaa; }

The p doesn’t have to be directly under the div it just has to be somewhere with the hierarchy.

Child selectors can be used to target direct child elements. For example.

div > p {background-color:#ddddaa;}

Attribute selectors select elements based on some attribute of the element. For example the selector below selects image elements that have the attribute alt=spacer

img[alt=spacer] {padding:0px;}

Psuedo class selectors select elements based on some characteristic of the element. For example the selector below selects elements of type anchor that have the property of visited.

a:visited {color: #dddddd; }

for more about selectors see https://www.w3.org/TR/selectors-3/

Question 2

CSS Property Values

Answer 2

Keywords can be used for specific properties. For example thin, thick, larger can be used to describe the width of a border but, you couldn’t use it when setting a font.

Sizes can be set with a lot of options:

Physical measurements
- inches (in), points (pt), picas (pc)

Screen measurements
- pixels (px)

Relative Measurements
-%, em

Color codes
- rgb(r,g,b), hex codes #rrggbb, keywords

Fonts
- Helvetica, sans-serif

Functional notation
- rgb(r,g,b), url(“http://example.com/bg.jpg”)

Question 3

CSS Cascading & Inheritance

Answer 3

Styles can come from different sources.

Author - The are the style sheets created by the developer of the Web Page.
User - These are style sheets created by the user and are used primarily to improve accessibility.
Default - Are the styles defined by the browser and are used when no styles are defined.

The order of precedence is Author, User then Default. Even though the Author style sheets take precedence over the User by default, you can override the precedence by using !important on the styles.

Question 4

CSS Specificity

Answer 4

A - Count of ID selectors
B - Count of Class selectors
C - Count of type selectors

*  a=0 b=0 c=0 -> specificity = 0
LI a=0 b=0 c=1 -> specificity = 1
UL LI a=0 b=0 c=2 -> specificity = 2
LI.red a=0 b=1 c=1 -> specificity = 11
#content a=1 b=0 c=0 -> specificity = 100

in-line styles take the highest precedence

<p></p>

Question 5

CSS Inheritance

Answer 5

Elements will inherit some of the properties of it’s parent. But, not all properties are inheritable. For example font properties is inheritable but, border properties are not.

Question 6

CSS Box Model

Answer 6

Every element has a box. div, p, a etc. all have a box.

There 3 key properties for a box
border - not visible by default but, you can control the width, color and styling of the border
padding - is the space between the border and the content in the box
margin - is the space between the box and any adjacent elements

you can the values of these properties for each side of the box individually

Vertical margins collapse or overlap. When the bottom margin of an element is 5px and the top margin of the element below is set to 5px, the space between the borders of the elements will be 5px instead of 8px. The margins overlap until one of the margins meets the border of the other element. The largest margin will determine the space of the margin.

When you specify the width of an element, you setting the width of the content. The margin, padding and border will still take up space.

Display and Visibility
Display is generally block, inline or none
- Block elements sit on top of each other
- Inline elements only move downward when there is not enough space
- Display of none removes an element

Visibility
- Hidden elements are not visible, but reserve space

For inline you cannot set the width of the element. But, you can use inline-block which gives it block characteristics such as setting the width.

Question 7

CSS Text Styles

Answer 7

There are 5 font collections defined by CSS. 
serif
sans-serif
cursive
fantasy
monospace

The font family i.e. Arial, Helvetica etc. are dependent on the OS. In CSS you can use a comma delimited list to target multiple font families since you don’t always know what fonts are installed on the display device. You can also specify the font collection in that list to tell the device to use what every the default is for that font collection.

body
{
font-family: Arial, Helvetica, sans-serif;
}

Font sizes can be absolute such as specify the pixels (px) or relative by using em. 2em would mean twice the size of the base size. .8em would be 80% of the base size.

Question 8

CSS Layout

Answer 8

Position can be defined as static relative, absolute and fixed.

static - the default position value and it stacks elements one on top of the other down the page. Elements flow downward. Block elements such as div, p, and a separate rows whereas inline elements like span are on the same row.

relative - moves an element from it’s default position in some direction by specifying values for top, left, bottom or right similar to how margins or padding works.

absolute - like fixed removes an element from the flow of the page and moves the element to a specific position regardless of where that element is in the markup.

fixed - very similar to absolute expect it moves the element relative to the window whereas absolute moves the element relative to the body. The fixed position will stay in place even as you scroll the window.

Float and Clear
float allows elements to flow beside a block element and clear resets the element so that it doesn’t float