Learn HTML Forms by Building a Registration Form - Step 16

HTML-CSS
1

Tell us what’s happening:
So I already completed this already but I am still unsure of one thing. In the styles.css, what is the difference between a word on it’s own and a dot before the word.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form method="post" action='https://register-demo.freecodecamp.org'>
      <fieldset>
        <label>Enter Your First Name:</label>
        <label>Enter Your Last Name:</label>
        <label>Enter Your Email:</label>
        <label>Create a New Password:</label>
      </fieldset>
      <fieldset></fieldset>
      <fieldset></fieldset>
    </form>
  </body>
</html>

/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
}

label {
  display: block;
  margin: 0.5rem 
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Edg/107.0.1418.62

Challenge: Learn HTML Forms by Building a Registration Form - Step 16

Link to the challenge:

2

the styles.css is a CSS stylesheet
It works by creating ‘selectors’ and adding properties to them that change their style.
Selectors are meant to select the elements we want to change.
There are many ways to write selectors. So far you know about 2 ways.
One way is to write the name of the element to select all elements who have that name for eg.
h1 {
will select all h1 elements
The 2nd way is to select elements based on the class attribute (and that is written with a dot in front of the name of the class)
.class1 { will select all elements that have a class attribute whose value is class1

Keep in mind that you will learn many more ways as you progress of selecting elements.

3

I undertand it now. Thanks.

1 Like