Because you don't have time to read everything.TM |
Creating Beautiful Web Pages Through CSS
|
When you create a web page, do you leave it looking plain and uninspired? Most people do. If you're one of the people who does apply styling to their web pages, do you hardcode it using the <font> tag? That's a sin against good web design.  A simple standards-compliant way to give your web pages a little pizzazz is with Cascading Style Sheets, or CSS. The basic idea is that you don't put anything about font size, type, or color in the HTML file. Instead, the HTML is made up only of content (your text) and markup (notes about the structure of your content, like <h1> or <p>). All the presentation details are controlled by the CSS file, which says how the browser should render your markup. It's actually very easy to dramatically change the appearance of your web pages just by applying a style sheet, and I'll show you how. Save the following in a file called csstest.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>A Test of Cascading Style Sheets</title>
<style type="text/css" media="all">@import "csstest.css";</style>
</head>
<body>
<div id="main">
<h1>Cascading Style Sheets</h1>
<h2>A simple introduction to CSS</h2>
<div id="content">
<p>Here is a demonstration of how you can use CSS to control the presentation
of your web pages. It's not especially pretty, but it gets the idea across. See
http://www.SpicePuppy.com/2007/07/creating-beautiful-web-pages-through-css.html
for details.</p>
<p>The HTML file simply contains the structural markup, identifying headers
and paragraphs and such, but does not say anything about how to display them.
That means <em>no font tags</em>. Even simple tags like <b> and <i>
should be replaced with <strong> and <em>, in case you or the user
ever wants to override their default rendering with a style sheet.</p>
<p>Presentation is handled by the CSS file. You just tell it how you want each
element rendered. By keeping all the style information in a separate style
sheet instead of in the HTML, you can easily change the look and feel of your
whole website at any time.</p>
</div>
<div id="footer">
For more information about CSS, consult the many guides and samples available
on the web.
</div>
</div>
</body>
</html>
Now open csstest.html in your browser. It looks pretty dull, doesn't it? This is the web page before CSS. Here come style sheets to the rescue! Let's say that after spending some time thinking about how you want your page to appear, you decide on a blue background, yellow header, orange sub-header, pink body text with the first letter of each paragraph in big red letters and a border around it all, a white italicized footer, and different fonts throughout. Let's make a style sheet that does all that. Save the following in a file called csstest.css:
html {
margin: 0;
padding: 0;
}
body {
color: black;
font-family: "Times New Roman", Times, "New Century Schoolbook", serif;
background-color: blue;
line-height: 1.6;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 1em;
margin-right: 1em;
padding: 0;
}
#main {
padding-top: 1.5em;
padding-bottom: 1.5em;
padding-left: 1em;
padding-right: 1em;
}
#content {
color: pink;
padding-left: 2em;
padding-right: 2em;
border: medium double rgb(250, 0, 255);
}
#footer {
margin-top: 3em;
color: white;
font-size: 1.25em;
font-style: italic;
text-align: center;
}
h1 {
color: yellow;
font-family: serif;
font-size: 3em;
line-height: 1.25em;
text-align: center;
margin-top: 0;
font-variant: small-caps;
}
h2 {
color: orange;
font-family: sans-serif;
font-size: 2em;
line-height: 1.25em;
margin-top: 1.25em;
margin-bottom: 1.25em;
}
p {
font-size: 1.25em;
text-indent: 1cm;
line-height: 200%;
}
p:first-letter {
color: red;
font-size: xx-large;
}
Notice in the head section of the HTML where it says What a difference one little style sheet makes, huh? Of course, this is just an example, I didn't explain all the details, and the exact appearance of this page is probably not what you had in mind for your site. But you can use it as a starting point for learning more about how you can control the way your web pages are displayed. The main things to remember are (1) there's no need for your web pages to use the boring default rendering of your browser, and (2) the place for style information is not in the HTML, but in a separate style sheet. CSS lets us separate content from presentation, giving us the ability to design beautiful styles that can be instantly applied to every page on our site, and swapped out at the next fashion change. No need to hardcode style information on every page when you can use CSS instead. So get rid of those <font> tags, because they're truly obsolete. | Posted 7/18/2007 Home Submit Content Advertise FREE All Posts About Us Give Feedback Privacy Policy |
Stumble it!
Email to a friend