tupence - CSS Demos

CSS3 Demos - Text Styling

CSS can be used to style text in countless ways. A brief explanation of text styling can be found here.

first-letter & first-line - Dropcap Effect - Emphasise sections of text - Taglines - Intro Paragraphs

First Line and First Letter

Define the first line of a paragraph, in this case in bold with slightly increased letter spacing and a different colour. This can only be applied to block elements.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mauris nisi, tristique eu aliquam in, ullamcorper quis ligula. Nulla bibendum elit est. Nullam purus ante, iaculis non fermentum a, malesuada sit amet mauris.

Bold and slightly larger first letter than the rest of a paragraph.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mauris nisi, tristique eu aliquam in, ullamcorper quis ligula. Nulla bibendum elit est. Nullam purus ante, iaculis non fermentum a, malesuada sit amet mauris.

Code

HTML

• <section class="firstline">
  <p>Define the first line of a paragraph, in this case in bold with slightly increased letter spacing and a different colour. This can only be applied to block elements. <br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mauris nisi, tristique eu aliquam in, ullamcorper quis ligula. Nulla bibendum elit est. Nullam purus ante, iaculis non fermentum a, malesuada sit amet mauris.</p>
  </section>
• <section class="firstletter">
  <p>Bold and slightly larger first letter than the rest of a paragraph.<br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mauris nisi, tristique eu aliquam in, ullamcorper quis ligula. Nulla bibendum elit est. Nullam purus ante, iaculis non fermentum a, malesuada sit amet mauris.</p>
  </section>

CSS

• .firstline p:first-line{
  font-weight: bold;
  letter-spacing: .05em;
  color: #0072A8;
  }
• .firstletter p:first-letter{
  font-size: 160%;
  font-weight: bold;
  letter-spacing: .05em;
  }
  

Use first-letter to give a dropcap effect.

Dropcap

Code

HTML

• <section class="dropcap">
  <h4>Dropcap</h4>
  </section>

CSS

• h4{
  font-family: 'copse', arial, serif;
  color: #3E8260;
  font-size: 1.8em;
  }
• .dropcap h4:first-letter{
  float: left;
  font-size: 150%;
  }
  

Emphasise Sections of Text

Emphasise Parts Of Heading More

You can also do this in a paragraph if you want.

Code

HTML

• <h2>Emphasise <span class="emp">Parts Of Heading</span> More</h2>
• <p>You can also <span class="emp">do this in a paragraph</span> if you want.</p>

CSS

• span.emp {
  font-size: 1.3em;
  color: #993144;
  font-weight: bold;
  text-shadow: 0 0 1px #ccc;
  }
  

Taglines

Site Heading
Add a tagline

Code

HTML

• <h2>Site Heading <span class="tag">Add a tagline</span></h2>

CSS

• h2{
  font-family: 'copse', arial, serif;
  color: #3E8260;
  font-size: 1.8em;
  text-shadow: 1px 1px 1px #ccc;
  }
• h2 span.tag{
  font-size: 0.55em;
  text-transform: uppercase;
  color: #999;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: none;
  display: block; /*--Keeps the small tag on its own line--*/
  }
  

Intro Paragraph Styling

You can use CSS to make an introductory paragraph stand out. Just something brief and concise and, you know, to the point.

Code

HTML

• <p class="intro">You can use CSS to make an introductory paragraph stand out. Just something brief and concise and, you know, to the point.</p>

CSS

• p.intro{
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.10em;
  letter-spacing: .25em;
  line-height: 1.2em;
  text-transform: uppercase;
  color: #76879b;
  }

More CSS3 Demos This Way