My lists are not being styled by Embedded and Internal CSS

I want the ingredients list to be styled in green, equipment list in red, and method list in blue using different CSS techniques. My external works fine for changing the color to red, but my internal styles don't seem to apply to the other lists.

<!DOCTYPE html>

<html>
 <head>
    <style>
     ol {color: blue; 
         font-style: italic;
        }
    </style>
  <title>Emily's Cooking Page</title>
<link rel="stylesheet" href="demo1.css" />
 </head>

<body>
 <h1>Cooking for Students</h1>
  <p>This page will show you how to make basic <b>macaroni</b> with all shop bought ingredients & how to store it properly</p>

  <img src="macaroni.jpg" width="104" height="142">

 <table>
  <tr><td>prep: 5 minutes</td></tr>
  <tr><td>cook: 30 minutes</td></tr>
  <tr><td>difficulty: easy</td></tr>
  <tr><td>quantity made: 3 to 4 meals</td></tr>
 </table>

<h2>ingredients</h2>
 <p>all found in Morrisons supermarkets</p>
  <ul style="color:green;">
    <li>250g pasta</li>
    <li>300g cheese sauce</li>
  </ul>

<h2>equipment</h2> 
  <ul style="color:red;">
    <li>saucepan</li>
    <li>wooden spoon</li>
    <li>oven with hob</li>
    <li>two to three tubs</li>
  </ul>

<h2>method</h2>
  <ol>
    <li>On oven, turn hob to high heat. Fill a large saucepan with water and place on hob, allow water to begin boiling.</li>
    <li>Once water is boiling, put all 250g of pasta into the saucepan and begin stirring with a wooden spoon.</li>
    <li>Boiling pasta for 20 minutes or until soft. Use a knife or fork to test how hard the pasta is.</li>
    <li>Take the saucepan off the hob and turn the hob down to a low heat. Using a sieve, drain all the water out of the saucepan and place pasta back into saucepan.</li>
    <li>Place saucepan back on the hob and add 300g of cheese sauce to saucepan.</li>
    <li>Mix the cheese sauce and pasta for 5 minutes</li>
    <li>Turn hob off. Spread the macaroni into two or three separate tubs and allow them to cool down. Alternatively, you can eat one serving straight after cooking.</li>
    <li>Once cooled down, place in fridge. To eat, place in microwave for 1 minute and a half, stir, then another minute (you can even add grated cheese on top after stirring).</li>
    <li>After two days, move tubs to the freezer, to de-frost, place tub back in fridge and allow for one day of defrosting in fridge before microwaving and serving.</li> 
  </ol>

 <p>Other Recipes:</p>
  <a href="https://www.bbcgoodfood.com/recipes/best-ever-macaroni-cheese-recipe">BBC GoodFood Macaroni Recipe</a>
 <p></p>
  <a href="https://www.foodnetwork.ca/everyday-cooking/photos/best-macaroni-recipes/">Food Network Macaroni Recipes</a>
</body>
</html>

Answer №1

All lists that are ordered must follow this particular rule.

ol {
  color: blue; 
  font-style: italic;
}

Hence, every ol should display in blue color.

The list of ingredients is represented by a ul with the inline style set to green:

<ul style="color:green;">
  <li>250g pasta</li>
  <li>300g cheese sauce</li>
</ul>

If you wish to have the equipment list displayed in red, you can do so by:

<ul style="color: red">
  <li>saucepan</li>
  <li>wooden spoon</li>
  <li>oven with hob</li>
  <li>two to three tubs</li>
</ul>

However, I recommend creating specific classes for each color.

For instance,

.color-blue {
  color: blue;
}

.color-red {
  color: red;
}

.color-green {
  color: green;
}
<ul class="color-green;">
  <li>250g pasta</li>
  <li>300g cheese sauce</li>
</ul>

<ul class="color-red;">
  <li>saucepan</li>
  <li>wooden spoon</li>
  <li>oven with hob</li>
  <li>two to three tubs</li>
</ul>

<ol class="color-blue">
  <li>On oven, turn hob to high heat. Fill a large saucepan with water and place on hob, allow water to begin boiling.</li>
 ...
 ...
</ol>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stylish CSS menu design

I am struggling to set up a top menu bar using float: left. How can I achieve the desired behavior for a top menu bar? The code snippet below demonstrates what I have tried so far: * { margin:0; padding: 0; } #menu { background-color: yell ...

Align dropdown navigation menu/sorting dropdown in the same position as the button

