How to Design Your Website With CSS

8/3/2019 How to Design Your Website With CSS

1/60

How to design your website with CSS

Cascading Style Sheets (CSS) allows you to create fast loading pages, increase your searchengine rankings, and modify your whole site with one style sheet. So why dont more people usethem? This is because they got so used to html design and are afraid or too lazy to upgrade theirskills. Some will also use ready made templates that contain flashy graphics, bloated code andsometimes even contains hidden code embedded in the page.

In this series of articles I will show you how to create a simple web site using CSS, so you will

have no excuse to begin incorporating them into your future designs.

What are Cascading Style Sheets?

Cascading Style Sheets is the name of a simple language that allows you to add any style (font,colors, graphics, links, layouts) to your web pages.

Benefits of Cascading Style Sheets

1. Separate content from presentation you can separate your HTML markup, text, graphics andmultimedia from presentation.

2. Consistent site wide look and feel consistency you can apply one style for 100s of web pagesall at once. So if you had to change the color of all pages on your site, you only have to edit one

style sheet. This saves you a huge amount of time, especially if you had to edit each pageseparately.

3. Web site maintenance - apart from being able to make site wide changes easily through oneCSS file, the clean code it generates makes it easier to update. Properly marked up web pagespermit them to be maintained by more than one person. It will also work in more browsers.Website redesignswill take much less time.

4. Improve search engine rankings search engines generally spider the code at the top of yourweb page first. For most sites that means the navigation bar will be spidered first (resides at topof page code). CSS enables you to position the code for your content at the top making your pagesearch engine friendly. Properly marked up HTML pages can easily found and properlycategorized by search engines

5. Fast loading CSS reduces the amount of tags used therefore producing clean code. Tablelessdesign can reduce your load time by 25% to 50%.

6. Reduce bandwidth compacting the amount of code used will reduce the amount ofbandwidth needed to host your web pages. Therefore you wont have to pay higher fees whenadding more web documents to your site.

7. Accessibility - increasing accessibility with CSS means being able to serve web content to alarger audience, increasing web site usability, even for non-disabled people. Content can easilybe formatted for projection as well as screen display. Tableless layouts display well on hand-helds.

8. Improve the printing of web pages most printers will only allow you to print a portion of the

web page. With CSS your whole document can be printed.When you use CSS it becomes quickand easy to apply new styles that can not only effect all styles on your web pagebut even your whole site.

Web Design Articles

Designers Resources

Featured Designs

Web Design Forums

Tools & Software

CSS from the Ground Up
http://www.nrjdesign.com/http://www.nrjdesign.com/http://www.nrjdesign.com/seo-eng.htmlhttp://www.wpdfd.com/articles/http://www.wpdfd.com/resources/http://www.wpdfd.com/featured_designs/http://www.wpdfd.com/forums/http://www.wpdfd.com/software/http://www.nrjdesign.com/seo-eng.htmlhttp://www.wpdfd.com/articles/http://www.wpdfd.com/resources/http://www.wpdfd.com/featured_designs/http://www.wpdfd.com/forums/http://www.wpdfd.com/software/http://www.nrjdesign.com/


2/60

by Joe Gillespie Jan 1, 2004

Introduction

If you are frightened by the prospects of using Cascading Style Sheets, there's no need to be.Using a computer can be daunting for someone coming to it afresh but after a while, you thinknothing of it. It all comes down to taking small steps to begin with and that's what I'm going todo in this series of tutorials. One step at a time!

Whether you normally use a WYSIWYG editor and stay clear of that source stuff in thebackground or even if you have never created a Web page at all, this tutorial will set you off inthe right direction.

It assumes little or no knowledge of putting a Web page together. It really is 'from the groundup'.

What will you need?

Nothing special. If you have a Web page editor, fine. If not, you can use any text editor NotePad on a PC or SimpleText or TextEdit on a Mac. If you are already using DreamWeaver orGoLive, we are going to be using 'source' mode.

Don't panic!

A graphics editor is not essential because I won't be worrying too much about graphics to begin

with.Oh, you will also need a browser, but that goes without saying. In fact, I'd recommend that youget a few different browsers. If you only have Explorer, you should also getMozilla and anyothers from the list on the New Browsers list in this month's editorial.

If you want to upload your pages to a Web server, you will need some kind of FTP program butdon't worry about that for the minute, you will doing everything here on your own computer.

Step One A Basic Page

Before we can do anything, we need a basic Web page. Here is the most basic Web pagepossible.

This is my Web page

What we have here are three sets of 'tags' tags usually come in pairs but not always.

Encompassing the whole page is the ... tag pair. The first one is the'opening tag' and the 'end tag' is the same, except that it has a forward slash character betweenthe < and the html>.

Inside the tag are two more tag pairs.

... contains information that doesn't actually appear on your Web page, themost important probably being the page title that appears in your browser's title bar. You do thisby enclosing the page title inside a title tag pair like this...

My page

This is my Web page content!

The ... tag pair encloses all the content of your Web page, the text, images,Flash movies whatever. You can type it into your text editor or into the 'source' window of aWYSIWYG editor or you can copy and paste it from here.
http://www.wpdfd.com/profiles/joe_gillespie/http://www.wpdfd.com/profiles/joe_gillespie/http://www.mozilla.org/http://www.mozilla.org/http://www.wpdfd.com/profiles/joe_gillespie/http://www.mozilla.org/


3/60

This is my HTMLephant. Yes, it's corny but at least you won't forget it!

So there is a Web page that will work fine in any browser after you have saved it. Call it'index.html' because that's the name for the first page on any Web site. You can save the fileanywhere on your computer's hard disk, but to keep things neat and tidy, create a new folder tokeep your Web pages in.

The normal way to open your page in the browser is to use the 'Open' item in the browser's 'File'menu but there's a quicker way. Make a shortcut or alias of your file and put it on the desktop.From there, you can just drag and drop the file icon into your browser window and it will showup in all its glory!

Your page should look like this Wonderful as it is, your Web page is missing a vital ingredient content. There is little point inhaving a Web page if it doesn't actually say something (other than "This is my web pagecontent!") but I'm going to leave that up to you.

Any content must go between the ... tag pair so that the browser will display it.

Just poured into a naked Web page like this, text has no structure or style. By structure, I meanthat the words just flow left to right, top to bottom words with no particular emphasis other thanthe order in which they appear. It makes more sense to group those words and sentences intoparagraphs, headlines, subheadings well, you know, the basic things you were taught at school.

Browsers ignore any line breaks or paragraphs you have in your raw text. They also ignore tabs

and if you have more than one space between words, the extra ones are ignored too.Almost any passage of text benefits from having a headline, a subhead, a few separateparagraphs and maybe a 'byline' at the bottom.

In HTML, the mechanism for doing this is provided by yet more 'markup' tags.

A paragraph is created by enclosing text within

...
tag pairs. In HTML, a paragraph issimply a block of one or more sentences with an extra bit of space to separate it from the nextone like the ones you see here.
For headlines, there are six different degrees of emphasis going from the largest ...

down to the smallest ... They look something like this...

This is a h1 headingThis is a h2 heading

This is a h3 heading




As you can see, they decrease in size as the number gets bigger with h4 being approximately thesame size as this 'small' body text. h5 and h6 are smaller, but bold.
http://www.wpdfd.com/editorial/basics/mypage1.htmlhttp://www.wpdfd.com/editorial/basics/mypage1.html


4/60

There are a few other tricks that we often play with text to give emphasis to words and phrases.Rather than thinking about how they look, consider their true functions.

Bold is a heavier version of the body text and denoted with ... however, bold is a printstyle term and on the Web, it is preferable to use strong... Although theywill look similar on your screen, HTML should work on other devices too. Software that readsWeb pages to people with poor vision will understand strong and add the necessary stress.

Italics are produced with, you guessed it, ... tags. Again, with HTML, it is better not touse this visual style but to use ... This gives the functionality of italic type

regardless of the device reproducing the text.Underlining can be done with the ... tag pair but underlining on a Web page has aspecial meaning. It usually indicates a link. It is best not to use underlining as a means ofemphasis as it will confuse the readers.

The one other important tag is the line break
Unlike the other tags, this one doesn'trequire an end tag, it wouldn't make much sense anyway, where would it go?

By using these basic markup tags, the text starts to take on some form. It becomes more likewhat you would produce with a word processor.

This basic page will probably look quite different in other browsers and computers. Everybrowser has its own default set of styles and unless you instruct the browser differently, it will

