Friends

This is default featured post 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

Selasa, 27 September 2011

CSS Font Color

In this ultra simple nerd-free CSS tip, I will show you how to change the color of your fonts with CSS.
Check out the samples:
h2 { color: green; }
 
h4 { color: #9000A1; } 
 
p { color: rgb(0, 210, 87); }
Comments:
You are able to specify the color in either:
  • by Named color
  • by Hexadecimal
  • by RGB
Thanks,

CSS Font Sizes

In this tip, you will learn how to specify a font’s size with CSS. Being a practical nerd, I will not waste time talking about all the various methods for declaring font sizes with CSS … instead I will concentrate on the two widely used ways and then briefly explain the differences. First, the two main methods:
  1. By pixel
  2. By em
What is the difference between and EM and a pixel?
Pixels are an absolute measure of a font’s size and an EM is a relative measure – that means the actual pixel size of the font (as they appear on screen) set with EM’s, can fluctuate. This makes using EM’s trickier. So the nerd answer is NOT to use EMs!
Let’s look at a quick EM example anyway:
<div style="font-size:1.2em">
So the above would cause the fonts to be about 20% larger than the baseline font size – thus 1.2em. I am not going to go into all the nerd details about EM’s because I think pixels are the way to go.
Let’s look at a quick pixel example:
<div style="font-size:12px">
Thanks,
Stefan Mischook

How to Style Headings with CSS

Different browsers have different default styling for headings – the h1, h2, h3, etc. tags. (Default Heading Styling). However, with a little bit of CSS, we can style them any way we like. If we want to apply certain styles to all our headings – for example margins to create a larger space above the header than between it and the following paragraph, write the CSS like this:
h1, h2, h3, h4, h5 {
	margin-top: 35px;
	margin-bottom: 0;
}
(See the Styled Margins.) Also note that the bottom margin which is set as zero, does NOT have a unit of measure. Zero does not need any unit of measure; zero is zero, whether it’s px, em, percent, whatever.
Maybe we want our headings in a different font than the rest of our page, and with this CSS
h1, h2, h3, h4, h5 {
	margin-top: 35px;
	margin-bottom: 0;
	font-family: Arial, Helvetica, sans-serif;
}
we can achieve that with minimal styling: (See Arial Font Applied to Headings.)
Or we can address individual tags:
h1 {
	color: #FF0000; 
}
h2 {
	background: #FFFF99; 
}
h3 {
	text-align: center;
}
h4 {
	font-style: italic;
}
h5 {
	color: #CCFFFF; 
	background: #000099;
}
And all of the above creates this.

How to Style Fonts with CSS

The FONT tag is dead. Long live CSS! Please help spread the word, too many people STILL have not gotten that memo and merrily use their deprecated font tags (along with the table-based layouts and improper doctypes). But now we all know – no more excuses. The easiest way to apply a font style to your website, is right there with your body tag:
body {
font-family: "Times New Roman", Times, serif;
}
And there you have it – now all the text on your page will be Times New Roman, and if that font is not installed on the viewer’s computer, then they’ll see the text in Times, and if they don’t have that either, then the text will display in whatever default serif font they have installed.
Side Note: Serif is the style with little hooks – for example opposed to (which is shown in Arial – see the difference?).
Do note the quotes around “Times New Roman” in the CSS above – that’s because that font name consists of more than one word. The quotes keep it together.
Sometimes, you may not want your entire page in one font, but might want your headers to stick out. Easy enough, just style them separately:
h {font-family: Verdana, Arial, Helvetica, sans-serif;
}

Adding Comments to CSS

Comments in a stylesheet are a good idea. Often, things that are obvious as you write them, make no sense a week or even years later – or to somebody else. So it can be very helpful to include explanations. However, we don’t want to browser to read and render those, as they are not meant to be displayed on the webpage, so we have to hide them.
/*
This is a HIDDEN Comment!
*/
That’s all it takes – a ‘/*’ to start, and a ‘*/’ to end. A few handy applications for these hidden comments are:
h1 {
color: #000000; /* black - because I forget */
font-size: 2em;
}
Another handy use for the comments are to help define the structure, so things are easier to find:
/* ----------------- Generic Styles ------------------ */
 
.alignleft { float: left;}
.alignright { float: right;}
.clear { clear: both;}
 
p { margin: 0 15px 10px;}
 
h1, h2, h3 {
	font-family: Baskerville, Garamond, Palatino, "Palatino Linotype", "Hoefler Text", "Times New Roman", serif;
}
 
h2,  h2 {
	margin: 25px 20px 5px;
	color: #9e6548;
	font-size: 2em;
}
 
h3 {
	margin: 25px 0 5px;
	padding: 5px 25px;
	background: #9e6548;
	color: #f7efe3;
}
 
ul { margin-bottom: 25px; }
 
/* ----------------- The Header -------------- */
 
#header {
	background: url(pics/stove.jpg) #f7efe3 no-repeat top right;
	height: 200px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
 
#header h1 {
	color: #9e6548;
	font-size: 3em;
	padding: 35px 25px 0;
}
 
