[funtela]

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



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>

[V.V.V.V.V]

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.

[funtela]

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.

[V.V.V.V.V]

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.

[funtela]

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?

[Goku]

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!

[funtela]

Change font-color to color and it will work!

---

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

[Goku]

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

[funtela]

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;
}

[Nachfolger]

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>

[funtela]

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!