How to Develop a CSS Profile Page
Jun 29 '04 (Updated Jul 20 '04)
The Bottom Line With CSS, create a great-looking Profile Page that can be changed quickly and easily.
Introduction :: History of CSS :: Reasons to Use CSS :: Using CSS :: Sample Code
If you've ever worked on your profile page, you've probably learned some of the limitations of HTML (especially Epinions-sanctioned HTML). Although many good guides are out there to help (check our my old one), the limits of HTML programming along for profile pages are huge. First and foremost of those are the repetition of certain snippets - all of those:
<font-face="times new roman"> <font-color="red"> <font-size="2"> hi </font> </font> </font>
situations get old really quick. Worse, if you want to make a change, it can often take forever to change all of the tags!
Enter the solution of CSS. CSS (or Cascading Style Sheets) are a development created several years back by Netscape to apply styles to large portions of a document without resorting to coding within the HTML. They allow the designer (yes, for our purpose, that is you) to do several things:
• separate structure from presentation - think of HTML as the skeleton for your profile, and leave the colors, sizes, fonts and graphics (the presentation) to CSS.
• give yourself flexibility - now you can format large chunks of a page at once, easily, by using CSS to add styles to paragraphs, headers or links.
• make your profile page more easily read - improve readability by those with visual impairments (using screen readers) or different browsers.
[ • quick HISTORY • ]
CSS was first introduced in 1996 after being developed by Bert Bos and Håkon Lie to create a styling language separate from - but usable within - HTML structural language. As far as I know, Netscape was the first major browser to use CSS, although its integration has been touch-and-go through the years. Since its inception, it has been eagerly adapted and improved by designers. In a nutshell, it allows designers to create a stylesheet which controls the look and feel of a page, allowing them to change it quickly and easily without touching the underlying structure (HTML or xHTML). For great examples of what CSS can do, check out www.csszengarden.com.
So why haven't you heard more about CSS then? Primarily because the browser that dominates the market, Microsoft Internet Explorer, doesn't handle CSS particularly well. Making a good CSS page work in 90 % of the market takes a little extra work - and most designers don't bother. But when they do - the results are fantastic.
[ • why should I use CSS? • ]
Let's go to my earlier example. If you want large, red text for a headline (or header), in HTML you have do something like this every time:
<font-name="arial" size="2" color="red">
However, this means copying and pasting - or typing repeatitively - the whole thing again and again. Plus, those using screen readers won't know that this is a header because it didn't use the <hx> tags that designate headlines. And if you want to change it, you have to either manually retype them all or do a find and replace. Not so bad for your one-page profile page, but on a site with hundreds of pages, that can mean a LOT of time.
In CSS, you can create a method that would turn all headers of a certain type to have those same characteristics - say medium, red arial font - and all you'd have to type would be <h2> headline </h2> .
Now say you wanted to change the header colors to blue? In the old method, you would do a find-and-replace for the word "red" - UNLESS you had that word used elsewhere and wanted to keep it, in which case you would make the changes manually. In CSS, you pick the <h2> style, change "red" to "blue" and all of the headers will change automatically.
[ • using CSS? • ]
CSS can be difficult to start with, but once you've gotten the hang of it, it makes life so easy. First, a few primers:
:: where it goes
You can place your stylesheet in one of two places. You can do it inline, at the top of your page using <style> CONTENT </style> tags. Or you can do an external stylesheet which pulls the information from another page. Unfortunately, Epinions doesn't allow external stylesheets, so I won't cover that
:: basics
There are three types of "styles" that you can change, called elements. First you can substitute for an existing HTML element, replacing the <h2>, <p> or <hr> tags, for example. This is easy to do, but keep in mind that it may change or alter Epinions' default style settings, as well, resulting in unpredictable results.
You can also create special modifiers called classes and ids. Classes are modifiers which can affect multiple elements or tags - that is you can use the same named class to affect a <p>, <div> or a <a>. IDs are generally only used on one tag - only on a <h2> or a <p>, but not both.
:: first steps
Okay, I know that this seems like a lot, but it's about to get easy. I have formatted the code below to help you. Anything in bold is a PROPERTY, or an accepted attribute for use in a style, according to CSS 2.1. Things in italic are VALUES, or what number, color, percentage, etc. you want to give that attribute. For example, to change an existing header element:
h2 {font: font size font; color:color; }
ex. h2 {font: medium arial; color:red; }
-- note: with existing elements, you just put the name. However, keep in mind that all of that element will have that formatting.
To add a CLASS, we put a period (.) in front of a name which we choose:
.CLASS {font: font size font; color:color; }
ex. .blueclass {font: small arial,sans-serif; color:blue; }
For an ID, we use pound sign (#) instead:
#ID {font: font size font; color:color; }
ex. #myid {font: small century gothic,arial,sans-serif; color:orange; }
To add these classes and ids to our styles is easy. Within your HTML, there are several tags/elements that are usually affected by styles:
<div> - a box of content
<span> - a section of content within a <div>
<a> - links
If you want to have a block of content, say text, to have a format, you could use this code:
<div class="bluetext"> text goes here </div>
All of this text will be small (about 12pt) blue arial font, as we created earlier. If we wanted to have certain portions of the text different, we could use:
<div class="bluetext"> text goes here But we can have <span id="myid"> different text </span>, as well.</div>
All of the text would be blue arial, except for the 'different text' which would be orange century gothic font, instead. See, that wasn't too bad, was it?
» helpful notes:
1) when specifying a font, it's best to give choices. Not everyone has "EaglefeatherBold" on their computer, and the browser will pick a substitute, not always very well. So, give a list of fonts starting with the most specific and getting more general: EagleFeatherBold, Georgia, Times New Roman, Serif, for example. It's always a good idea to include a serif or sans-serif as the last choice - ALL computers have those.
2) colors such as "red' and "blue" are limited. By using hexidecimal colors, (such as #CC6699) you can often get more custom colors. Try www.w3schools.com/css/css_colornames.asp as a great resource for hex color numbers.
:: advanced
CSS isn't only to change fonts - it does so much more - borders, margins, background colors and images, even links can all be styled.
• To add a border to your class/ID, you need to pick three things: size, type and color. SIZE is a pixel thickness (1px, 3px, 10px), COLOR is the name or hex color, and TYPE is whether you want a solid, dashed, dotted or double line.
ex. border: 1px solid #000000;
• Margins are the space around your <div> that is, the space above, to the left, etc around the box of content. The easiest way to do this is use the format:
margin: top margin right margin bottom margin left margin
ex. margin: 0 10px 5px 10px
which puts a 10-pixel border on the top and bottom of the box, a 5-pixel margin to the right, and no margin to the left. NOTE: you must put a measurement any time you have a non-zero value, such as pixel.
• Background Colors are added using the command background: #AAAAAA in any statement (substituting #AAAAAA for your hex color). You can also set an image as your background, but that requires more effort.
• font-weight is whether it is bold or not. Use normal or bold.
• font-style is about the styling of the font. Use normal or italic.
But perhaps the number one thing people want to style is their links. Ever see sites where the links change color or style when you hover over them? This is accomplished with styles. There are 4 states of a hyperlink: link (inactive), Visited (already clicked), Hover (when the mouse is over the link) and Active (when the mouse button is clicking on the link).
You can add any number of properties to these, such as font, color, weight or - great for links - text-decoration. For the last, your choices are none, underline, overline or line-through. When you format the links in your style, you should always do just the a:link tag (which will take all of them) or PREFERABLY all four states, using this order: LoVe/HAte:
a:link {small arial,sans-serif; font-weight:bold; color:#336699;text-decoration:none;}
a:visited {small arial,sans-serif; font-weight:bold; color:#336699;text-decoration:none;}
a:hover {small arial,sans-serif; font-weight:bold; color:#A3C7D9;text-decoration:underline;}
a:active {small arial,sans-serif; font-weight:bold; color:#A3C7D9;text-decoration:underline;}
This will yield a bold blue link with no underline that will change to red and underlined when someone hovers over it to show that its clickable, for all links on your page.
If you wanted to create different types of links, you could create classes of links, changing a:link to
a.class:link, such as a.myclass:link and a.myclass:hover. To use classes for links in HTML, change your <a href> tags to:
<a href="http://www.epinions.com/" class="myclass"> MY LINK </a>
This would only change THESE links to the style set aside in the a.myclass style (see below for more examples).
[ • quick EXAMPLES • ]
Okay, for your use, that covers a LOT of what you need to know. There are a ton more options to learn, and great things you can do with CSS. But to help you out, I have created some examples to get your started that you can just cut-and-paste into your style. Just change the values where applicable. BTW, I have added some comments to help, notated like this: /* comments */
• Links (for the whole document)
a:link {1.0em arial,sans-serif; font-weight:bold; color:#336699;text-decoration:none;}
a:visited {1.0em arial,sans-serif; font-weight:bold; color:#336699;text-decoration:none;}
a:hover {1.0em arial,sans-serif; font-weight:bold; color:#A3C7D9;text-decoration:underline;}
a:active {1.0em arial,sans-serif; font-weight:bold; color:#A3C7D9;text-decoration:underline;}
• Links (custom class)
a.mine:link {1.0em arial,sans-serif; font-weight:bold; color:#336699;text-decoration:none;}
a.mine:visited {1.0em arial,sans-serif; font-weight:bold; color:#336699;text-decoration:none;}
a.mine:hover {1.0em arial,sans-serif; font-weight:bold; color:#A3C7D9;text-decoration:underline;}
a.mine:active {1.0em arial,sans-serif; font-weight:bold; color:#A3C7D9;text-decoration:underline;}
/* the class is .mine - when you put the code into your HTML, you would enter <a href="yoururl.com" class="mine"> my link </a> */
• Create a Box Around your DIV
.container {
border:1px solid #333333; /*this is gray*/
padding: 2px;
font: 1.0em arial,sans-serif; /* to change size, move up or down by 0.1em */
color: #000000; /*this is black */
width: 700px; /*change as needed */
}
• create a headline
.head {
1.2em century gothic,arial, sans-serif;
color: #336699; /* this is a blue */
font-weight: bold;
}
• put an image in the body
.leftimage {
float:left;
margin: 0 3px 0 6px;
border: 0;
}
/* this will float an image to the left of the text inside your div */
/*HTML <div><img src="http://www.mysite.com/mypicture.gif" class="leftimage"> This is my picture</div> */
• a simple navigation bar
#navbar {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .8em;
font-weight: bold;
text-align: center;
background-color: #c4c4c4;
border-top: solid #000000 1px;
border-bottom: solid #000000 1px;
font-weight: bold;
padding: 3px;}
#navbar a:link, #navbar a:visited {color: #394b60;
text-decoration: none;
border: solid #8cc3f6 1px;
border-right: solid #6f6f6f 1px;
margin-left: 5px;
margin-right: 5px;
padding-top: 3px;
padding-left: 10px;
padding-bottom: 3px;
padding-right:10px;
display: inline;}
#navbar a:hover, #navbar a.current {color: #232e3c;
background-color: #6f9cc7;
text-decoration: none;
border: solid #6188b0 1px;
border-right: solid #5f5f5f 1px;}
/* HTML for this navbar */
/* <div id="navbar"><a href="#" class="current">menu1</a> <a href="#">menu2</a> <a href="#">menu3</a> <a href="#">menu4</a></div> */
I hope this helps! Feel free to e-mail me if you have any questions!
___________________________________________________
Part of the Around Epinions in 23 Reviews Write-off.
auto :: beauty :: books :: biz/tech :: computer hardware :: software :: education :: electronics :: games :: home & garden :: kids & family :: movies :: music :: magazines :: outdoors :: personal finance :: pets :: restaurants :: sports :: travel :: web services :: wellness :: beer :: EPINIONS
 |
|
|
|
|
|
|
Epinions.com ID:
martytdx
|
 - Top 200 |
|
Member: Marty
Location: New Jersey
Reviews written: 481
Trusted by: 179 members
About Me:
Doing what I can to try new places, restaurants, books and beers.
|
|
|
© 1999-2009 Shopping.com, Inc.