/* ------------- Top Navigation ------------------- */
 
#topnav {
	background: url(pics/nav.png) repeat-x;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	width: 679px;
	height: 45px;
	top: 55px;
	position: relative;
	padding-top: 13px;
}
 
#topnav li {
	display: inline;
	margin: 15px;
	}
/* ------------ content -------------- */
 
#content, #contentPage, #indexPage {
	float: left;
	width: 635px;
	padding: 35px;
}
 
#contentPage h2, #search h2 {
	margin-top: 0;
	margin-bottom: 0;
}
 
#contentPage h3, #search h3 {
	margin-bottom: 10px;
}
 
/* ----------- Sidebar ---------------- */
 
#sidebar {
	width: 205px;
	background: #9e6548;
	float: right;
	margin: 12px 0;
	color: #f7efe3;
	padding: 20px 10px;
}
 
#sidebar h1, #sidebar h2 {
	font-size: 1.4em;
	margin: 25px 5px 5px;
	color: #f7efe3;
}
 
/* ------------- footer ----------------------- */
 
#footer {
	clear: both;	
	height: 40px;
	font-size: .8em;
	background: #9e6548;
	color: #f7efe3;
	text-align: center;
}
 
#footer p {
	padding-top: 14px;
}
I’m sure you get the idea.

3-Column, Fixed Width Layout with CSS

The three-column layout is probably the second most common layout used for websites. There’s usually a header and a footer – and then some content, maybe a sidebar for navigation, a column in the middle with some content info, and another column with some additional stuff, whatever that may be. What you put inside your columns doesn’t matter – the way to achieve the 3-column layout stays the same. So let’s start with our basic HTML to put all the parts on paper — or in our case, on line. This is the basic outline of what’s between the body tags:
<div id="wrapper">
 
	<div id="header"></div>
 
	<div id="column-left"></div>
 
	<div id="column-center"></div>
 
	<div id="column-right"></div>
 
	<div id="footer"></div>
 
</div>
For the entire HTML code – to include some filler content – see Basic HTML – No Styling. To see the code of the example page, just right-click and chose “View Source” from the drop-down. Most browsers offer that feature.
And of course what we get, is NOT a 3-column layout. It’s just one division on top of the next. That’s because we haven’t gotten to the ‘with CSS’ part of the title of this post yet. So let’s already!!
First, and just to make things easier to see, I will apply the fixed width and center my page. Here’s a post with the finer details Center-aligning a Website right here already. Here is the CSS that does that:
* {
	margin: 0;
	padding: 0;
}
 
#wrapper {
	width: 980px;
	background: silver;
	margin: 0 auto;
}
 
#header {
	background: black;
	color: white;
}
 
#column-left {
	background: red;
}
 
#column-center {
	background: yellow;
}
 
#column-right {
	background: purple;
}
 
#footer {
	background: green;
}
(Please note that you should really be using hex or rbg color codes, but for the purpose of this demonstration, color names are just easier to deal with.)
And it looks Like This. Now we just have to get our columns to act like columns and line up next to each other. There are different ways to do this, but I prefer to just float them all. So we’ll give them all a width and add float: left; to our three columns:
#column-left {
	width: 250px;
	float: left;
	background: red;
}
 
#column-center {
	width: 480px;
	float: left;
	background: yellow;
}
 
