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

Compel the system to handle the file as if it were an

I am currently showcasing programming files on a website in plain, raw text format. I have now decided to implement syntax highlighting using HTML. While it has enhanced the appearance and functionality of the files, there is one issue - I need to create a ...

Adjust the x-scroll to continue infinitely while deactivating the y-scroll

Is there a method in CSS to prevent vertical scrolling and have all the contents of a div positioned next to each other so that they extend beyond the visible browser window? I would like to enable horizontal scrolling to bring them back into view. How c ...

The static sidebar on glass-themed website built with Bootstrap 5 is malfunctioning

Greetings Esteemed Developers I am a newcomer to web development and I have been practicing. However, I encounter difficulties with my CSS at times. Today, I have a query for you all; I am trying to create a fixed sidebar but I am facing challenges. Despit ...

What's the difference between using find_all on a bs4.element.ResultSet object and a list in Beautiful Soup

When I use the find_all method on a beautifulsoup object, it returns either an bs4.element.ResultSet object or a list. However, I am unable to directly apply the find_all method on the bs4.element.ResultSet object. One way to work around this is by loopin ...

Achieve smooth scaling of font size in CSS according to body width without the need for JavaScript

Can the font size be smoothly scaled in relation to the width of the body or parent element? I am seeking a solution that does not involve javascript. Is it feasible to relate rem to a specific width? ...

Add some text onto the Box Component in Material UI

I am looking to replicate the hover functionality (UI) seen in this example: Desired UI Source: Since adjusting background image styles can be complex, I have opted to use the Box Component from Material UI. Within the Box Component, I have implemented th ...

Dynamic Dropdown Options in Angular 6 HTML Input Field

Looking to create an interactive HTML5 input field that guides the user with their input. Consider a scenario where the user is required to follow a specific grammar while entering text: rule: <expression> {<op><expression>} expression: ...

Can html-webpack-plugin be configured to create <style> elements from CSS files?

I am managing a static site with Vue and Webpack. In my project, I have a file named style.css containing global CSS rules which I import using import './styles.css' in my index.js file. Additionally, I have some .vue files that generate their o ...

Achieving an IE7 opacity background while keeping the text unaffected

This is the given HTML code structure (view in JS Fiddle) How can I adjust the background color to be 20% opaque white while keeping the text black? It needs to be compatible with IE7. <ul class="menu"> <li class="first expanded active-trail ...

How can I make a Bootstrap 5 container adjust to the height of the screen?

I am currently working with Bootstrap 5 and facing an issue while displaying a calendar on the screen. The height of the container appears to be around 25% longer than the screen height. I have tried setting the height to "100%" and "80%" in the CSS, but i ...

A pop-up window displaying an electron error message appears, but no errors are logged in the console

In a Nutshell: While developing a single-page website with Electron, I encountered the common issue of jQuery not being globally accessible. To tackle this problem, I decided to simplify it by using a quick start example, but unfortunately, I'm strugg ...

Receiving a notification when attempting to log in with incorrect credentials

I am currently working on an Angular login page implementation using a username and password setup. When the user enters incorrect credentials, I want to display an alert message indicating the same. Here is the HTML code snippet for the form: <form [f ...

Troubleshooting: How can I ensure my custom scrollbar updates when jQuery niceselect expands?

I am currently utilizing the jquery plugins mCustomScrollbar and niceselect. However, I have encountered an issue when expanding the niceselect dropdown by clicking on it - the mCustomScrollbar does not update accordingly. I suspect this is due to the abso ...

Combination of written content and mathematical equations displayed on an HTML webpage

I've been tasked with creating something similar to the following on an HTML page: The math tag in HTML is not suitable because it struggles with handling the line break between parts "/begin()-/end()". To achieve the desired effect (succes ...

What steps do I need to take to link my form with Ajax and successfully submit it?

Here is my HTML code: {% extends 'base.html' %} {% block content %} <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Create a Recipe ...

Placeholder text missing in Internet Explorer 11

There seems to be a problem with the placeholder text not showing up in Internet Explorer 11 when using AngularJS. It displays correctly on all other browsers and I have not made any changes to the CSS that could affect it. I even tried disabling all style ...

Contrasting onevent with addEventListener

After studying various DOM events, I attempted to implement the 'blur' event on the HTML body. My first attempt was with onblur document.body.onblur = () => { dosomething(); } and I also tried using AddEventListener document.body.addEven ...

Adjust the alignment of an expansion panel header to the right using Vuetify

Incorporating the Vuetify expansion panel, I am aiming to align a specific portion of the content within the <div slote="head"></div> to the right, resulting in this desired layout: https://i.sstatic.net/tbOL8.jpg https://i.sstatic.net/22NTS. ...

The flex box structure crumbles, causing the boxes to align side by side instead of in a masonry layout

I'm currently facing a challenge with my project regarding the utilization of flexbox. Everything seems to be in order, but as you resize your viewport to around 1400px, the column layout collapses. I'm looking for a way to prevent this from hap ...

What is the best way to retrieve the current value of a header cell, including any nested headers?

My handsontable has headers that include checkboxes and select boxes. How can I access the headers to check the value of a select/checkbox inside the header cell? You can view an example in this JSFiddle (with nested headers - same as my project): http:/ ...