Hack Forums
Can't change text color inside column - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: Can't change text color inside column (/showthread.php?tid=6183083)

Can't change text color inside column - funtela - Nov 29, 2021

I can't seem to change the text color on the main text in one of my columns.

[Image: XBrQNmF.png?1]

In my css file I have this code for the 2 different font colors in that section:

Code
p2{
font-color: #000;
}

p3{
font-color: #000;
}

"p3" is the title but it seems to stay black no matter what I do. Any changes I make to "p2" works though for the description in that section. It makes the text white with no issues. I'm not sure why "p3" isn't making any changes.

This is what I have in my html file for that section:

Code
<section class="services">
<h1>Services</h1>


<div class="row">
<div class="service-col1"
<p3>Asphalt</p3>
<br>
<p2>Asphalt Milling, Paving, Striping, Maintenance, & Seal Coating</p2>
</div>
<div class="service-col2"
<p3>Concrete</p3>
<br>
<p2>Sidewalks, Foundation Slabs, Concrete Curbs, ADA, Stamped Concrete, Pavers, & Concrete Maintenance</p2>
</div>
<div class="service-col3"
<p3>Drainage & Underground Utilities</p3>
<br>
<p2>Complete Sitework, Earthwork, Excavation, Grading, Leveling, Base Construction, French Drain, & Pipelines</p2>
</div>






</section>


RE: Can't change text color inside column - V.V.V.V.V - Nov 29, 2021

You could just use a simple style tag.
For example:

Code
<p3>Asphalt</p3>
<br>
<p2 style="color:e82a70">Asphalt Milling, Paving, Striping, Maintenance, & Seal Coating</p2>
</div>

Look up tailwind as a plugin for css , It's really useful.

RE: Can't change text color inside column - funtela - Nov 29, 2021

(Nov 29, 2021 04:21 PM)V.V.V.V.V Wrote:  You could just use a simple style tag.
For example:

Code
<p3>Asphalt</p3>
<br>
<p2 style="color:e82a70">Asphalt Milling, Paving, Striping, Maintenance, & Seal Coating</p2>
</div>

Look up tailwind as a plugin for css , It's really useful.

Thanks man I just looked into it. Seems awesome!

I'm having a bit of a hard time figuring out how to install it though. I'm on MacOS if that helps. It says install via npm but I'm not sure what that is.

RE: Can't change text color inside column - V.V.V.V.V - Nov 29, 2021

(Nov 29, 2021 04:30 PM)funtela Wrote:  Thanks man I just looked into it. Seems awesome!

I'm having a bit of a hard time figuring out how to install it though. I'm on MacOS if that helps. It says install via npm but I'm not sure what that is.

Im MacOS aswell , Perfect os for development in my opinion so good chooise!
npm is a package manager , we also have yarn that is like npm and do the same thing.


They have pretty good docs you can follow https://tailwindcss.com/docs/installation
If you still having trouble there are plenty of tutorials on youtube for example this one is very straight forward: https://www.youtube.com/watch?v=9XeewBRtDKE


Hope it helps.

RE: Can't change text color inside column - funtela - Nov 29, 2021

(Nov 29, 2021 04:34 PM)V.V.V.V.V Wrote:  Im MacOS aswell , Perfect os for development in my opinion so good chooise!
npm is a package manager , we also have yarn that is like npm and do the same thing.


They have  pretty good docs you can follow https://tailwindcss.com/docs/installation
If you still having trouble there are plenty of tutorials on youtube for example this one is very straight forward: https://www.youtube.com/watch?v=9XeewBRtDKE


Hope it helps.

Thanks man! I'm installing Visual Studio right now since the Youtube tutorial uses that. I've been using an app called "BBEdit" to code. Is Visual Studio better for this?

RE: Can't change text color inside column - Goku - Nov 30, 2021

(Nov 29, 2021 04:14 PM)funtela Wrote:  
Code
p2{
font-color: #000;
}

p3{
font-color: #000;
}

Change font-color to color and it will work!

Also, first learn the basics (HTML, CSS and Javascript) before using frameworks like Tailwind and Bootstrap!

RE: Can't change text color inside column - funtela - Nov 30, 2021

(Nov 30, 2021 10:08 AM)Goku Wrote:  Change font-color to color and it will work!

That doesn't work. It actually makes the description text black as well now.

RE: Can't change text color inside column - Goku - Dec 1, 2021

(Nov 30, 2021 07:28 PM)funtela Wrote:  That doesn't work. It actually makes the description text black as well now.

Because the hex color #000 refers to black.
Check out these sites for understanding color codes
https://www.color-hex.com/
https://www.w3schools.com/colors/colors_picker.asp

RE: Can't change text color inside column - funtela - Dec 4, 2021

(Dec 1, 2021 01:56 AM)Goku Wrote:  Because the hex color #000 refers to black.
Check out these sites for understanding color codes
https://www.color-hex.com/
https://www.w3schools.com/colors/colors_picker.asp

I tried changing it to #ffffff but it still won't work. This is what I have in the html for those columns if it helps.

Code
.service-col1{
height: 300px;
flex-basis: 25%;
background-image: linear-gradient(rgba(4,9,6,0.7),rgba(4,9,6,0.3)),url(images/s1.jpg);
background-size: 1000px;
background-position: right;
border-radius: 10px;
margin-bottom: 5%;
padding: 20px 12px;
box-sizing: border-box;
transition: 0.5s;
font-size: 20px;
}


RE: Can't change text color inside column - Nachfolger - Dec 4, 2021

(Dec 4, 2021 02:15 PM)funtela Wrote:  I tried changing it to #ffffff but it still won't work. This is what I have in the html for those columns if it helps.

Code
.service-col1{
height: 300px;
flex-basis: 25%;
background-image: linear-gradient(rgba(4,9,6,0.7),rgba(4,9,6,0.3)),url(images/s1.jpg);
background-size: 1000px;
background-position: right;
border-radius: 10px;
margin-bottom: 5%;
padding: 20px 12px;
box-sizing: border-box;
transition: 0.5s;
font-size: 20px;
}

With vanilla CSS and HTML, the <p2> tag is not valid. I'm unsure why this was not mentioned earlier. Either change it to <h2> or use a class instead.

Code
<style>
.p2 {
   color: #000;
}
</style>

With

Code
<p class="p2"> ... Text here ... </p>


RE: Can't change text color inside column - funtela - Dec 4, 2021

(Dec 4, 2021 04:16 PM)Nachfolger Wrote:  With vanilla CSS and HTML, the <p2> tag is not valid. I'm unsure why this was not mentioned earlier. Either change it to <h2> or use a class instead.

Code
<style>
.p2 {
  color: #000;
}
</style>

With

Code
<p class="p2"> ... Text here ... </p>

I actually just added this to the html file:

Code
<p3 style="color: white">Asphalt</p3>

That seemed to work perfectly.

Thank you all for your help!