Achieving line-through styling for all links within a specific div ID and selectively bolding particular paragraphs without impacting the rest

This is the final version I need to create and right now I'm at this point.

How can I add a line-through in CSS to all elements within <a> without affecting other parts of the text?

Additionally, how do I bold mark the last paragraph borders like in the final version without bold marking everything? Feel free to suggest alternative ways for me to structure this text.

<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="utf-8" />
    <title>Assignment 4E</title>
    <style>
      html {
        background-color: lightslategrey;
      }

      body {
        margin: auto;
        width: 500px;
        padding-bottom: 0.1px;
        background-color: #f0ffff;
        text-align: center;
        font-family: sans-serif;

      }

      h1 {
        Color: purple;
      }

      #billy {
        color: darkred;
        border-style: solid;
        border-color: purple;
        border-width: 1.5px;
        border-radius: 5px;
        text-align: left;
        margin: 10px;
      }

      #bob {
        color: darkgreen;
        border-style: solid;
        border-color: purple;
        border-width: 1.5px;
        border-radius: 5px;
        text-align: left;
        margin: 10px;
      }

      p {
        margin-left: 5px;
        margin-right: 5px;
      }

      .two {
        font-size: large;
      }

      .three {
        font-size: small;
      }

      #bob>.two>a {
        text-decoration: overline underline;
      }
    </style>
  </head>
  <body>
    <h1>Assignment 4E</h1>
    <div id="billy">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p class="two">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p class="three">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
    </div>
    <div id="bob">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p class="two">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p class="three">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
      </p>
    </div>
  </body>
</html>
htmlcsscss-selectorstext-styling

Answer №1

To add a strike-through effect in your text, you can use the <s></s> (strike-through) tag or <del>. Note that the <strike> tag is no longer supported in HTML5.

Here's an example:

.two a {
  text-decoration: line-through;
  font-weight: bold;
}
<p>Rachel</p>
<!--Rachel in paragraph tags-->

<p><s>Rachel</s></p>
<!--Rachel in paragraph tags with inner 's' tags-->

<p class="two">My name is <a href="#">Rachel</a></p>
<!--line-through applied via css-->

You can also achieve this effect using CSS:

.yourclass a {
  text-decoration: line-through;
}

For making text bold, use font-weight:bold;.

I hope this explanation helps!

Answer №2

By assigning a custom class to an HTML element, you have the ability to create unique styles such as bold or line-through, and then easily apply them to specific paragraphs in your content.

Answer №3

Applying the style text-decoration: line-through; can create a strike-through effect. It's important to determine which elements will be affected by this style in order for it to work effectively.

If you want to emphasize the last paragraph of each div, you can use the following CSS selector:

div>p:nth-last-of-type(1) { font-weight: bold; font-size: 110%; }

Additionally, consider including the following CSS rule:

* { box-sizing: border-box; }

This will ensure that container sizes behave as expected and make aligning different parts easier.

Answer №4

give this a shot

#joe p:last-child {
   font-style:italic;
}
#joe p:not(.two) a {
   text-transform:uppercase;
}

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

Creating a progress bar that includes hyperlinks: A step-by-step guide

Currently, I am in the process of developing an application form that consists of 9 pages of questions. Initially, I had implemented a progress bar which indicated completion by filling up 1/9 for each page completed. However, I have been informed that thi ...

htmlcssprogress-bar

Using jQuery to adjust the scrollLeft property of a div upon clicking a label

I am attempting to enable horizontal scrolling on a div when a label is clicked. Unfortunately, my current code is not functioning properly. It appears that the code is unable to detect when a label has been clicked and is also failing to scroll the div as ...

jqueryhtml

Tips for Implementing Color-coded Manchu/Mongolian Script on Your Website

My journey began with a seemingly straightforward task. I had a Manchu word written in the traditional script and I wanted to change the color of all the vowels in the word (ignoring ligatures). <p>ᠠᠮᠪᡠᠯᠠ ᠪᠠᠨᡳᡥᠠ</p> < ...

htmlcssfontswebfontstext-rendering

What is the best way to incorporate a comment section in my existing comment box in order to display comments beneath it?

Is there a way to include a comment feature in my comment box so that comments are displayed beneath it? The comment box itself is set up, but this specific addition is missing. Here's my HTML code... <!DOCTYPE html> <html lang="en&quo ...

javascripthtmlcommentssubmit

Having trouble with loading multiple HTML files simultaneously in two webviews causing flickering?

With a total of 135 screens in my application, I understand that it may seem like an excessive number. However, due to project requirements, all screens need to be implemented as HTML files, stored in the assets folder, and loaded into two webviews with an ...

