CSS hands-on

Wenn man eine Webseite besucht, erhält der Browser Daten in den Sprachen HTML, CSS und Javascript.

HTML beschreibt die Struktur der Webseite

1) Try it: See the source code

open kh-berlin.de and press alt-cmd-u

open kh-berlin.de and press alt-cmd-i

3) use Stylebot

Stylebot is tool to change CSS of a web page and save it for later or to exchange with others. The same HTML information looks different with different CSS.

https://stylebot.dev/

Try these examples:

div.project-box {
  outline:red;
}
#main_menu {
  top: 60px;
  left:-2px;
  transform:rotate(-1.8deg);
}
div div p {
  font-size: 30px;
  line-height:32px;
}
p.auszeichnung {
  transform:rotate(2deg);
  display: none;
}
div.breadcrumb {
  display: none;
}
body {
background: rgb(226,199,169);
background: linear-gradient(4deg, rgba(226,199,169,1) 0%, rgba(229,229,233,0.9934348739495799) 93%, rgba(0,33,255,1) 100%);
}
article div h1 {
  color:white;
  position: fixed;
}
div div h2 {
  font-size: 20px
}
li[class^="project-item"] {
  width: 216px;
  display: block;
  left: 80px;
  margin-bottom: 32px;
}
li[class^="project-item"] .static  {
  position: absolute;
  left: 0;
  top:0;
}
li[class^="project-item"] .static:hover {
  z-index:100;
}
.section {
  margin-left: 120px;
}
.see_menu {
  display: none;
}
.box {
  border: none;
}

or this:

.home img {
    filter: hue-rotate(200deg);
  }
  img {
    border-radius: 1em;
  }
  .projects > * {
    border: none;
  }
  .projects > li {
    position: relative;
    left: 20px;
    margin-top: 20px;
  }
  .projects > li:nth-child(n+1) {
    position: relative;
    left: -20px;
    transform: rotate(5deg);
  }
  .projects > li:nth-child(2n+3) {
    position: relative;
    left: -40px;
    transform: rotate(1deg);
  }
  .projects > li:nth-child(n+4) {
    position: relative;
    left: 10px;
    transform: rotate(-3deg);
  }
  .projects > li:nth-child(n+5) {
    position: relative;
    left: -10px;
    transform: rotate(2deg);
  }
  .loadProject {
    position: absolute;
    left:20px;
    color: white;
    mix-blend-mode: normal;
    visibility: hidden;
    top:0;
    left:0;
    right:0;
    bottom:0;
  }
  .projects li:hover .loadProject {
    visibility: visible;
    color: rgba(17, 35, 199, 0.6);
  }
div#col.col-right {
  overflow: visible;
}
  .projects .departments {
    display: none;
  }
  .section {
    margin-left: 40px;
    margin-right: 40px;
  }
  .section p {
    font-size: 25px;
    line-height: 30px;
  }
  #main_menu {
    position: fixed;
    top:0;
  }
  .breadcrumb {
    display: none;
  }
  .headline {
    margin-top: 60px;
    margin-left: 40px;
    height: auto;
    margin-bottom: 20px;
  }
  ul#prime-nav li.home-link a {
        width: 176px;
  }

4) Learn CSS

https://www.freecodecamp.org/learn/responsive-web-design/#basic-css