CSS Flashcards
basic and responsive css rules
What are the tenets of performance driven selectors
Keep selectors short – minimize specificity, allows for inheritance and portability
Favour classes – reuse styles. Key selectors should be specific
Tenets of reusing code
DRY – don’t repeat yourself, reuse code and group together selectors that use the same styling, separated by a comma
What is the DOM
Document Object Model. An API for HTML which provides structural representation.
Position: static
Elements have this by default.
Don’t have nor will accept any specific box offset properties.
Will be positioned as intended with default behaviours
Position: relative;
Similar to static. But will accept box offset properties of top, right, bottom and left.
Allows elemtent to be precisely positioned, shifting it from it’s default position.
Other elements will not impede on where relatively positioned elements are placed.
These elements may overlap or underlap other elements without moving them from their position
Position: absolute;
Removed from normal flow of the document
Accepts offset properties
Positioned relative to their containing parent or the body of the document
Not setting offsets will position it top left of its closest relatively positioned parent
Position: fixed;
Positioned relative to browser viewport
Does not scroll with the page;
Used with headers and footers, with left and right offsets declared.
Will produce same beahviours as an absolutely positioned element;
What does z-index do
Position stacked elements along the z axis
Position value must first be applied (relative, absolute, fixed), you can’t stack elements that don’t have a position element declared.
section p
Common child selector – selects every element that is contained anywhere within the parent, even if it is contained within another element within that parent e.g. section article p
section > p
Direct child selector – selects only elements that are direct descendants of an element. E.g. section article p will not be selected
h2 ~ p
General sibling selector – selects all elements that are siblings to the first element
h2 + p
Adjacent sibling selector – selects only the element that is adjacent to the first selector
a[target]
Attribute present selector – selects elements based on whether it includes the attribute or not
a[href=”google.com”]
Attribute equals selector - selects element with specific and exact matching attribute value
a[href*=”login”]
Attribute contains selector - selects element with part of the attribute value, not exact match
a[href^=”https://”]
Attrbute begins with selector – selects element based on what attribute value starts with
a[href$=”.pdf”]
Attribute ends with selector, as starts with but value ends with query
a[rel~=”tag”]
Attribute spaced selector – selects elements where more or one value exists separated by a space, and only one attribute needs to be matched
a[lang|=”en”]
Attribute hyphenated selector – as spaced selector but values are separated by a hyphen
