console 命令行工具 X clear

console

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p  class="special">This is my first CSS example</p>
    <div class="outer">
        <div class="box">The inner box is 90% - 30px.</div>
    </div>
    <div class="box2"></div>
  </body>
</html>

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

.special {
  color: red;
}

p {
  color: blue;
}

.outer {
  border: 5px solid black;
}

.box {
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}

.box2 {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn)
}

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}