Inline Elements

Bold text.

<span class="text-bold"> Bold text </span>

Normal weight text.

<span class="text-normal"> Bold text </span>

Italic text.

<span class="text-italic"> Bold text </span>

This is a cite from xyz

<p> This is a <cite title="Cited from xyz" >cite from xyz </cite> </p>

Html Code

Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets.

This code uses the class . htmlCode to style the code

<div class="htmlCode"> <p>This is a Html Code ..</p></div>

CSS Code

          * {

              margin: 0;

              padding: 0;
          }

       

<div class="cssCode">
    <code> <pre> {
        margin: 0;
        padding: 0;
    }
   </pre> </code>
</div>

JS Code

$(function() {
    $('.accordion h3').click(function () {
    $('.accordion p').slideUp();
    });
});
       		

<div class="jsCode">
    <code> <pre> $(function() {
        $('.accordion h3').click(function () {
        $('.accordion p').slideUp();
        });
     });
   </pre> </code>
</div>

This is a variable (a+b)*(c+d) = ac+bc+ad+bd

<var class="variables">
       (a+b)*(c+d) = ac+bc+ad+bd <p>This is a Html Code
           ..
</var>

Text Alignment

Add .text-alignCenter , .text-alignCenter , .text-alignCenter Classes to align the elements.

<p class="text-alignCenter"> Center Aligned </p>

<p class="text-alignLeft"> Center Left </p>

<p class="text-alignRight"> Center Right </p>

Abbreviations

Stylized implementation of HTML’s <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.

The abbreviation for World Health Organization is WHO

<p> The abbreviation for World Health Organization is
    <abbr title="World Health Organization"class="abbrStyle"> </abbr> WHO
</p>

Address

The <address> element is updated to reset the browser default font-style from italic to normal. line-height is also now inherited, and margin-bottom: 1rem has been added. <address> s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with <br> .

<address>
San Diego Continuing Education 

4343 Ocean View Boulevard 

San Diego, CA 92113-1915 

619.388.4956
</address>

Block Quotes

Margin on the <blockquote> element is updated to 5px. also added background inmage with open and clode quotes. Also 8 px padding added.

Live and let Live

<blockquote class="quoteStyle"> Live and let Live</blockquote>

<a> Tag

Default link

Default <a> tag color is updated to #069. Also defaut underline is removed and added opacity on hover state.

This is a link

Lists

Simple/Unstyled List

Just add .listStyle class on <ul> tag. Bullets are removed. 1em/16px padding is added all around the ul tag. Also .5em/8px padding on li tags.

• Item 1
• Item 2
• Item 3

    <ul class="listStyle">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 2</li>
    </ul>
                    

List with stripes

In Addition to .listStyle class add one more class .stripped-list. This class adds background color to alternate list items.

• Item 1
• Item 2
• Item 3

    <ul class="listStyle striped-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 2</li>
    </ul>
                    

Nested Lists

Add .listStyle class to nested <ul> tag as well.

• Item 1
  • item 1.1
  • item 1.2
  • item 1.3
• Item 2
• Item 3

    <ul class="listStyle">
        <li>Item 1
            <ul class="listStyle">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 2</li>
            </ul>
       </li>
        <li>Item 2</li>
        <li>Item 2</li>
    </ul>
                    

Margin

Add .mt class for margin-top,.mr for margin-right ,.mb for margin-bottom,.ml for margin-left. All classes adds .5em/8px margin.