This is the second page to teach about HTML and CSS. If you have not learnt about the basics of HTML and CSS please go to the first page on this website.
HTML (advanced)
This section is more advanced, so I will be teaching you about unordered lists and ordered lists.
To start I will be teaching you about unordered lists.
The unordered list or <ul> tag makes different texts to be put in a list.
<li> means that the text that is enclosed in it is a list item.
For example:
In HTML
Hello1<br>
Hello2<br>
Hello3
Looks like,
Hello1
Hello2
Hello3
On the webpage.
But,
In HTML
<ul>
<li>Hello1</li>
<li>Hello2</li>
<li>Hello3</li>
</ul>
Looks like,
- Hello1
- Hello2
- Hello3
On the webpage.
The ordered list or <ol> tag makes different texts to be put in a list.
The ordered list has a subtle difference to the unordered list.
For example:
In HTML
<ol>
<li>Hello1</li>
<li>Hello2</li>
<li>Hello3</li>
</ol>
Looks like,
- Hello1
- Hello2
- Hello3
On the webpage.
As you can see the unordered list is bullet pointed, but the ordered list is numbered.
CSS (advanced)
This section is more advanced, so I will be teaching you about text-align and font-size.
For example:
If you wanted the main title to be in the middle of the page you would write
h1 {
text-align: center;
}
If you wanted to change the font size of a paragraph to 30px then you would write.
p {
font-size: 30px;
}
Bring it all together (advanced)
We are going to carry on with the code from the previous page.
<!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>
We are then going to add to an ordered list to the code, that has 4 items.
The following code is what you will 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>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
</body>
</html>
Next we are going to make the main title be in the middle of the page.
The following code is what you will 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;
text-align: center;
}
body {
background-color: Green;
}
p {
color: Red;
}
</style>
<body>
<h1>This is a Header.</h1>
<p>This is a paragraph.</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
</body>
</html>
Finally we are going to make the paragraph font size be 30px in size.
The following code is what you will 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;
text-align: center;
}
body {
background-color: Green;
}
p {
color: Red;
font-size: 30px;
}
</style>
<body>
<h1>This is a Header.</h1>
<p>This is a paragraph.</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
</body>
</html>