Text for contents : Lorem Ipsum


Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.


Indentation of Paragraph


  • Use style="text-indent: xxpx;" Positive value.


POSITIVE INDENT

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


  • Use style="text-indent: -xxpx;" Negative value, we add margin-left: -30px; to show the effect here.


NEGATIVE INDENT

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Line-height within a paragraph


  • Change the scale factor of line-height of a paragraph :

p.condensed
{
line-height: 1.1;
}

  • Normal (1.5) line-height :

Lorem ipsum dolor sit amet, consectetur adipisicing elitem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Paragraph with class condensed :
Lorem ipsum dolor sit amet, consectetur adipisicing elitem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Margin between paragraphs


  • Change top and bottom margin of paragraph

p.space
{
margin: 3em 0;
}

  • Normal (1em) top and bottom margin :

Lorem ipsum dolor sit amet, consectetur adipisicing elitem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Paragraphs with 3em between them

Lorem ipsum dolor sit amet, consectetur adipisicing elitem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Loading the Style Sheet


  • As GPC remove the <link> tag for external style sheet, we need to use a small javascript to load the CSS
  • Write this javascript at the beginning of the first section, after the header

<script language="Javascript" type="text/javascript">
var cssNode = document.createElement('link');
cssNode.type = 'text/css';cssNode.rel = 'stylesheet';
cssNode.href = 'http://YOURSITE.googlepages.com/my_style.css';
cssNode.media = 'screen';
cssNode.title = 'external sytle sheet';
document.getElementsByTagName("head")
[0].appendChild(cssNode);
</script>


Internal Links


  • Starting tag :

<a href="#subject_1">Subject 1</a>



  • Target :

<p id="subject_1">Text for target ... </p>



SUBJECT_1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


SUBJECT_2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Quotation


  • Use <blockquote> to display quotations. A quote from Francis Picabia :

Only useless things are indispensable
  • blockquote, for IE and FF, is identical to text-indent and <em> (or <i>)


Creating Drop Caps


  • We use the pseudo-element first-letter. To display the first letter of paragraph from the class red_cap, we define the style :

p.red_cap:first-letter {
color: red;
font-size: 130%;
font-weight: bold;
}


  • We need to use javascript to load this style :

<script type="text/javascript">

document.write('<style>
p.red_cap:first-letter
{color: red;font-size: 130%;font-weight: bold;}
</style>')

</script>


  • The result :

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores .

Consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.




Using GPC