Thursday, December 19th, 2002
Simple Webpage Creation
Styling Walkthrough
The basics of CSS are very simple but I don’t believe that they can be understood by simply reading the rules. This part is a demonstration of the building of a simple webpage so that you can follow along and see the development.
*It’s best to read the rest of this tutorial before beginning this part.
Going back to our basic XHTML webpage:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> This is the title of my document</title>
</head>
<body>
<p>And here is the main text of my document.</p>
<p>Here is some more text.</p>
</body>
</html> It validates and does the job of conveying information, but it’s not very pretty. Since it’s a single page, I’ll go ahead and put my styles in the head.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> This is the title of my document</title>
<style type="text/css">
<!--
body{background-color:#ffffff; color:#000000;}
-->
</style>
</head>
<body>
<p>And here is the main text of my document.</p>
<p>Here is some more text.</p>
</body>
</html> Our basic page now has a white background and black text. It looks better already. I didn’t have to define the text color since the default is black but it’s never a bad idea when you are defining a background color. And you should always define a background color for the page. Sometimes the browser’s default color is white and sometimes it’s grey. For a visual example of why you should always set a background-color, visit http://www.abms.org/. It’s not a bad design if your browser is set to a white background but it’s not very attractive with any other color.
Text Indentation
One of the particularly nice things about CSS that is difficult to do otherwise in html is the ability to indent paragraphs.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> This is the title of my document</title>
<style type="text/css">
<!--
body{background-color:#ffffff; color:#000000;}
p{text-indent:2em;}
-->
</style>
</head>
<body>
<p>And here is the main text of my document. Here is some more text to wrap around
and demonstrate the indentation. Here is some more text. Here is some more text. Here is
some more text. Here is some more text. Here is some more text. Here is some more
text. Here is some more text. Here is some more text. Here is some more text. Here
is some more text. Here is some more text. </p>
<p>Here is some more text.</p>
</body>
</html>
All of our paragraphs now start with an indention of 2 ems (an em is the width of the letter “m”).
Headers
Most webpages need headers to identify content so I’ll add a main header and a subheader.
<style type="text/css">
<!--
body{background-color:#ffffff; color:#000000;}
p{text-indent:2em;}
h1,h2{color:#006600;}
h1{text-align:center;}
-->
</style>
</head>
<body>
<h1>Main Header</h1>
<p>And here is the main text of my document. . Here is some more text to wrap around
and demonstrate the indentation. Here is some more text. Here is some more text. Here is
some more text. Here is some more text. Here is some more text. Here is some more
text. Here is some more text. Here is some more text. Here is some more text. Here
is some more text. Here is some more text. </p>
<h2>Subheader</h2>
<p>Here is some more text.</p>
</body>
</html> Not only are there two headers, they’re green and the <h1> is centered on the page. I didn’t set the size of the headers but I could have with the test-size attribute. In the third rule, the h1 and the h2 are together with a comma in between them. Whenever you want to apply the same attribute(s) to multiple tags, you can list them separated by commas. In this case, it didn’t save me any time or space. I could have just as easily put:
h1{color:#006600; text-align:center;}
h2{color:#006600;}
But if you have several attributes applying to multiple tags, it’s easier to group them together, particularly when you want to change something.
Text Width
Usability gurus say that long lines of text tire out the eye so we want the page to be narrower. You could change the margins on the <body> tag to
body{background-color:#ffffff; color:#000000; margin:50px; }
which will change all of the margins uniformly or set them individually as margin-top, margin-right, margin-bottom, margin-left. I prefer to put the text in a div and set the width as a percent that can expand or contract depending on the size of the window.
<style type="text/css">
<!--
body{background-color:#ffffff; color:#000000;}
p{text-indent:2em;}
h1,h2{color:#006600;}
h1{text-align:center;}
#text{width:80%; background-color:#bbccbb; border: 5px solid #006600;}
-->
</style>
</head>
<body>
<div id="text">
<h1>Main Header</h1>
<p>And here is the main text of my document. Here is some more text. Here is some
more text. Here is some more text. Here is some more text. Here is some more text.
Here is some more text. Here is some more text. Here is some more text. Here is
some more text. Here is some more text. Here is some more text. Here is some
more text. </p>
<h2>Subheader</h2>
<p>Here is some more text.</p>
</div>
</body>
</html> The text is now only taking up only 80% of the width of the <body> tag with a pale green background. The centered h1 is now centered in the green box instead of the white page. There’s also a dark green border, which is right next to the words on the left. Putting in 5 pixels of padding [padding-left:5px;] will move the text over to the right.
- Padding
- blank space, inside the object, around the edges.
- Margin
- blank space, outside the object, around the edges.
The white space at the top and the left of the green box are the margins of the <div> tag.
IDs
Instead of just defining the <div> tag, I gave it an id (#text). I could have defined the <div> tag but then all divs I used would have those same properties, and I most likely wouldn’t want that. An ID is defined with a pound sign (#) and marks a unique area of the page, in this case, the text. If I want another box under this one, I’ll have to create a new id with the same properties (which is as easy as #text, #newid{}).
Classes
Or, I can use a class. A class identifies something as a type, for instance, #text, becomes .text (exchange the pound sign for a period), and “the” text block becomes “a” text box.
<style type="text/css">
<!--
body{background-color:#ffffff; color:#000000;}
p{text-indent:2em;}
h1,h2{color:#006600;}
h1{text-align:center;}
.text{width:80%; background-color:#bbccbb; border: 5px solid #006600; padding-left:5px;}
-->
</style>
</head>
<body>
<div class="text">
<h1>Main Header</h1>
<p>And here is the main text of my document. Here is some more text. Here is some more
text. Here is some more text. Here is some more text. Here is some more text. Here is
some more text. Here is some more text. Here is some more text. Here is some more
text. Here is some more text. Here is some more text. Here is some more text. </p>
<h2>Subheader</h2>
<p>Here is some more text.</p>
</div>
<div class="text">
<h1>Main Header</h1>
<p>And here is the main text of my document. Here is some more text. Here is some more
text. Here is some more text. Here is some more text. Here is some more text. Here is
some more text. Here is some more text. Here is some more text. Here is some more
text. Here is some more text. Here is some more text. Here is some more text. </p>
<h2>Subheader</h2>
<p>Here is some more text.</p>
</div>
</body>
</html>
Any div with a class of “text” will have those same attributes. Putting a bottom margin (margin-bottom:5px;)puts space between the two boxes.
Links
Most webpages have a list of links somewhere, so we’ll add a #link div.
<style type="text/css">
<!--
body{background-color:#ffffff; color:#000000;}
p{text-indent:2em;}
h1,h2{color:#006600;}
h1{text-align:center;}
.text, #link{width:80%; background-color:#bbccbb;
border: 5px solid #006600; padding-left:5px; margin-bottom:5px;}
-->
</style>
</head>
<body>
<div class="text">
<h1>Main Header</h1>
<p>And here is the main text of my document. Here is some more text. Here is some
more text. Here is some more text. Here is some more text. Here is some more text.
Here is some more text. Here is some more text. Here is some more text. Here is
some more text. Here is some more text. Here is some more text. Here is some
more text. </p>
<h2>Subheader</h2>
<p>Here is some more text.</p>
</div>
<div class="text">
<h1>Main Header</h1>
<p>And here is the main text of my document. Here is some more text. Here is some
more text. Here is some more text. Here is some more text. Here is some more text.
Here is some more text. Here is some more text. Here is some more text. Here is
some more text. Here is some more text. Here is some more text. Here is some
more text. </p>
<h2>Subheader</h2>
<p>Here is some more text.</p>
</div>
<div id="link">
<a href="*">Link 1</a>
<a href="*">Link 2</a>
<a href="*">Link 3</a>
<a href="*">Link 4</a>
<a href="*">Link 5</a>
</div>
</body>
</html> Our page now has a link box formatted like the text boxes but it doesn’t look very nice. The links are running into each other and the whole thing is shifted to the left side. A common way of treating links like this is to insert non-breaking spaces and separator bars in between them. Certain symbols and characters are displayed differently by a browser than by a word processing program. For instance, whenever a browser sees a <, it assumes that whatever is next will be part of an html tag. To force it to display a < instead, you use a special character code (< for lesser than, > for greater than). A non-breaking space ( ) is a code to force the browser to put spaces in between the links.
<div id="link">
<a href="*">Link 1</a> |
<a href="*">Link 2</a> |
<a href="*">Link 3</a> |
<a href="*">Link 4</a> |
<a href="*">Link 5</a>
</div>Our link bar looks better but the blue is a little hard to read on the green. After far too much experimentation, we settle on a muted brown for the links.
a{color:#cc7744;}
The color will apply to all links on the page, no matter which div they are in, if any. To only apply them to the links div (useful if the divs have different background colors) Simply add the id to the selector.
#link a{color:#cc7744;}
One of the best pieces of CSS is the a:hover pseudo-element *. It essentially provides a mouseover effect on the links without needing to use javascript.
a:hover{color:#ffffff; background-color:#000000; text-decoration:overline underline;}
The links in the link div change colors and gain an overline when the mouse moves over them. However, they cannot be seen very well because of the size of the div. Adding padding on the top and bottom makes the div tall enough to read more easily.
#link{padding-top:5px; padding-bottom:5px;}.
The rule doesn’t have to be added to the previous one with the .text class if you don’t wish to add padding to those boxes. It can be left on it’s own.
*NN4 simply ignores a:hover.
Horozontal Centering
The last part is centering the boxes on the page. This isn’t actually the way it’s supposed to be done, but it works (except in Netscape 4).
- Put “text-align: center;” on the <body> tag
- Add “text-align:left;” and replace “margin-bottom:5px;” with “margin: 0 auto;” in the .text, #link rule.
- “text-align: center;” goes on the #link id.
Everything is centered, but we’ve lost the space in between the boxes. Adding “margin-bottom:5px;” back to the end of the .text, #link rule adds it back in and we have a nicely formatted webpage.
There is a lot more I could go into, namely positioning and other more complex ideas, but that’s another tutorial. If anyone wants it, I will be happy to write one.
Links to more information
If you are interested in more in depth articles than I’ve provided, there are a number of excellent resources in the web, a few of which are listed below.
| CNET - Web Building - Authoring & Site Design - Get Started With Cascading Style Sheets | http://builder.cnet.com/webbuilding/pages/Authoring/CSS/ss03.html |
| Digital Web Magazine - Features: Cascading Style Sheets, Promise vs. Reality, and a Look to the Future | http://www.digital-web.com/features/feature_2002-06.shtml |
| Web Teaching Articles: Practical Accessibility | http://www.dartmouth.edu/~webteach/articles/access.html |
| “Why Web Standards Matter” Carrie Bickner,Library Journal,7/15/2002 | http://libraryjournal.reviewsnews.com/ |
| “Web Standards for Hard Times” Paul Boutin,Lycos,Aug 6 2002 | http://hotwired.lycos.com/webmonkey/02/33/index1a.html |
| “The Secret Life of Markup” Steve Champeon,Webmonkey,Oct 11 2002 | http://hotwired.lycos.com/webmonkey/02/42/index4a.html?tw=design |
| Digital Web Magazine - Tutorial: Web Page Reconstruction with CSS | http://www.digital-web.com/tutorials/tutorial_2002-06.shtml |
Lists of CSS properties and attributes.
| The CSSPG Examples Directory | http://css.nu/examples/index.html |
| CSS 2 reference with examples | http://www.zvon.org/xxl/CSS2Reference/Output/ |
More resources than you could ever need are listed at:
| CSS, cascading style sheets, HTML, Website Tips at Websitetips.com - web page and web site tips, articles, helpful information and resources | http://www.websitetips.com/css/ |
Validation
You can make sure that your markup is done correctly by running it through the World Wide Web Consortium’s (W3C) online validator at http://validator.w3.org/. You can enter the web address of a page already posted, or you can upload files from your computer. The validator tells you whether or not your code is correct and will list the errors it found by the line number. At the bottom of the report is a duplication of your code with the line numbers annotated.
The W3C CSS validator is at http://jigsaw.w3.org/css-validator/. It offers the options of URI (URL), file upload, or a text box where you can copy and paste your code.
To see if your page is accessible for people with disabilities, try Bobby at http://bobby.cast.org/html/en/index.jsp. Bobby is a good start, but remember that things like a readable text size are subjective so it isn’t a definitive authority.
An important advantage of validation and standards compliance is forward compatibility. Newer, more compliant browsers will still display your pages as planned while they stop supporting older, non-compliantly coded webpages.
By Laura @ 9:27 am in Tutorials §
