What is the process for transforming Inline CSS code into an External File CSS Code?

I'm having a bit of trouble with my WordPress website. I want to format the comments section of each post to look like the image below, but I need help converting from inline CSS to external CSS and implementing it on the webpage. https://i.sstatic.net/FfVQE.png

Specifically, I'd like to remove the left space and make the comments closer together to save space.

This is the Inline CSS code I currently have:

<div dir="ltr" style="text-align: left;" trbidi="on">
<hr style="background: 0px center rgb(255, 255, 255); border-bottom-color: rgb(204, 204, 204); border-bottom-style: dotted; border-bottom-width: 2px; border-top-width: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 13.8px; line-height: 20.7px;" />
... (CSS code continues)

Here's what I've tried in my attempt:

dhr {
             background: 0px center #ffffff       /* This type of heading MUST be Green and Large! */
             border-bottom-color: #cccccc
             border-bottom-style: dotted 
             ... (more CSS properties)
             }

In the HTML Page:

<hr class="dhr" />

<span class="dhr">[Here I enter command manually everytime]</span>

Unfortunately, my attempts haven't worked. Can anyone provide me with the external CSS code and how to implement it on the page? I also need help removing the left side spacing and reducing the gap between comments. The name of my external CSS file is custom.css. Thank you in advance for your assistance.

htmlcsswordpress

Answer №1

dhr is a selector for types. It targets elements with the tag <dhr> (which are not valid in HTML).

Your element belongs to the class dhr, so you should use the class selector: .dhr

After fixing that, ensure that the rules in your stylesheet are properly separated by semicolons, just like when writing them inline within a style attribute. This is an error that would typically be flagged by a validator.

Answer №2

Instead of using just dhr in your CSS, try using .dhr instead.

The reason for this is that .dhr represents a class (<element class='dhr'>), whereas just dhr represents an element (<dhr>).

Make sure to use the following code:

.dhr {
             background: 0px center #ffffff       /* This type of heading MUST be Green and Large! */
             border-bottom-color: #cccccc
             border-bottom-style: dotted 
             border-bottom-width: 2px
             border-top-width: 0px
             color: #333333
             font-family: Arial, Helvetica, sans-serif
             font-size: 13.8px
             line-height: 20.7px }

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

Switching Present Tab in Rails

Within my application, I have a set of tabs displayed at the top thanks to a general layout in application.html.erb. Here's how they are structured: <li class="current"><%= link_to "Home", provider_path(current_user.id), :method=> "GET"%& ...

ruby-on-railscssdom

Confusion Arises When Joomla Buttons Clash

I am facing an issue with two modules on my website, each containing a button code. The code for the buttons is as follows: First Button <div onclick="parent.location='first-link'" data-mce-onclick=""><button class="button">First Bu ...

javascriptphphtmlbuttonjoomla

Executing the same operation when multiple selections are made from a dropdown menu using jQuery

My dilemma involves a dropdown list featuring options A, B, C, D. I need to implement a functionality where certain input fields are hidden based on the user's selection from the dropdown. I have managed to successfully hide fields when the user sele ...

jqueryhtml

Switching minimum and maximum input values based on a specific condition: A step-by-step guide

I am looking for a way to reverse the minimum and maximum values of two input elements that I have defined. Is there a way to achieve this using HTML or JavaScript (Angular)? Here is an example of what I am trying to do: <label> Width: < ...

javascriptangularjshtmlinput

embedding a button alongside the pager in an HTML document

I am encountering an issue with the positioning of a button in my paginated table setup. The button is currently displaying below the pager instead of being aligned on the left side of the page along with the pager. https://i.stack.imgur.com/gUiB9.png To ...

javascripthtml

The radio input is not being properly checked using ng-checked in Angular

The ng-checked attribute is causing issues in the application, specifically with radio buttons. It seems to be working fine for checkboxes but not for radio buttons. <input type="radio" class="radio" name="job_class_radio" ng-checked="key===jobClassDat ...

