htmlcsscss-positionwebfonts

how can I change the position of html text?

I'm new to web development. here is my html code:

<html>
    <body>
        {errors}
        <p>Enter your numbers:</p>
        <form method="post" action=".">
            <p><input name="number1" /></p>
            <p><input name="number2" /></p>
            <p><input type="submit" value="Do calculation" /></p>
        </form>
    </body>
</html>

You can see how it appears below:

enter image description here

How can I change the position and font and size? it is currently being shown at the top left corner.

Solution

  • On web development, any time you need to style an element of your page, you need to use CSS. Have a look at w3school if you want to learn more about it.

    In this case I'm going to show you how to apply internal styles, but you can apply CSS with external or inlined styles as well - Have a look here for an explanation of it.

      <html>
        <head>
            <style>
                body {
                    font-family: 'Calibri', 'sans-serif';
                    font-size: 16px;
                    font-weight: bold;
                    text-align:center;
                }

                form {
                    position: relative;
                    bottom: 0;
                    right: 0;
                }
            </style>
        </head>
        <body>
            {errors}
            <p>Enter your numbers:</p>
            <form method="post" action=".">
                <p><input name="number1" /></p>
                <p><input name="number2" /></p>
                <p><input type="submit" value="Do calculation" /></p>
            </form>
        </body>
    </html>

    So in here, I gave you an example of how to use: