Sink First Letter of a paragraph : p.first letter « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. p.first letter

Sink First Letter of a paragraph

     
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* CSS Document For Stylized Beauty
   Design by super j man
   (http://www.jdavidmacor.com) */

/******** Basic Body ********/
  body {
    background-color: #000000;
    background: url(Stylized-Beauty-images/bg.png) top repeat-x;
    }
  
  h1 {
    margin: 0;
    color: #FFFFFF;
    font-family: "Trebuchet MS" "Times New Roman";
    font-size: 40px;
    padding-left: 50px;
    padding-top: 50px;
    }
  
  h2 {
    margin: 0;
    color: #000000;
    font-family: "Trebuchet MS" "Times New Roman";
    font-size: 22px;
    font-variant: small-caps;
    border-bottom: 1px solid #000000;
    }
    
  img {
    border: 0;
    }
    
  .icon {
    border: 0;
    vertical-align: text-bottom;
    }
  
  #container {
    width: 760px;
    margin: 0 auto;
    padding: 0px;
    }
    
/******** Header ********/    
  #header {
    width: 760px;
    height: 155px;
    background: url(Stylized-Beauty-images/header.gif) top no-repeat;
    }
    
  form {
    float: right;
    font-size: 9px;
    margin-right: 25px;
    margin-top: 55px;
    }
  
  form img {
    vertical-align: bottom;
    }
    
  input {
    background: #FFFFFF url(Stylized-Beauty-images/input.png) top left no-repeat;
    color: #999999;
    border: 0;
    font-size: 11px;
    padding: 3px;
    }
    
  .button {
    padding: 2px;
    background: #88ac0b url('Stylized-Beauty-images/menu-background.png') top left repeat-x;
    color: #FFFFFF;
    border: 0;
    font-size: 11px;
    }

/******** Menu ********/  
  #menu_container {
    width: 748px;
    _width: 750;
    background: #FFFFFF;
    height: 30px;
    padding-left: 5px;
    padding-right: 7px;
    _padding-right: 5px;
    }
  
  #menu {
    width: 100%;
    background: #88ac0b url('Stylized-Beauty-images/menu-background.png') top left repeat-x;
    float: left;
    font-size: 95%;
    white-space: nowrap;
    padding-right: 2px;
    margin-top: 0;
    margin-bottom: 0;
    }
  
  * html #menu {
    padding-right: 0;
    }
  
  #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    border-left: 1px solid #95bc0e;
    border-right: 1px solid #95bf0f;
    width: 100%;
    }
  
  #menu li {
    display: inline;
    }
  
  #menu a:link, #menu a:visited {
    padding: 0.25em 1em;
    background: transparent;
    color: #FFFFFF;
    text-decoration: none;
    float: left;
    border-right: 1px solid #95bc0e;
    }
  
  #menu a:hover {
    background: #b6e41c url('Stylized-Beauty-images/menu-hover.png') repeat-x;
    color: #485b06;
    }

/******** Main Content ********/    
  #content {
    width: 750px;
    background: #FFFFFF;
    padding: 5px;
    }
  
  #posts {
    width: 540px;
    background: #FFFFFF;
    margin-right: 15px
    }
    
  #posts p {
    text-align: justify;
    font: .8em "Lucida Grande", "Lucida Sans Unicode", arial, sans-serif;
    line-height: 150%;
    color: #666666;
    }
    
  #posts a {
    color: #C44000;
    text-decoration: none;
    }
    
  #posts a:visited {
    color: #C44000;
    text-decoration: none;
    }
    
  #posts a:hover {
    color: #C44000;
    text-decoration: underline;
    }
    
  .dropcap {
    float: left;
    width: .67em;
    font-size: 3.1em;
    line-height: 95%;
    }
  
  .blockquote {
    border: 2px dotted #88ac0b;
    background-color: #EFEFEF;
    margin: 30px;
    padding: 5px;
    overflow: hidden;
    text-align: justify;
    color: #CCCCCC;
    font: 1.2em "Trebuchet MS", Arial, Helvetica, sans-serif;
    }
  
  .comments {
    color: #999999;
    font-size: 75%;
    text-align: right;
    }

