CSS code not working

Language Help CSS
1

Hi, Im trying to create my first webpage with html and css, and the css isn’t working correctly.

<ul class="ingredients">
	    <li>250g ready-made or fresh gnocchi</li>
		<li>200g Tinned tomatoes</li>
        <li>Half of a large Aubergine</li>
        <li>Half of a red pepper</li>
        <li>1 small red onion</li>
        <li>2 cloves of garlic</li>
        <li>Black pepper</li>
        <li>Fresh or dried basil</li>
        <li>Mozzarella</li>
        <li>Grated Parmesan cheese</li>
        <li>Olive oil for frying</li>
	  </ul>

css command:

.ingredients {color: blue;
}

Can anyone help? Thanks

2

We can help if we have a context, such as a link to the exercise. Please post it in a reply, or your opening post if you can still edit it. Thanks.

Edit

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ingredients</title>
<style>
.ingredients {
  color: blue;
}
</style>
<body>
  <ul class="ingredients">
    <li>250g ready-made or fresh gnocchi</li>
    <li>200g Tinned tomatoes</li>
    <li>Half of a large Aubergine</li>
    <li>Half of a red pepper</li>
    <li>1 small red onion</li>
    <li>2 cloves of garlic</li>
    <li>Black pepper</li>
    <li>Fresh or dried basil</li>
    <li>Mozzarella</li>
    <li>Grated Parmesan cheese</li>
    <li>Olive oil for frying</li>
  </ul>
</body>
</html>

prints with blue text. Is your CSS in an external file that needs to be linked?

3

Hi, thanks for the reply. Here is the full html code:

<!DOCTYPE html>
  <html>
    <head>
	<title>Baked Gnocchi</title>
          <link href="Baked gnocchi.css" type="text/css" rel="stylesheet">
	</head>
    <body>
	  <img src="C:\Users\Duncan\Desktop\Coding\Baked gnocchi.jpg" />
	  <h1>Baked Gnocchi with Tomato and Basil</h1>
	    <p>Gnocchi are small dumplings made from potato, flour and cheese. Gnocchi are eaten as a first course as an alternative to soup or pasta.<br>
        The word gnocchi may be derived from the Italian word nocchio, meaning a knot in wood or from nocca, meaning knuckle.<br><br>
        This dish uses the classic Italian flavours of tomato, basil and mozzarella along with diced aubergine. Serve with ciabatta bread and fresh rocket.</p>
	      <h2>Time taken: 1 hour</h2>
	        <h2 class="servings">Serves 2 people</h2>
		<h3>Ingredients</h3>
	  <ul class="ingredients">
	    <li>250g ready-made or fresh gnocchi</li>
		<li>200g Tinned tomatoes</li>
        <li>Half of a large Aubergine</li>
        <li>Half of a red pepper</li>
        <li>1 small red onion</li>
        <li>2 cloves of garlic</li>
        <li>Black pepper</li>
        <li>Fresh or dried basil</li>
        <li>Mozzarella</li>
        <li>Grated Parmesan cheese</li>
        <li>Olive oil for frying</li>
	  </ul>

	<h3>Method</h3>
	  <ol class="instructions">
	    <li>Weigh out and gently boil the gnocchi until it comes to the surface. Drain and set to one side.</li>
        <li>Finely dice the red onion, red pepper and aubergine. Crush and roughly mince the garlic cloves.</li>
        <li>Add some olive oil to a frying pan, and when hot, add the red onion and garlic. Stir for a few minutes making sure not to brown.</li>
        <li>Add in the red pepper, aubergine and tinned tomatoes. Cook on a medium heat until soft.</li>
        <li>Roughly chop the basil if fresh, and add to the pan. Add in the drained gnocchi, making sure the sauce coats each piece.</li>
        <li>Remove from the frying pan, and add to a oven proof dish. Tear some mozzarella and spinkle on top. Finish off with grated parmesan and black pepper.</li>
        <li>Cook in the oven for 20 minutes or until the cheese is golden brown.</li>
	  </ol>
       
	   <p>For more gnocchi inspiration, click here!</p>	   
	</body>
  </html>

