Search code examples
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:

    • font-family - used to change the font type

    • font-size - to change size of the font

    • font-weight - to change the thickness of the font

    • position - used to position your element differently, by combining it with the use of top, left, right and bottom attributes

    • See here to know more about CSS font styles

    • See here to know more about CSS positioning