Exploring the world of dropdown menus in CSS has led me to encounter some challenges. I am striving to ensure that the dropdown boxes appear on the same line as the button that triggers them. Below is the CSS code I have been working with: /* global style ...

Retrieve a collection of CSS classes from a StyleSheet by utilizing javascript/jQuery

Similar Question: Is there a way to determine if a CSS class exists using Javascript? I'm wondering if it's possible to check for the presence of a class called 'some-class-name' in CSS. For instance, consider this CSS snippet: & ...

Mobile media queries are ineffective despite implementing the viewport meta tag

I am facing an issue that even though I have tried various solutions, my media queries are not working on mobile devices after adding the viewport meta tag. Can anyone provide insight into why this might be happening? Update: Upon further investigation, I ...

Vue is currently operating in development mode

I keep receiving this notification each time I visit the site: Vue is currently running in development mode. Remember to switch to production mode when deploying for production. Find more helpful tips at .... I came across a solution from someone suggest ...

Whenever I try to open my jQuery UI Dialog without first displaying an alert, it does not work

Beginning of my HTML page, initializing a dialog : <script type="text/javascript"> $(function() { $( "#dialog-confirm" ).dialog({ autoOpen: false, resizable: true, height:180, width:300, modal: true, buttons: { "Yes": ...

Is it possible for me to input a variable into the logical process of if(isset($_FILES['whatever']))?

I have recently started learning PHP and I'm in the process of creating a dynamic page that will update based on which form buttons are clicked. The functionality is working correctly, but my goal is to enable users to upload multiple files - either P ...

Delete all HTML functionalities

Is there a way to strip HTML functions when using a text area so that the content shows as plain text in a new post (div)? For example, if I type "Hello", I want it to appear as "< b > Hello < b / >", showing the whole code. Here is the code snippe ...

Is it possible to create a resizable menu without distorting its appearance?

After setting up a menu on my website, I noticed that when resizing the window, it spills over into other divs on the same line. Despite trying multiple solutions, I have been unsuccessful in resolving this issue. The navigation for the menu is contained w ...

The URL requested exceeds the maximum length limit in asp.net, causing a 414 error

I encountered the issue of receiving an "HTTP Error 414. The request URL is too long." While reading through this article, I learned that it is caused by an excessively lengthy query string: Currently in my web.config, I have set maxQueryStringLength to " ...

Is it possible to incorporate HTML content into the metadata within the head section of a Nuxt application?

Received HTML content from the backend that needs to be incorporated into the meta tag of the HTML head using nuxt. Encountered an error when attempting to display the received content View Error Outlined below is the code implementation: Snippet of Code ...

Looking for an image that spans the entire height of the container

I need help with positioning an img inside a div container that has a background color. I want the image to overlay on top of the div, extending beyond its height without causing any scroll bars. Here is a fiddle related to this issue: http://jsfiddle.net ...

Tips for emphasizing the letters of the alphabet used in search functionality with Angular

Is there a way to highlight specific alphabets in the searched list instead of highlighting the entire word? Currently, when filtering the memberOffice and memberFacilities lists based on the alphabet entered in the search field, the entire text is highlig ...

Transform an iOS WebView into a user-friendly ebook reader

Typically, in a webview, you can scroll vertically like a browser if the page is too long. However, I am interested in transforming this experience to mimic an ebook reader. Rather than scrolling down, I would like users to be able to swipe to the next pag ...

The app is opening the index.html file instead of the expected index.jsx file

After creating a page with React.jsx, I encountered an issue where my page was initially opening index.jsx upon running npm start. However, when I deleted and then restored the index.html file to "public", the page started opening index.html instead. This ...

Exploring Google Go Templates for Creating Dynamic Websites using Multidimensional Arrays

In my struct example, I have a two-dimensional array: type Foo struct{ testArray[9][9] int } My goal is to access it using a template. For instance: tmpl.Execute(w, foo) //foo is a pointer to Foo struct and w represents the parsed html website How can ...

Footer not adhering to the bottom of specific pages

I have been using the code snippet below to ensure that most of my pages stick to the bottom. However, I've noticed that the ones that don't are sub-menu items that contain a contact form with captcha. I'm not sure what's causing this i ...

A step-by-step guide on modifying the box-shadow color using jquery

I have developed some JavaScript code that adjusts the box-shadow of buttons to be a darker version of their background color. This allows users to dynamically change the button background colors. The current code successfully changes the box shadow based ...

How to set a default checked value in a custom DropDownList in AngularJS?

I have created a bespoke DropDownList in my HTML code. I'm looking for guidance on how to set one of the options as default within the following scenario: <div class="dropdownlistheader" ng-click="toggle('subdiv','item')"> ...

What could be causing the appearance of a mysterious grey box hovering in the upper left portion of my image and why is the code only adjusting the size of the grey box instead of the entire

I've been working on embedding some JavaScript into my Showit website to create a drag-and-drop feature that displays a collage/mood board effect. Everything is functioning correctly, but I'm running into issues with resizing the images. There&a ...