CSS Flashcards
Principle of inheritance in CSS/explain cascading style sheets.
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.
List and explain the 3 levels of style sheets from least important to most important.
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
How is an external style sheet linked? (Code)
<link></link>
What are the three components of each CSS rule?
selector, property and value.
What is the order of each value in the font property?
font: weight size 1st font, 2nd font;
Pixels vs Points vs Ems vs Rem vs Percent
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
Possible uses of text-transform? (code)
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
Explain use of text-shadow? (code)
text-shadow: height-of-shadow width-of-shadow blur radius color
Explain use of text-decoration? (code)
text-decoration-line: underline, overline, line-through
text-decoration-color:
text-decoration-style: solid, wavy, dotted, dashed, double
text-decoration-thickness:
How is a color specified in HEX?
Colorcode
Explain list-style-type? (code) What should it be applied to?
list-style-type: decimal, upper-alpha, lower-alpha, upper-roman, lower-roman
Overall list container
Explain the four types of simple selectors.
elementname
.classname
#idname
* (universal selector, selects all)
Explain the four combinator selectors
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)
Explain the seven [attribute] selectors.
[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.
List the four tree-structural pseudo-class selectors.
:root
:first-child
:last-child
:nth-child(n)
Explain the three location pseudo-class selectors.
:link (default style for links)
:visited (style for links that have been clicked on)
:target (selects anchors in the current URL)
Explain the six user-action and input pseudo-class selectors.
: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)
Explain the six pseudo-elements selectors
::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.
Order of styles in border. What are the border styles?
border: size style color
border-style: none, hidden, dotted, dashed, solid, double
What function will push the rows and columns of a table together with no spaces?
border-collapse
List the four parts of the cascade algorithm from least to most important.
Initial & Inherited Properties (default)
Order of Appearance (what code comes last)
Selector Specificity
Origin & Importance
List the order of importance for origin starting with the least important.
User Agent Styles (browser)
User
Author
Explain five selector specificity types. List them in order of greatest weight to least weight. Give there ‘values’.
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
What does !important do? Give an example to show where it is placed.
Overrides everything else. color:blue!important;
What CSS command will set a variable/constant for later use?
:root {
–variableName: value;
}
reference with
selector {
CSSCommand:var(variableName);
}
What is the specificity of combinatorial selectors?
they have no effect.
