Adjusting particular phrases within a block of text using CSS styling

My attempts to bolden a specific sentence within a paragraph have not been successful so far. I tried using various tags and pseudo-elements but nothing worked as expected. Any suggestions or ideas on how to achieve this?

To clarify, I want the sentence to remain a part of the paragraph without getting separated. I also aim to learn how to target individual words or sentences within a paragraph for future reference.

I am developing this application in ReactJs, in case that information is relevant.

HTML

Who We Serve
    <p>
      We are passionate for the local church. Our mission is to come
      alongside the local church to help them empower, equip, and release
      more of God’s people to do the work of the ministry.
    </p>

    <img
      src={WhoWeServe}
      alt="Lanier Family"
      className=" lol__WhoWeServe-image2"
    />
  </div>

CSS

    .lol__WhoWeServe-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  display: inline-block;

  margin-left: 2rem;
  padding-left: 0rem;
  padding-top: 1rem;
}

.lol__WhoWeServe-heading h1 {
  font-family: var(--font-family);
  font-weight: 800px;
  font-size: 24px;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;

  color: black;
}

.lol__WhoWeServe-heading p {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  display: flex;
  line-height: 30px;
  text-indent: 50px;

  margin-left: 1rem;
  padding-bottom: 2rem;

  color: #525252;
}

.lol__WhoWeServe-heading > p {
font-weight: 800;
font: 16px;
color: black;
}

Answer №1

By successfully executing the span element, you can customize specific text within another element. Unlike block-level tags like p or H, the span element functions as an inline container, preserving the sentence structure. Experiment with the code snippet below to witness its power when applying classes and CSS to alter the appearance of select words in a sentence. Feel free to adapt this example to address your own needs.

div {
  max-width: 450px;
  margin: 0 auto;
  padding: 2rem;
}

.text-drop-cap {
  font-size: 50px;
  font-family: "Playfair Display";
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  margin-right: 5px;
  color: #a3b2a4;
}

.text-bold {
  font-weight: 900;
}

.text-uppercase {
  text-transform: uppercase;
}
<div>
  <p><span class="text-drop-cap">L</span>orem ipsum dolor sit amet, <span class="text-uppercase">consectetur</span> adipiscing elit, sed do eiusmod <span class="text-bold">tempor incididunt</span> ut labore et dolore magna aliqua.</p>
</div>

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

Displaying selected dropdown data in a textbox

How can I display the selected dropdown value in a textbox? This is my unique design concept. Here's the PHP code I put together for a dropdown list... <?php $con = mysql_connect("localhost","root",""); if (!$con) { die('Could n ...

Determine changes in data retrieved from a JSON file using React

I've been working on a cryptocurrency app using React and a JSON API to fetch the latest data. My approach involves using fetch to load the JSON API and setInterval to refresh the app every 10 seconds. Now, I'm wondering if there's a way to ...

When setting an empty URL with Fabricjs' setBackgroundImage function, a null reference error occurs in the _setWidthHeight

Recently, I stumbled upon an article detailing a method to clear the background of a fabric canvas... canvas.setBackgroundImage('', canvas.renderAll.bind(canvas)); In the development of my online design tool which utilizes Fabricjs 1.4.4, I have ...

Angular 15: Utilizing the Mat Slider Component for Dynamic Value Adjust

This particular code worked perfectly fine in Angular 14, but unfortunately it seems to have compatibility issues with Angular 15. <mat-slider min="1" max="150" step="10" ...

Revamp MUI class names with React Material UI's innovative randomization and elimination

Can names be randomized or Mui-classNames removed? https://i.stack.imgur.com/J6A9V.png Similar to the image displayed? (All CSS class names would be jssXXX) Appreciate your assistance. ...

The button works properly in JSFiddle, however, it is not able to clear the ordered list in the

DEMO Creating a script that captures mouse click coordinates and appends them to a list. The functionality works, except for an issue with the clear button not working properly. After making corrections in jsfiddle, the script functions correctly. Howeve ...

JavaScript successfully adjusted the width, yet the element remains unresponsive to clicks

After setting up my div to expand on href click, everything seems to be working properly. However, I am facing an issue where clicking on the expanded area of the div does not collapse it. This problem is specific to my browser (Firefox) and I can't s ...

Tips for creating SCSS shorthand for an Array value color within a property

I've got a SCSS file containing an array of color values. export const COLORS = { transparent: 'rgba(0,0,0,0)', primary: '#09596e', primary01: '#317D92', primary02: '#6BADBF', primary03: '#97C6D2& ...

The reason for the issue stating 'ReferenceError: xmlHttpRequest is not defined' is likely due to the presence of certain IDs

Basically, I am trying to insert values into my database using Ajax in a WordPress custom template called company-update/?update=. This way, the page will not refresh and each record can be inserted individually. I have created a form along with JavaScrip ...

Access information from multiple div elements using JavaScript data-attributes

Having trouble retrieving data-attribute values from multiple divs with the same class when clicked. The goal is to display the data value of the clicked div. function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`) ...

Preventing React setState from replacing the entire object

When attempting to update a customer's age using setState, the object is altered before calling setState, but the existing object is not updated. customerOnChange(event, field) { //Customer's age currently set at 80 var customer = { ...t ...

Creating a design that resembles boxes for the div elements while ensuring the grid layout remains undisturbed

Hey there! I'm new to using Bootstrap and I'm trying to create boxes that look like the ones on the right side of this page: Unfortunately, I haven't had much luck so far. I tried using padding, but it messed up my grid system. I assigned a ...

Utilizing jPlayer to play music files uploaded using Paperclip in a Ruby on Rails application with the help of jQuery

Just wanted to say thanks in advance for any help. Currently, I am storing songs in a filesystem using Paperclip and attempting to play them with jPlayer. Despite following all the necessary steps, I am unable to get the audio to play when clicking on a ...

How can I design a trapezoid with see-through borders and background?

Using various CSS border tricks, it's possible to create a trapezoid shape. Additionally, setting the border-color to rgba(r,g,b,a) can make it transparent. However, is there a way to create a trapezoid with both transparent borders and background? ...

React Native is throwing a TypeError because it is encountering an undefined object

React Native is throwing an error claiming Undefined is not an object when it's clearly an object!! I'm confused about what's happening. Take a look at the code snippet below. Scroll down to the render() function. You'll see the follow ...

Grid layout with Tailwind

I'm facing a challenge in my Angular project where I need to create a grid layout with 2 rows and 6 columns using Tailwind CSS. The actors array that I am iterating through contains 25 actors. My objective is to show the first 12 actors in 2 rows, fo ...

An issue during the build process: HookWebpackError occurred, indicating that [object Object] is not recognized as a PostCSS plugin. This error surfaced after upgrading to the newest

After upgrading to the latest version of next.js and removing the ziet/next CSS module, I encountered an error when trying to build my app in production. Despite not using postCSS in my application, the error persists. Below is a snippet of my next.confi ...

Tips for incorporating an alt attribute into image tags using jquery

I recently inserted a Google map into a webpage and noticed that it generated multiple img tags without the alt attribute. I'm looking for a way to dynamically add the alt attribute to each img tag within a div using jQuery. Can someone suggest an alt ...

What is the role of z-index in relation to floating elements?

Why is it impossible to assign a z-index to a floated image and what are the reasons behind this limitation? ...

Tips for deactivating dropdown values based on the selection of another dropdown

There are two dropdown menus known as minimum and maximum, each containing numbers from 1 to 25. If a value is selected from the minimum dropdown (e.g. 4), the maximum dropdown should only allow values that are equal to or greater than the selected value ...