Here is the css, in a separate file:

h1 {font-weight: bold; font-family: Helvetica;
}
.ingredients {color: blue;
}
4

Please upload the JPEG so we can see it in the page. FYI, the relative path to your image is all you need in the URL.

<img src="Baked%20gnocchi.jpg">

Note the encoding in the above. A friendly server will accept space characters in resource names, but it means extra work on the server and lost response speed (latency). With encoding the server can skip that step (search for possible matches). By not using spaces at all, but underscores or dashes we make resource names absolute. It’s also a good idea to keep all URI’s lowercase to reduce typing errors.

<img src="baked_gnocchi.jpg">
<img src="baked-gnocchi.jpg">
<img src="bakedgnocchi.jpg">

Choose one convention and stick with it. Your code will gain in consistency.

5

Hi, thanks for the advice. I’ve got some CSS to work but am now having trouble with adding a background picture:

Baked Gnocchi

Baked Gnocchi with Tomato and Basil

Gnocchi are small dumplings made from potato, flour and cheese. Gnocchi are eaten as a first course as an alternative to soup or pasta.
The word gnocchi may be derived from the Italian word nocchio, meaning a knot in wood or from nocca, meaning knuckle.

This dish uses the classic Italian flavours of tomato, basil and mozzarella along with diced aubergine. Serve with ciabatta bread and fresh rocket.

Time taken: 1 hour

Serves 2 people

Ingredients

  • 250g ready-made or fresh gnocchi
  • 200g Tinned tomatoes
  • Half of a large Aubergine
  • Half of a red pepper
  • 1 small red onion
  • 2 cloves of garlic
  • Black pepper
  • Fresh or dried basil
  • Mozzarella
  • Grated Parmesan cheese
  • Olive oil for frying
<h3>Method</h3>
  <ol class="instructions">
    <li>Weigh out and gently boil the gnocchi until it comes to the surface. Drain and set to one side.</li>
    <li>Finely dice the red onion, red pepper and aubergine. Crush and roughly mince the garlic cloves.</li>
    <li>Add some olive oil to a frying pan, and when hot, add the red onion and garlic. Stir for a few minutes making sure not to brown.</li>
    <li>Add in the red pepper, aubergine and tinned tomatoes. Cook on a medium heat until soft.</li>
    <li>Roughly chop the basil if fresh, and add to the pan. Add in the drained gnocchi, making sure the sauce coats each piece.</li>
    <li>Remove from the frying pan, and add to a oven proof dish. Tear some mozzarella and spinkle on top. Finish off with grated parmesan and black pepper.</li>
    <li>Cook in the oven for 20 minutes or until the cheese is golden brown.</li>
  </ol>
   
   <p class="link">For more gnocchi inspiration, click <a href="https://www.thespruce.com/classic-sauces-for-gnocchi-995929" target="_blank">here!</a></p>
     	   
</body>

css code:

h1 {font-weight: bold; font-family: Helvetica; text-align: center;
}
p {color: green;
}
.ingredients {color: white;
}
.servings {font-style: italic;
}
.instructions {color: red
}
.link {color: black;
}
body {background-color: peru;
}
.main-banner {background-image: url(“Images/93.jpg”);
}

The image is called 93, and is in a folder called Images in the same folder as my html and css files. I don’t want the background color as peru! Why isn’t the css working?

6

I have to format the above code in order to read it. If you could do that, it would benefit us all. Check new user guidelines for advice.

7

Basically, my css won’t work if there is a class or a div. I dont understand what I am doing wrong?

8

Nor can we with no bearing. Please post a link to the exercise page in question and we may proceed from there. Thank you.

9

Its not an exercise, Im practicing with my own page.

10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.