Grains Of Sand Web Design, CSS Demos & HTML5 Templates by tupence

CSS3 Demos | Text Styling Demos

CSS can be used to style text in countless ways. A brief explanation of the basics of text styling can be found here. Below are some examples of what can be acheived, along with the code which is commented to explain what's going on, simply copy and paste the code in the black boxes and make any amendments you require.

Examples and Code

DEMO 1 - Dropcap Effect

With CSS :first-letter to give a dropcap effect. 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.

HTML

  • <p class="dropcap">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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>

CSS

  • p:first-letter{
  • float:left; /*places the first letter on the left and wraps the rest of the paragraph around it*/
  • margin:10px 5px 0 0;
  • color:#38838c; /*slightly darker than the rest of the paragraph*/
  • font-size:3em;
  • }

DEMO 2 - Emphasise Sections of Text

In this example we'll emphasise three sections of the text with the use of font-size, color, font-weight, font-variant and a background-color.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tellus est, malesuada eget elementum et, blandit at eros. Nunc blandit elit in tellus ornare facilisis.

Morbi bibendum arcu quis augue consequat ac porttitor dolor pretium. Vestibulum quis turpis in magna pellentesque bibendum sed ac turpis.

HTML

  • <p>
  • <!--Large red text (.emp1)-->
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="emp1">Vestibulum</span> tellus est, malesuada eget elementum et, blandit at eros.
  • <!--White text on blue background (.emp2)-->
  • Nunc blandit elit in tellus <span class="emp2">ornare facilisis</span>. </p>
  • <!--Small caps text in black (.emp3)-->
  • <p>Morbi bibendum arcu quis augue consequat ac porttitor dolor pretium. <span class="emp3">Vestibulum quis turpis in magna pellentesque bibendum</span> sed ac turpis.</p>

CSS

  • /*Large red text*/
  • span.emp1 {
  • font-size:1.3em; /*increased font size*/
  • color:#ff0000; /*change the colour to red*/
  • font-weight: 600; /*increase the weight of the font*/
  • text-shadow: 0 0 1px #ccc; /*add a shadow - see cssdemos.tupence.co.uk/text-shadow.htm*/
  • }
  • /*White text on blue background*/
  • span.emp2{
  • background:#385161; /*make the background blue*/
  • color:#fff; /*change the font colour to white*/
  • padding: 2px 4px; /*add a small amount of padding around the text to make it look nicer*/
    border-radius: 4px; /*add a small curve to the corners of the background - see cssdemos.tupence.co.uk/border-radius.htm*/
  • }
  • /*Small caps in black*/
    span.emp3{
  • font-variant: small-caps;
  • color:#000;
  • }

DEMO 3 - Add A Tagline To A Heading

Site Heading
Add a tagline

HTML

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

CSS

  • /*First apply the general styling to the heading*/
  • h2{
  • font-family: "Times New Roman", Times, serif;
  • font-size: 2.6em;
  • line-height: 0.8em; /*needs to be quite low to bring the tagline right under the heading*/
  • text-shadow: 2px 2px 2px rgba(34,34,34,.3);
  • color: #87045a;
  • }
  • /*Now style the tagline*/
  • span.tag {
  • display: block; /*Places the text on its own line, below the main heading*/
  • font-family: Arial, Helvetica, sans-serif;
  • font-size: 45%; /*this will be 45% the size of the heading above it*/
  • text-transform: uppercase;
  • text-shadow: 1px 1px 2px rgba(34,34,34,.3);
  • font-weight: 400;
  • color: #949494;
  • }

Heading and Date

Place the date of an entry next to the heading and wrap the text around them.

Title Here 21/02/2012

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.

HTML

  • <article class="dates">
  • <h2>Title Here <span class="date">21/02/2012</span></h2>
  • <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
  • </article>

CSS

  • /*first style the text*/
  • .dates h2{
  • float: left; /* floating the heading forces the paragraph text to wrap around it */
  • color: #1e455b;
  • font-size: 2em;
  • letter-spacing: -1px;
  • line-height: 1em;
  • text-transform:uppercase;
  • text-shadow:2px 2px 2px rgba(34,34,34,.3);
  • }
  • /*now style the date*/
  • .dates h2 span.date{
  • display: block; /*lets us precisely position the text*/
  • float: right; /*places the date next to the heading, if we didn't do this then display:block on the line above would force the date onto a line of its own and place it below the heading*/
  • color: #727272;
  • font-size: 50%; /*the date will be 50% the size of the main heading*/
  • line-height:2.2em;
  • font-weight: 200;
  • letter-spacing: -2px;
  • margin-left:0;
  • margin-right:20px;
  • text-shadow:1px 1px 2px rgba(34,34,34,.3);
  • }
  • /*finally style the paragraph text*/
  • .dates p{
  • text-align:justify;
  • }

More CSS3 Demos This Way