CSS basics | Notion

After we created the “backbone” of the web, let’s arrange these elements so they look prettier.

To accomplish this, CSS will be the “designer”. (─‿‿─)

<!DOCTYPE html>
<html>
  <head>
    <title>My first web page</title>
    <style>
      img {
        width: 100px;
        border-radius: 20px;
        float: left;
        margin-right: 10px;
      }
      p.username {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <img src="images/doggy.jpg" alt="" />
    <p class="username">@Paul Lu</p>
    <p>I love Frontend Dev</p>
  </body>
</html>

Again, a few things to note:

<style> ... </style> should appear inside the head tag. Later on CSS file should be separated if too large.
TAGNAME {...} to specify the tag you want to style.
If the tag is too general, (e.g. <p> can indicates any text) inside the tag, add arg: class= to indicate its specific ID. Next, inside style sheet, TAGNAME.ID to refer to the particular tag.

Pseudo-class selectors

Pseudo-element selectors

Pseudo-elements VS. Pseudo-classes