Personalization
Here's a few examples of ways you can personalize your website.
Changing Links
To change a link, replace https://example.com with the URL you'd like to use.
<a href="https://example.com">Click Here</a>
Result: Click Here
These can be a relative path (page.html), or absolute paths (https://example.com/page.html).
Sometimes, you'll want a link to open into a new tab when clicked. Here's how you can do that:
<a href="https://example.com" target="_blank">Click Here</a>
Result: Click Here
Changing Images
To swap out an image with another one, replace the image-location.png with the filename of the image you'd like to show.
<img src="images/image-location.png">
Result:
Image by Mockingjay1701.
These can be relative paths (img.jpg), or absolute paths (https://example.com/img.jpg).
Changing Text Size
Try changing the paragraph default font size with CSS:
p {font-size: 16px;}
You could also use inline styles to change the size of a specific section of text:
<span style="font-size: 28px;">This text is a different size.</span>
Result: This text is a different size.
Changing Font Style
You can use a different font this way:
<p style="font-family: courier;">This text uses a different typeface.</p>
Result:
This text uses a different typeface.
Changing Colors
There are three ways to express color in HTML and CSS: by using a color's name (Red), hex code (#FF0000), or RGB value (rgb(255, 0, 0)). Each have their own advantages and ideal uses. For making changes to an existing template, it might be smart to conform to what's being used already.
For example, let's use inline CSS to change a text's color below to red:
<p style="color:#FF0000;">This text is red!<p>
Result:
This text is red!
Here are a few more examples of changing color in CSS:
/* This would change the background color of the body to red */
body {background-color: #FF0000;}
/* This would change any H2 heading to red */
h2 {color: #FF0000;}
In general, "color" is assumed to be text color, and "background-color" is the color of the background.
To easily find colors to use, you can visit HTMLColorCodes.com and copy the values you want!