Cascading Style Sheets

Is a Styling programming language used on the Web.

Reference sheet on W3Schools

Styling organization¶

/* comments */

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

Tag	Action
`* {}`	whole document
`h1, h2, p {}`	every h1, h2, p
`ul > li {}`	every li inside ul
`p + h2 {}`	every h2 after a p
`[href] {}`	every element with attribute href
`[title*="lem"]`	every element with attribute title starting with lem
`li[title="lemons"]`	every li element with attribute title:"lemons"
`input`	every input
`input:checked`	every element which is checked
`input[type="checbox"]:checked`	every checkbox which is checked
`h2:hover`	element which is under cursor
`ul > li:first-child` `ul > li:nth-last-child(3)`	First child of each li inside ul 3 last child of each li inside ul

Sizing¶

Tag	Action
100px	Fixed size in pixel
80%	Relative to screen size
2em	2x~16px = double text size

Styles¶

Font¶

Tag	Action
`font-size: 20px`
`font-family: 'Courier'`	define a font
`font-style: italic`
`font-variant: small-caps`
`font-weight: bold`
`text-shadow: 2px 3px 2px red`	horizontal vertical blur color distance of shadow

Color¶

Container arrangements¶

Padding - spacing inside the element¶

Tag	Action
`padding: 10px`
`padding-top: 50px`	also -bottom -left -right
`padding: 50px 10px 50px 10px`	Clockwise: top, right bottom, left

Margin - spacing outside the element¶

Tag	Action
`margin: 25px`
`margin:-10px`	Negative
`margin-top: 10px`	also -bottom -left -right
`margin: 50px 10px 50px 10px`	Clockwise: top, right, bottom, left

Float - put elements on the side¶

Tag	Action
`float: none`
`float: left`	element on the left side, other content will be on the right
`float: right`	inverse

Display - how elements are displayed¶

Tag	Action
`display: none`	does not render the block
`display: block`	takes all the width of the page - by default
`display: inline`	takes only space needed - like span
### Positions
#### Static - follow definition in document
#### Relative - relative where it should be
Tag	Action
-	-
`position: relative`
`top: 20px`	position it 20px away from it should be also bottom left right

Absolute - relative to the parent container¶

Tag	Action
`position: absolute`
`top: 0px`	position it at 0px relative to the parent container (or document) also bottom left right
#### Fixed - relative to the viewport
viewport = the browser window viewport = the browser window

Tag	Action
`position: fixed`
`top: 0px`	keep the element at the top also bottom left right

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