Over christmas break 2024 I decided to take some time and learn more html and css, but also get a stronger foundation in JavaScript. To help myself, but also others, I am now starting this page to keep track of some tricky, or useful patterns that I have learned! I hope you learn something new!
selector {
property: value;
}
input[type="text"] {
border: 2px solid black;
}
```html type="text" minlength="5" maxlength="20" required // makes form invalid unless value is used pattern // crazy syntax, can also be "email", "url", "tel" ```
- text-align - font-weight - text-decoration - blue dotted underline - red wavy overline 4px - #000000 double line-through - line-height - the spacing between other lines - letter-spacing
- img
- h1, h2 { color: blue; }
- Can only be used to reference one single element on a page - #id-name to select it in css
css
div a {
color: white;
}
Targets all a that live somewhere nested in a div.
css
h1 + p {
color: red;
}
Selects all paragraphs that come right after a h1.
css
input[type="text"] {
width: 300px;
color: yellow;
}
Can match any attribute like href, value, src and others!
The order you define styles in your css document matters. The further down something is on the page, the more power it has. The same goes for the include order of css.
The most specific selector is the one that decides on a given style.
To avoid having to calculate the size of an element by deducting the size of a border you can use this attribute - box-sizing: border-box;
- inline - elements share a line - width and height do nothing - block - elements own the line - inline block - respects width and height - none - does not show, but is there
- em - a multiplier of the parents font size. If a div has a font-size of 10px, a child h1 with font-size 2em will have a real size of 20px. - For padding, margin 0.5em relates to the font-size of self. So if my font-size is 2em and margin is 0.5em, 2*0.5=1 times the parent font-size. The em padding is really useful when using emoji as icons because I can style things relative to the size of the emoji, this eliminates guesswork. - rem - works like em, but relates to root element and thus doesn’t create recursive multiplication
- using colors rgbA - only affects specific property - using opacity - affects all properties and children
- static - the default value for position - relative - object can be offset relative to itself using top, left, right and bottom - It’s like moving the pivot of a spite. It’s position is still the same, but the graphic is offset. Space is still taken up in the area that it would have if it was static - absolute - element is not taking up space, it’s kind of moving something to ui space. - the pivot is based on the parents position, only if the parents position is relative. - fixed - Works like absolute, but does not respect parents position. Follows the initial containing block. Used for navbars that follow when user scrolls through window. - sticky - Works like fixed only follows viewport once it’s at the edge of the screen.
transition: 1s; ```css property name | duration | timing function | delay ``` - property name - all - to affect everything - timing function - ease - ease-in - ease-out - ease-in-out - cubic-bezier(0.1, 0.7, 1.0, 0.1); - easings.net
- transform: rotate(45deg); - rotateX() - rotateY() - rotateZ() - transform-origin: bottom right; - transform: scale(x, y); - transform: translate(x, y); - moves an element - skew(15deg, 20deg); Can be combined by adding a space between each effect.
transform: rotate(45deg) translate(15px, 20px)
background-image: url(my.png);
background-size: contain/cover/auto
background-repeat: repeat;
- display: flex
x main axis y cross axis - flex-direction: row; - default, makes x the main axis - flex-direction: row-reverse; - inverts the x axis - flex-direction: column - y is main axis - flex-direction: column-reverse; - inverts the y axis
- justify-content: flex-start; - default, respects the flex-direction - justify-content: - flex-end - space-between - space-around - space-evenly
- flex-wrap: - wrap - makes content begin a new row if it doesn’t fit in the container - wrap-reverse - does the same thing, but inverts the placement, for rows this makes new rows stack on top instead of under.
- align-items: - flex-start - flex-end - center - baseline
Takes effect when we have multiple rows or columns due to wrap. - align-content: - space-between - flex-begin - flex-end - center
Used on an element in a flex container to change the alignment rules of a single item.
Assigned to individual elements in a flex container. - flex-basis: - controls the initial size of an element in the flex-direction. - flex-grow: - the amount of space to grow if there is extra space. - flex-grow: 1; - flex-shrink: - the amount of space to give up if there is not enough space Can be used in combination with min-width and max-width to control how much elements are allowed to grow.
Only use the nested css if height of viewport is at least 360px, if it’s lower this rule will not be used. Can be combined with other rules by using and keyword.
@media (min-height: 360px) and … (another role) {
h1 {
color: purple;
}
}
Used for single rows/columns
In css we can use variables. To passa value to css, almost like a function you can use style="--var-name: 10" which will make it a paramter
element-name:focus-within element
visibility: visible