Bearing in mind CSS needing less code typing than HTML & its capability to merely have one single style sheet that's linked with other HTML document & hence having less codes, I wonder if there's a way that helps me achieve the following:
>> I want ALL my paragraph that comes STRAIGHT AFTER any heading (h1/h2/h3/h4, etc.) to have first letter as "pseudo-letter". NOT all the paragraphs but ONLY the one that comes immediately after any of these heading.
.......................... STYLE SHEET ................
#content p.first-letter:first-letter
{
color:red;
margin-left:20px;
font-size:xx-large;
}
.......................... STYLE SHEET ................
.......................... HTML DOCUMENT ................
<p class="first-letter">
.......................... STYLE SHEET ................
In order to achieve such thing, I HAVE TO go through the entire HTML document & change any <p> tag that comes immediately after any heading (<h1>, <h2>, etc.) to <p class="first-letter">.
The result works on BOTH Internet Explorer & Firefox.
However, I tried:
.......................... STYLE SHEET ................
#content h2+p.first-letter:first-letter
{
color:red;
margin-left:20px;
font-size:xx-large;
}
.......................... STYLE SHEET ................
When I did so, I DID NOT have to type:
<p class="first-letter">
in my HTML document (as I'm doing now), however, in that case, it ONLY works in Firefox & NOT the Internet Explorer.
I wonder if anyone around could possibly point me in the right direction.
My current website can be seen on:
homepage.ntlworld.com/darsh25/alcohol.html
ENTIRE STYLE SHEET CODE
/* CSS Document */
body
{
background-image:url(background_champagne.gif);
background-attachment:fixed;
}
/* ........................................ Banner ........................................ */
div.banner
{
width:40px;
height:100px;
}
div.banner img
{
width:40px;
height:50px;
}
/* ......................................... Top Menu .................................... */
#topMenu
{
background-color:transparent;
cursor:default;
text-align:center;
width:980px;
float:right;
}
#topMenu ul
{
list-style: none;
font-size:medium;
float:right;
position:relative;
margin-left: 130px;
width:850px;
padding: 0;
}
#topMenu ul li
{
display: inline;
border:1px solid black;
width:210px;
background-color:white;
color:#FF00FF;
float:left;
position: relative;
font-size:large;
}
#topMenu ul li:hover
{
background-color:black;
}
#topMenu a
{
display:block;
text-decoration:none;
font-size:large;
color:blue;
}
#topMenu a:hover
{
color:white;
text-transform:uppercase;
}
body {behavior: url(csshover.htc);}
/* ....................................... Left Menu .......................................... */
#leftMenu
{
background-color:transparent;
cursor:default;
text-align:center;
width:100px;
float:left;
}
#leftMenu ul
{
text-align:center;
list-style:none;
margin:0px;
position:relative;
padding:0px;
width:120px;
border:thin solid red;
}
#leftMenu ul li
{
display: block;
background-color:white;
width:120px;
border-bottom:thin solid red;
color:blue;
position: relative;
font-size:large;
line-height:50px;
}
#leftMenu ul li:hover
{
color:black;
background-color:yellow;
text-transform:uppercase;
}
#leftMenu ul li ul
{
position:absolute;
display: none;
text-transform:none;
left:121px;
width:123px;
top:0px;
}
#leftMenu ul li ul a
{
display:block;
position:relative;
text-decoration:none;
background-color:white;
line-height:20px;
font-size:large;
width:123px;
color:green;
text-transform:none;
}
#leftMenu ul li ul a:hover
{
color:#00FFFF;
background-color:black;
}
#leftMenu ul li ul {display:none;}
#leftMenu ul li:hover ul {display:block;}
/* This Code is for Microsoft Internet Explorer Browser
to it shows the effect of "li:hover" */
body { behavior: url(csshover.htc); }
/* ........................... Left Menu Link Rollover Showing Image ....................... */
#leftMenu li img
{
position:absolute;
top: 190px;
left: 55px;
height: 50px;
width: 50px;
}
#leftMenu li img {display:none;}
#leftMenu li:hover img {display:block;}
/* ................................... Content ................................................ */
#content
{
background-color:white;
width:850px;
border:1px solid green;
float:right;
}
#content h2
{
font-family:"Times New Roman", Times, serif;
text-align:justify;
margin:1em;
color:#990033;
text-decoration:underline;
}
#content h3
{
font-family:Georgia, "Times New Roman", Times, serif;
text-align:left;
font-size:large;
margin-left:20px;
color:blue;
text-decoration:none;
}
#content h4
{
font-family:"Courier New", Courier, monospace;
text-align:left;
font-size:large;
color:red;
margin-left:20px;
text-decoration:none;
}
#content h5
{
font-family:"Courier New", Courier, monospace;
text-align:left;
font-size:large;
color:fuchsia;
margin-left:20px;
text-decoration:none;
}
#content h6
{
font-family:"Courier New", Courier, monospace;
text-align:left;
font-size:medium;
color:black;
margin-left:20px;
text-decoration:underline;
}
#content table
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:left;
font-size:medium;
color:black;
margin-left:20px;
}
#content p
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
margin:1em 2em;
color:black;
}
#content p.first-letter:first-letter
{
color:red;
margin-left:20px;
font-size:xx-large;
}
#content ul
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
color:black;
margin:10px 50px;
list-style-image:url(list_icon.gif);
}
#content ul li
{
margin-top:15px;
}
#content ol
{
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
color:black;
margin:1em 1em 2em 3em;
list-style-type:decimal;
}
#content ol li
{
margin-top:20px;
}
#content img.left
{
float:left;
padding:10px;
}
#content img.right
{
float:right;
padding:10px;
}
/* ................................... Bottom Menu ......................................... */
#bottomMenu
{
border:1px solid red;
float:left;
background-color:black;
color:#FFFFFF;
text-align:center;
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-size:large;
width:100%;
height:5%;
margin:0px;
}
