css

Selectors

<selector > {
  <property>: <value>;
}

Element Selectors h1, body
ID Selectors #id-name
Class Selectors .class-name
Wildcard Selectors [<attr>*="<str>"], ^ = starts with, $ = ends with
Universal Selector (type of Wildcard) *

Pseudo-Classes

<selector>:<pseudo-class> {...}

hover
visited
checked
first-child
last-child
nth-child - <selector>:nth-child(<n> | even | odd)

Pesudo-Elements

<selector>::<pseudo-element> {...}

first-letter
first-line
before, after
- { content: "some content to add without changing html" }

Combinators

<selector> <combinator> <selector2> {...}

direct child >
all descendants <literal space>
adjacent siblings +
general siblings (all) ~

Tips

To center image: margin: 0 auto
To center text: text-align: center
Group duplicates: h1, h2, .header-class, #header-id { ... }

Sizing Units

Absolute units: px, pt, cm, mm, in
Relative units: em, rem, vw, vh, %
Standard html size is around 16px
Use relative units for responsive UI

Colors

Build-in names white, blue, black, red
RGB(A) (Red, Blue, Green, Alpha) rgb(x, y, z)
Hexadecimal #000000 -> #FFFFFF #RRBBGG
HSL (Hue, Saturation%, Lightness%)
Adobe Color Wheel

Typography

font-family
font-weight
text-align
text-shadow
text-transform
text-indent
line-height
letter-spacing
word-spacing
white-space
background-color (not specific to typography)

Box-model

content, padding, border, margin.

Layouts

Flexbox

Parent:
- display: flex
- flex-direction: row (default on web) | column (default on react-native)
- justify-content: center | ... (main axis)
- align-items: center | flex-start | ... (cross axis)
- flex-wrap: wrap | nowrap
Children:
- flex-grow: <number> amount of space an item will take
- flex-shrink: <number> same as above
- flex-basis: <value> Initial size
- Shorthand for grow, shrink and basis: flex: <num> <num> <val>
- align-self: center | ...

Grid

Frameworks

Bulma
Bootstrap
Ant
Sementic

Tips n Tricks

Center Div

<div class="outer">This text should be in center!</div>

<style>
  .outer {
    display: flex /* grid */;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
</style>

Change svg color using css filter

Source

Add the SVG image using an <img> tag.

<img src="dotted-arrow.svg" class="filter-green" />

To filter to a specific color, use the following Codepen to convert a hex color code to a CSS filter:

For example, output for #00EE00 is

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

Add the CSS filter into this class.

.filter-green {
  filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg)
    brightness(118%) contrast(119%);
}

Center a `position: fixed` element

Stackoverflow

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

css