This website is here to teach you the very basics about HTML and CSS, I am also new to HTML and CSS. This is my first project that uses CSS so we are on the same page. I am a very fast learner so I am able to take in information very quickly and understand it very easily. This might not be you but it is alright because hopefully this website helps you explore the world of HTML and CSS.
In this webpage the CSS will be within the HTML file, usually the CSS is in a different file but they are in the same file to simplify it.
HTML (basic)
What is HTML, HTML stands for HyperText Markup Languge. This means that HTML tells the browser how to structure the webpage using tags.
One of the very basics of HTML is the <h1> tag. This is a header tag. This is kind of like the title of the page.
There are 6 header tags, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
The <h1> tag tells the browser what the page is all about, there is nothing wrong with having multiple <h1> tags, but is is usually standard to only have one.
To use the tags you enclose strings of text within the tags.
For example:If you want HELLO to be a the main title you would write.
<h1>HELLO</h1>
The forward slash on the second tag is to show it is a closing tag.Some tags don't need a closing slash.
Another tag that is commonly used is the anchor or <a> tag. This tag allows you to link to other files. It is mostly used to open other pages on the website.
To use the <a>:If you want to link to a HTML file called Happy, and you wanted to have the link say next page then you would write.
<a href="Happy.html">next page</a>.
A tag that doesn't need a forward slash is the break or <br> tag. The <br> tag makes a break in the text.
For example:In HTML
Hello this is a line.
Hello this is a line.
Would look like, Hello this is a line. Hello this is a line. on the webpage.
But,
In HTML
Hello this is a line.<br>
Hello this is a line.
Would look like,
Hello this is a line.
Hello this is a line.
On the webpage
The last tag that I will be talking about is the paragraph or
<p> tag. This tag turns the sentences that are enclosed in it to
a paragraph.
For example:
In HTML
Hello<br>
Hello
Would look like:
Hello
Hello
On the webpage. But,
In HTML
<p>Hello</p>
<p>Hello</p>
Would look like:
Hello
Hello
On the webpage.
CSS (basic)
What is CSS, CSS stands for Cascading Style Sheets. This means that it tells the browser how to display the HTML on the webpage.
CSS is alot more complicated than HTML.
For example:
If you wanted to change the background colour on the webpage to Green, you would write.
body {
background-color: Green;
}
If you wanted to change the text colour of the main title of the page to Blue, you would write
h1 {
color: Blue;
}
Bring it all together (basic)
To start you need to start with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
</body>
</html>
To add a main title called This is a Header. the code would be:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>This is a Header.</h1>
</body>
</html>
To add a paragraph called This is a paragraph. the code would be:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>This is a Header.</h1>
<p>This is a paragraph.</p>
</body>
</html>
Now to add some CSS.
To start adding CSS you should put <style> tags between the tags </head> and <body>, like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
</style>
<body>
<h1>This is a Header.</h1>
<p>This is a paragraph.</p>
</body>
</html>
Next we are going to make the Header blue.
The following code is what you need:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
h1 {
color: Blue;
}
</style>
<body>
<h1>This is a Header.</h1>
<p>This is a paragraph.</p>
</body>
</html>
Next we are going to make the Background green.
The following code is what you need:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
h1 {
color: Blue;
}
body {
background-color: Green;
}
</style>
<body>
<h1>This is a Header.</h1>
<p>This is a paragraph.</p>
</body>
</html>
Finally we are going to make the Paragraph red.
The following code is what you need:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
h1 {
color: Blue;
}
body {
background-color: Green;
}
p {
color: Red;
}
</style>
<body>
<h1>This is a Header.</h1>
<p>This is a paragraph.</p>
</body>
</html>