CSS Tutorial part 1 About Stylesheets

Home » Tutorials » Tutorials (2) » CSS Part 1

CSS Tutorial - Beginners

Part 1

Author: Derek Duban
www.upwithabang.com for how-to docs on web development and free plug-in services for your site.

Style Sheets

Ideally, the HTML of a web page tells the browser only the message of a page (example 'Buy Discount carpets!') how the message appears in the browser, it's formatting such as font colours, are not given by the HTML. The appearance of HMTL is dedicated by "style". You attach style to each element of the HTML.

Let's cut to the chase. In the left-hand box is HTML, in the right-hand box is style.

`<p> <strong>The Frost</strong> performs its secret ministry, Unhelped by any wind. The owlet's cry Came loud--and hark, again ! loud as before. The inmates of my cottage, all at rest, Have left me to that solitude, which suits Abstruser musings : save that at my side My cradled infant slumbers peacefully. <br> -- <em>Samuel Taylor Coleridge</em> </p>`	`p { font-size: 12px; color: blue; } strong { font-weight: bold; font-size: 14px; } em { font-decoration: underline; color: red; }`
The Frost performs its secret ministry, Unhelped by any wind. The owlet's cry Came loud--and hark, again ! loud as before. The inmates of my cottage, all at rest, Have left me to that solitude, which suits Abstruser musings : save that at my side My cradled infant slumbers peacefully. -- Samuel Taylor Coleridge

Note that each browser has default styles that it applies to each HMTL element type. For example: the <strong> element is usually shown in bold.

1 2 3 4 5