:HEADER-ARGS:html: :tangle w3/index.html :HEADER-ARGS:css: :tangle w3/css/style.css

Prepare the structure

As always, first we prepare the folder structure. 

mkdir -p w3/{css,js,media}
mkdir -p w3/media/{img,video,fonts}
cd w3
touch index.html
touch css/style.css

Then we can start with the skeleton of our html file 

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Week 3</title>
      <link href="css/style.css" rel="stylesheet">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>

Pseudo-class

In this example we use a paragraph which will change the color 

<p>The following words will change the color</p>
<button>Toggle full screen</button>
body {
  background-color: #ffeeee;
  font-size: 16px; /*Default font size */
  font-family: sans-serif;
}
button {
  box-sizing: content-box;
  border-radius: 0.2em;
  color: white;
  background-color: #007bff;
  padding: 1%;
  border: none;
  cursor: pointer;
}
p {
  font-size: 2em;
  color: black;
}
p:fullscreen {
  color: #55a0ff; 
}

This code only works in server with https or localhost, because the browser consider localhost a secure site.

Disclaimer You can ignore this part. It is used only for enabling the example 

let button = document.querySelector("button");
 let paragraph = document.querySelector("p");
 button.addEventListener("click", () => {
!document.fullScreen && paragraph.requestFullscreen() || document.exitFullscreen();
 });

Status selectors

The status selectors are used to select elements based on the state of the element. In this case, we will change the color of the button when it is disabled. 

<button disabled="true">Disable</button>
button:disabled {
  color: red;
}

Action pseudo-class

The action pseudo-class is used to select and style elements that are the target of and action of the user. 

<button id="hover-button">Hover over me</button>

With the following CSS we apply three states to the last button. The normal state has a default shadow outside it. The second state, when we pass the mouse over the button, it will lost the shadow and while we push it, the button get a inner shadow. 

#hover-button {
    display: block;
  box-shadow: 2px 2px 2px 2px #888888, inset 0px 0px 0px #888888;
  margin: 2% 0%;
  transition-property: box-shadow;
  transition-duration: 0.5s;
}
#hover-button:active {box-shadow: 0px 0px 0px #888888, inset 4px 4px 5px #ffffff;}
#hover-button:hover {box-shadow: 0px 0px 0px #888888, inset 0px 0px 0px #ffffff;}

And the end of the file

EOF

<script src="js/main.js"></script>
</body>
</html>

The resulting code can be found in:

-main.js