WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

home / authoring / style / sheets / headlines

[previous] [next]

Making Headlines With Cascading Style Sheets

Developer News Cisco Lawsuit: A Test for the GPL? Shifts for Enterprise Linux, Green Networks in '09 Gifts for All in Linux 2.6.28

Example #3

<p><span class="leader">Lorem ipsum dolor</span> 
 sit amet, consetetur 
 sadipscing elitr, sed diam nonumy eirmod tempor 
 invidunt ut labore et dolore magna aliquyam erat, 
 sed diam voluptua. At vero eos et accusam et justo 
 duo dolores et ea rebum. Stet clita kasd gubergren, 
 no sea takimata sanctus est Lorem ipsum dolor sit 
 amet. Lorem ipsum dolor sit amet, consetetur 
 sadipscing elitr, sed diam nonumy eirmod tempor 
 invidunt ut labore et dolore magna aliquyam erat, 
 sed diam voluptua. At vero eos et accusam et justo 
 duo dolores et ea rebum. Stet clita kasd gubergren, 
 no sea takimata sanctus est Lorem ipsum dolor sit 
 amet. Lorem ipsum dolor sit amet, consetetur 
 sadipscing elitr, sed diam nonumy eirmod tempor 
 invidunt ut labore et dolore magna aliquyam erat, 
 sed diam voluptua. At vero eos et accusam et 
 justo duo dolores et ea rebum. Stet clita kasd 
 gubergren, no sea takimata sanctus est Lorem 
 ipsum dolor sit amet.</p>

Now that the HTML is set up, let's take a look at the CSS:

p
{
margin: 0;
	padding: 0;
	line-height: 1.25em;
}

.leader
{
	font-size: 0.8em;
	font-weight: bold;
	text-transform: uppercase;
}

For a live example, take a look at Headline 3.

Example #4

The next formatting of the paragraph includes making a simple dotted line above the paragraph. But, Web developers beware: in Macintosh and Windows Internet Explorer, the dots are circles, while in Mozilla and Netscape the dots are square.

Unlike the previous two examples, there isn't a need to modify the HTML to achieve the effect. So all you need are three simple declarations:

p
{
	border-top: 0.66em dotted #090;
	margin: 0;
	padding: 1em 0 0 0;
}

For a live example, take a look at Headline 4.

Example #5 and #6

The next examples place a line on top of the paragraph. Pretty simple? Sure is! But, the simple things are often the best things to implement in our designs.

For the fifth example, we will have a 1 pixel line.

p
{
	border-top: 1px solid #000;
	margin: 0;
	padding: 0.5em 0 0 0;
}

For a live example, take a look at Headline 5.

The next example has a thicker line set to 0.5em as well as justifying the text.

p
{
	border-top: 0.5em solid #000;
	margin: 0;
	padding: 1em 0 0 0;
	text-align: justify;
}

For a live example, take a look at Headline 6.

home / authoring / style / sheets / headlines

[previous] [next]

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions

Whitepapers and eBooks

Avaya Article: Developing Speech Grammars that Rock, Part 2: Grammar Tuning Microsoft Partner Portal: Hyper-V Vaults Microsoft into Virtualization Race Small Business Solution Exchange: The Pros and Cons of Outsourcing Enterprise Emails Avaya Article: JSR 289: SIP Servlet 1.1 Provides Significant Benefits for SIP Application Developers

Microsoft Article: Build and Run Virtual Machines with Hyper-V Server 2008 Internet.com eBook: Real Life Rails Internet.com eBook: Best Practices for Developing a Web Site MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

HP Webinar: Virtualization for Business Critical SAP on SQL Server Microsoft Partner Portal Video: Microsoft Gold Certified Partners Build Successful Practices

Rackspace Hosting Center: Customer Videos MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

IdeaBlade Download: DevForce EF--Developing for LINQ and the Entity Framework Microsoft Download: Silverlight 2 SDK 30-Day Trial: SPAMfighter Exchange Module Iron Speed Designer Application Generator

Microsoft Download: Silverlight 2 Developer Runtime (Windows) IdeaBlade Download: .NET Programming with DevForce Classic MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

Online Demo: IBM Cognos 8 Business Intelligence Reporting

MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools An Introduction to 3D · Email Marketing Terms to Know · Search Engines 101: Paid Vs. Natural Search Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com Mastering SSH: Connecting, Executing Remote Commands and Using Authorized Keys · Connecticut Town Lays Groundwork for Merged School, Municipal VoIP Network · Wi-Fi for your Car, Truck, or MPV

Created: December 11, 2002
Revised: December 11, 2002

URL: http://webreference.com/authoring/style/sheets/headlines/3.html