Is there a way to modify the color of ASCII art letters within HTML's <pre> tags?

For this illustration, I aim to transform the letter "y" into a shade of blue.

 ,ggggggggggggggg     
dP""""""88"""""""     
Yb,_    88            
 `""    88            
        88            
        88  gg     gg 
        88  I8     8I 
  gg,   88  I8,   ,8I 
   "Yb,,8P ,d8b, ,d8I 
     "Y8P' P""Y88P"888
                 ,d8I'
               ,dP'8I 
              ,8"  8I 
              I8   8I 
              `8, ,8I 
               `Y8P"  

Answer №1

If you're searching for a solution, try this out:

.y-text {
  color: blue;
  position: absolute;
  top: 82px;
  left: 80px;
}
<pre>
  ,ggggggggggggggg     
dP""""""88"""""""     
Yb,_    88            
 `""    88            
        88            
        88  
        88 
  gg,   88  
   "Yb,,8P 
     "Y8P'    
</pre>
<pre class="y-text">
  gg     gg 
  I8     8I 
  I8,   ,8I 
 ,d8b, ,d8I 
 P""Y88P"888
       ,d8I'
     ,dP'8I           
    ,8"  8I 
    I8   8I 
    `8, ,8I 
      `Y8P"         
</pre>

Simply separate the two letters and place them each in their own <pre> tag. Then, rearrange the letters using absolute positioning.

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

Tips for properly styling the input type range element

Is there a way to fix the issue with my input type="range" styling using linear-gradient when the variable is set to 75%? It seems to be behaving incorrectly. body{ background: green; } .wrapper { width: 20vmin; } input { widt ...

Having trouble displaying an image on a subpage in HTML

I've been struggling to display an image on one of my subpages using HTML. I suspect that the issue lies in how I am referencing the image file in the code. The image file is named crab.jpg and it is stored inside the pics folder within the Websites d ...

Injecting SVG styling into HTML using the content tag and CSS

I am working with 3 different files: index.html <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="style.css" /> </head> <body> <i class="logo myRed" aria-hidden="true"></i> ...

The edges of the cube are not joined together

Looking for a 3D transform cube that can freely flip left and right, with the button fitting into it perfectly. I've found the CSS code to achieve this, but when I set the width of the ".cube" below 200px, the borders of the cube don't connect. I ...

Using the base tag in Angular HTML5 mode can cause script links to break

Issue Following the configuration of a base tag to enable Angular 1.x in HTML5 mode, encountering an error where the browser (Chrome) sends requests to an incorrect path for scripts when directly accessing the app via localhost:3000/resource/id. Specific ...

Discovering the proper method to reach the parent element in jQuery while within the click event

How can I use jQuery to access the parent element within a click event? $(document).ready(function () { $(".lv1 li").click(function (event) { this.parentElement.parentElement.textContent = this.textContent; $.ajax({ type: 'post&apo ...

Storing an HTML page in a PHP variable, parsing it, and displaying it correctly

I am currently using the simple_html_dom parser to extract information from an HTML page. After making some modifications, I would like to display this content on my own page. $page = file_get_html($url); foreach($page->find('div#someDIv') as ...

What is the best way to increase the spacing between inline-block elements?

Just to clarify, I am not looking to delete space between inline-block elements - rather, I want to insert it. My goal is to create a grid of menu items that can accommodate 2, 3, or 4 items per row, and I hope to achieve this using media queries. Is the ...

Show whether the day is even or odd with the JavaScript getDay object

I'm currently working on a task where I need to show the text "Even Day" if the day of the month is 2, 4, 6..., and "Odd Day" for days such as 1, 3, 5, and so on. I attempted to achieve this by setting up an array linked to the getDay object, but unfo ...

The perplexing phenomena of Ajax jQuery errors

Hey there! I'm having a bit of trouble with ajax jquery and could use some guidance. $.ajax({ type:"get", url:"www.google.com", success: function(html) { alert("success"); }, error : function(request,status,error) { alert(st ...

Attach the element to the bottom of the viewport without obstructing the rest of the page

My challenge is to create a button that sticks to the bottom of the viewport and is wider than its parent element. This image illustrates what I am trying to achieve: https://i.stack.imgur.com/rJVvJ.png The issue arises when the viewport height is shorte ...

Unexpected error occurs when modifying HTML5 video source using JQuery on Internet Explorer

Currently, I am working on developing a web application using asp.net, Bootstrap, and JQuery. While testing it on LocalHost, I encountered an issue that needs debugging. The navigation bar of my application has a dropdown menu with links to tutorial video ...

How to turn off validation for md-input-container in Angular 2

While working on a form in Angular 2, I encountered an issue when adding the required attribute to my <input>. The problem resulted in unwanted margins as shown in this image: I am seeking a solution to only apply the second red margin to the input ...

The styled components can create identical CSS classes with varying conditions

Below are the CSS styles I am currently using: import styled, { css } from "styled-components"; const H4 = css` font-family: "Futura"; font-style: normal; font-weight: 500; font-size: 20px; line-height: 140%; color: #3a786a ...

Experience a unique double scrolling effect using the react-spring parallax and react-three-fiber Canvas components

My goal is to create a scrolling box with a parallax effect, but I'm facing an issue where it won't bind with the Canvas element, even when both are included under the same div. In the screenshot provided, you can see div1 and div2 each having t ...

Issues with Bootstrap glyphicon not functioning correctly on mobile devices and Internet Explorer

Within my template, there is a navigation button positioned on the left side of the page that remains fixed as the user scrolls down. When clicked, this button triggers a menu to appear. Embedded within this button is a bootstrap glyphicon: <div class ...

Python Selenium: Troubleshooting the get_elements method not retrieving li items within ul tags

I am facing an issue while trying to retrieve li items within a ul element using the following code: driver.get('https://migroskurumsal.com/magazalarimiz/') try: select = WebDriverWait(driver, 10).until( EC.presence_of_element_locate ...

Android Gmail Application: Implementing 1px horizontal spacing between inline images placed within <td> tags

Have you ever noticed that in the Android Gmail app, there can be a mysterious 1px gap between inline images? This little pixel problem can sometimes push the rightmost image outside the comfy frame of your email. It seems this glitch prefers images of cer ...

Tips for inserting a pin into a designated location on an image map

Within my angular application, I have implemented an image map using the HTML usemap feature. Here is the code snippet: <img src="../../assets/floor2.jpg" usemap="#floor2Map"> <map name="floor2Map"> <area shape="pol ...

The distance separating the top navigation bar from the sub-navigation menu

I have designed a navigation menu with a subnavigation section, view it on JSFiddle with subnavigation. My challenge is to create a 1px solid white separation between the top navigation (with yellow background) and the subnavigation (with red-colored backg ...