Working with Text - Working With Text Lesson H

The Odin Project
1

Tell us what’s happening:

How do you use the list-style-type in html to show in the website when it is CSS? I have tried multiple times but it doesn’t show if I input at CSS or at HTML

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 18_4_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/133.0.6943.120 Mobile/15E148 Safari/604.1

Challenge Information:

Working with Text - Working With Text Lesson H

2

show your code please

3 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My First Website</title>
	</head>
	<body>
		My First Website
		<p>I am learning how to code</p>
		<p><strong>I would use it to create my own tech company</strong> <em>that would marvel the world</em></p>
		<!-- <em> is used to italize a text -->
		
		<!-- this is an ordered list -->
		<ol> 
		<li>List 1</li>
		<li>List 2</li>
		<li>List 3</li>
		

		
 	</ol>

	</body>
</html>

body {
    font-size: 15pt;
}

ol {
    list-style-type: upper-alpha;
    background-colour: pink
}
4

I’m trying to change the ordered list from numbers to something else using the below code but it’s not working and Ordin didn’t really make it clear how he did it from where I sit

5

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
6

you do not have a linked stylesheet or a style element where to write the css, you need to do that

7

Ok how do I do that? Do I need to enter a code for that?

8

yes, it should be somewhere in these lessons, or you can follow the Certified Full Stack Developer

CodePen automatically links the two, so you can also use that to do these experiments

anyway, you would need a style element to write in the html file
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/style

or a link to link a separate stylesheet

1 Like
9

Ok I’ll check it out. Thank you

10

It works now. Thank you