Member Avatar for davy_yg

index.html

<div id="side">
<div id="boxcontainer">
<div id="side-info">
	<h3>Get In Touch With Us</h3>
	<ul>
	<li><img src="images/pic2.png" ALT="picture1" ALIGN=LEFT />Request more <br />information from <br />OCK&Associates</li>
          <br></div></div><br>

style.css

#content #boxcontainer {
	width:240px;
	padding: 10px;
	border:0px solid #000;
	background-color:#CCCCCC;			
	}
			
#content #boxcontainer h3{ 
	font face: "Arial" color: red size: 14px;
	}

<h3>Get In Touch With Us</h3>

Suppose to be in red color, but in actual I still see it black. Why is it ? How to turn it to red ?

Edited by davy_yg because: n/a
  • 2 Contributors
  • 4 Replies
  • 92 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by teedoff

Dani AI

Generated

Two things are causing the H3 to remain black: invalid CSS syntax and a selector that does not match the HTML. correctly pointed out the missing semicolon, but the CSS shown also uses non‑existent properties (for example the font pieces in the posted rule are not valid declarations). Also the stylesheet targets #content #boxcontainer while the HTML shows #side as the ancestor, so the rule never matches the element.

Use the proper CSS properties and a selector that matches the DOM. For example, target the actual container with an ancestor selector such as #side #boxcontainer h3 and set the text color with the text color property while setting font family and size with their proper properties (the font shorthand is available if preferred — see the CSS font syntax). More on selector rules and how they match the DOM is here: CSS selectors — MDN. Reference for font shorthand and proper properties: font — MDN.

Quick troubleshooting checklist:

  • Inspect the H3 with browser devtools (Rules/Computed panes) to see which CSS rule actually applies and whether another rule overrides it.
  • Confirm the stylesheet file is being loaded (Network tab) and the link href path is correct.
  • Fix markup typos or unbalanced tags in the HTML (invalid HTML can break stylesheet targeting).
  • Clear the browser cache or add a version query string to the stylesheet when testing.
  • If a rule still seems ignored, look for inline styles or !important declarations that have higher precedence.

These steps will reveal whether the problem is syntax, selector mismatch, file loading, or specificity.

Recommended Answers

All 4 Replies

Member Avatar for teedoff

Because you're missing a semi colon after "red"...."color: red;"

You should run your html and css through the w3 validators and it will point out typoes like this as well as invalid code.

CSS Validator

HTML/XHTML Validator

Edited by teedoff because: n/a
Member Avatar for davy_yg

It doesn't point out the solution only the errors.

for example:

Target:
I/O Error: color

How to use the validator ? Well, I need the altertive solution if it is error.

Edited by davy_yg because: n/a
Member Avatar for davy_yg

It still doesn't work

#content #boxcontainer h3{ 
	font face: "Arial" font-color:"red"; size: 14px;
         }
Member Avatar for teedoff

Then you're not targeting the correct child element.

h3{ 
	color: red;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	}

That works perfectly for me on an h3 tag.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.