docs: add custom CSS usage and warnings to user guide (#2705)

[arshinsikka]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• DevOps
• Improve developer experience
• Others, please explain:

Overview of changes:

• Adds a new section titled "Using Custom CSS in MarkBind" at the bottom of usingHtmlJavaScriptCss.md

• Explains two methods to add custom styles:

• Site-wide styles using site.json

• Page-specific inline <style> blocks

• Includes warnings about conflicts with MarkBind’s built-in component styles

• Provides code examples and best practices

Anything you'd like to highlight/discuss:

• The section was added just before the {% previous_next %} block to maintain structure

• IntelliJ may show false warnings (e.g., unrecognized tags), but site renders fine

• Let me know if you'd like it moved to a different file or split out for better discoverability

Testing instructions:

1. Serve the site locally:
   npx markbind serve packages/core/docs/userGuide

2. Navigate to "Using HTML, JavaScript, CSS" in the user guide sidebar

3. Scroll to the bottom and verify:

• The section on Using Custom CSS is visible
• Code samples are highlighted correctly
• Warnings and tips are clearly displayed

Proposed commit message: (wrap lines at 72 characters)

docs: add custom CSS usage and warnings to user guide (#2705)

Adds documentation to explain how users can add site-wide or inline
custom CSS in MarkBind. Also includes best practices and warnings
about overriding MarkBind's default component styles.

---

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No unrelated changes

---

Reviewer checklist:

Indicate the SEMVER impact of the PR:

• Major (when you make incompatible API changes)
• Minor (when you add functionality in a backward compatible manner)
• Patch (when you make backward compatible bug fixes)

At the end of the review, please label the PR with the appropriate label: r.Major, r.Minor, r.Patch.

Breaking change release note preparation (if applicable):

• To be included in the release note for any feature that is made obsolete/breaking

Give a brief explanation note about:

• what was the old feature that was made obsolete
• any replacement feature (if any), and
• how the author should modify his website to migrate from the old feature to the replacement feature (if possible).

[Copilot]

Pull Request Overview

This PR adds documentation to the user guide explaining how users can implement custom CSS styling in MarkBind sites. The documentation covers both site-wide and page-specific styling approaches with practical examples and important warnings about potential conflicts with built-in component styles.

[Copilot]

The documentation section is incomplete. The PR description mentions explaining two methods (site-wide and page-specific inline styles) with warnings about conflicts, but only the site-wide method is documented. The page-specific inline <style> blocks method and the promised warnings about conflicts with MarkBind's built-in component styles are missing.

Suggested change

	> **Warning:** Custom CSS rules may conflict with MarkBind's built-in component styles. If you override styles used by MarkBind components (e.g., buttons, panels, etc.), it may affect their appearance or functionality. Use specific selectors or [CSS scoping techniques](https://developer.mozilla.org/en-US/docs/Web/CSS/Scope) to minimize conflicts.
	### 2. Add page-specific inline styles
	To apply styles to a single page, you can add a `<style>` block directly in your `.md` file. For example:
	```html
	<style>
	.custom-title {
	color: darkblue;
	font-size: 2em;
	}
	</style>
	<h1 class="custom-title">Welcome to My Page</h1>

This method is useful for quick customizations or when you want to style only a specific page.

Warning: Inline styles can also conflict with MarkBind's built-in component styles. If you use generic selectors (e.g., h1, .panel), you may unintentionally override styles used by MarkBind components. Prefer using unique class names to avoid such conflicts.

{% from "njk/common.njk" import previous_next %}
{{ previous_next('components/advanced', 'tweakingThePageStructure') }}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 52.84%. Comparing base (f681976) to head (3709477).

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2736   +/-   ##
=======================================
  Coverage   52.84%   52.84%           
=======================================
  Files         130      130           
  Lines        7162     7162           
  Branches     1591     1596    +5     
=======================================
  Hits         3785     3785           
  Misses       3072     3072           
  Partials      305      305           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[AgentHagu]

Hi @arshinsikka, thanks for the contribution. As mentioned by Copilot, it would be good to include a warning to users about the use of custom css as it may conflict with MarkBind's default css, leading to unexpected behavior. You also mentioned "two common ways" but only included one way 😅

Regarding the site-wide custom stylesheet you mentioned, I wasn't able to get it to work using those instructions. Its possible that this method of adding custom css isn't actually implemented by MarkBind yet as the user guide doesn't seem to mention "head" being a possible config option for site.json. Its also possible I messed up on my end so if you were able to get it to work, do let me know!