/******** Sidebar ********/    
  #sidebar {
    width: 195px;
    float: right;
    padding-top: 5px;
    }
    
  .sidebar_content{
    display: block
    }
    
  .sidebar_content *{
    display: block;
    height: 1px;
    overflow: hidden;
    background: #999999
    }
    
  .sidebar_content1{
    border-right: 1px solid #d3d3d3;
    padding-right: 1px;
    margin-right: 3px;
    border-left: 1px solid #d3d3d3;
    padding-left: 1px;
    margin-left: 3px;
    background: #b2b2b2;
    }
    
  .sidebar_content2{
    border-right: 1px solid #f4f4f4;
    border-left: 1px solid #f4f4f4;
    padding: 0px 1px;
    background: #acacac;
    margin: 0px 1px;
    }
    
  .sidebar_content3{
    border-right: 1px solid #acacac;
    border-left: 1px solid #acacac;
    margin: 0px 1px;
    }
    
  .sidebar_content4{
    border-right: 1px solid #d3d3d3;
    border-left: 1px solid #d3d3d3;
    }
    
  .sidebar_content5{
    border-right: 1px solid #b2b2b2;
    border-left: 1px solid #b2b2b2;
    }
    
  .sidebar_content_content{
    padding: 0px 5px;
    background: #999999;
    color: #EFEFEF;
    text-align: justify;
    font: .8em "Lucida Grande", "Lucida Sans Unicode", arial, sans-serif;
    line-height: 130%;
    }
  
  .sidebar_content_content a {
    color: #FFFFFF;
    text-decoration: none;
    letter-spacing: 5px;
    }
    
  .sidebar_content_content a:visited {
    color: #FFFFFF;
    text-decoration: none;
    letter-spacing: 5px;
    }
    
  .sidebar_content_content a:hover {
    color: #FFFFFF;
    text-decoration: underline;
    letter-spacing: 5px;
    }
  
  .side_content_header {
    margin: 0;
    color: #FFFFFF;
    font-family: "Trebuchet MS" "Times New Roman";
    font-size: 20px;
    font-variant: small-caps;
    }

/******** Footer ********/  
  #footer {
    width: 750px;
    height: 73px;
    background: url(Stylized-Beauty-images/footer.gif) top no-repeat;
    margin-top: 0px;
    padding: 5px;
    }
    
  #footer p {
    padding: 25px;
    text-align: center;
    font-size: 9px;
    color: #999999;
    }
    
  #footer p a {
    color: #000000;
    font-weight: 100;
    text-decoration: none;
    border-bottom: 1px dotted #000000;
    }
    
  #footer p a:visited {
    color: #000000;
    font-weight: 100;
    text-decoration: none;
    border-bottom: 1px dotted #000000;
    }
      
  #footer p a:hover {
    color: #000000;
    text-decoration: none;
    border-top: 1px dotted #000000;
    }
</style>


<title>Stylized Beauty</title>
</head>

<body>

<div id="container">

<div id="header">
  <form id="form1" method="post" action="">
    <img src="images/search.png" alt="Search" />
    <input type="text" name="textfield" value=" Search For..." />
    <input class=" button" type="submit" name="Submit" value="GO" />
  </form>
  
  <h1>Stylized Beauty</h1>
</div>

<div id="menu_container">
  <div id="menu">
    <ul>
      <li><a title="home" href="#">home</a></li>
      <li><a title="blog" href="#">blog</a></li>
      <li><a title="portfolio" href="#">portfolio</a></li>
      <li><a title="resume" href="#">resume</a></li>
      <li><a title="links" href="#">links</a></li>
      <li><a title="about" href="#">about</a></li>
    </ul>
  </div>
</div>

<div id="content">

<div id="sidebar">
  <div>
  <b class="sidebar_content">
  <b class="sidebar_content1"><b></b></b>
  <b class="sidebar_content2"><b></b></b>
  <b class="sidebar_content3"></b>
  <b class="sidebar_content4"></b>
  <b class="sidebar_content5"></b>
  </b> <div class="sidebar_content_content">
  <span class="side_content_header">Sidebar</span><br />
  This is the sidebar where all sorts of content can go. Maybe you can put some links, blah blah blah. Whatever, you get the point. Just go nuts here.<br /><br />
  <img src="images/bullet_white.gif" alt="Bullet" width="16" height="16" class="icon" /><a href="#">Side Link 1</a><br />
  <img src="images/bullet_white.gif" alt="Bullet" width="16" height="16" class="icon" /><a href="#">Side Link 2</a><br />
  <img src="images/bullet_white.gif" alt="Bullet" width="16" height="16" class="icon" /><a href="#">Side Link 3</a><br />
  <img src="images/bullet_white.gif" alt="Bullet" width="16" height="16" class="icon" /><a href="#">Side Link 4</a><br />
  <img src="images/bullet_white.gif" alt="Bullet" width="16" height="16" class="icon" /><a href="#">Side Link 5</a><br />
  <br />
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut suscipit turpis vel augue. In ut risus. Aenean ultrices ultrices felis. Sed elementum tempus ante.
  </div>
  <b class="sidebar_content">
  <b class="sidebar_content5"></b>
  <b class="sidebar_content4"></b>
  <b class="sidebar_content3"></b>
  <b class="sidebar_content2"><b></b></b>
  <b class="sidebar_content1"><b></b></b>
  </b>
  </div> 
</div>

