Member Avatar for jk_bscomp

hello everyone, i hope you could help me with this simple yet confusing css problem.. I want to have a three header - h1, h2, h3 to be in different font style... one is tahoma, arial and sans-serif.... how can i do that by calling the css below...

body, h1, h2, h3, form {
	font: 10px tahoma, arial, sans-serif;
	margin: 0;
	padding: 0;
	color: #5C5C5C;
}

you're help is highly appreciated

  • 3 Contributors
  • 2 Replies
  • 104 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by shruti sepra

Dani AI

Generated

The grouped declaration in the original post applied a single shorthand font rule to body, h1, h2 and h3, which is why all headings looked the same. rightly noted the grouping effect, and touched on alternatives — the important piece not yet explained is what the font shorthand actually does: when you include a size in the shorthand it will override the headings' user-agent sizes and reset other font-related properties. That is why your headings can end up small and identical even though they are different elements. See the MDN explanation of the font shorthand for details: MDN: font shorthand.

Quick troubleshooting steps to isolate the problem:

  • Inspect a heading with the browser DevTools, look at Computed styles for font-family and font-size, and then check the Styles panel to see which rule and file set them.
  • If a general shorthand rule is the culprit, change that rule so it does not include a font-size, or make targeted rules that only set the font-family for the elements you want to look different.
  • Avoid relying on !important for this — it masks cascade problems and makes future maintenance harder.

A maintainable pattern is to centralize font stacks (so you can change them in one place) and then apply only the property you need. Using CSS custom properties keeps stacks DRY and avoids unintentionally changing sizes or line-height:

:root {
  --body-stack: Tahoma, "Helvetica Neue", Arial, sans-serif;
  --title-stack: "Georgia", "Times New Roman", serif;
}

/* apply only the family where needed (preserve default sizes/weights) */
h1 { font-family: var(--title-stack); }
h2 { font-family: var(--title-stack); }

Also remember font availability differs by OS (Tahoma is common on Windows but not macOS). For consistent cross-platform rendering consider web fonts or generous fallback stacks. For reference on font-family behavior and fallbacks, see MDN: font-family.

Recommended Answers

All 2 Replies

Member Avatar for Member #117553

You can't doing it using this code.
The css style you provided is useful when you want to define some general attributes for multiple tags.

In order to achieve yours, you have to explicitly specify the font family for each h# element.
you should do it like this
h1 {font-family: Tahoma;} - you can omit this definition, as it has been already defined in your general definitions.
h2 {font-family: Arial;}
h3 {font-family: sans-serif;}

Member Avatar for shruti sepra

you can give different classes or different fonts, with using important 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.