Use Styles

The best way

There are several ways you can apply styles to elements of your html page, but the best (and imho only) way to do this is to use CSS Styling (CSS stands for 'Cascading Style Sheets', but don't worry about that as it's confusing).

Style definitions

So what does a CSS 'Style Definition' look like ...

CSS

div.textbox {

        margin: 5px 5px;

        padding: 5px 5px;

        border: 1px solid black;

      }

For which the 'div.textbox' part is known as the 'selector' and is the most important aspect to understand as this decides which elements (e.g. <div>...</div>, <span>...</span>, etc.) of the page the style settings encapsulated by the {...} block are applied to.

The below includes examples of the most commonly used selector types...

Selector	Example	Styles Applied To
type	`div {`	`<div>`
type.class	`span.box {`	`<span class="box">`
id	`#john_smith {`	`<td id="john_smith">`

However additional selector capabilities can be found at W3 Schools - CSS Selector Reference

Styles in action

So as an example, without defining our own style a level 4 heading specified as follows

HTML

<h4>This is a level 4 heading</h4>

leads to the following being displayed ...

Displayed

This is a level 4 heading

However if this seems to be too pronounced for your liking we can change the styling of all <h4> headings by using the following CSS
Note: Headings is possibly the only acceptable use of Element[type] selectors, I highly recommend using Element[type.class] selectors.

CSS

h4 {

        font-size: 1.1em;

        font-weight: normal;

        font-style: italic;

      }

Such that the same HTML results in ...

Displayed

This is a level 4 heading

There are numerous style attributes you can set, of which some are fairly common to all elements types (e.g. 'color: red'), whereas other are very specific to the type of element (e.g. 'flex-direction: row' is specific to <div>...</div> blocks), for which W3 Schools - CSS Reference is a great resource to look them all up.

Defining styles "inline"

When you're throwing together a new stand-alone page it's quick and easy to define your styles in the header

HTML

<!DOCTYPE html>

        <html>

        <head>

          <title>Title of the Page</title>

          <style>

            ... this is where you define

            the styles you want to use ...

          </style>

        </head>

        <body>

However you'll quickly realise this is a bad idea because if you want to style multiple pages consistently you'll need to cut & paste the same style definitions into the head of every page.

Importing styles from a css file

Instead you are much better off defining your styles in a separate file which can then be 'imported' into every page

HTML

<!DOCTYPE html>

        <html>

        <head>

          <title>Title of the Page</title>

          <link rel="stylesheet" href="mystyles.css">

        </head>

        <body>

In general importing your styles from files (yes you can import multiple css files) is the best option, but you can also import common styles from css files in conjunction with defining page specific styles inline. This can be helpful to prevent common css files becoming overly cluttered.