TheBestTutorials.css Borders
Border Classes
The TheBestTutorials.css border classes can be used on any HTML elements.
I have borders on all sides.
I have a red bottom border
I have rounded borders.
Example
<p>I have borders on all sides.</p>
</div>
<div class="subhodaya-border-bottom subhodaya-border-red">
<p>I have a red bottom border.</p>
</div>
<div class="subhodaya-border subhodaya-round-xlarge">
<p>I have rounded borders.</p>
</div>
<div class="subhodaya-container subhodaya-pale-blue subhodaya-leftbar subhodaya-border-blue">
<p>I have a blue leftbar.</p>
</div>
Displaying Notes
Notes are often displayed with a pale color and a colored bar:
Example
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
Displaying Panels
Panels can be displayed in a million different ways:
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Example
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
Displaying Quotes
The subhodaya-container class can be used to display quotes.
Example
<p><i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>
If you use HTML <blockquote>, remember that HTML will add an extra left margin:
"Make it as simple as possible, but not simpler."
Albert Einstein
Example
<p><i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</blockquote>
Hoverable Borders
The TheBestTutorials-hover-border-color classes change the color of the border on mouse-over:
Red hoverable border
Purple border that turns blue on hover
Example
<p>Red hoverable border</p>
</div>