#column-right {
	width: 250px;
	float: left;
	background: purple;
}
At this point, it’s important to be aware of a special characteristic of floats – I picture them as balloons – they float above our heads, without taking up any actual space among us. So just as you can place a box under a balloon without the two affecting each other’s space, our footer will act like the floated divisions are not even there, and line itself up neatly right under the header – where we do NOT want it to be. So we have to give the footer a special set of instructions:
#footer {
	clear: both;
	background: green;
}
and now the whole thing looks Like This. And there you have it!
A few things can go wrong, and here is some easy, preliminary damage control: If you see your columns NOT all sitting next to each other, it’s likely because the total sum of all their widths, paddings, and margins combined is GREATER THAN the width of their containing wrapper. So put one of your columns on a diet and cut its width down some – and things should fall into place beautifully. And if not, ask for help at the Killersites Community.

Image Borders with CSS

Sometimes, a website design benefits when images have frames – or borders. One way to get them is one image at a time, using a graphics program. But there is a much faster way – with CSS! This code:
<img src="image.jpg" width="350px" height="262px" 
alt="Rusty Stove in Luckenbach, Texas">
inserts a plain image into your page:

And if we add this to our CSS:
img {
border-color: #7d6b72;
border-style: solid;
border-width: 5px;
}
Then our image appears like this:

Actually, I would use shortcuts and write my CSS like this:
img {
border: 5px solid #7d6b72;
}

Styling Lists with CSS

We’ve already discussed navigation lists and list bullet images, but sometimes, a list is just a list. There are two types – the ordered list and the unordered list. The ordered list counts the items; the unordered list marks the individual items with bullets or other markers. The HTML is simple.
<ol>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ol>
 
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
And, without any styling applied at all, that looks Like This.
We can affect the list item markers with some simple CSS and the list-style-property controls those. For unordered lists, we can chose between ul styles: disc, square, circle, or none – which looks like this, or between ol styles: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, upper-greek, lower-latin, upper-latin, armenian, or georgian, which looks like that.
Other than that, we can style the ul tag and the li tag. Anything added to the ul tag, affects the entire list, where properties applied to the li tag will affect the individual list items. So this CSS
ul {
	background: #ffe566;
	padding: 25px;
}
 
ol {
	background: #828772;
	padding: 15px;
}
 
ul li {
	background: #fc6;
	margin: 5px;
}
 
ol li {
	background: #9cc;
	padding: 10px;
        margin-left: 35px;
}
will create that.
(Note that I had to add the ‘ul’ or ‘ol’ in front of the ‘li’ so I could target specifically either list’s items. Had I just used ‘li’, any styling would have affected all of them regardless.) … example: adding a larger font size to ‘just li’.

Multiple Background Images with CSS

At times, it makes more sense to use background images than to insert them directly into the page. And while each element – like your body tag – can hold only one background image, they can be applied to several elements. But pretty much every selector can hold a background image. On THIS PAGE, I have added the image to the html tag, the body tag, and the h1 and h2 tags (these are ‘selectors’) – like so:
body {
	background: url(bgimage.jpg) repeat-y right;
}
 
html {
	background: url(bgimage.jpg) repeat-y left;
}
 
h1 {
	background: url(bgimage.jpg) no-repeat right;
}
 
h2 {
	background: url(bgimage.jpg) no-repeat left #ffc;
	padding-left: 250px;
	height: 150px;
}
 
#wrapper {
	padding: 0 250px; 
/*I'm using the right and left padding of the wrapper to keep
the content off the images */
}
Note that I’m a bit lazy at the moment, and am using the same image for all four selectors. Taking a closer look at each of them, also shows a bit more how things work:
The html tag (image displayed on the left) repeats the flower all the way down the monitor, regardless of how much content there is. Resize your window and see what happens.
The body tag, where the image is displayed to the right, only shows the image as far as the content goes.
The h1 tag only shows as much of the image as the space its content is taking up.
The h2 tag also has some height added to it (exactly 150px, the height of the background image), so it does show the entire image. I’ve also added the background color to more clearly demonstrate the space that’s taken up by h2.

All Caps with CSS

While text in general is hard to read when written in all caps – and considered the electronic version of yelling – using CAPS for emphasize is a handy tool. Headers are a place where capitalization is frequently used. And to assure that your header is displayed uniformly throughout the site without having to worry about actually writing in all caps, just use CSS:
h1 {
text-transform: uppercase;
}
With this, everything that has the h1 tag applied, will appear in all caps.
Another interesting text-transformation property is "capitalize"
h1 {text-transform: capitalize;
}
With this, all your words will begin with a capital letter!

