Fundamentals Flashcards
What is Declaration
Declaration is made up of a property and a value (e.g. color: black;)
What is Selector
A declaration block is preceded by a selector (e.g. body {...})
What is Ruleset / rule
Together, the selector and declaration block are called a ruleset. A ruleset is also called a rule.
What are at-rules
at-rules are language constructs beginning with an @ symbol, such as @import rules or @media queries.
How to include CSS file in HTML
<link rel="stylesheet" href="styles.css" />
Select all elements with class btn
Select all elements with both classes btn and primary
<button class="btn btn-primary"></button>
.btn.btn.primary
Select element with id one
<div id="one"></div>
#one
Selector matches all div elements that are children of of the root element. What is the root element for HTML documents.
:root div
The :root pseudo-class matches the root element of a document, for HTM
Select all div elements, all elements with the class .two, and all elements with the id #three.
div, .two, #three
Select all elements with class child that are children of element with class parent including nested children.
<div class="parent">
<div>
<div class="child"></div> << THIS
</div>
</div>
.parent .child
Select all elements with class child that are children of element with class parent. Only direct children.
<div class="parent">
<div class="child"></div> << THIS
<div>
<div class="child"></div>
</div>
</div>
.parent > .child
Selector that matches .two elements that are immediately preceded by a .one element.
<section> <div class="one"></div> <div class="two"></div> << THIS </section>
.one + .two
Selector matches .three elements that are siblings of .one elements. There can be any number of elements between .one and .three.
<div class="one"></div> <div class="two"></div> <div class="three"></div>
.one ~ .three
The selector doesn’t match .three elements that are not siblings of .one elements but are nested inside another element.
Matches all paragraphs that are preceded by an h1, h2 or h3 element.
<h1></h1> <p></p> << THIS <h2></h2> <p></p> << THIS
:is(h1, h2, h3) + p
Without :is() you would have to repeat the same selector multiple times: h1 + p, h2 + p, h3 + p.
Select elements with an href attribute.
a[href]
The selector only checks for the presence of the attribute, not its value. So the hyperlink is matched even though the href attribute is empty.
- Select
aelements with anhrefattribute pointing tohttps://example.com - How to match case-insensitive URL?
a[href="https://example.com"]
[attr="value"i] (case insensitive)
Select elements with an href attribute:
* starting with https://
* ending with .com
* containing string google
a[href^="https://"]a[href$=".com"]a[href*="google"]
Match div elements where lang parameter contains en-us space separated field.
<div lang="en-us en-gb en-au">Hello World!</div>
Not:<div class="foobarbaz"></div>
div[lang~="en-us"]
Use language selector in practice
The [attr~=value] selector matches all elements with the specified attribute whose value contains a list of space-separated values and one of the values is exactly value.
What is Cascade
Rules to control which selector is stronger in the event of a conflict.
Cascade algorithm stages
- Position and order of appearance
- Specificity
- Origin
- Importance
Describe Specificity components and rules
Consists of three components: A, B, and C (represented as (A,B,C) or A-B-C):
- A: id-like specificity
- B: class-like specificity
- C: element-like specificity
Specificities are compared by comparing the three components in order: the specificity with a larger A value is more specific; if the two A values are tied, then the specificity with a larger B value is more specific; if the two B values are also tied, then the specificity with a larger C value is more specific; if all the values are tied, the two specificities are equal.
What is inhertitance in CSS (example)
For example, if you set a color and font-family on an element, every element inside it will also be styled with that color and font, unless you’ve applied different color and font values directly to them.
What are inheritance special values
- You can make any property inherit its parent’s computed value with the
inheritkeyword. - The
initialkeyword sets a property back to that initial, default value. - Remembering which CSS properties are inherited by default can be hard,
unsetcan be helpful in that context:- If a property is inherited by default, the
unsetkeyword will be the same asinherit. - If the property is not inherited by default, the
unsetkeyword is equal toinitial.
- If a property is inherited by default, the
Select first/second/last p under divs
p:first-of-typediv p:nth-of-type(2)p:last-of-type
Select first/last/second/even child of p component.
p:first-childp:last-childp:nth-child(2)p:nth-child(even)
Insert string yo at start and end of a p element
p::after{content:"yo";}p::before{content:"yo";}
Define and use variable in CSS
```css
:root { –gutter: 20px; }
h1 {margin-left: var(–gutter); }
~~~
What relative <length> units there are in CSS and what they do?
-
emFont size of the parent. For example: If root font size is10px, parent is2emand child is2em, final size is4em == 40px-
remFont size of the root element. If root font size is10px, and child is2rem, then it’s size is20px -
ch: equal to the width of a “0” character in the rendered font.- Example:
max-width: 15ch;to limit the line length.
- Example:
-
What viewport relative units there are in CSS and what they do?
-
vw: 1% of the viewport’s width.
independent) -
vh: 1% of the viewport’s height.
What is intrinsic vs extrinsic size
- An image file contains sizing information, described as its intrinsic size (default). This size is determined by the image itself, not by any formatting we happen to apply.
- When a size is given to an element (the content of which then needs to fit into that size) we refer to it as an extrinsic size.