<div id="posts">

  <h2>Welcome To Your Website <img src="images/printer.gif" alt="Print Article" width="16" height="16" /> <img src="images/email.gif" alt="Email Article" width="16" height="16" /></h2>
  <p><span class="dropcap">S</span>o here you have another design. This one is <a href="http://validator.w3.org/check?uri=referer">XHTML strict<img src="images/page_white_go.gif" alt="External Link" width="16" height="16" /></a> and it works from 800x600 and up. Feel free to take this one apart and exchange the header, bg or whatever other parts. If you do use this design, it would be great if you let me know. As usual, you don't have to acknowledge my work if you don't want to.</p>
  <div class="blockquote">&quot;This is a block quote, in case you need to quote things... Who doesn't love quoting?!... Well, I don't do it very much.&quot;</div>
  <p>I wanted to add that I got the menu from the <a href="http://www.oswd.org/design/preview/id/2820">neuphoric</a> template, and the icons are from the free set by <a href="http://www.famfamfam.com">famfamfam<img src="images/page_white_go.gif" alt="External Link" width="16" height="16" /></a> (and the are freakin sweet). This could be a personal website, or could even just be a blog. Use it however you like.</p>
  <div class="comments">8 Comments<img src="images/comment.gif" alt="Comments" /></div><br />
  
  <h2>Lorem Ipsum Dolor <img src="images/printer.gif" alt="Print Article" width="16" height="16" /> <img src="images/email.gif" alt="Email Article" width="16" height="16" /></h2>
  <p><span class="dropcap">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit. Ut suscipit turpis vel augue. In ut risus. <a href="#">Aenean</a> ultrices ultrices felis. Sed elementum tempus ante. Vestibulum mattis iaculis purus. Maecenas nec magna feugiat tellus placerat tempus. In porttitor enim eget eros. Pellentesque commodo, neque ut tincidunt tincidunt, lectus nulla rutrum tortor, nec condimentum sem pede eu ipsum.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut <a href="#">suscipit turpis</a> vel augue. In ut risus. Aenean ultrices ultrices felis. Sed elementum tempus ante. Vestibulum mattis iaculis purus. Maecenas nec magna feugiat tellus placerat tempus. In porttitor enim eget eros. Pellentesque commodo, neque ut tincidunt tincidunt, lectus nulla rutrum tortor, nec condimentum sem pede eu ipsum.</p>
  <div class="comments">3 Comments<img src="images/comment.gif" alt="Comments" /></div>
  <br />
  
  <h2>Lorem Ipsum Dolor <img src="images/printer.gif" alt="Print Article" width="16" height="16" /> <img src="images/email.gif" alt="Email Article" width="16" height="16" /></h2>
  <p><span class="dropcap">A</span>enean ultrices ultrices felis. Lorem <a href="#">ipsum</a><a href="http://www.famfamfam.com"><img src="images/page_white_go.gif" alt="External Link" width="16" height="16" /></a> dolor sit amet, consectetuer adipiscing elit. Ut suscipit turpis vel augue. In ut risus. Sed elementum tempus ante. Vestibulum mattis iaculis purus. Maecenas nec magna feugiat tellus placerat tempus. In porttitor enim eget eros. Pellentesque commodo, neque ut tincidunt tincidunt, lectus nulla rutrum <a href="#">tortor</a>, nec condimentum sem pede eu ipsum.</p>
  <div class="comments">14 Comments<img src="images/comment.gif" alt="Comments" /></div>
  <br />

</div>

</div>

<div id="footer">

  <p>&copy; YOUR COMPANY | <a href="#">RSS FEED</a> <img class="icon" src="images/feed.gif" alt="RSS Feed" width="16" height="16" /> | DESIGN BY <a href="http://www.jdavidmacor.com">SUPER J MAN</a> | 
  <a href="http://www.ehostinfo.com/">Web Hosting</a> | <a href="http://validator.w3.org/check?uri=referer">XHTML</a> 1.0 TRANSITIONAL</p>

</div>

</div>

</body>
</html>








Related examples in the same category

1.p:first-letter font-size: 1.2em;
2.p:first-letter background-color: black;
3.p:first-letter color: white;
4.p:first-line font-weight: bold;
5.p:first-line font-size: 2em;
6.p:first-line background-image: url(http://java2s.com/style/logo.png);
7.p:first-letter font-size:32px;
8.p:first-letter font-weight:bold;
9.p:first-line font-size:18px;
10.p:first-line font-weight:bold;
11.p.className::first-letter
12.p.className::first-line
13.p::first-letter background: darkblue;
14.p::first-letter color: white;
15.p::first-letter font: 55px "Monotype Corsiva";
16.p::first-letter float: left;
17.p::first-letter margin-right: 5px;
18.p::first-line font-weight: bold;
19.p::first-line letter-spacing: 3px;
20.p:first-letter font-size: 200%;
21.p:first-letter font-weight: bold;
22.p:first-line font-size: 200%;
23.p::first-letter background: crimson;
24.p::first-letter color: pink;
25.p:first-letter font-size:32px; font-weight:bold;
26.p:first-child background: moccasin;
27.p:first-child border: 1px solid tan;
28.This paragraph uses the first-letter pseudo-element to change the appearance of the first letter in the paragraph.
29.p::first-letter font-size: 200%;background-color: lightgray;border: 1px solid black;
30.p::first-letter
31.Set the style for first line of P
32.first line pseudo-class
33.drop caps with p:first-letter
34.p#dropcap:first-letter
35.p#initialcap:first-letter
36.p::first-letter font: 120% "Monotype Corsiva"