How do I make this list in the image

Asked

Viewed 30 times

-3

Well I’m learning html with css to input in php in the future but I’m having a hard time doing Div class with lists because it doesn’t apply the color etc... the color is in another file formatting.css need help plsinserir a descrição da imagem aqui

html

2 answers

0

How cool that you are venturing into this area of web development. What you are wanting to do is an import of a file css to your file html.

Suppose you created a project called shop and represented him through a folder named /loja. Your HTML and CSS files should be inside this folder for better organization. At the root of the folder there are two files that we can call index.html representing your HTML markup file and style.css representing your CSS styling file.

Note that the two files are in the root folder, i.e., inside the folder loja.

To import a style sheet (css style.) it is necessary to declare an element link in the scope of the element head.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
<body>    
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>    
</body>
</html>

The W3C Schools has great content for learning HTML and other languages of interest.

  • Thanks for the personal help

0


According to Victor’s response, you should import your CSS file into your HTML page. To change the bottom of the list, here is an example:

<html>
<head>
	<style type="text/css">
		li {
			list-style-position: inside;
			text-indent: -1em;
			padding: 10px 2em;
			background-color: #CCCCCC;
		}
		li.azul {
			background-color: #0000FF;
		}
		li.amarelo {
			background-color: #FFFF00;
		}
	</style>
</head>
<body>
<ul>
<li class="azul">Item 1</li>
<li class="azul">Item 2</li>
<li class="azul">Item 3</li>
<li class="amarelo">Item 4</li>
<li class="amarelo">Item 5</li>
<li class="amarelo">Item 6</li>
</ul>
</body>
</html>

  • Thanks for the help <3

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.