androidhtmlwebviewtransitionassets

inconsistencies observed in flex layout between webkit browsers (Chrome and Safari) compared to moz (Firefox)

I am experiencing unexpected behavior with flex on Mozilla (-moz-) and Chrome/Safari (-webkit-) Referenced the Mozilla tutorial to understand flex layout /** { border: solid; border-width: 0 1px; }*/ html, body { width: 100%; height: 1 ...

htmlcsswebkitflexboxmozilla

Extracting the contents of a Span tag that lacks a class attribute and is not present in every element

I am currently utilizing Selenium in Python to scrape a review page on the web. Specifically, I am interested in extracting the rating of each review (for example, extracting 7 from 7/10 in a review). The structure of the HTML element looks like this: ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Getting Started with Angular JS: A Beginner's Essentials

I am feeling lost on where to begin with developing my app. When I click the add button, I want a form to show up - should I append a div to that button? How should I approach this problem? Snippet of Code: <body> <div id="wrap"> <!- ...

javascriptjqueryhtmlangularjs

What is the method to reduce the gap between the label and field in Vuetify input controls?

Consider a custom Vuetify text field as an example (Playground) <template> <v-app> <v-container> <v-text-field label="label goes here" variant="plain" density="compact" ...

htmlcssvuetify.js

Is there a way to continuously click on a button 99 times or until the code finishes running?

Need Assistance, Please Assist. I am encountering an issue where I have the same type of skip button with identical name and id properties for all products, but only the xpath changes. Can you provide guidance on how to efficiently click on 99 similar ski ...

javascripthtmlseleniumtestingselenium-webdriver

The visibility of a password input in HTML

I have a question regarding changing an input tag of type password to an input type like visible-password. Instead of changing it to type text, I want to keep it as a type password but with the CSS rule like this: -webkit-text-security: none !important; ...

androidioshtmlcordova

Updating the chosen value in an HTML select menu dynamically using PHP

I understand that there are existing examples discussing how to dynamically set the selected tag in an HTML option tag. However, I am encountering a complex issue involving break statements and quotations while trying to accomplish this. In my code: whil ...

phphtml

Tips for accessing the target of a function call within Vue.js when it's within the {{ }} notation

Is it possible to use the $event notation with v-on in order to manipulate the source of the event, like in this example: <button @click="test($event.target)">Big red button, don't push it</button> I'm wondering if I can a ...

htmlvue.jsvuejs3

Prevent the transparent div from being displayed during the initial page load and only reveal it after the page has finished loading

I created a transparent div with text on top to enhance its brightness. However, the issue is that this div loads first when the page is initially loaded, which doesn't look good. I want the div to load after all other content on the page has loaded. ...

jquerycsshtml

Displaying a sneak peek of the desired image file for upload on the site

Is there a way to display a preview of the selected image before uploading it on the website? I am looking for a method where users can see the chosen file immediately after selecting it from their system. Can this be accomplished using HTML and jQuery? ...

jqueryhtmlfile-uploadpreview

Is it possible to utilize AJAX to split the text into two separate boxes instead of just one?

My HTML page is currently set up to fetch information from a database table and display it in a single text box. This process involves connecting to a PHP file using an AJAX function for handling the request. Now, I am considering the possibility of displ ...

phphtmlsqlajax

Looping through PHP keys to group and calculate matching values for each key

Presented here is my PHP array: Array ( [0] => Array ( [heigth] => 6300 [type] => A [length] => 2370 ) [1] => Array ( [heigth] => 1150 [type] => B [length] => 5510 ) [2] => Array ( [heigth] => 1150 [type] => C [lengt ...

phphtmlarrays

Uncovering Twig's Power: Navigating JSON Key Values

In my current project, I am utilizing OctoberCMS and Twig to fetch dynamic data and translations from JSON files for the front end. Here is an example snippet of code: <div class="wrapper items"> <div class="items"> {% for suggestion in ...

htmljsontwig

Chrome browser rendering image as PHP/CSS/HTML web navigation bar

I've hit a snag while working on my small website. The navigation of the website is functioning properly in Internet Explorer, but in Google Chrome, it's not clickable. Initially, I thought the issue might be related to the background image of ...

phphtmlcss

Is the page wrapper failing to contain or wrap anything at all?

Having a bit of trouble with my div element not wrapping all the way down. To simplify things, I've applied borders and background colors to everything. Here's the HTML code... I could resort to adding a float left to the page-wrapper div as a w ...

htmlcss