javascriptangularjshtmlradio-button

Guide to adding a tag in front of a text in HTML with Python

Searching for all the text within the html document and wishing to incorporate a span tag that contains additional information about each text as shown below def recursiveChildren(x): if "childGenerator" in dir(x): for child in x.childGenerator( ...

pythonhtmlbeautifulsoup

Creating a function to update data in a Node.js/MongoDB environment

Hey there! I'm new to working with nodejs and mongodb, and I'm trying to create a function that updates the win, lose, and draw record in my UserSchema. Here's my Schema: UserSchema = new mongoose.Schema({ username:'string', ...

javascripthtmlnode.jsmongodbmongoose

Utilizing GTM to Implement Dynamic Content Deployment

Can you provide guidance on the entire process from creating a Custom HTML Tag in GTM to executing JavaScript for firing dynamic HTML code, such as displaying a div with text or image based on a specific rule like the referral or cookie variable? For exam ...

javascripthtmlgoogle-tag-manager

Replace old content with new content by removing or hiding the outdated information

I need to update the displayed content when a new link is clicked index html file <a href="" class="content-board" > <a href="" class="content-listing" > content html file <div class="content-board"> <div class="content-lis ...

javascriptjqueryhtml

Leveraging @font-face for various styles and designs

Google web fonts presents the Droid Serif font in these styles: DroidSerif.ttf DroidSerif-Bold.ttf DroidSerif-BoldItalic.ttf DroidSerif-Italic.ttf I am interested in using the @font-face CSS rule to import all of these variations with the "Droid Serif" f ...

htmlcssfonts

Is it possible to change the style of an element when I hover over one of its children?

Encountered an issue while working with HTML and CSS: //HTML <div> <div class="sibling-hover">hover over me</div> </div> <div class="parent"> <div>should disappear</div> </div> ...

javascripthtmlcss

Navigate through pages using scrollspy without losing your position when returning

Hey all you web geeks out there, I could really use your help solving a little issue. I've been working with Bootstrap to build a website that utilizes scrollspy for navigating different sections of the page using the navbar. The only way I could sto ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the reason behind the content of a div tag not hiding while the content of a p tag does

<html> <head> <title>How to make a div content disappear when clicked?</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <scrip ...

javascriptjqueryhtml

The CSS selector for adjacent siblings seems to be malfunctioning

This code is designed to show the "container-1" division every time I hover over the "container" division. However, it's not behaving as expected because instead of displaying block on hover, it simply remains hidden. CSS Code .container:hover + .con ...

htmlcss

Switch up the placement of the boxes by moving them in different directions, such as

I've been attempting to recreate the button movement demonstrated in this link , but I'm having trouble achieving it. Using CSS animation, I can make the buttons move in a straight line, here's what I have so far: <div id="box" style=&ap ...

javascriptjqueryhtmlcss

Prevent using HTML escape characters when coding in PHP

When attempting to make an API call using PHP, one of the parameters required is 'currency'. The API call looks like this: <?php $call=".....&currency=USD&......."; $response = hash_call("Pay", $call); ?> However, when I print ...

phphtmlhtml-escape-characters

Create a continuous scrolling tool similar to Google Reader for iGoogle

Do you know how to create an infinite scroll widget similar to Google Reader on iGoogle? This widget should be able to dynamically load data as the user scrolls, and replace the traditional scroll bar with a pair of up and down arrows. The HTML structure ...

javascriptcss

jquery - issue with google analytics not loading in the footer

I have been attempting to integrate Google Analytics into all of my HTML pages. The specific page I am focusing on is rates.html. <html> <head> <title></title> <script src="//code.jquery.com/jquery-1.10.2.js"></scri ...

jqueryhtmlgoogle-analytics

Unusual characters found in the fields of a Postgresql database table

In six out of over 30 fields in one of my postgresql tables, an unusual character has been found at the end of user-input text. This data is entered into the table through a PHP web form that has been in use for years. It's puzzling to see this charac ...

phphtmlpostgresqlwebforms