LET'S GET INTO IT

Basic text

to make regular text use <p> elements and nest your text within it like this:
<p> text </p>
To create headings we will use <h></h> elements
<h1></h1> h1 is the largest size but you can also use:
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
for varying degrees of size

h1 looks a bit like this

While h6 looks like this

Aligning text

so now you know how to write stuff down but what if you want your text to align in the center of the page or on the right??

Like this

or this??

well we would need to style our <p> tag using "text-align"

here's how you can align text:

Font weight:

you can make text bold using <b> or you can make it italic by using <i>

e.g.

Adding text decoration:

There's loads of different text-decorations you can stack onto one thing but here are some basics

underline

overline

it would be written like this:

<p style="text-decoration: underline;"> </p>

different styles for your text decorations:

dashed
dotted
wavy
double

now with these you can also change the colour and style of these elements

first you can change how thick the lines are by using px.
You can also change the color and style of the lines

take this like from earlier: <p style="text-decoration: underline;"> </p> and add a color to it like this:

<p style="text-decoration: underline red;"> </p>

Now add px and a style:

<p style="text-decoration: underline red 3px dashed;"> </p>

now this text

will look like this!!

Inserting Images!!!

this is a image with no styling

<img src="img url here">

Heres how you align a img:

You can align imgs in these ways

align: left
align: right
align: top
align: bottom
align: center
align: middle

Styling imgs

want to make an img bigger or smaller? define it's height using px

<img style="height: 100px;" src="url here">

want to add a border? use the same things we learned when adding text decoration

<img style="height: 150px; border: 3px dashed red;" src="url here">

want to rounf the corners? this is when we use Border-radius

<img style="border-radius: 10px;" src="url">

<img style="border-radius: 100px;" src="url">

Let's add it all together

using our knowledge of inserting an image, aligning it, adding borders and rounding the corners, i challenge you to recreate this with any img you want