Skip to content

Cascading Style Sheets

Is a Styling programming language used on the Web.

Reference sheet on W3Schools

Styling organization

  • /* comments */


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 "relativepath.css";

And then override possible.

CSS Selector

ID - one specific element in the document

#element-ID { ~ }

In html
One element can only have one ID


.class-name { ~ } In HTML
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


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



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


Can use CSS name, #ffffff, rgb(0,0,0), hsl(0,0,0) Some color ideas: Material color picker, Material design color Tag | Action -|- color: blue | background-color: green | opacity: 0.5 | opacity of 50%

Container arrangements

All classes display on W3Schools Tag | Action -|- width: 100px | max-width: 500px | box-shadow: 5px 5px 5px grey | horizontal vertical blur color
distance of shadow border: 1px solid black | width style color border-radius: 5px | Circular borders

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


.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

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

    align-content:  flex-start                  | Hold items on the top
                    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


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