The Beginner’s Guide to HTML and CSS
Experience: Beginner
Requirements:
No prior knowledge of programming is required.
You can get away with using a standard text editor like “Notepad” on windows, but I would highly recommend downloading Microsoft Visual Studio Code (VSCode). This will help you to visualize the HTML as you code.
Tags
HTML stands for Hypertext Markup Language, and it’s what websites are built with. HTML consists of elements, called “tags”, that are used for organization of a website and also to help browsers and search engines know what to do with a website. For example, a paragraph within a page might have a paragraph tag like this
<p>I am a paragraph.</p> Notice that the paragraph has an opening:
<p>and a closing:
</p>A browser will not display the tags themselves, but the tags tell a browser how to handle whatever is inside them, in this case text.
You can test this by going to VSCode and creating a new HTML document. Open VSCode and open the “explorer” menu on the left-hand side. Click on the “new file” icon and name it “practice.html”.
Copy and paste:
<p>I am a paragraph.</p>Then save the file, open this file location within file explorer, and double click the file to open it in a browser.
The standard tags.
HTML documents generally have a standard set of tags to help browsers and search engine. Some of those tags are as follows:
<!doctype html>
<html lang=”en”>
<head>
<title>Example HTML Web Page</title>
<meta charset=”utf-8">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>It’s best practice to include all of these tags with every html document that you create. The “content” of a website would exist within the <body> tag, while the <head> tag is mostly for browsers and search engines, as well as including links to additional files to be included with your page like CSS. Lets try adding these elements to our page.
Notice that the browser already knows that the <h1> tag, which is a header tag, should have a larger and bolder font than the <p> tag. If we want to specify the font and size of some text within an html tag, we need to add styling. HTML styling is done with Cascading Style Sheets, or CSS.
In VSCode, create a new document called “practice.css”.
Add the following:
h1 {}
There are a few standard elements that exist across most HTML tags:
Font Family
h1 {
font-family: : 'Times New Roman', Times, serif;}
This is the font that will be used with the tag. It’s best to use several families, separated by commas, so that a browser will default to the next font in line if it does not know how to display one.
Font Size
h1 {
font-size: : 20px;}
This is the size of the text. There are several options for declaring sizes, but for this tutorial we will stick with the basic “pixel” sizes.
Font Color
h1 {
color: rgb(46, 122, 58)}
This is simply the color of the font.
Background
h1 {
background-color: black;}
This is the color of the background. Notice that I just used the name of the color rather than the color values. This is because browsers will all display colors like “black” and “white” the same, but a color such as “magenta” might be slightly different across browsers, so it’s better to use the actual red-green-blue values for specific colors like that.
Padding
h1 {
padding: 10px;}
Padding is an important element because it specifies how much space is between the outside of the element and the text.
Putting them together
Try adding all of these elements to your CSS page.
Now add a link to this CSS page within the header of your HTML page.
Open your HTML page within a browser to view your styling.
Congratulations, you have successfully created an HTML page and styled it using CSS. You are only three files away from creating a live website for free using Python’s Flask and Google App Engine.
