Creating menus
We create menus using the unordered list tags <ul></ul> and the list item tags <li></li>. Let's start with some raw html and see what it looks like. <!DOCTYPE html> <html>…
We create menus using the unordered list tags <ul></ul> and the list item tags <li></li>. Let's start with some raw html and see what it looks like. <!DOCTYPE html> <html>…
If we create another page of a website, we can link to it within our website using the <a href> </a> tags. e.g. <a href="about_me.html">About me</a> If the file 'about_me.html'…
By going to https://fonts.google.com/ we are able to use many new fonts on our websites. Method 1: Downloading from the internet We are able to select fonts for our website.…
First, let's start with just a basic HTML page. A link has been added as well so we can look at styling that too. index.html <!DOCTYPE html> <html> <head> <title>My…
Classes and IDs are used to target specific elements in a page. Using classes index.html <!DOCTYPE html> <html> <head> <title>My website</title> <meta charset="UTF-8"> <link rel="stylesheet" a href="browser-reset.css"> <link rel="stylesheet" a…
Often, it's a good idea to make comments in HTML and CSS code. These comments server the purpose to tell us in plain English what the code actually is, or…
All browsers have their own inbuilt style sheets and this can interfere with the look that you're trying to create from browser to browser. We can download this code and…
h2 { color: blue; font-size: 40px; margin: 50px; background-color: yellow; text-align: center; } p { color: #55CC77; background-color: rgb(120,20,56); } h3 { color: pink; font-size: 20px; margin: 0px; background-color: blue;…
<!DOCTYPE html> <html> <head> <title>My website</title> <meta charset="UTF-8"> <style> h2 { color: blue; font-size: 40px; margin: 0px; /* remove standard margin on all sides */ } </style> </head> <body> <div>…
Is a way of breaking up the page into boxes that can be moved and styled using CSS <!DOCTYPE html> <html> <head> <title>My website</title> <meta charset="UTF-8"> </head> <body> <div> <section>…