Code
Here I will be giving some quick tips before we go onto the templaces. In this section, if something is highlighted blue like this; that means you’ll be changing it to the HTML or CSS of your choice. If it is highlighted pink like this; you will be changing the URL to one on your site. Tips aimed at people who have never used CSS or HTML before will be in a bordered box and highlighted orange. Text you can change is in green.
Image Code and Styling
There are many style tags you can add to images, but here’s some common ones to get you started. If you check the sample codes, you’ll find some others to try for yourself!
If there’s anything you want to try, there are plenty of guides online that cover every possible thing you can do with images. If you have an idea, don’t be afraid to have a look around and learn how to do it.
<img src="./image.png” style="…">
Examples of what you’re putting in that …
- width: 33%; – Takes up 33% of the screen width ways
- max-height: 100px; – Won’t let the image appear bigger than 100px
- object-fit: cover; - If you have set the image size, this will change it from the image resizing to it getting cropped
Text Code and Styling
There are many different kinds of text tag but the main ones you will use are;
<h1>, <h2>, ... <h6>- Headers<p>- Paragraph
Some code for styling your text is;
<br>- Linebreaks; a smaller break that<p>does<span>- Targets a specific section of text within a paragraph; used in combination with CSS (style)<textarea>- Creates a scrollable textbox that will display code as plain text<blockquote>or<q>- Signifies a quote, which is typically marked by indentation;<q>is preferred for short quotes. You can stylise how block quotes are displayed with CSS on your style.css page<strong>- Adds emphasis to the contained text, typically by presenting it in bold<em>- Adds emphasis to the contained text, typically by presenting it in italics<s>- Strikes through the contained text<u>- Underlines the contained text<strike>- Old form of<s>and can cause compatibility and accessibility issues<b>- Old form of<strong>and can cause compatibility and accessibility issues<i>- Old form of<em>and can cause compatibility and accessibility issues
If you wanted to black out spoilers and have it so they have to be highlighted to be revealed, you could do so as;
<span style="background-color: black; color: black">These Are Spoilers</span>
This creates a black box around the text and makes the font the same colour. “Black” can be changed to any colour you like if you want it to match your colour scheme!
Some other CSS you can put in the style tag are;
- text-align: center; – centers the text on the page
- text-decoration: underline green wavy 2px; – Underlines the text with a wavy green line that is 2 pixels thick; there are many kinds of text decoration, and you can experiment with colours, thicknesses, and styles!
- text-transform: capitalize; – Capitalizes the first letter of each word! Can also set to uppercase or lowercase!
There are many ways to stylise text, so for more indepth guides, you can look up your specific idea and see if CSS has a solution for you, or if you’re going to be getting creative!