use these defaults. To over-ride the default styles, we simply produce our own styles which aregrouped together into a collective 'style sheet'.

Step 2 A Style Sheet

A style sheet is a simple enough concept, it's a page of style definitions or specifications thatinstruct the browser how to display the various elements on a page. If you are wondering wherethe 'Cascading' comes-in, don't worry about it yet. I'll come back to that later when we start toapply styles to our HTML.

For simplicity, we are going to build our style sheet into our Web page. Later, you will find thatyou can have an 'external style sheet' in a separate file which can be called-upon by several pagesand has the big advantage that you only have to make one change on this master style sheet to

affect all the other pages that link to it.The styles we are going to use are defined in the ... part of our page like this...

Here, you see a pair of... tags but there are a few more bits in there thatneed to be explained.

type="text/css" tells the browser that we are just using plain text to describe the styles, nothing

fancy.title="mystyles" is simply to identify the styles for your benefit.

media="all" is where it starts to get interesting. You can have a style sheet to describe how yourpage looks on a computer screen (media="screen") and another completely different one toformat it for printing (media="print"). There are other media too such as 'projection', 'tv', 'braille'and 'aural'. Now you will appreciate the logic of not using 'bold' and 'italic'. For now, we'll justuse 'all', which is general purpose.

The characters are a way of hiding text on a Web page you can only see it in themarkup. This is called 'commenting' but as the styles are in the ... section of thepage, they shouldn't show up anyway.


5/60

The first thing we are going to define the style for the overall body of the page. Everythingwithin the ... tags will have this style, or set of styles applied to it.

The basic body style definition looks like this...

body { }

The word body followed by a pair of curly braces.

We will give the page a background colour...

Browsers default style usually give black text on a white page, but we will change that to a warm

pale grey. This is how we give the body background colour a value. Note that we don't use anequals sign '=' but a colon ':'.