Styling iframes with CSS

If you still haven’t heard, hear it now: FRAMES ARE DEAD – well, technically, they are more like the undead – the zombies of webdesign. They should be gone and forgotten but refuse to stay buried. It’s much better not to use them. However, there may be a situation, where inserting a separate html document into your page makes sense. And there’s an app for that: Iframes (aka inline frames). This code inserts a basic page into an html page:
<iframe src="http://www.killersites.com/">
<p>Your browser does not support iframes.</p>
</iframe>
At this point, there is absolutely no styling applied to the iframe, and it looks like this. Note the line regarding lack of browser support. Iframes are supported by all the major browsers, but it’s a good idea to add this for the odd browser that doesn’t.
While I am a strong supporter of using the HTML strict doctype and writing validating, standard-compliant code – iframes will not validate, which leaves us with two options: Either suck up the iframe-related validation errors or switch to HTML transitional doctype for the pages with iframes.
CSS gives you the power to dress your iframe up a bit. The following attributes are available:
  • src (the URL of your iframe)
  • longdesc (this specifies the URL of the iframe, but is hardly supported and can just as well be ignored)
  • name (obviously, the name of your iframe)
  • height (the height of your iframe)
  • width (the width of your iframe)
  • frameborder (1 or 0 – 1 is for yes, 0 for no)
  • marginheight (determines the top and bottom margin of your iframe)
  • marginwidth (determines right and left margins of your iframe
  • scrolling (Do you want a scrollbar? Yes, no, or auto – ‘Yes’, is obvious. ‘No’ should not be used – what if someone does not see the entire content? If this is set to ‘no’, that viewer can never get to the hidden parts of what you’re inserting. ‘Auto’ lets the browser decide if one is needed and seems the best option here to me.)
  • (align) – I’m just mentioning this for completeness; it has been deprecated. Don’t use it.
So this inline CSS:
<iframe src="http://www.killersites.com" 
name="Killersites.com" height="400px" width="700px" 
frameborder="0" marginheight="20" marginwidth="35" 
scrolling="auto">
<p>Your browser does not support iframes.</p>
</iframe>
Gives you that. And if you add a bit more CSS to the frame itself:
iframe {
 margin-left: 95px;
}

Styling a Horizontal Rule with CSS

A quick and easy way to insert a dividing line into a website is with a horizontal rule, the hr tag. This horizontal rule

was created by the following inline CSS:
<hr style="color: #f00; background: #f00; width: 75%; height: 5px;">
It could also be styled in your internal or external stylesheet (which is usually the better approach):
hr {
     color: #f00;
     background: #f00; 
     width: 75%; 
     height: 5px;
}
Note that color AND background-color are applied. This is necessary, as some browsers use the background-color, others (IE) the color element to apply color to the rule.

he CSS Overflow Property

Elements in a website will expand to make room for whatever they contain. An empty division, for example, won’t show at all, but you can add 1 or 12 (whatever) paragraphs, and the division will be as big as it needs to be so everything inside is displayed.
But what happens if the dimensions of an element – let’s use a division for this demonstration – are set?
This division is set at a height and width of 100 and 200 pixel, respectively, and it has a colored background to display its dimension.
The code that creates this looks like this:
<div style="width: 200px; height: 100px; background: #ededed;">
<p>This division is set at a height and width of 100 and 200 pixel,
respectively, and it has a colored background to display its dimension.
</p></div>
In this example, overflow is no issue, there is nothing here to overflow. But what happens, if I add more content than this little box can hold?
Es war einmal ein kleines süßes Mädchen, das hatte jedermann lieb, der es nur ansah, am allerliebsten aber ihre Großmutter, die wußte gar nicht, was sie alles dem Kinde geben sollte. Einmal schenkte sie ihm ein Käppchen von rotem Sammet, und weil ihm das so wohl stand und es nichts anders mehr tragen wollte, hieß es nur das Rotkäppchen.
My cup overfloweth! And this is where the overflow property comes into play. As you see, there is no overflow property applied to the above.
My cup overfloweth! And this is where the overflow property comes into play. As you see, there is no overflow property applied to the above.
My cup overfloweth! And this is where the overflow property comes into play. As you see, there is no overflow property applied to the above.
Geesh, I had to say that three times just to clear my overflow so one can actually read what is written. But it makes the point nicely – If you stick more content into a container than it can hold, you have a problem!
This is where the overflow property comes into play. As you see, there is no overflow property applied to the above, but the division is responding to the default, which is
div {overflow: visible; }
So I need to decide what to do with this overflow. One option is to hide it by applying ‘overflow: hidden’ to the CSS. In an internal or external stylesheet, the styling for our example division would then look like this:
div {
height: 100px;
width: 200px;
background: #EDEDED;
overflow: hidden;
}
And as we look at the result of this, it’s easy to realize what kind of problem we now have:
Es war einmal ein kleines süßes Mädchen, das hatte jedermann lieb, der es nur ansah, am allerliebsten aber ihre Großmutter, die wußte gar nicht, was sie alles dem Kinde geben sollte. Einmal schenkte sie ihm ein Käppchen von rotem Sammet, und weil ihm das so wohl stand und es nichts anders mehr tragen wollte, hieß es nur das Rotkäppchen.
Obviously, this creates a whole new issue: Now, part of the text has disappeared, and unless folks look at the source – and who, with the exception of us geeks, would do that??? – they will never know what else you had to say.
Good news is that in addition to ‘visible’ and ‘hidden’, which we explored above, there are two additional values to chose from: ‘scroll’ and ‘auto’. ‘Scroll’ will create a horizontal AND a vertical scrollbar to the box, whether one is needed or not.
This division is set at a height and width of 100 and 200 pixel, respectively.
That doesn’t make much sense. Why put a scrollbar if there’s nothing to scroll to? But if you think that you would know, as you design your site, if your content will fit into its element or not, you are not 100% correct. Things may or may not fit when YOU look at them, but you can never be sure exactly how all the folks visiting have their settings adjusted and how things look to them. With that in mind
div {overflow: auto;}
is the perfect solution. A srollbar will appear if one is needed:
Es war einmal ein kleines süßes Mädchen, das hatte jedermann lieb, der es nur ansah, am allerliebsten aber ihre Großmutter, die wußte gar nicht, was sie alles dem Kinde geben sollte. Einmal schenkte sie ihm ein Käppchen von rotem Sammet, und weil ihm das so wohl stand und es nichts anders mehr tragen wollte, hieß es nur das Rotkäppchen.
And not, if it’s not needed:
This division is set at a height and width of 100 and 200 pixel, respectively.

Centering Text with CSS

Centering text and other elements can easily be done with the CSS text-align property. It can be applied to a division, the p tag – pretty much any block-level element. Applying this to an internal or external stylesheet:
p {text-align: center;}
or this to inline styling:
<p style="text-align: center;">This is centered text</p>
will center your text.

starting with HTML + CSS

This short tutorial is meant for people who want to start using CSS and have never written a CSS style sheet before. It does not explain much of CSS. It just explains how to create an HTML file, a CSS file and how to make them work together. After that, you can read any of a number of other tutorials to add more features to the HTML and CSS files. Or you can switch to using a dedicated HTML or CSS editor, that helps you set up complex sites.
At the end of the tutorial, you will have made an HTML file that looks like this:

The resulting HTML page, with colors and layout, all done with CSS.
Note that I don't claim that this is beautiful ☺
Alert! Advanced: Sections that look like this are optional. They contain some extra explanation of the HTML and CSS codes in the example. The “alert!” sign at the start indicates that this is more advanced material than the rest of the text.

Step 1: writing the HTML

For this tutorial, I suggest you use only the very simplest of tools. E.g., Notepad (under Windows), TextEdit (on the Mac) or KEdit (under KDE) will do fine. Once you understand the principles, you may want to switch to more advanced tools, or even to commercial programs, such as Style Master, Dreamweaver or GoLive. But for your very first CSS style sheet, it is good not to be distracted by too many advanced features.
Don't use a wordprocessor, such as Microsoft Word or OpenOffice. They typically make files that a Web browser cannot read. For HTML and CSS, we want simple, plain text files.
Step 1 is to open your text editor (Notepad, TextEdit, KEdit, or whatever is your favorite), start with an empty window and type the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h1>My first styled page</h1>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
</html>
In fact, you don't have to type it: you can copy and paste it from this Web page into the editor.
(If you are using TextEdit on the Mac, don't forget to tell TextEdit that the text is really plain text, by going to the Format menu and selecting “Make plain text”.)
Alert! Advanced: The first line of the HTML file above tells the browser which type of HTML this is (DOCTYPE means DOCument TYPE). In this case, it is HTML version 4.01.
Words within < and > are called tags and, as you can see, the document is contained within the <html> and </html> tags. Between <head> and </head> there is room for various kinds of information that is not shown on screen. So far it contains the title of the document, but later we will add the CSS style sheet there, too.
The <body> is where the actual text of the document goes. In principle, everything in there will be displayed, except for the the text inside <!-- and -->, which serves as a comment to ourselves. The browser will ignore it.
Of the tags in the example, <ul> introduces an “Unordered List”, i.e., a list in which the items are not numbered. The <li> is the start of a “List Item.” The <p> is a “Paragraph.” And the <a> is an “Anchor,” which is what creates a hyperlink.
the HTML source shown inside KEdit
The KEdit editor showing the HTML source.
Alert! Advanced: If you want to know what the names in <…> mean, one good place to start is Getting started with HTML. But just a few words about the structure of our example HTML page.
  • The “ul” is a list with one hyperlink per item. This will serve as our “site navigation menu,” linking to the other pages of our (hypothetical) Web site. Presumably, all pages on our site have a similar menu.
  • The “h1” and “p” elements form the unique content of this page, while the signature at the bottom (“address”) will again be similar on all pages of the site.
Note that I didn't close the “li” and “p” elements. In HTML (but not in XHTML), it is allowed to omit the </li> and </p> tags, which I did here, to make the text a little easier to read. But you may add them, if you prefer.
Let's assume that this is going to be one page of a Web site with several similar pages. As is common for current Web pages, this one has a menu that links to other pages on the hypothetical site, some unique content and a signature.
Now select “Save As…” from the File menu, navigate to a directory/folder where you want to put it (the Desktop is fine) and save the file as “mypage.html”. Don't close the editor yet, we will need it again.
(If you are using TextEdit on Mac OS X before version 10.4, you will see an option Don't append the .txt extension in the Save as dialog. Select that option, because the name “mypage.html” already includes an extension. Newer versions of TextEdit will notice the .html extension automatically.)
Next, open the file in a browser. You can do that as follows: find the file with your file manager (Windows Explorer, Finder or Konqueror) and click or double click the “mypage.html” file. It should open in your default Web browser. (If it does not, open your browser and drag the file to it.)
As you can see, the page looks rather boring…

Step 2: adding some colors

You probably see some black text on a white background, but it depends on how the browser is configured. So one easy thing we can do to make the page more stylish is to add some colors. (Leave the browser open, we will use it again later.)
We will start with a style sheet embedded inside the HTML file. Later, we will put the HTML and the CSS in separate files. Separate files is good, since it makes it easier to use the same style sheet for multiple HTML files: you only have to write the style sheet once. But for this step, we just keep everything in one file.
We need to add a <style> element to the HTML file. The style sheet will be inside that element. So go back to the editor window and add the following five lines in the head part of the HTML file. The lines to add are shown in red.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[etc.]
The first line says that this is a style sheet and that it is written in CSS (“text/css”). The second line says that we add style to the “body” element. The third line sets the color of the text to purple and the next line sets the background to a sort of greenish yellow.
Alert! Advanced: Style sheets in CSS are made up of rules. Each rule has three parts:
  1. the selector (in the example: “body”), which tells the browser which part of the document is affected by the rule;
  2. the property (in the example, 'color' and 'background-color' are both properties), which specifies what aspect of the layout is being set;
  3. and the value ('purple' and '#d8da3d'), which gives the value for the style property.
The example shows that rules can be combined. We have set two properties, so we could have made two separate rules:
body { color: purple }
body { background-color: #d8da3d }
but since both rules affect the body, we only wrote “body” once and put the properties and values together. For more about selectors, see chapter 2 of Lie & Bos.
The background of the body element will also be the background of the whole document. We haven't given any of the other elements (p, li, address…) any explicit background, so by default they will have none (or: will be transparent). The 'color' property sets the color of the text for the body element, but all other elements inside the body inherit that color, unless explicitly overridden. (We will add some other colors later.)
Now save this file (use “Save” from the File menu) and go back to the browser window. If you press the “Reload” button, the display should change from the “boring” page to a colored (but still rather boring) page. Apart from the list of links at the top, the text should now be purple against a greenish yellow background.
Screenshot of the colored page in Konqueror
How one browser shows the page now that some colors have been added.
Alert! Advanced: Colors can be specified in CSS in several ways. This example shows two of them: by name (“purple”) and by hexadecimal code (“#d8da3d”). There are about 140 color names and the hexadecimal codes allow for over 16 million colors. Adding a touch of style explains more about these codes.

Step 3: adding fonts

Another thing that is easy to do is to make some distinction in the fonts for the various elements of the page. So let's set the text in the “Georgia” font, except for the h1 heading, which we'll give “Helvetica.”
On the Web, you can never be sure what fonts your readers have on their computers, so we add some alternatives as well: if Georgia is not available, Times New Roman or Times are also fine, and if all else fails, the browser may use any other font with serifs. If Helvetica is absent, Geneva, Arial and SunSans-Regular are quite similar in shape, and if none of these work, the browser can choose any other font that is serif-less.
In the text editor add the following lines:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[etc.]
If you save the file again and press “Reload” in the browser, there should now be different fonts for the heading and the other text.
Screenshot with fonts added
Now the main text has a different font from the heading.

Step 6: adding a horizontal line

The final addition to the style sheet is a horizontal rule to separate the text from the signature at the bottom. We will use 'border-top' to add a dotted line above the <address> element:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[etc.]
Now our style is complete. Next, let's look at how we can put the style sheet in a separate file, so that other pages can share the same style.

Step 7: putting the style sheet in a separate file

We now have an HTML file with an embedded style sheet. But if our site grows we probably want many pages to share the same style. There is a better method than copying the style sheet into every page: if we put the style sheet in a separate file, all pages can point to it.
To make a style sheet file, we need to create another empty text file. You can choose “New” from the File menu in the editor, to create an empty window. (If you are using TextEdit, don't forget to make it plain text again, using the Format menu.)
Then cut and paste everything that is inside the <style> element from the HTML file into the new window. Don't copy the <style> and </style> themselves. They belong to HTML, not to CSS. In the new editor window, you should now have the complete style sheet:
body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }
Choose “Save As…” from the File menu, make sure that you are in the same directory/folder as the mypage.html file, and save the style sheet as “mystyle.css”.
Now go back to the window with the HTML code. Remove everything from the <style> tag up to and including the </style> tag and replace it with a <link> element, as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>
[etc.]
This will tell the browser that the style sheet is found in the file called “mystyle.css” and since no directory is mentioned, the browser will look in the same directory where it found the HTML file.
If you save the HTML file and reload it in the browser, you should see no change: the page is still styled the same way, but now the style comes from an external file.
Final result of styling
The final result
The next step is to put both files, mypage.html and mystyle.css on your Web site. (Well, you might want to change them a bit first…) But how to do that depends on your Internet provider.

CSS scrollbars

This tool let's you add a customized scrollbar to your pages.

The code will only work on Internet Explorer - since IE is the only browser that support custom scrollbars.

The code will not cause any harm if viewed on Netscape browsers - it just won't have any effect, so a normal scrollbar will appear if viewed with Netscape.

Fill in the fields and let this page do the programming for you.

Then copy and paste the code into your own HTML document.

As easy as it gets!




FILL IN THE FORM


OPTIONSSETTINGS
Scrollbar Front Color =
Scrollbar Background Color =
Dark Shadow Color =
Shadow Color =
Highlight Color =
Base Color =
3D Light Color =
Arrow Color =


NOTE:
When you click the "Test New Scrollbar" button, the code for the scroll bar is generated below this text. If the test scrollbar is okay, you can copy the code from this page and insert it into your own.

You can enter color values using pre defined names (green, blue etc) or HEX values (#FFCC00, #CC9900 etc).





COPY THE CODE FOR YOUR PAGE

Copy This To The <HEAD> Section Of Your Page


CSS cursors

Microsoft Internet Explorer 4+ and Netscape 6+ supports customized cursors defined with CSS.

Although the cursors will not have the customized look in other browsers it usually doesn't ruin anything. These browsers will simply show the normal arrow-cursor which would be same case as if you refrained from customizing cursors at all.

So unless the page really doesn't work without the customized cursor there shouldn't be technical reasons for choosing not to.

However there might be other reasons for thinking twice before adding custom cursor to your pages. Many users are easily confused or irritated when a site breaks the standard user interface.




CURSOR PROPERTIES

LookValuesLookNSIEExample
cursor-sample
defaultTEST6+4+cursor:default
cursor-sample
crosshairTEST6+4+cursor:crosshair
cursor-sample
handTEST 4+cursor:hand
cursor-sample
pointerTEST6+ cursor:pointer
cursor-sample
Cross browserTEST 4+cursor:pointer;cursor:hand
cursor-sample
moveTEST6+4+cursor:move
cursor-sample
textTEST6+4+cursor:text
cursor-sample
waitTEST6+4+cursor:wait
cursor-sample
helpTEST6+4+cursor:help
cursor-sample
n-resizeTEST6+4+cursor:n-resize
cursor-sample
ne-resizeTEST6+4+cursor:ne-resize
cursor-sample
e-resizeTEST6+4+cursor:e-resize
cursor-sample
se-resizeTEST6+4+cursor:se-resize
cursor-sample
s-resizeTEST6+4+cursor:s-resize
cursor-sample
sw-resizeTEST6+4+cursor:sw-resize
cursor-sample
w-resizeTEST6+4+cursor:w-resize
cursor-sample
nw-resizeTEST4+4+cursor:nw-resize

cursor-sample
progressTEST 6+cursor:progress

cursor-sample
not-allowedTEST 6+cursor:not-allowed

cursor-sample
no-dropTEST 6+cursor:no-drop

cursor-sample
vertical-textTEST 6+cursor:vertical-text

cursor-sample
all-scrollTEST 6+cursor:all-scroll

cursor-sample
col-resizeTEST 6+cursor:col-resize

cursor-sample
row-resizeTEST 6+cursor:row-resize

cursor-sample
cursor:url(uri)TEST 6+cursor:url(uri)

4P:problems, 4M:Mac only, 4W:Windows only




ADDING A CUSTOMIZED CURSOR

The syntax for a customized cursor is this:
(Position the mouse over each link to see the effect)

Selector {cursor:value}

For example:

<html>
<head>
<style type="text/css">
.xlink {cursor:crosshair}
.hlink{cursor:help}

</style>
</head>

<body>
<b>
<a href="mypage.htm" class="xlink">CROSS LINK</a>
<br>
<a href="mypage.htm" class="hlink">HELP LINK</a>
</b>
</body>
</html>



The links from the above example would look like this:

CROSS LINK

HELP LINK





REDEFINING THE CURSOR FOR ENTIRE PAGES

If you want to redefine the cursor so that it's not only showing up when moved over a link, you simply specify the desired cursor using the body-selector.

For example:

<html>
<head>
<style type="text/css">
body {cursor:crosshair}
</style>
</head>

<body>
<b>
SOME TEXT
<br>
<a href="mypage.htm">ONE LINK</a>
<br>
<a href="mypage.htm">ANOTHER LINK</a>
</b>
</body>
</html>


Click here to open a window that shows the result of the above example.




REDEFINING THE CURSOR FOR AREAS ON A PAGE

If you want one look of the cursor in one area of the page and another look of the cursor in another area you can do it with context dependant selectors.

This way, you create different styles for links, that are dependant on the context. Now if the context is set with a dummy tag, such as <span> you don't have to specify the desired style each and every time there is a link in the section.

For example:

<html>
<head>
<style type="text/css">
.xlink A{cursor:crosshair}
.hlink A{cursor:help}

</style>
</head>

<body>
<b>
<span class="xlink">
<a href="mypage.htm">CROSS LINK 1</a><br>
<a href="mypage.htm">CROSS LINK 2</a><br>
<a href="mypage.htm">CROSS LINK 3</a><br>
</span>
<br>
<span class="hlink">
<a href="mypage.htm">HELP LINK 1</a><br>
<a href="mypage.htm">HELP LINK 2</a><br>
<a href="mypage.htm">HELP LINK 3</a><br>
</span>
</b>
</body>
</html>



The links from the above example would look like this:

CROSS LINK 1
CROSS LINK 2
CROSS LINK 3

HELP LINK 1
HELP LINK 2
HELP LINK 3

#
### ###