CSS

Question 1

Principle of inheritance in CSS/explain cascading style sheets.

Answer 1

Lower level styling code overrides higher level styling code. So the overall style of a HTML element is determined through a cascade of style sheet applications.

Question 2

List and explain the 3 levels of style sheets from least important to most important.

Answer 2

External - can apply to the bodies of any number of documents
Document Level - apply to the body of the document it is in
Inline - apply to a single HTML element

Question 3

How is an external style sheet linked? (Code)

Answer 3

<link></link>

Question 4

What are the three components of each CSS rule?

Answer 4

selector, property and value.

Question 5

What is the order of each value in the font property?

Answer 5

font: weight size 1st font, 2nd font;

Question 6

Pixels vs Points vs Ems vs Rem vs Percent

Answer 6

Pixels = one dot on computer screen
Points = 1 / 72 of an inch
Ems = 1em = default font size in browser
Rem = 1rem = default font size of html element
Percent = % relative to the container

Question 7

Possible uses of text-transform? (code)

Answer 7

text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

Question 8

Explain use of text-shadow? (code)

Answer 8

text-shadow: height-of-shadow width-of-shadow blur radius color

Question 9

Explain use of text-decoration? (code)

Answer 9

text-decoration-line: underline, overline, line-through
text-decoration-color:
text-decoration-style: solid, wavy, dotted, dashed, double
text-decoration-thickness:

Question 10

How is a color specified in HEX?

Answer 10

Colorcode

Question 11

Explain list-style-type? (code) What should it be applied to?

Answer 11

list-style-type: decimal, upper-alpha, lower-alpha, upper-roman, lower-roman

Overall list container

Question 12

Explain the four types of simple selectors.

Answer 12

elementname
.classname
#idname
* (universal selector, selects all)

Question 13

Explain the four combinator selectors

Answer 13

Space - Parent Child (selects all elements that are descendants of a specified element)
Child Selector- Parent>Child (selects all elements that are the children of a specified element)
Adjacent Sibling Detector - Element+Element (Selects the element directly after the first element)
General Sibling Selector - Element~Element (Selects all elements at the same level as named element)

Question 14

Explain the seven [attribute] selectors.

Answer 14

[attribute] - Selects elements with a specified attribute
[attribute=value] - Selects elements with a specified attribute & value
[attribute~=”string”] - Selects elements with an attribute value containing specific words
[attribute|=value] - Select elements with an specified attribute whose value can be exactly the specified value or the specified value followed by a hypen.
[attribute^=value] - Select elements with the specified attribute, whose value starts with a specified value.
[attribute$=value] - Select elements with the specified attribute, whose value ends with a specified value.
[attribute*=value] - Select elements with the specified attribute value contains a specified value.

Question 15

List the four tree-structural pseudo-class selectors.

Answer 15

:root
:first-child
:last-child
:nth-child(n)

Question 16

Explain the three location pseudo-class selectors.

Answer 16

:link (default style for links)
:visited (style for links that have been clicked on)
:target (selects anchors in the current URL)

Question 17

Explain the six user-action and input pseudo-class selectors.

Answer 17

:hover
:active
:focus (an input that is being typed in)
:autofill(selects input that has been autofilled)
:checked(selects checkbox, radio etc that is on)
:required(selects form elements with required attribute)

Question 18

Explain the six pseudo-elements selectors

Answer 18

::after (Insert something after the content of each element of the named type)
::before (Insert something before the content of each element of the named type)
::first-letter
::first-line
::marker Selects the marker of list items
::selection Selects the portion of an element selected by the user.

Question 19

Order of styles in border. What are the border styles?

Answer 19

border: size style color

border-style: none, hidden, dotted, dashed, solid, double

Question 20

What function will push the rows and columns of a table together with no spaces?

Answer 20

border-collapse

Question 21

List the four parts of the cascade algorithm from least to most important.

Answer 21

Initial & Inherited Properties (default)
Order of Appearance (what code comes last)
Selector Specificity
Origin & Importance

Question 22

List the order of importance for origin starting with the least important.

Answer 22

User Agent Styles (browser)
User
Author

Question 23

Explain five selector specificity types. List them in order of greatest weight to least weight. Give there ‘values’.

Answer 23

Inline Declaration Value: 1000
ID Column - only ID selectors Value: 100
Class Column - class selectors, attribute selectors, pseudo-classes : Value: 10
Type Column - Standard Elements and :: (Pseudo)-element-selectors Value: 1
No Value - Universal Selector

Question 24

What does !important do? Give an example to show where it is placed.

Answer 24

Overrides everything else. color:blue!important;

Question 25

What CSS command will set a variable/constant for later use?

Answer 25

:root {
–variableName: value;
}

reference with
selector {
CSSCommand:var(variableName);
}

Question 26

What is the specificity of combinatorial selectors?

Answer 26

they have no effect.