body { background-color: #e8eae8 }

What's all this #e8eae8 stuff?

Colours on Web pages are defined by mixing 256 shades of red, green and blue in variousproportion. Humans have 10 digits on their hands, so they count in tens. Computers prefer tocount in sixteens, not that they have fingers, but once you go over nine, there are no singlenumerals to represent 10, 11, 12, 13, 14, 15 so we substitute letters a, b, c, d, e , f. So, in'hexidecimal' counting, 10 is represented by 'a' and 15 by 'f'. When you go above 15, you add asecond digit and '10' represents 16. Using this method, all the numbers from 0 to 255 can be

represented by two numbers or letters - 255 is ff. So, #ffffff would be white and #000000 black.Our background colour is therefore red e8(232), green ea(234), blue e8(232). The hash sign atthe front denotes that were are using hexideximal and not ordinary decimal numbers.

Sometimes you will see only three characters, for example, #2a0. This is shorthand for #22aa00.When there are two characters the same in each of the three colour values, you can dispense withthe second and the browser will understand what is meant.

Using only three digits, you can have 4096 different colours, with six digits there are oversixteen million.

With single digit colours, red, green and blue each have 16 steps of brightness that can becombined in many ways to produce all the others.

If you are hand-coding, using three digits colour values is simpler and probably enough.Anyway, let's now add a type colour to take the place of black. It was chosen with a colourpicker tool in Photoshop so its a 6 digit hexidecimal number...

body { background-color: #e8eae8; color: #5d665b }

Note how the background-color and foreground (type) colour are separated by a semi-colon. Becareful not to mix up the colons and semicolons or things will go horribly wrong.

And now, so that the type doesn't run right up to the edges of our page, we can give the page amargin all round. 'margin: 50px' is added to our body style definition, again separated from theprevious one by a semi-colon.

body { background-color: #e8eae8; color: #5d665b; margin: 50px }


6/60

Any type we now add to the page will be a dark grey/green on a pale grey background bydefault. We will see how this can be over-ridden for special cases later.

Have a look at what we've done so far

Step 3 Styling Text

Although we have rid our page of the stark black and white look and replaced it with a gentlerfeel, there's a lot more we can do. We can change the type face, the type size, the amount ofspace between lines and add other niceties such as paragraph indents.

The font styleWe'll do the font style (typeface) first as that makes quite a dramatic difference. Unlike designingfor print, Web pages can only use fonts that are installed on the reader's computer so we can'tspecify just any type we fancy, we have to use ones that are common to all computers ones thatcome pre-installed with the system. That narrows the choice down quite considerably. You willfind that you are limited to two or three seriffaces, the same number ofsans-seriffaces and amonospaced, (typewriter) style. Instead of choosing only one font style, we specify a range inthe hope that one of them will be installed on the reader's computer.

Here are some common fonts onWindows and Mac computers. Youcan't depend on any particular one

being present so you have to providealternatives.

Here is a typical sans-serif font familyspecification.

font-family: Verdana, Geneva,

Arial, sans-serif;

This is a serif font family

font-family: Georgia, "Times

New Roman", Times, serif;

Note that when a font name has more

than one word, the whole thing has to be put inside quotation marks "Times New Roman"

Let's add the sans-serif fonts to our styles and see what happens.

Our page set in sans-serif font

The font size

Specifying a font size is a contentious issue. In print, you can specify a font size in points and thetype will always be that size. It will always take up the same amount of page space and the linebreaks will be exactly as you set them.

On the Web, font sizes are not set in stone and change from one computer to another, sometimesquite dramatically. Depending on the user's screen size, operating system and browser, type can

go from unreadably small to kiddie's picture book large. Luckily, users are able to set a'comfortable' size within their browser's preferences which narrows-down the size variations alittle, but they can still be quite different from what you expect.

With the rising popularity of Wi-Fi and handheld devices, the browsing conditions for yourpages will change dramatically in the next few years. To keep you pages futureproof you need tothink in terms of liquid page designs that adapt themselves to the screen size.

Repeat after me, "The Web is not the same as print!"

Relative font sizes

If you want the widest possible audience for your pages, it is best to specify the font size relativeto the user's chosen default size. There are various ways of specifying relative font sizes. You
http://www.wpdfd.com/editorial/basics/mypage2.htmlhttp://www.wpdfd.com/editorial/basics/mypage3.htmlhttp://www.wpdfd.com/editorial/basics/mypage2.htmlhttp://www.wpdfd.com/editorial/basics/mypage3.html


7/60

can use percentages of the default (%), or use can use a unit called an 'em', which is the same as100%. 1.2 em is the same as 120%. The preferred way is to use a set of pre-defined descriptionsthat sound like T-shirt sizes. 'Medium' is the same as 100% or 1em. 'Smaller' is a size down fromthat and 'Larger' a size bigger. Then there is x-small, xx-small, x-large and xx-large. Theadvantage of using this system over percentages or ems is that the broswers won't allow the typeto become too small to read. You could, for instance, specify a type size of 0.7 em or 70% and itwould look fine on your PC. For somebody using a Mac with a smaller default font size, the 70%could take the type down below the size of legibility. xx-small is smart enough to know what theminimum size of type a computer can handle.

xx-largex-largelargemedium small x-smallxx-smallxx-small type: This type is small but not too small to render.This type is way too small: This type is way too small

Absolute font sizes

If you have a limited audience for your site that uses basically the same kind of computer setupas you do, you can also specify font sizes in pixels. Pixels don't vary greatly in size from onedesktop computer to another so the type size will be similar, if not identical. Once you move tolaptops and handhelds or to very large, high resolution monitors, pixel sizes do vary from the

norm and the type sizes will change accordingly.

So that you can see the differences, I have set three paragraphs of text here using three methods percentages, T-shirt sizes and pixels. On my screen in Mozilla, they are all very similar in sizebut might not be on yours.

This line is set at 85% of the size of the text around it.This line is set as x-smallThis line is set at 11px absolutely

Note that you should neveruse 'points' to specify font sizes for the screen, only for print.

The line spacing

The amount of space between lines is about 120% of the font-size by default. Adding a little

extra generally improves legibility, especially if the lines are long. I'll discuss line length later.With our current page, the line length is determined by the width of the browser window, so itmight well be longer than ideal.

To change line spacing, again we can opt for relative (% or ems) or absolute (px). In thisexample, I've set the line height, that's the height of the character plus the extra spacing above itto 180% of the font size (small) for the whole page. As the body style definition is getting a bitlong, I've split it into multiple lines, the browser doesn't care but it makes it easier for humans toread. As long as the curly brackets are there and each style definition is separated by a semi-colon, that's fine.

body { background-color: #e8eae8;color: #5d665b;margin: 50px;font-family: Verdana, Geneva, Arial, sans-serif;font-size: small;line-height: 180%}

Now we have a page with more 'air'

Paragraphs

Everything we've done so far affects all the text on the page. Now we will look at how we cannarrow our style down to more specific areas.


8/60

As I mentioned earlier, large blocks of text can be broken up into paragraphs to make them easierto read. There are a number of ways to visually separate paragraphs from one another. You canadd some extra space or maybe indent the first line.

In creative typography, designers will sometimes use other, less common techniques such asgrossly indenting by half a column width or even exdenting (the opposite of indenting). CSS canhandle all these but the default paragraph separator is a 'paragraph space' which is about half ofthe line-height.

To make a block of text into a paragraph, simply enclose it inside a

...
tag pair. To be
able to manipulate the paragraph style with CSS, we add p { } to the style definitions in thepage's head under the body styles. Inside the brackets, add text-indent: 3em

This page is broken up into paragraphs

Note how the first paragraph is not indented it is not enclosed in

...
so it is notofficially a paragraph at all in HTML terms.
Headings

I've already explained about the six levels of headings that you get by default in HTML. We arenot stuck with those, we can redefine them to our own requirements. Again it's just a matter ofadding more definitions to the styles.

Headings, by default are big and bold and have extra space above and below. Remember,headings from h1, h2 and h3 are bigger than normal text and h5 and h6 are smaller. Let's playwith a h3 heading and change its colour and font.

h3 {color: #966b72; font-family: Georgia, "Times New Roman", Times, serif }

Now we have headings

You might also notice that I've added a blank line above the second heading. If you just put anempty paragraph
it won't work, there has to be something inside the tags. Putting ablank space won't work either because HTML ignores spaces unless they are betweencharacters. What we need is an invisible character and HTML provides one called a non-breaking space which can be typed-in as like so...
The non-breaking space is also very useful to put between words that you don't want to splitwhen the words wrap at the end of lines - things like people's or company names.

Extra tweaks

Before going on to the next part, let's try a few extra tricks with our page of text.

In the body definition, I set the margin to 50 pixels all round. We can have different margins forleft, right, top and bottom. All we need to do is split them up like this:-

margin-top: 70px;margin-left: 120px;


9/60

margin-right: 50px;margin-bottom: 70px;

That gives something more like a printed page with a wider left-hand margin. I've also pickedout a couple of words in bold (strong) and italic (em). Be warned that italic type can look bad onsome computers and is especially hard to read at smaller sizes.

View our page with styled text

Now, you have a page that has a bit of style about it without too much effort. Nevertheless, it'sstill like a typewritten or word-processed page. In the next issue, we'll look at some more

interesting layout possibilities.Whilst you are waiting, you can play around with the values in the page you have just created.Try different font styles, sizes, line spacing but most importantly, look at your page in as manybrowsers as you can to see how different thay can be.

Step 4 More text formatting

Before going any deeper into text formatting, it's a good idea to familiarise yourself with somebasic typographic terms.

When we talk about type size, orfont-size in CSS, it refers to the distance from the top of acapital letter such as 'A' to the bottom of a descending letter 'p' or 'y'. There might also be a smallamount of extra space called 'leading. The word comes from the fact that printers used to put

strips of lead (metal) between lines of type to give more line space.

Today, we don't use lead, we just say that there is so much line space between the base of oneline of type and the next. Line space is therefore the height of the type plus this extra space. InCSS, we might say line-height: 180%; with the value sepecified as a percentage, ems orpixels (px). More about line spacing further down.

Vertical-align allows you to adjust the baseline of individual letters relative to the rest of the textbut this is for fairly specialised use with mathematical formulae and we won't bother too muchabout it here. For this simple example, I could have used the 2 tags but with CSS,there's more control.

E=MC2CSS also gives us control over horizontal spacing, the space between individual letters andwords.


10/60

This is useful for adding visual style to headlines.

SPACED HEADLINE

letter-spacing: 0.5em; word-spacing: 0.5em

Designing for readability.

Before CSS was as well supported in browsers as it is now, there was one vital feature that wasmissing from HTML text formatting that even the most humble typewriter could handle linespacing. When there is little or no space between lines of text, it becomes intimidating and

difficult to read. The longer the lines become, the worse the problem gets.Lines that are tooshort causethe eye's left to rightreading patternto be disruptedtoo much.

Lines that are longer than ideal are also tiring and the beginning of the next line down becomesmore difficult to locate.

For comfortable reading, a line of text should be about the same length as one and a half to twolower case alphabets that means 40 to 60 characters or eight to ten words.

If lines get longer, more line space helps readability. Many early Web pages had text running allthe way from the left side of the screen to the right, regardless of the screen size. Some still do and screens have become wider too.

By default, there is a little line space in browser text settings. It's approximately 20% of the fontsize (cap height plus descender). With CSS you can have as much line space as you like. If youare using relative font sizes, you can specify it as a percentage of the font-size font-size:1em; line-height: 1.5em (the same as 150%). If you are using an absolute font sizes, you canspecify something like font-size: 11px; line-height: 16px

The spec for this page is font-size: small; line-height: 180% which is roughly equivalentto one-and-a-half line spacing in a word processor or old fashioned typewriter.

To demonstrate, in this examplethe top of the page has no margins and the text has no line-height setting. The general specs for the body of the page provide the font family, the font sizeand the colours for the type and background only...

body {color: #5d665b;font-size: small;font-family: Verdana, Geneva, Arial, sans-serif;background-color: #e8eae8}

The lower section the text is enclosed within a page division ..., it's like a pagewithin a page. It has a left margin of 250px and a right margin of 200px and the line-height is set

to 180%. These styles are added to the general body specs by a process called 'inheritance'. Justas a child might inherit certain characteristics from its parents, which in turn, are then passeddown to its children, some CSS styles 'cascade' when they are nested inside other styles.

...

Page divisions 'divs' are a very important part of Cascading Style Sheets and we will look at themin more detail next month.

Contrast

Unlike a printed page that you read by reflected light, a page on a computer screen is luminous.The difference in brightness between black text and a white background is many magnitudes

greater on a monitor than on a printed page.
http://www.wpdfd.com/editorial/basics/mypage7a.htmlhttp://www.wpdfd.com/editorial/basics/mypage7a.htmlhttp://www.wpdfd.com/editorial/basics/mypage7a.html


11/60

Vast expanses of black text on a white background can be like walking in bright sunlight withoutsunglasses. Only in extreme cases would you shade your eyes to look into the distance outside,before that you will probably be squinting and feeling uncomfortable without realising quitewhy.

Reducing the contrast of Web page text makes for more comfortable, less stressful reading. Ifyou go too far however, you start to make things difficult for people with poor vision.

In an article like this where there's a lot of text to read and the reader is likely to spend some timein front of their screen, it is important to make the experience as comfortable as possible, so I

have used a gentle background tint and soft colours.Step 5 Lotsa lists

Another very useful formatting technique often used in documents is the 'list'. These are likeparagraphs but have a little more going for them.

HTML provides for basic lists that either have bullets (unordered lists) ... ornumerals (ordered lists) ... at the beginning of each list item ... Eachtype has a few options that can be specified from HTML ...

gives a square bullet, ... gives lower case Roman numerals.

Unordered list item

Unordered list item

Unordered list item

Default unordered list

Unordered list item

Unordered list item

Unordered list item

Unordered list with square bullets

1. Ordered list item 1



Default ordered list

i. Ordered list item 1

ii. Ordered list item 2

iii. Ordered list item 3

Ordered list with roman numerals

CSS gives you more options and control just add a definition forol orul to your styles.

ol {list-style-type: lower-roman; margin: 1em 0 1em 40px }

This does the same job as adding it to each list item in HTML and gives you control over themargins around the complete list. The four values 1em 0 1em 40px refer to top, right, bottom,left and can be ems, percentages or pixels.

If you want closer control of the individual list items, you can specify margins for those also toget more line space, for instance...

ol li { margin: .5em 0 .5em 0 }

adds an extra half em of line space above and below each list item for an ordered list. For anunordered list you would substitute ul li.

Even better, you can use your own graphics for bullets.


12/60

ul { list-style-image: url(/images/smiley.gif) }ul li { margin: 1em 0 1em 0}

You are going to like this

You will love this too

And what about this?

And, ultimately, a different bullet image for each list item...

We

know about peopleWe know about imagesWe know about ideasWe know

about writing

We know about people

We know about images

We know about ideas

We know about writing

Styles defined in the head section are general to the whole page, that's not going to do what wewant here. To apply styles to individual list items, it has to be done 'up close' or 'inline'. Thedefinitions are inserted into the opening HTML tags in the body of the page. Note howeverthat IE6 (Windows) puts the icons very close to the text. I've added some extra space at thebeginning of each line to compensate like this...

We know about people.

Step 6 Linking

The whole point about HTML is that HT (HyperText) bit. Links added towords, phrases or images on a page can be clicked upon to whisk you off tosome other place. These other places are called 'anchors'. Just think ofstationary ships in the great sea of the World Wide Web with a chain madefrom links going down to an anchor on the sea bed. The ships are anchored atspecific locations and that makes them easier to locate than if they were adriftat sea.

Each page has at least one anchor on it. The default one is right at the top of the page but you canadd more anchors to any part of a page that you would like to be able to jump to.

This is a link to the top of my home

page

So, you have a pair of tags ... plus an extra href="..." part included within the firsttag. This is the hypertext reference address that you want to go to.

If you place an anchor on a page at a specific place well, actually, it should be immediatelyabove where you want to land up it goes like this...

That's an tag pair with, for example, name="myanchor" included in the opening tag.There's nothing between the two tags.

To jump to this location, you add an extra bit on the end of the link...


13/60

This is

a link an anchor on my home page

As you are aware, links on a page are indicated by making them visually different from thesurrounding text. The default is to underline the link text and make it blue. When you click on alink, it provides visual feedback by changing its colour to red. When you later come back to thatlink, it has changed colour again, to purple, to show that it has already been visited. Everybodythat has ever used a Web page gets the idea of these conventions very quickly.

The default presentation of hypertext links in HTML has three distinct states.

An unvisited link

An active (just clicked) link

A visited link

Note that the cursor changes too. The default arrow pointer changes to a pointing finger when itpasses over a link.

Of course, being 'designers' we are not content with the default look of links. Underlined textmay be practical, but it can look ugly. The key requirement is that a link looks sufficientlydifferent from the surrounding text to show that it's something special. Context is an importantfactor here too. Some text is obviously a 'menu' of choices whether it is underlined or not. Itsprominence and position on the page and the fact that the words are inviting you to gosomewhere else all give clues to its function.

Similarly, when a word or phrase within a block of text looks different, it must be for a goodreason. The reason could be to add emphasis but again, it's the context that gives the clue andalso the fact that other similar words or phrases have the same, consistent look. It wouldn't workif every link was a different colour.

CSS allows us to play around with how links look. Links don't have to be underlined, they don'thave to be blue. All we have to do is set up a definition for 'a' anchors.

a:link { color: #696; text-decoration: none }

As this page has a colour scheme other than black and white, I have changed the link colours toones other than the default blue/purple. text-decoration:none gets rid of the underline.

If you want a visited link to be a different colour, you do this...

a:visited { color: #699; text-decoration: none }

CSS also allows an additional 'state' called 'hover'. This changes the colour of the text as themouse pointer passes over it and gives a very useful extra clue that it is a hypertext link.

a:hover { color: #c93; text-decoration: underline }

There's that traditional underline coming in if you want it, but only temporarily whilst the pointeris hovering over the text.

The 'active' state of a link is what you see when you actually click on a link. Usually, it changescolour and some browsers also put a box around the text too.


14/60

To set up link styles that apply to the whole page, you would put something like this inside thestyle definitions in the head of your page.

a:link { color: #696; text-decoration: none; background-color: transparent }a:visited { color: #699; text-decoration: none; background-color:transparent }a:hover { color: #c93; text-decoration: underline; background-color:transparent }a:active { color: #900; text-decoration: underline; background-color:transparent }

The order of the style definitions is important here. Usually, the order doesn't matter in CSSdefinitions but here it is important that the a:hover and a:active definitions come last or theymight not work.

Now, here's another state not officially sanctioned in CSS.

This is a dead link. It does nothing. If you have a link on a page that links to the same page, well,it doesn't make much sense that you can click on it and end up back where you started. It's like asignpost bending round and pointing at itself.

There are two ways to handle this. You can turn the link into what is effectively a heading bymaking it more prominent than the rest or you can make it almost, but not quite, invisible toindicate that it is not a valid selection. That's called 'greying out' and you will be familiar with theprinciple from other programs on your computer.

Why have it there at all if it's not a choice you want people to make?

Well, one of the most important principles of interface design is that you try to keep everything

as consistent as possible. If you remove a menu item, for instance, some of the other ones willshift position. It is less confusing to the user if interface items stay nailed-down to the same spot.

The other element we have at our disposal here is the background colour behind the text.Sometimes designers change the text background to give an effect like a highlight marker for thehover and/or active states.

There's a lot more that you can do with CSS links, we have only scratched the surface here but itshould be enough you get you started. This example page demonstrates the principles that you

learned here.

Step 7 CSS Boxes

We've already seen that the text on a Web page can be broken up into headlines and paragraphsand that these mechanisms are already catered for in HTML. We have also seen how the defaultstyles can be modified to suit our own tastes by providing them with new style definitions thatover-ride the defaults. Now, I'm going to look at how you can make your own style definitionsthat extend the capabilities of HTML and make more interesting layouts.

The body of a page is the entire visible area but, as I showed in Step 3, we can break that up intosmaller divisions that have their own styles. These divisions can be as small as a single characteror larger, rectangular chunks of the page. All we have to do, is surround the area we want to style


15/60

with a pair of tags ... Those divisions are each like a mini page and are oftenreferred to as CSS boxes. CSS Boxes are the fundamental building blocks for building Web pagelayouts and I'm going to spend some time explaining how they work because it is so important.

CSS boxes can have a width and height, a background colour or even a background image whichcan be made to repeat to give a pattern. By default, a CSS box goes from the left margin to theright margin of the page body. If you haven't specified a body margin, it will be the full width ofthe browser window. If you don't specify a height for a CSS box, it will have none. If you putsome text into it, it will expand vertically to accommodate that text or image.

To keep text away from the edge of a box, you can add padding...

You have to be very careful with padding because it works quite differently in Microsoft InternetExplorer from all other browsers. Unlike the diagram here, IE puts the padding inside the box, so

its width and height stay the same. All other browsers put the padding outside the box, adding toits width and height. So your box size will change depending on which browser is viewing yourpage and this can have quite disasterous results if you are depending on precise pixelmeasurements.

Beyond the padding, you can have a border...

Borders come in a variety of styles and you can address each of the four sides separately in termsof thickness, style and colour. They look slightly different in the various browsers but here iswhat they look like in Mozilla...


16/60

The thickness of your border increases the box size accordingly.

To separate boxes from one another, you can give them margins.

Margins and padding are often confused especially as what we normally call a 'page margin' in abook or web page is really 'padding' because it can't go outside the page it is obviously inside.Just remember that this is a 'special' case. For the body of a Web page, the margin goes from theedges inwards, all other CSS margins go outwards.

Absolute positioning

In addition to having a height and width, CSS boxes can be put at any fixed position on a page

by specifying position: absolute; Absolute positioning is easy to understand, that's howthings usually work in real life. Your house could be 50 metres from North Street and 100 metresfrom East Street, for instance.

The most common way to give a box a position is simply to specify something like top:50px;left:100px but it doesn't have to be top and left, it can also be top and right, bottom and left orbottom and right.

Here are a few CSS boxes with different styles, each with its style definition displayed. Thepossible combinations are endless.

When boxes are positioned at absolute co-ordinates with definite widths and heights, it's verylike sticking newspaper clippings and photographs into a page in a scrapbook. The problem isthat scrapbooks always remain the same size Web pages don't.


17/60

Relative positioning

If you wanted to describe the position of your next door neighbour's house, you could say that itwas 70 metres from North Street and 100 metres from East Street, or you could say that it is 5metres along from your house. Relative positioning assumes that CSS boxes are nextto anotherone. The first box is the top one, the next one is below it and the next, below that. Theyeffectivelyfloatdownwards from the top of the page. This is something that rarely happens inreal life but can you image being in a covered-over swimming pool with a pile of air mattresses.One would float to the top, the next would float up and get stuck beneath the one above it andso on.

To get CSS boxes to sit beside one another rather than one below the other, you have to tell themto float: left; orfloat: right; Like the air mattresses in a wide swimming pool, they willsit side by side, where there is enough space. Then they will wrap around onto a lower level. Youhave to try and avoid that situation by making sure that the total widths of all your boxes in a lineare not more than the page width. You can do this by specifying the width in pixels but keepingthe total below the minimum width of a browser. Or you can use percentages making sure thatthe total percentages add-up to 100 or preferably, slightly less. With relative positioning likethis, avoid mixing pixels and percentages or results will be unpredictable.

The example of floating boxes here show the behaviour of relatively positioned boxes in singleand multiple columns.

Step 8 Custom Divs

IDs

When you are creating CSS boxes with custom definitions, there are no existing HTML elementsto attach them to. You have to invent your own.

As there will probably be several or even many CSS boxes on any page, they have to be givennames. We do that by giving them an 'identity' id for short. An id uniquely identifies a CSSbox on your page both to you and the browser so that it knows how to display it.

A simple example is where you divide a page into three horizontal areas. A 'header' at the topcarries a logo and the navigational links. The middle bit contains the text and pictures. Down atthe bottom, you might also have a 'footer' that gives a copyright notice and, maybe, echoes the

navigation from the top.

This example actually has five horizontal boxes, the extra ones are for the navigation bar and thelogo and sit between the header and text area.

Note that the right columm is narrower than the one on the leftto compensate visually for the extra space created by theragged right hand side of the text otherwsie the text wouldlook off-centred.

In the style definitions, we stick a hash sign # in front of thename we want to give the box making them into 'identities'.

#header {...}

#navbar {...}#logo {...}#midsection {...}#footer {...}

Then we have to tie the definitions to the actual CSS boxes byjust referring to their ids like this...

...............


18/60

If we have already specified the type in the body declaration, then our boxes will 'inherit' thosestyles. Any style definitions that you add to the boxes' definitions will take precedence over themore general body definition. This is what 'cascading' is all about.

Classes

Sometimes you will want to use the same box several times on a page. Suppose you wanted tobreak-up the midsection into two or more separate boxes. In this instance we need a 'reusable'box instead of a unique one. A reusable box is called a class. Just as you have 'classes' of flowersor insects, a class is basically the same box but with different content. To show that we want a

reusable class instead of a unique id, we use a period . instead of the hash sign..midsection {} can now be used as many times as we like and on the div itself, we put ...

.........

Span

Classes (but not IDs) can be applied at a text level. If we just want to pick out a few words in red,we can create a special class, let's call it .redtext

.redtext { #c00 }This is red text!

Instead of wrapping the text we want in red in a ..., we use ...

This is referred to as inline as it applies to a span of text that is inside another...

Use ... any time you want to make a variation to some text that differs from theoverall specification. It could be colour, font-family, size, weight or whatever.

So, in CSS, there are blockelements which are rectangular boxes that can be unique 'ids' orreusable 'classes'. We also have inline elements that can address text at a character level.

Now we are starting to get somewhere!

Step 9 All together now

Anything but the simplest Web page will use a mixture of ids and classes and possibly acombination of absolute and relative positioning. Going back to our simple, five section page

from Step Eight, you might want to have multiple columns in the midsection. This involvesusing the float property, and I'll use float:left to keep things simple.

A left column is typically used for menus on many Web pages which means that it can be fairlynarrow.

.leftcol {}

The middle column is the main text.

.midcol {}

And over on the right, we'll put another narrow column for reference links or advertising.

.rightcol {}

All three columns are specified as percentages so that they are fluid and adjust to the page width.

Notice that I'm using classes for these columns as I might wantto reuse them further down the page.

This example replaces the single .midsection with threefloated left columns.

...


19/60

Don't leave any divs completely empty, even they are only 'white space'. Put a non-breakingspace inside them.

Step 10 Getting it right

Doctypes and validation

We are up to lesson ten of CSS from the Ground Up and I have a confession to make. EverythingI have shown you so far - the markup, the example pages are all wrong! Well, they will probablywork just fine unless you are using an ancient browser but if you test them with a syntax checkeror put them through some sort of validation program, they will not pass.

What is a validation program you might ask?

You will be familiar with the concept of a spelling checker. There's probably one in your wordprocessing program. It compares the words you have typed-in to a list of words in its built-indictionary and alerts you if it can't find a match. It might be that the word isn't in its dictionarybut it's also possible that you have misspelled it. In the more sophisticated word processors, yourwriting can also be checked for proper use of grammar and if you type a sentence that doesn'thave a verb in it or too much repetition of the word 'and', it will nag you incessantly.

Before a spelling or grammar checker can do its job, it needs to know what language you areusing. My UK English spelling checker is quite different from a US English spell checker - andwhat if you aren't using English at all?

Just as your English, or whatever language you write in, is checked for correctness, your HTMLand CSS can, and should, be checked too. If you make a mistake in your English, people willprobably recognise it as a typo, but understand what you mean, there's no real damage done. Atiny slip-up in HTML or CSS, on the other hand, is a different story. Something as seeminglyinsignificant as a comma or quotation mark out of place, can make all the difference between apage working or not - it depends on the particular error and the browser that's trying to makesense of it. It is a good idea to 'spell check' your HTML and CSS with a 'syntax checker' or'validator'.

One of the main benefits of having a decent HTML editor is that syntax checking will be built-inas part of the package. You just don't get them with simple, general purpose text editors. If youhave a HTML editor like HomeSite or BBEdit or a WYSIWYG editor such as Dreamweaver or

GoLive, you will be able to check your markup for errors and hopefully get suggestions on howto fix it. If you don't have such a program, you can use the online validators provided by theW3C W3C HTML ValidatorW3C CSS Validator where you simply upload your files andget an immediate report back with a blow-by-blow list of errors or not!

Of course, the checking program has to first know which 'language' you are using for yourmarkup there are several 'flavours' of HTML. So far, all the examples I've shown are written inHTML 4.01 that's the current version and the most ubiquitous. But, there are sub-versions ofHTML 4.01 'Strict', 'Transitional' and 'Frame Set'.

Strict is a very tightly defined set of rules as to what you can and can't do with your HTML.

Transitional is a little more forgiving and allows for some 'legacy' HTML and browser

peculiarities.Frame Set isn't used very much these days. We haven't looked at 'frames' in this series as theyhave pretty much gone out of favour since CSS came along.

Most people are happy to use 'Transitional' because it gives them a bit of leaway, but there arethose who like everything 'by the book' and prefer to use 'Strict'.

To tell the browser what markup language you are using, and which flavour, put a DocTypedeclaration right at the top of the page - above the first tag. It looks like this...
http://validator.w3.org/http://validator.w3.org/http://jigsaw.w3.org/css-validator/http://validator.w3.org/http://jigsaw.w3.org/css-validator/


20/60

I won't analyse all the stuff that's going on in there at this point, suffice it to say that with thismumbo jumbo at the top of your page, the syntax checker or validator will be able to do its workproperly. It now knows which standards you are working to and can make judgementsaccordingly.

Having added a DocType, I can check pages in my HTML editor's syntax checker and beconfident that they are squeaky clean. With that little side issue out of the way, we can go backto 'styling'.

Step 11 External Style Sheets

So far, all the styles I've used have been built-into the ... section of the pages.That way, it is easy to look at the source code of the page and see what's going on. It's alltogether in one place. However, it's very seldom that individual pages are done in isolation, it'smuch more likely that there will be a collection of pages with a common look in a Web site.

Instead of putting the style declarations on each and every page of a site, it's a much better ideato have just one style sheet and get all the individual pages to refer to that. It also means that ifyou want to change the background colour of every page on your site, or to use a different fontface or size, you only have to change the 'master' style sheet. In fact, you can totally change thelook of an entire site by making a few alterations to just one file.

Have a look at http://www.csszengarden.com/to see this principle in action. Various designers

have provided their own style sheets for the same basic page content and demonstrate admirablyhow the same skeleton can be given different 'skins' that completely change the character. To usean external style sheet, all we have to do is provide a link like this:-

This tells the browser to look for the style specifications in a file called 'basicsstyles.css'. It is aplain text file type="text/css" and the styles are optimised for display on a computer screen media="screen".

Style sheets are not limited to computer screen displays, you can produce style sheets for othermedia, like print, projection or even braille. When you think about it, a sheet of printer paper isnot at all the same size or shape as a screen and nobody is going to want to waste their preciousink-jet ink on large areas of solid colour when all they want is black and white text for reference.

A style sheet for a printer needs to make the page narrow enough for a sheet of paper, and unlikethe screen style sheet, type sizes should be specified in points (pt). Colour schemes should besimplified, or abandoned completely. Then, all you have to do is add a second link in the section just after the one for screen.

If you are content to use the same style sheet for screen and print, then you can use this link...

Although most of my style sheets are made external eventually, I usually start off with aninternal style sheet at the initial design stages. When I'm happy with the look, I copy and pastethe styles into a new file and replace them with a link.

CSS from the Ground Up - Steps 12 through 15by Joe Gillespie Jan 1, 2004

Step 12 Styling Tables

Although tables have been used for page layout since the dark ages of the Web, I think I'veshown in this series that CSS layouts offer much more scope and versatility. Tables are meant fordisplaying tabular data, the kind of thing you would usually do in a spreadsheet where you needto line-up rows and columns of figures or words.

In earlier times, (and older browsers), you could change the look of table and their cells using thevarious table properties - background colours, background images, etc. A lot of these features
http://www.csszengarden.com/http://www.csszengarden.com/http://www.wpdfd.com/profiles/joe_gillespie/http://www.wpdfd.com/profiles/joe_gillespie/http://www.csszengarden.com/http://www.wpdfd.com/profiles/joe_gillespie/


21/60

have now been deprecated and are no longer valid even though they might still work, you canno longer count on them. In fact, you never could. If you tried to use a table background image inNetscape 4 and earlier, it would be repeated in each and every cell, like looking through somemultiple image lens, making the whole exercise frustratingly useless.

It used to be okay to specify a table height in pixels or as a percentage of the window height butnow you can't. Tables make their own height depending on the content.

Styling tables with CSS can be a bit tricky and not all that predictable. You can build your owntable structure with CSS using display:table; and display:table-cell; where each cell is a separate

div, but for most purposes, just providing style definitions for HTML table elements table, tr,td, th, etc is the easier way.

tr is a table row, a horizontal row of cells. td is a table row division. You might think of it as acolumn but it doesn't behave like a column and you can't set a column background colour or typestyle.

Tables inherit some styles from the divs they are within, but not all. If the body of your page hasa font-family: verdana, arial, sans-serif style and a color: #009, the table will inherit those but notthe font-size or text alignment. Also, there is a hierarchy of importance. Any specification for atd will overrule the style for the tr, which overrules any general style set for table. You can usethis to advantage. If you set the table background-color to black and the td background-color towhite and give the table a cellspacing="2", you get a table with white cells with 2 pixel black

borders around them.

1 2 3 41 2 3 41 2 3 4

Table 1. This more subtle table has the table background set to transparent and a light tint of thebackground colour appled to the tds.

Of course, you also have access to all the CSS border styles too so you are not lumbered with thenasty, default HTML table borders. You can also play with the border colours and patterns togive you only vertical lines or horizontal lines that can be solid, dotted, dashed or whatever.

1 2 3 41 2 3 41 2 3 4

Table 2. Depending on the data you might want to give more emphasis to the horizontal rows orvertical columns like this.

Heading 1 Heading 2 Heading 3 Heading 41 2 3 41 2 3 4

Table 3. Here, a raised 3D effect is produced by altering the border colours. The table header this given a darker background colour.

Another trick you might like to try is to give the trs gradating background images.

If you make a small image file of sufficient height to fill the cell and make it very narrow, say 8pixels, it can be made to repeat horizontally with background-repeat: repeat-x more subtle andstylish than borders.

This tiny image (227 bytes) can be repeated horizontally...

Row 1 2 3 4Row 1 2 3 4Row 1 2 3 4


22/60

Row 1 2 3 4

Table 4. I've used a slightly darker gradient for the row headers and introduced a pale grey leftborder to separate the columns.

If you want to style individual cells differently from the overall table, you can do that usinginline style definitions attached to the appropriate tags.

cell 1

12 3 42 3 4

1 2 31 2 3 4

Table 5. Okay, so I'm a Mondrian fan but I'm just making the point that you can style individualcells if you really want to!

Using this approach does have the disadvantage that you can't do it from an external style sheet,it is effectively hard-coded into the page but it's okay for one-offs. A better way to style rows orcolumns is to put them inside their own divs and refer to them as...

#col1 td { ... }#col2 td { ... }

That way, you can have a fair amount of control without getting down to building your tables

from individual divs which is the ultimate solution if you have the time and patience.I haven't put all the style declarations on the page; there are too many of them, but if you viewthe page source, you will see what's going on.

There are lots of possibilities that will occur to you when you start styling tables. Who said thattables have to be boring?

Step 13 Styling Forms

Styling Web page forms is not a great priority for many designers. The forms are usually left 'asis' and for several good reasons.

1. The conventions used for forms by default work pretty well as they are.2. If a form doesn't look as expected, readers could be confused.

3. Form styling support in the various browsers isn't all that good.

Let's examine these statements a bit more closely.

'The conventions used for forms by default work pretty well as they are.'

Maybe. Yet there are still a lot of badly designed forms out there, both in print and on the web.Basically, I detest form filling and I'm know that others feel the same way.But forms are a useful way of collecting information and do so in a way that makes

compilation of that information relatively easy. So where do the form 'designers' go wrong?

The first big turn off is when a form 'looks' complicated. This intimidates the user andimmediately puts them into 'defensive mode.

Then they ask questions that seem irrelevant or intrusive. Why do they need to know mydate of birth?

Looking complicated is a matter of layout. You can make a form look simple by presenting it ina clean and orderly way. Letting text sizes go uncontrolled and breaking the layout is probablythe first thing to watch for.

The size and position of any captions or explanatory text also needs to be considered. It isbest to put these above or below the input boxes, or to the right. If you do want to put captions onthe left, use align: right; to avoid huge gaps that visually disconnect the caption from the box and


23/60

increase the visual complexity of the layout. Also, try not to have too many different sizes ofinput boxes and don't fill spaces just for the sake of it. If a zip code box is shorter than the otheraddress boxes, that's okay but don't put other different size boxes on the same horizontal line justto save space.

On a Web page, you don't need to save space. Rationalise input box sizes. Line them upvertically. Keep them tidy and uncluttered.

This form looks complicated. It has two vertical axes and eye movement is disrupted by havingto jump vertically and horizontally to find the next box.

A simpler design has just one vertical axis, right down the middle so eye movement isunimpeded.

Unlike a printed form, thankfully, a Web form masks what is not immediately visible in thebrowser window so it doesn't overwhelm the viewer. Yet, a very long form on one page thatrequires lots of scrolling can be even worse. It is better to break long forms across a multiplicityof pages - as long as you make provisions for people to go back if they need to changesomething.

'If a form doesn't look as expected, readers could be confused.'

Yes, you can't 'blow your mind' with form design. A text input box does have to communicate itsfunction, as does a pop-up or submit button. That is not to say that it absolutely has to be a blacktext on a white, indented background except that some browsers won't allow anything else!

It would be a bad idea to confuse an input box with ordinary text, it has to be differentiatedand still communicate its purpose.


24/60

The elements that you can style are input, textarea and select but you have to be aware thatstyling the input element affects not only the input text field but also the other input devices likeradio boxes, check boxes and the 'Submit' and 'Clear' buttons.

Its reasonably safe to style the font-family and font-size. The text-color can be different ifyou like. The background-color is a little more contentious. Making it a paler tint of the pagecolour is acceptable and can make the form look less aggressive.

Changing the border of a text input box also changes the border on the submit button so it couldlook like just another text box if you are not careful. To get round this, you have to 'wrap' the textbox in a div of its own and style just #typein input like this...

#typein { }#typein input

{color: #633;font-size: 10px;background-color: #ebebd9;padding: 3px;border: double 3px orange

}

If you want to make a textarea look like a text input box, then you can do this...

#typein input, #typein textarea

{color: #633;font-size: 10px;background-color: #ebebd9;padding: 3px;border: double 3px orange

}

Select (popups) change in look from one browser and platform to another. Setting a font-familyand size is about all that is worth doing. How they look when actually clicked is usually beyondyour control anyway.

'Form styling support in the various browsers isn't all that good.'This is best demonstrated with some screenshots.

The same styles rendered in Explorer (Win), Mozilla, Safari (Mac) and Opera show thevariance you can get. More about browser rendering differences coming up.

The crucial point is that we are not trying to 'pretty-up' the forms. We are trying to make themeasier to use and less intimidating with thoughtful visual presentation.

Improving the user-experience even further with helpful form validation scripts is another storycompletely and I won't go into those just now.

Step 14 Browsers

Great. Where would we be without them? How many times have I heard people say that they

wish there was just one. Which one though?

Each browser has its own built-in default style sheet. That's what you get when you don't provideyour own. Naturally, the built-in style sheets are all different. They come from differentcompanies and work differently on the various computer platforms.

It's amazing that they are so similar but the differences are not insignificant. If you just assumethat other browsers are going to give 'similar' renditions of your carefully crafted Web page, youwill quickly find out that 'similar' does not mean 'the same' and can mean 'quite different' in somecircumstances - even with the same valid CSS style sheet.

I can't go into an exhaustive cross-browser comparison here and there are plenty of thempublished elsewhere. I will point out a few of the ones that bother me most. Usually, it's a case of
http://www.wpdfd.com/editorial/basics/formtest.htmlhttp://www.wpdfd.com/editorial/basics/formtest.htmlhttp://www.google.com/search?hl=en&lr=&ie=ISO-8859-1&oe=ISO-8859-1&q=browser+CSS+differences&btnG=Searchhttp://www.wpdfd.com/editorial/basics/formtest.htmlhttp://www.google.com/search?hl=en&lr=&ie=ISO-8859-1&oe=ISO-8859-1&q=browser+CSS+differences&btnG=Search


25/60

Explorer Vs. The Rest but not always. A list of links to current browsers is always available onthe WPDFD News page. Most of them are free or can be test-driven at no cost.

Microsoft Internet Explorer is the most ubiquitous browser there is. In its various guises, itaccounts for something like 85% of all browsers used. Unfortunately, it is a law onto itself anddoesn't conform to the same standards as other browsers. It conforms to most of them but it iswhere this conformity diverges that the problems occur.

The CSS Box Model

In all versions of IE, the implementation of padding is different from all other browsers. Theeffect of this is that if you specify a CSS box width in pixels and it has left or right padding, thebox will have a different width in IE and other browsers and can break a tight layout.

IE assumes that padding is inside the box, thereby reducing the text width which I must admit,seems reasonable to me. W3C standards call for padding to be added outside the box widthkeeping the text width consistent. Which is the more logical can be argued ad nauseum but weare still left with this fundamental difference that can catch you out if you don't check yourpages.

What is 'Relative'

'Relative' placement of CSS boxes seems a fairly simple concept. Each box takes a place relativeto the one immediately above it. Watch out! If you move a box out of its 'natural flow' by giving

it a top or bottom value, what is supposed to happen is that the box moves but leaves its 'place'vacant like a car does when it moves out of a car parking space. IE (Mac version) closes upthat vacated space thereby shifting everything under it up or down.

On the left is what is supposed to happen when you move a relative CSS box, the vacated spaceeffectively becomes an invisible box. On the right, what IE (Mac) does and can break a layout ifyou don't expect it.

Markup formatting shouldn't affect styling

Now, here's the one that really 'bugs' me because it IS most definitely a bug and not amisinterpretation of standards. Browsers are supposed to totally ignore the formatting of theHTML markup. It shouldn't matter if you type the whole thing in one long horizontal line or put

double spacing between each line. A bug in IE (Mac) means that if you float boxes left in a
http://www.upsdell.com/BrowserNews/stat.htmhttp://www.upsdell.com/BrowserNews/stat.htm


26/60

horizontal line and have the corresponding markup on separate lines, it gets totally confused.You have to put the markup on one line to get the results you expect. Now, it would be no bigdeal to fix this bug, but development of IE (Mac) is effectively dead in the water and there arenow so many better browsers to choose from but like habits, old Macs die hard.

Step 15 The future

Cascading Style Sheet specifications and abilities are continually being updated and browsersbeing updated to reflect the new possibilities. It is an ongoing and ever-changing processoverseen by the folk at the W3C (World Wide Web Consortium).

Hopefully, the many differences in implementation that we have at present will be reducedif not eliminated but then there are other factors at play.

The concept of viewing Web pages on a computer screen is going to change. We are alreadyseeing Web pages on devices that are not computers and Web-delivered content that is notviewed in browsers.

Expect more!

Companies are falling over themselves trying to identify ways to build 'communication hub'functionality into their products telephones, televisions, cars, refrigerators, microwave ovensare all prime targets. Ultimately, the Web-enabled brain implant will hook us all together andbring the human race up to the same level of communicative sophistication as ants!

With CSS, it won't matter too much what device is being used to display the content. It canalready accommodate a diversity of media types even though we mostly use only two 'screen'and 'print'.

The upshot of all this is that you can't rest on your laurels, you have to keep up, or give up.

As I wind up this short Cascading Style Sheets from the Ground Up series, I hope it has whettedyour appetite for more and theres a lot more, believe me.

Lesson 2: How does CSS work?In this lesson you will learn how to make your first style sheet. You will get to know about thebasic CSS model and which codes are necessary to use CSS in an HTML document.

Many of the properties used in Cascading Style Sheets (CSS) are similar to those of HTML.

Thus, if you are used to use HTML for layout, you will most likely recognize many of the codes.Let us look at a concrete example.

The basic CSS syntaxLet's say we want a nice red color as the background of a webpage:

Using HTML we could have done it like this:

With CSS the same result can be achieved like this:


27/60

body {background-color: #FF0000;}

As you will note, the codes are more or less identical for HTML and CSS. The above examplealso shows you the fundamental CSS model:

But where do you put the CSS code? This is exactly what we will go over now.

Applying CSS to an HTML document

There are three ways you can apply CSS to an HTML document. These methods are all outlinedbelow. We recommend that you focus on the third method i.e. external.

Method 1: In-line (the attribute style)

One way to apply CSS to HTML is by using the HTML attribute style. Building on the aboveexample with the red background color, it can be applied like this:

Example

This is a red page

Method 2: Internal (the tag style)

Another way is to include the CSS codes using the HTML tag . For example like this:

Example

body {background-color: #FF0000;}

This is a red page

Method 3: External (link to a style sheet)

The recommended method is to link to a so-called external style sheet. Throughout this tutorialwe will use this method in all our examples.

An external style sheet is simply a text file with the extension .css. Like any other file, you canplace the style sheet on your web server or hard disk.


28/60

For example, let's say that your style sheet is named style.css and is located in a folder namedstyle. The situation can be illustrated like this:

The trick is to create a link from the HTML document (default.htm) to the style sheet (style.css).Such link can be created with one line of HTML code:

Notice how the path to our style sheet is indicated using the attribute href.

The line of code must be inserted in the header section of the HTML code i.e. between the and tags. Like this:

My document...

This link tells the browser that it should use the layout from the CSS file when displaying theHTML file.The really smart thing is that several HTML documents can be linked to the same style sheet. Inother words, one CSS file can be used to control the layout of many HTML documents.

This technique can save you a lot of work. If you, for example, would like to change thebackground color of a website with 100 pages, a style sheet can save you from having tomanually change all 100 HTML documents. Using CSS, the change can be made in a fewseconds just by changing one code in the central style sheet.

Let's put what we just learned into practice.

Try it yourself


29/60

Open Notepad (or whatever text editor you use) and create two files - an HTML file and a CSSfile - with the following contents:

default.htm

My document

My first stylesheet

style.css

body {background-color: #FF0000;

}

Now place the two files in the same folder. Remember to save the files with the right extensions(respectively ".htm" and ".css")

Open default.htm with your browser and see how the page has a red background.Congratulations! You have made your first style sheet!

Hurry on to the next lessonwhere we will take a look at some of the properties in CSS.

Lesson 7: Identification and grouping ofelements (class and id)Sometimes you want to apply a special style to a particular element or a particular group ofelements. In this lesson, we will take a closer look at how you can use class and id to specifyproperties for selected elements.

How can you color one particular headline differently than the other headlines on your website?How can you group your links into different categories and give each category a special style?These are just examples of questions we will answer in this lesson.

Grouping elements with classLet's say that we have two lists of links of different grapes used for white wine and red wine. TheHTML code could look like this:

Grapes for white wine:
RieslingChardonnayPinot Blanc
Grapes for red wine:
Cabernet SauvignonMerlotPinot Noirhttp://www.html.net/tutorials/css/lesson3.phphttp://www.html.net/tutorials/css/lesson3.phphttp://www.html.net/tutorials/css/lesson3.php


30/60

Then we want the white wine links to be yellow, the red wine links to be red and the rest of theexisting links on the webpage to stay blue.

To achieve this, we divide the links into two categories. This is done by assigning a class to eachlink using the attribute class.

Let us try to specify some classes in the example above:

Grapes for white wine:

RieslingChardonnayPinot Blanc

Grapes for red wine:
Cabernet SauvignonMerlotPinot Noir
We can hereafter define special properties for links belonging to whitewine and redwine,respectively.

a {color: blue;

}

a.whitewine {color: #FFBB00;

}

a.redwine {color: #800000;

}

As shown in the example you can define the properties for elements which belong to a certainclass by using .classname in the style sheet of the document.

Identification of element using idIn addition to grouping elements, you might need to identify one unique element. This is done byusing the attribute id.

What is special about the attribute id is that there cannot be two elements in the same documentwith the same id. Each id has to be unique. In other cases, you should use the class attribute

instead. Now, let us take a look at an example of a possible usage ofid:

Chapter 1...Chapter 1.1...Chapter 1.2...Chapter 2...Chapter 2.1...Chapter 2.1.2


31/60

...

The above could be headings of any document split into chapters or paragraphs. It would benatural to assign an id to each chapter as follows:

Chapter 1...Chapter 1.1

...Chapter 1.2

...Chapter 2...Chapter 2.1...Chapter 2.1.2...

Let us say that the headline for chapter 1.2 must be in red. This can be done accordingly withCSS:

#c1-2 {color: red;

}

SummaryIn this lesson we have learned that through the use of the selectors, class and id, you are able tospecify properties for specific elements.

In the next lesson, we will take a closer look at two HTML-elements which is widely used in

connection with CSS: and .

Lesson 9: The box modelThe box model in CSS describes the boxes which are being generated for HTML-elements. Thebox model also contains detailed options regarding adjusting margin, border, padding andcontent for each element. The diagram below shows how the box model is constructed:

The box model in CSS
http://www.html.net/tutorials/css/lesson8.phphttp://www.html.net/tutorials/css/lesson8.phphttp://www.html.net/tutorials/css/lesson8.php


32/60

The illustration above might seem pretty theoretical to look at, so let's try to use the model in an

actual case with a headline and some text. The HTML for our example is (from the UniversalDeclaration of Human Rights):

Article 1:

All human beings are born freeand equal in dignity and rights.They are endowed with reason and conscienceand should act towards one another in aspirit of brotherhood

By adding some color and font-information the example could be presented as follows:

The example contains two elements: and

. The box model for the two elements can beillustrated as follows:


33/60

Even though it may look a bit complicated, the illustration shows how each HTML-element issurrounded by boxes. Boxes which we can adjust using CSS.

SummaryIn this lesson you have been introduced to the box model. In the following three lesson we willtake a closer look at how to create and control elements in the box model.

Lesson 10: Margin and paddingIn the previous lesson you were introduced to the box model. In this lesson, we will look at how

you can change the presentation of elements by setting the margin and padding properties.

Set the margin in an element

Set the padding in an element

Set the margin in an elementAn element has four sides: right, left, top and bottom. The margin is the distance from each sideto the neighboring element (or the borders of the document). See also the diagram inlesson 9 foran illustration.

As the first example, we will look at how you define margins for the document itself i.e. for theelement . The illustration below shows how we want the margins in our pages to be.
http://www.html.net/tutorials/css/lesson10.phphttp://www.html.net/tutorials/css/lesson10.phphttp://www.html.net/tutorials/css/lesson10.phphttp://www.html.net/tutorials/css/lesson10.phphttp://www.html.net/tutorials/css/lesson10.phphttp://www.html.net/tutorials/css/lesson10.phphttp://www.html.net/tutorials/css/lesson11.phphttp://www.html.net/tutorials/css/lesson11.phphttp://www.html.net/tutorials/css/lesson11.phphttp://www.html.net/tutorials/css/lesson9.phphttp://www.html.net/tutorials/css/lesson9.phphttp://www.html.net/tutorials/css/lesson10.phphttp://www.html.net/tutorials/css/lesson11.phphttp://www.html.net/tutorials/css/lesson9.php


34/60

The CSS code for this would look as follow:

body {margin-top: 100px;margin-right: 40px;margin-bottom: 10px;margin-left: 70px;

}

Or you could choose a more elegant compilation:

body {margin: 100px 40px 10px 70px;

}

You can set the margins in the same way on almost every element. For example, we can chooseto define margins for all of our text paragraphs marked with

:

body {margin: 100px 40px 10px 70px;

}

p {margin: 5px 50px 5px 50px;

}

Set padding in an elementPadding can also be understood as "filling". This makes sense as padding does not affect thedistance of the element to other elements but only defines the inner distance between the borderand the content of the element.


35/60

The usage of padding can be illustrated by looking at a simple example where all headlines havebackground colors:

h1 {background: yellow;

}

h2 {background: orange;

}

By defining padding for the headlines, you change how much filling there will be around the textin each headline:

h1 {background: yellow;

padding: 20px 20px 20px 80px;}

h2 {background: orange;

padding-left:120px;}

SummaryYou are now on your way to master the box model in CSS. In the next lesson, we will take acloser look at how to set borders in different colors and how to shape your elements.

Lesson 11: BordersBorders can be used for many things, for example as a decorative element or to underline aseparation of two things. CSS gives you endless options when using borders in your pages.

border-width

border-color

border-style

border

The width of borders [border-width]The width of borders is defined by the property border-width, which can obtain the values thin,medium, and thick, or a numeric value, indicated in pixels. The figure below illustrates thesystem:


36/60

The color of borders [border-color]

The property border-color defines which color the border has. The values are the normal color-values for example "#123456", "rgb(123,123,123)" or "yellow" .

Types of borders [border-style]There are different types of borders to choose from. Below are shown 8 different types of

borders as Internet Explorer 5.5 interprets them. All examples are shown with the color "gold"and the thickness "thick" but can naturally be shown in other colors and thicknesses.

The values none or hidden can be used if you do not want any border.

Examples of defining bordersThe three properties described above can be put together by each element and thereby producedifferent borders. To illustrate this, we will take a look at a document where we define differentborders for, , and

. The result may not be that pretty but it illustrates some of

the many possibilities:

h1 {border-width: thick;border-style: dotted;border-color: gold;

}

h2 {border-width: 20px;border-style: outset;border-color: red;

}


37/60

p {border-width: 1px;border-style: dashed;border-color: blue;

}

ul {border-width: thin;border-style: solid;border-color: orange;

}

Show example

It is also possible to state special properties for top-, bottom-, right- or left borders. Thefollowing example shows you how:

h1 {border-top-width: thick;border-top-style: solid;border-top-color: red;

border-bottom-width: thick;border-bottom-style: solid;border-bottom-color: blue;

border-right-width: thick;border-right-style: solid;border-right-color: green;

border-left-width: thick;border-left-style: solid;border-left-color: orange;

}

Show example

Compilation [border]As it is also the case for many other properties, you can compile many properties into one usingborder. Let us take a look at an example:

p {border-width: 1px;border-style: solid;border-color: blue;

}

Can be compiled into:

p {border: 1px solid blue;

}

Summary
http://www.html.net/tutorials/css/lesson11_ex1.phphttp://www.html.net/tutorials/css/lesson11_ex2.phphttp://www.html.net/tutorials/css/lesson11_ex1.phphttp://www.html.net/tutorials/css/lesson11_ex2.php


38/60

In this lesson you have learned about the endless options CSS gives you when using borders inyour pages.

In the next lesson, we will look at how you define the dimensions in the box model - height andwidth.

Lesson 12: Height and widthUp until now, we have not cared much about the dimensions of the elements we have workedwith. In this lesson, we will take a look at how you easily can define the height and width of anelement.

width

height

Setting the width [width]

With the width-property, you can define a certain width of an element.

The simple example below provides us with a box wherein text can be typed:

div.box {width: 200px;border: 1px solid black;background: orange;

}

Setting the height [height]In the example above notice how the height of the box is set by the content of the box. You canaffect the height of an element with the property height. As an example let us try to make thebox in the example 500px high:

div.box {height: 500px;width: 200px;border: 1px solid black;background: orange;

}

SummaryLesson 9, 10, 11 and12 have given you an introduction to the box model in CSS. As you canprobably see, the box model gives you many ne

How to Design Your Website With CSS

Documents

Transcript of How to Design Your Website With CSS