CSS

Reference sheet on W3Schools

Styling organization

Inline

In any HTML tag in body, add for example <p style="color: blue; ...">text</p>

Head - Style with CSS Selectors

• head
  • style
    • h1 { - CSS Selectors: all h1 will be affected
      • color: blue;
      • }
• body
  • element, like h1

External CSS stylesheet

In style.css:

body {
    color: blue;
}

In head of html:

<link rel="stylesheet" href="style.css" />

Import

In CSS:

@import "relativepath.css";

And then override possible.

CSS Selector

ID - one specific element in the document

In CSS
#element-ID { ~ }

In html
id="element-ID"
One element can only have one ID

Classes

In CSS
.class-name { ~ }

In HTML
class="class-name"
or class="class1 class2"

Existing tags

In CSS file:
Full table here

Sizing

Styles

Font

Color

Can use CSS name, #ffffff, rgb(0,0,0), hsl(0,0,0)

Container arrangements

All classes display on W3Schools

Padding - spacing inside the element

Margin - spacing outside the element

Float - put elements on the side

Display - how elements are displayed

Positions

Static - follow definition in document

Relative - relative where it should be

Absolute - relative to the parent container

Fixed - relative to the viewport

viewport = the browser window viewport = the browser window

Flexbox - Grid layout

In CSS:

.flex-container {

    display: flex;                              | Activate flexbox

    flex-direction: row                         | Stacks box in a row
                    row-reverse                 | ... in reverse order
                    column                      | ... in column

    justify-content:    flex-start              | Side box on the left
                        flex-end                | ... on the right
                        center                  | ... on the center
                        space-between/around    | ... with space between/around box

    flex-wrap:  wrap                            | Line wrap according to screen size
                wrap-reverse
                no-wrap

    align-items:    flex-end                    | Align items at the bottom
                    center                      | ... at the center

    align-content:  flex-start                  | Hold items on the top
                    center
                    space-center/between        | ... with space around or between
}

In HTML:

• div class="flex-container container"
  • div class="box flex-item"
    • h1:1
  • style="align-self: center": Center this element

Animations

Direct transition:

@keyframes change-color {
    from {color: blue;}
    to {color: red;}
}

Transition with steps and with position change:

@keyframes change-color {
    0% {color: blue; top:10px}
    10% {color: green; top:20px}
    100%{color: red; top:30px}
}

.box-animation {
    animation-name: change-color            | define the animation to use
    animation-duration: 4s	
    animation-iteration-count:  infinite    | infinite animation
                                3           | 3 animations
    position: relative	
}

.box-anim:hover {}: Selector possible

Reference

• CSS - Style Your Website, Tutorial by Mike Dane
• Flexbox Cheatsheetby Joni Bologna