CSS Combinators
CSS combinators are used to target specific areas of an HTML file. They are very useful as they prevent the programmer having to put too many "class=" attributes within the…
Responsive websites
This methodology used 'float' to position elements in the browser. <!-- index.html --> <!DOCTYPE html> <html> <head> <title>My website</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="UTF-8"> <link rel="stylesheet" a href="browser-reset.css"> <link…
Inserting images with HTML and CSS
Basic image with HTML 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 href="style.css"> </head> <body> <div class="menu-content-wrapper"> <h1>My picture</h1> <img src="img/myImage.jpg" alt="park…
Wrappers – beginning to control layout
I've added a wrapper to my code. A wrapper essentially has several functions. 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 href="style.css">…
Links within pages
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'…
Using different fonts in CSS that are not available in browser
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.…
Styling text with css
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…
CSS classes and IDs
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…
Comments inside HTML and CSS
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…
Reset browser specific inbuilt style sheets
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…