How to design your website with CSS Cascading Style Sheets (CSS) allows you to create fast loading

pages, increase your search engine rankings, and modify your whole site with one style sheet. So why don’t more people use them? This is because they got so used to html design and are afraid or too lazy to upgrade their skills. Some will also use ready made templates that contain flashy graphics, bloated code and sometimes 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 and multimedia from presentation. 2. Consistent site wide look and feel consistency – you can apply one style for 100s of web pages all 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 page separately. 3. Web site maintenance - apart from being able to make site wide changes easily through one CSS file, the clean code it generates makes it easier to update. Properly marked up web pages permit them to be maintained by more than one person. It will also work in more browsers. Website redesigns will take much less time. 4. Improve search engine rankings– search engines generally spider the code at the top of your web page first. For most sites that means the navigation bar will be spidered first (resides at top of page code). CSS enables you to position the code for your content at the top making your page search engine friendly. Properly marked up HTML pages can easily found and properly categorized by search engines 5. Fast loading – CSS reduces the amount of tags used therefore producing clean code. Tableless design can reduce your load time by 25% to 50%. 6. Reduce bandwidth – compacting the amount of code used will reduce the amount of bandwidth needed to host your web pages. Therefore you won’t have to pay higher fees when adding more web documents to your site. 7. Accessibility - increasing accessibility with CSS means being able to serve web content to a larger audience, increasing web site usability, even for non-disabled people. Content can easily be formatted for projection as well as screen display. Tableless layouts display well on handhelds. 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 quick and easy to apply new styles that can not only effect all styles on your web page but even your whole site.
• • • • •

Web Design Articles Designers Resources Featured Designs Web Design Forums Tools & Software

CSS from the Ground Up

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 think nothing of it. It all comes down to taking small steps to begin with and that's what I'm going to do 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 the background or even if you have never created a Web page at all, this tutorial will set you off in the right direction. It assumes little or no knowledge of putting a Web page together. It really is 'from the ground up'.

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 or GoLive, 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 you get a few different browsers. If you only have Explorer, you should also get Mozilla and any others 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 but don'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 page possible.
<html><head></head><body> This is my Web page </body></html>

What we have here are three sets of 'tags' – tags usually come in pairs but not always. Encompassing the whole page is the <html>...</html> tag pair. The first one <html> is the 'opening tag' and the 'end tag' is the same, except that it has a forward slash character between the < and the html>. Inside the <html></html> tag are two more tag pairs. contains information that doesn't actually appear on your Web page, the most important probably being the page title that appears in your browser's title bar. You do this by enclosing the page title inside a title tag pair like this...
<head>...</head> <html> <head> </head> <body> </body> </html> <title>My page</title> This is my Web page content!

The <body>...</body> 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 a WYSIWYG editor – or you can copy and paste it from here.

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 file anywhere on your computer's hard disk, but to keep things neat and tidy, create a new folder to keep 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 show up 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 in having a Web page if it doesn't actually say something (other than "This is my web page content!") but I'm going to leave that up to you. Any content must go between the <body>...</body> 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 mean that the words just flow left to right, top to bottom words with no particular emphasis other than the order in which they appear. It makes more sense to group those words and sentences into paragraphs, 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 separate paragraphs 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 <p>...</p> tag pairs. In HTML, a paragraph is simply a block of one or more sentences with an extra bit of space to separate it from the next one – like the ones you see here. For headlines, there are six different degrees of emphasis going from the largest <h1>...</h1> down to the smallest <h6>...</h6> They look something like this...

This is a h1 heading
This is a h2 heading
This is a h3 heading
This is a h4 heading
This is a h5 heading
This is a h6 heading

As you can see, they decrease in size as the number gets bigger with h4 being approximately the same size as this 'small' body text. h5 and h6 are smaller, but bold.

Again.. For simplicity..</em> This gives the functionality of italic type regardless of the device reproducing the text.. Italics are produced with. with HTML.. we'll just use 'all'. we are going to build our style sheet into our Web page. don't worry about it yet.</head> section of the page. Bold is a heavier version of the body text and denoted with <b>. we simply produce our own styles which are grouped together into a collective 'style sheet'. The <!-. You can have a style sheet to describe how your page looks on a computer screen (media="screen") and another completely different one to format it for printing (media="print").. which is general purpose. HTML should work on other devices too. Underlining can be done with the <u>. Software that reads Web pages to people with poor vision will understand strong and add the necessary stress.</head> part of our page like this.</strong> Although they will look similar on your screen.. If you are wondering where the 'Cascading' comes-in. 'braille' and 'aural'. this one doesn't require an end tag.. you will find that you can have an 'external style sheet' in a separate file which can be called-upon by several pages and 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. they shouldn't show up anyway. bold is a print style term and on the Web. This is called 'commenting' but as the styles are in the <head>. The styles we are going to use are defined in the <head>. It becomes more like what you would produce with a word processor. .. the text starts to take on some form. For now. where would it go? By using these basic markup tags. it's a page of style definitions or specifications that instruct the browser how to display the various elements on a page. The one other important tag is the line break <br /> Unlike the other tags. consider their true functions. type="text/css" tells the browser that we are just using plain text to describe the styles. It is best not to use underlining as a means of emphasis as it will confuse the readers. it is better not to use this visual style but to use <em>. you guessed it. To over-ride the default styles.. you see a pair of <style>..</i> tags. 'tv'... Later. title="mystyles" is simply to identify the styles for your benefit.There are a few other tricks that we often play with text to give emphasis to words and phrases. Now you will appreciate the logic of not using 'bold' and 'italic'..</b> however.and --> characters are a way of hiding text on a Web page – you can only see it in the markup. This basic page will probably look quite different in other browsers and computers.</style> tags but there are a few more bits in there that need to be explained.. it is preferable to use strong <strong>. Every browser has its own default set of styles and unless you instruct the browser differently. Rather than thinking about how they look. nothing fancy.. <i>. it wouldn't make much sense anyway.</u> tag pair but underlining on a Web page has a special meaning. Step 2 – A Style Sheet A style sheet is a simple enough concept. media="all" is where it starts to get interesting. There are other media too such as 'projection'. It usually indicates a link... it will use these defaults. I'll come back to that later when we start to apply styles to our HTML.. <head> <style media="all" title="mystyles" type="text/css"> <!---> </style> </head> Here.

blue e8(232).. Browsers default style usually give black text on a white page. red. body { background-color: #e8eae8. Humans have 10 digits on their hands. Sometimes you will see only three characters. Our background colour is therefore red e8(232). #2a0. color: #5d665b. but once you go over nine. you add a second digit and '10' represents 16. again separated from the previous one by a semi-colon. So. 11. body { background-color: #e8eae8. for example. This is shorthand for #22aa00. let's now add a type colour to take the place of black. we can give the page a margin all round.. It was chosen with a colour picker tool in Photoshop so its a 6 digit hexidecimal number. 15 so we substitute letters a. The hash sign at the front denotes that were are using hexideximal and not ordinary decimal numbers. not that they have fingers. green ea(234). green and blue each have 16 steps of brightness that can be combined in many ways to produce all the others. in 'hexidecimal' counting. body { background-color: #e8eae8 } What's all this #e8eae8 stuff? Colours on Web pages are defined by mixing 256 shades of red. 10 is represented by 'a' and 15 by 'f'. b.. d. 12.. f. c. using three digits colour values is simpler – and probably enough. And now. 13. Computers prefer to count in sixteens. Be careful not to mix up the colons and semicolons or things will go horribly wrong. With single digit colours. so they count in tens.255 is ff. Anyway. Using this method. The basic body style definition looks like this.. you can dispense with the second and the browser will understand what is meant. color: #5d665b } Note how the background-color and foreground (type) colour are separated by a semi-colon. but we will change that to a warm pale grey. #ffffff would be white and #000000 black.The first thing we are going to define the style for the overall body of the page.</body> tags will have this style. green and blue in various proportion. Using only three digits. margin: 50px } . So. 14. all the numbers from 0 to 255 can be represented by two numbers or letters . with six digits there are over sixteen million. or set of styles applied to it. This is how we give the body background colour a value. so that the type doesn't run right up to the edges of our page. you can have 4096 different colours. Note that we don't use an equals sign '=' but a colon ':'.. We will give the page a background colour. When you go above 15. 'margin: 50px' is added to our body style definition. When there are two characters the same in each of the three colour values. If you are hand-coding. body { } The word body followed by a pair of curly braces. Everything within the <body>. there are no single numerals to represent 10. e ...

users are able to set a 'comfortable' size within their browser's preferences which narrows-down the size variations a little. You will find that you are limited to two or three serif faces. Repeat after me. This is a serif font family font-family: Georgia. Times. sans-serif. font sizes are not set in stone and change from one computer to another. Here is a typical sans-serif font family specification. Arial. Note that when a font name has more than one word. but they can still be quite different from what you expect. There are various ways of specifying relative font sizes. sometimes quite dramatically. Web pages can only use fonts that are installed on the reader's computer so we can't specify just any type we fancy. That narrows the choice down quite considerably. Unlike designing for print. Instead of choosing only one font style. You . Geneva. In print. Our page set in sans-serif font » The font size Specifying a font size is a contentious issue. It will always take up the same amount of page space and the line breaks will be exactly as you set them. the same number of sans-serif faces and a monospaced. it is best to specify the font size relative to the user's chosen default size. (typewriter) style. font-family: Verdana. To keep you pages futureproof you need to think in terms of liquid page designs that adapt themselves to the screen size.Any type we now add to the page will be a dark grey/green on a pale grey background by default. you can specify a font size in points and the type will always be that size. Luckily. we specify a range in the hope that one of them will be installed on the reader's computer. Here are some common fonts on Windows and Mac computers. With the rising popularity of Wi-Fi and handheld devices. Depending on the user's screen size. type can go from unreadably small to kiddie's picture book large. On the Web. The font style We'll do the font style (typeface) first as that makes quite a dramatic difference. "Times New Roman". We will see how this can be over-ridden for special cases later. You can't depend on any particular one being present so you have to provide alternatives. serif. the browsing conditions for your pages will change dramatically in the next few years. the type size. We can change the type face. the amount of space between lines and add other niceties such as paragraph indents. we have to use ones that are common to all computers – ones that come pre-installed with the system. 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. "The Web is not the same as print!" Relative font sizes If you want the widest possible audience for your pages. there's a lot more we can do. 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 gentler feel. operating system and browser.

In this example.7 em or 70% and it would look fine on your PC. As the body style definition is getting a bit long. So that you can see the differences. 1. 'Medium' is the same as 100% or 1em. Geneva. if not identical. body { background-color: #e8eae8. font-size: small.can use percentages of the default (%). The line spacing The amount of space between lines is about 120% of the font-size by default. . high resolution monitors. again we can opt for relative (% or ems) or absolute (px). This line is set at 85% of the size of the text around it. specify a type size of 0. Arial. 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. the browser doesn't care but it makes it easier for humans to read.2 em is the same as 120%. only for print. This line is set as x-small This line is set at 11px absolutely Note that you should never use 'points' to specify font sizes for the screen. font-family: Verdana. so it might well be longer than ideal. or use can use a unit called an 'em'. that's the height of the character plus the extra spacing above it to 180% of the font size (small) for the whole page. I'll discuss line length later. As long as the curly brackets are there and each style definition is separated by a semicolon. you can also specify font sizes in pixels. With our current page. The preferred way is to use a set of pre-defined descriptions that sound like T-shirt sizes. especially if the lines are long. To change line spacing. 'Smaller' is a size down from that and 'Larger' a size bigger. On my screen in Mozilla. sans-serif. For somebody using a Mac with a smaller default font size. xx-small. that's fine. which is the same as 100%. Once you move to laptops and handhelds or to very large. x-large and xx-large. for instance. pixel sizes do vary from the norm and the type sizes will change accordingly. Then there is x-small. I've set the line height. I've split it into multiple lines. T-shirt sizes and pixels. Pixels don't vary greatly in size from one desktop computer to another so the type size will be similar. color: #5d665b. The advantage of using this system over percentages or ems is that the broswers won't allow the type to become too small to read. xx-small is smart enough to know what the minimum size of type a computer can handle. I have set three paragraphs of text here using three methods – percentages. the 70% could take the type down below the size of legibility. Adding a little extra generally improves legibility. margin: 50px. You could. Now we will look at how we can narrow our style down to more specific areas. This type is way too small: This type is way too small medium small x-small xx-small Absolute font sizes If you have a limited audience for your site that uses basically the same kind of computer setup as you do. the line length is determined by the width of the browser window. they are all very similar in size but might not be on yours. xx-large x-large large xx-small type: This type is small but not too small to render.

What we need is an invisible character and HTML provides one called a nonbreaking space which can be typed-in as &nbsp. Again it's just a matter of adding more definitions to the styles. by default are big and bold and have extra space above and below. Remember. Times. h2 and h3 are bigger than normal text and h5 and h6 are smaller. there has to be something inside the tags. font-family: Georgia.</p> so it is not officially a paragraph at all – in HTML terms. serif } Now we have headings » You might also notice that I've added a blank line above the second heading.. Headings I've already explained about the six levels of headings that you get by default in HTML. Extra tweaks Before going on to the next part.things like people's or company names. All we need to do is split them up like this:margin-top: 70px. Geneva. we can redefine them to our own requirements. right. margin: 50px. color: #5d665b. To make a block of text into a paragraph. less common techniques such as grossly indenting by half a column width or even exdenting (the opposite of indenting). You can add some extra space or maybe indent the first line. we add p { } to the style definitions in the page's head under the body styles. Arial. add text-indent: 3em <style media="all" title="mystyles" type="text/css"> <!-body { background-color: #e8eae8. In creative typography.As I mentioned earlier. <p>&nbsp..</p> tag pair.. . Headings. font-family: Verdana.. sans-serif. If you just put an empty paragraph <p></p> it won't work. margin-left: 120px. CSS can handle all these but the default paragraph separator is a 'paragraph space' which is about half of the line-height. designers will sometimes use other. There are a number of ways to visually separate paragraphs from one another. Let's play with a h3 heading and change its colour and font. headings from h1. font-size: small. line-height: 180% } p { text-indent: 3em } --> </style> This page is broken up into paragraphs » Note how the first paragraph is not indented – it is not enclosed in <p>.. "Times New Roman". let's try a few extra tricks with our page of text.. I set the margin to 50 pixels all round. like so. simply enclose it inside a <p>. Inside the brackets. Putting a blank space won't work either <p> </p> because HTML ignores spaces unless they are between characters. We are not stuck with those. h3 {color: #966b72. large blocks of text can be broken up into paragraphs to make them easier to read. In the body definition. top and bottom. We can have different margins for left.</p> The non-breaking space is also very useful to put between words that you don't want to split when the words wrap at the end of lines . To be able to manipulate the paragraph style with CSS.

Be warned that italic type can look bad on some computers and is especially hard to read at smaller sizes. it's still like a typewritten or word-processed page. When we talk about type size. you have a page that has a bit of style about it – without too much effort. Whilst you are waiting. Try different font styles. E=MC2 CSS also gives us control over horizontal spacing. Line space is therefore the height of the type plus this extra space. margin-bottom: 70px. we don't use lead.margin-right: 50px. we might say line-height: 180%. or font-size in CSS. I could have used the <sup>2</sup> tags but with CSS. I've also picked out a couple of words in bold (strong) and italic (em). For this simple example. we just say that there is so much line space between the base of one line of type and the next. There might also be a small amount of extra space called 'leading. More about line spacing further down. . Vertical-align allows you to adjust the baseline of individual letters relative to the rest of the text but this is for fairly specialised use with mathematical formulae and we won't bother too much about it here. In the next issue. In CSS. sizes. The word comes from the fact that printers used to put strips of lead (metal) between lines of type to give more line space. we'll look at some more interesting layout possibilities. it refers to the distance from the top of a capital letter such as 'A' to the bottom of a descending letter 'p' or 'y'. Step 4 – More text formatting Before going any deeper into text formatting. line spacing but most importantly. it's a good idea to familiarise yourself with some basic typographic terms. look at your page in as many browsers as you can to see how different thay can be. That gives something more like a printed page with a wider left-hand margin. Nevertheless. View our page with styled text » Now. ems or pixels (px). the space between individual letters and words. with the value sepecified as a percentage. Today. there's more control. you can play around with the values in the page you have just created.

it becomes intimidating and difficult to read.5em. For comfortable reading. Many early Web pages had text running all the way from the left side of the screen to the right. Lines that are too short cause the eye's left to right reading pattern to be disrupted too much. the worse the problem gets. word-spacing: 0. The difference in brightness between black text and a white background is many magnitudes greater on a monitor than on a printed page. line-height: 1.. which in turn. . With CSS you can have as much line space as you like. Lines that are longer than ideal are also tiring and the beginning of the next line down becomes more difficult to locate. some CSS styles 'cascade' when they are nested inside other styles. If you are using an absolute font sizes. background-color: #e8eae8 } The lower section the text is enclosed within a page division <div>. The longer the lines become. more line space helps readability. If lines get longer. Geneva. regardless of the screen size. By default. If you are using relative font sizes. it's like a page within a page.. you can specify it as a percentage of the font-size – font-size: 1em. To demonstrate..5em Designing for readability. margin-right: 200px. there is a little line space in browser text settings.. a page on a computer screen is luminous. are then passed down to its children. line-height: 180% which is roughly equivalent to one-and-a-half line spacing in a word processor or old fashioned typewriter. The general specs for the body of the page provide the font family.. font-family: Verdana.. in this example the top of the page has no margins and the text has no lineheight setting. you can specify something like font-size: 11px. line-height: 180%">. body { color: #5d665b. Some still do – and screens have become wider too.</div>.This is useful for adding visual style to headlines. Contrast Unlike a printed page that you read by reflected light. SPACED HEADLINE letter-spacing: 0. Just as a child might inherit certain characteristics from its parents. the font size and the colours for the type and background only. line-height: 16px The spec for this page is font-size: small. When there is little or no space between lines of text. sans-serif. a line of text should be about the same length as one and a half to two lower case alphabets – that means 40 to 60 characters or eight to ten words. It's approximately 20% of the font size (cap height plus descender). <div style="margin-left: 250px.</div> Page divisions 'divs' are a very important part of Cascading Style Sheets and we will look at them in more detail next month. font-size: small. there was one vital feature that was missing from HTML text formatting that even the most humble typewriter could handle – line spacing.5em (the same as 150%). Before CSS was as well supported in browsers as it is now. It has a left margin of 250px and a right margin of 200px and the line-height is set to 180%. Arial. These styles are added to the general body specs by a process called 'inheritance'.

.. less stressful reading.</li> Each type has a few options that can be specified from HTML – <li type="square">. for instance..</li> gives a square bullet.</ol> at the beginning of each list item <li>. If you want closer control of the individual list items. Even better.5em 0 } adds an extra half em of line space above and below each list item for an ordered list. you can specify margins for those also – to get more line space. left and can be ems. before that you will probably be squinting and feeling uncomfortable without realising quite why. margin: 1em 0 1em 40px } This does the same job as adding it to each list item in HTML and gives you control over the margins around the complete list. Only in extreme cases would you shade your eyes to look into the distance outside. If you go too far however. The four values 1em 0 1em 40px refer to top. iii.5em 0 . Step 5 – Lotsa lists Another very useful formatting technique often used in documents is the 'list'.. you start to make things difficult for people with poor vision. • • • 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 Ordered list item 2 Ordered list item 3 Ordered list with roman numerals CSS gives you more options and control – just add a definition for ol or ul to your styles.</li> gives lower case Roman numerals. bottom. .. <li type="i">.. you can use your own graphics for bullets. right. Reducing the contrast of Web page text makes for more comfortable. it is important to make the experience as comfortable as possible.</ul> or numerals (ordered lists) <ol>. For an unordered list you would substitute ul li. Ordered list item 2 3. In an article like this where there's a lot of text to read and the reader is likely to spend some time in front of their screen. Ordered list item 1 2. HTML provides for basic lists that either have bullets (unordered lists) <ul>. percentages or pixels. These are like paragraphs but have a little more going for them... ol li { margin: .... ol {list-style-type: lower-roman. so I have used a gentle background tint and soft colours.Vast expanses of black text on a white background can be like walking in bright sunlight without sunglasses. ii. Ordered list item 3 Default ordered list i.

<a name="myanchor" title="myanchor"></a> That's an <a></a> tag pair with.com/index. <li style="margin: 1em 0pt. actually.. If you place an anchor on a page at a specific place – well. list-style-image: url('/images/icon2. it has to be done 'up close' or 'inline'.. Just think of stationary ships in the great sea of the World Wide Web with a chain made from links going down to an anchor on the sea bed. phrases or images on a page can be clicked upon to whisk you off to some other place. that's not going to do what we want here.gif')">We know about people</li> <li style="margin: 1em 0pt. <a href="http://www. ultimately. This is the hypertext reference address that you want to go to. I've added some extra space at the beginning of each line to compensate – like this. you add an extra bit on the end of the link. There's nothing between the two tags. Each page has at least one anchor on it.gif) } ul li { margin: 1em 0 1em 0} • • • You are going to like this You will love this too And what about this? And.htm">This is a link to the top of my home page</a> So. To apply styles to individual list items.. . These other places are called 'anchors'. The ships are anchored at specific locations and that makes them easier to locate than if they were adrift at sea..gif')">We know about images</li> <li style="margin: 1em 0pt.gif')">We know about writing</li> • • • • 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. To jump to this location. it should be immediately above where you want to land up – it goes like this. Note however that IE6 (Windows) puts the icons very close to the text..wpdfd. list-style-image: url('/images/icon3. Links added to words.. a different bullet image for each list item.gif')">We know about ideas</li> <li style="margin: 1em 0pt. The definitions are inserted into the opening <li> HTML tags in the body of the page. for example." part included within the first tag.ul { list-style-image: url(/images/smiley. The default one is right at the top of the page but you can add more anchors to any part of a page that you would like to be able to jump to. list-style-image: url('/images/icon4. name="myanchor" included in the opening tag... We know about people.</a> plus an extra href="... list-style-image: url('/images/icon1. Step 6 – Linking The whole point about HTML is that HT (HyperText) bit. you have a pair of tags <a>...

The default is to underline the link text and make it blue. This changes the colour of the text as the mouse pointer passes over it and gives a very useful extra clue that it is a hypertext link. text-decoration:none gets rid of the underline. An unvisited link An active (just clicked) link A visited link Note that the cursor changes too. Usually. Of course.<a href="http://www. The key requirement is that a link looks sufficiently different from the surrounding text to show that it's something special. Context is an important factor here too. When you later come back to that link. It wouldn't work if every link was a different colour. I have changed the link colours to ones other than the default blue/purple. it has changed colour again. Similarly. links on a page are indicated by making them visually different from the surrounding text. text-decoration: none } CSS also allows an additional 'state' called 'hover'. When you click on a link.. a:link { color: #696. but it can look ugly.wpdfd. they don't have to be blue. it changes colour and some browsers also put a box around the text too. but only temporarily whilst the pointer is hovering over the text. Underlined text may be practical. . to show that it has already been visited. text-decoration: underline } There's that traditional underline coming in if you want it. All we have to do is set up a definition for 'a' – anchors. Everybody that has ever used a Web page gets the idea of these conventions very quickly. being 'designers' we are not content with the default look of links.. text-decoration: none } As this page has a colour scheme other than black and white. it's the context that gives the clue and also the fact that other similar words or phrases have the same. The reason could be to add emphasis but again.com/index. Links don't have to be underlined.htm%20%3Cem%3E#myanchor%3C/em%3E">This is a link an anchor on my home page</a> As you are aware. a:hover { color: #c93. when a word or phrase within a block of text looks different. it must be for a good reason. you do this. a:visited { color: #699. it provides visual feedback by changing its colour to red. consistent look. Its prominence and position on the page and the fact that the words are inviting you to go somewhere else all give clues to its function. to purple. If you want a visited link to be a different colour. CSS allows us to play around with how links look. The default presentation of hypertext links in HTML has three distinct states. Some text is obviously a 'menu' of choices whether it is underlined or not. The default arrow pointer changes to a pointing finger when it passes over a link. The 'active' state of a link is what you see when you actually click on a link.

rectangular chunks of the page. some of the other ones will shift position. we can break that up into smaller divisions that have their own styles. background-color: transparent } a:visited { color: #699. Now. It is less confusing to the user if interface items stay nailed-down to the same spot. but not quite. All we have to do. text-decoration: none. These divisions can be as small as a single character or larger. If you have a link on a page that links to the same page. background-color: transparent } The order of the style definitions is important here. I'm going to look at how you can make your own style definitions that extend the capabilities of HTML and make more interesting layouts. It does nothing. This is a dead link. background-color: transparent } a:hover { color: #c93. as I showed in Step 3. It's like a signpost bending round and pointing at itself. This example page demonstrates the principles that you learned here. There's a lot more that you can do with CSS links. background-color: transparent } a:active { color: #900. here's another state not officially sanctioned in CSS. We have also seen how the default styles can be modified to suit our own tastes by providing them with new style definitions that over-ride the defaults. Now. text-decoration: underline. one of the most important principles of interface design is that you try to keep everything as consistent as possible. That's called 'greying out' and you will be familiar with the principle from other programs on your computer. Step 7 – CSS Boxes We've already seen that the text on a Web page can be broken up into headlines and paragraphs and that these mechanisms are already catered for in HTML. Usually. is surround the area we want to style . well. the order doesn't matter in CSS definitions but here it is important that the a:hover and a:active definitions come last or they might not work. it doesn't make much sense that you can click on it and end up back where you started. text-decoration: underline. The body of a page is the entire visible area but. Sometimes designers change the text background to give an effect like a highlight marker for the hover and/or active states. If you remove a menu item. for instance.To set up link styles that apply to the whole page. text-decoration: none. a:link { color: #696. The other element we have at our disposal here is the background colour behind the text. invisible to indicate that it is not a valid selection. There are two ways to handle this. Why have it there at all if it's not a choice you want people to make? Well. we have only scratched the surface here but it should be enough you get you started. You can turn the link into what is effectively a heading by making it more prominent than the rest or you can make it almost. you would put something like this inside the style definitions in the head of your page.

If you put some text into it. If you don't specify a height for a CSS box. you can have a border. a background colour or even a background image which can be made to repeat to give a pattern.</div> Those divisions are each like a mini page and are often referred to as CSS boxes. If you haven't specified a body margin. it will have none.. style and colour. To keep text away from the edge of a box. it will be the full width of the browser window.. .with a pair of tags <div>... you can add padding. Beyond the padding. So your box size will change depending on which browser is viewing your page and this can have quite disasterous results if you are depending on precise pixel measurements.. a CSS box goes from the left margin to the right margin of the page body. All other browsers put the padding outside the box. CSS boxes can have a width and height. Unlike the diagram here. You have to be very careful with padding because it works quite differently in Microsoft Internet Explorer from all other browsers. Borders come in a variety of styles and you can address each of the four sides separately in terms of thickness. adding to its width and height.. IE puts the padding inside the box. They look slightly different in the various browsers but here is what they look like in Mozilla. By default. it will expand vertically to accommodate that text – or image. so its width and height stay the same.. CSS Boxes are the fundamental building blocks for building Web page layouts and I'm going to spend some time explaining how they work because it is so important..

To separate boxes from one another.The thickness of your border increases the box size accordingly. The problem is that scrapbooks always remain the same size – Web pages don't. . When boxes are positioned at absolute co-ordinates with definite widths and heights. bottom and left or bottom and right. Margins and padding are often confused especially as what we normally call a 'page margin' in a book or web page is really 'padding' because it can't go outside the page – it is obviously inside. you can give them margins. The possible combinations are endless. the margin goes from the edges inwards. for instance. it's very like sticking newspaper clippings and photographs into a page in a scrapbook. all other CSS margins go outwards. Just remember that this is a 'special' case. Your house could be 50 metres from North Street and 100 metres from East Street. left:100px but it doesn't have to be top and left. For the body of a Web page. The most common way to give a box a position is simply to specify something like top:50px. CSS boxes can be put at any fixed position on a page by specifying position: absolute. it can also be top and right. Here are a few CSS boxes with different styles. that's how things usually work in real life. each with its style definition displayed. Absolute positioning is easy to understand. Absolute positioning In addition to having a height and width.

Relative positioning If you wanted to describe the position of your next door neighbour's house, you could say that it was 70 metres from North Street and 100 metres from East Street, or you could say that it is 5 metres along from your house. Relative positioning assumes that CSS boxes are next to another one. The first box is the top one, the next one is below it and the next, below that. They effectively float downwards from the top of the page. This is something that rarely happens in real 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 – and so on. To get CSS boxes to sit beside one another rather than one below the other, you have to tell them to float: left; or float: right; Like the air mattresses in a wide swimming pool, they will sit side by side, where there is enough space. Then they will wrap around onto a lower level. You have to try and avoid that situation by making sure that the total widths of all your boxes in a line are not more than the page width. You can do this by specifying the width in pixels – but keeping the total below the minimum width of a browser. Or you can use percentages – making sure that the total percentages add-up to 100 – or preferably, slightly less. With relative positioning like this, avoid mixing pixels and percentages or results will be unpredictable. The example of floating boxes here show the behaviour of relatively positioned boxes in single and multiple columns.

Step 8 – Custom Divs
IDs When you are creating CSS boxes with custom definitions, there are no existing HTML elements to 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 given names. We do that by giving them an 'identity' – id for short. An id uniquely identifies a CSS box 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 top carries a logo and the navigational links. The middle bit contains the text and pictures. Down at the 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 the logo and sit between the header and text area. Note that the right columm is narrower than the one on the left to compensate visually for the extra space created by the ragged right hand side of the text – otherwsie the text would look off-centred. In the style definitions, we stick a hash sign # in front of the name 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 by just referring to their ids like this...
<div id="header">...</div> <div id="navbar">...</div> <div id="logo">...</div> <div id="midsection">...</div> <div id="footer">...</div>

If we have already specified the type in the body declaration, then our boxes will 'inherit' those styles. Any style definitions that you add to the boxes' definitions will take precedence over the more 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 to break-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 flowers or 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 ...

<div class="midsection">...</div> <div class="midsection">...</div> <div class="midsection">...</div>

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 } <span style="color: #cc0000">This is red text!</span>

Instead of wrapping the text we want in red in a <div>...</div>, we use <span>...</span> This is referred to as inline as it applies to a span of text that is inside another <div>...</div> Use <span>...</span> any time you want to make a variation to some text that differs from the overall specification. It could be colour, font-family, size, weight or whatever. So, in CSS, there are block elements which are rectangular boxes that can be unique 'ids' or reusable '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 a combination 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 involves using 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 fairly narrow.
.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 want to reuse them further down the page. This example replaces the single .midsection with three floated left columns.
<div class="leftcol">...</div><div class="midcol"...</div><div class="rightcol"...</div>

This opens-up a lot more interesting layout possibilities.

Don't leave any divs completely empty, even they are only 'white space'. Put a non-breaking space &nbsp; 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. Everything I have shown you so far - the markup, the example pages are all wrong! Well, they will probably work just fine unless you are using an ancient browser but if you test them with a syntax checker or 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 word processing program. It compares the words you have typed-in to a list of words in its built-in dictionary and alerts you if it can't find a match. It might be that the word isn't in its dictionary but it's also possible that you have misspelled it. In the more sophisticated word processors, your writing can also be checked for proper use of grammar and if you type a sentence that doesn't have 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 are using. My UK English spelling checker is quite different from a US English spell checker - and what if you aren't using English at all? Just as your English, or whatever language you write in, is checked for correctness, your HTML and CSS can, and should, be checked too. If you make a mistake in your English, people will probably recognise it as a typo, but understand what you mean, there's no real damage done. A tiny slip-up in HTML or CSS, on the other hand, is a different story. Something as seemingly insignificant as a comma or quotation mark out of place, can make all the difference between a page working or not - it depends on the particular error and the browser that's trying to make sense 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-in as part of the package. You just don't get them with simple, general purpose text editors. If you have 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 how to fix it. If you don't have such a program, you can use the online validators provided by the W3C – W3C HTML Validator – W3C CSS Validator – where you simply upload your files and get 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 your markup – there are several 'flavours' of HTML. So far, all the examples I've shown are written in HTML 4.01 – that's the current version and the most ubiquitous. But, there are sub-versions of HTML 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 they have 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 are those 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 DocType declaration right at the top of the page - above the first <html> tag. It looks like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Colour schemes should be simplified. all you have to do is add a second link in the <head> section just after the one for screen. and unlike the screen style sheet.csszengarden..css" type="text/css" media="all"> Although most of my style sheets are made external eventually. it's very seldom that individual pages are done in isolation. projection or even braille. However. <link rel="stylesheet" href="styles. it's much more likely that there will be a collection of pages with a common look in a Web site. I think I've shown in this series that CSS layouts offer much more scope and versatility. then you can use this link.Steps 12 through 15 by Joe Gillespie — Jan 1. CSS from the Ground Up .com/ to see this principle in action. type sizes should be specified in points (pt). A lot of these features . With that little side issue out of the way. you can produce style sheets for other media. or to use a different font face or size. Various designers have provided their own style sheets for the same basic page content and demonstrate admirably how the same skeleton can be given different 'skins' that completely change the character. It is a plain text file – type="text/css" and the styles are optimised for display on a computer screen – media="screen"..</body> section of the pages. It also means that if you want to change the background colour of every page on your site. a sheet of printer paper is not at all the same size or shape as a screen and nobody is going to want to waste their precious ink-jet ink on large areas of solid colour when all they want is black and white text for reference. In fact. It now knows which standards you are working to and can make judgements accordingly. I copy and paste the styles into a new file and replace them with a link.I won't analyse all the stuff that's going on in there at this point. you can totally change the look of an entire site by making a few alterations to just one file. (and older browsers). suffice it to say that with this mumbo jumbo at the top of your page. the syntax checker or validator will be able to do its work properly. it's a much better idea to have just one style sheet and get all the individual pages to refer to that. Have a look at http://www. Style sheets are not limited to computer screen displays. I can check pages in my HTML editor's syntax checker and be confident that they are squeaky clean. Tables are meant for displaying tabular data. To use an external style sheet. 2004 Step 12 – Styling Tables Although tables have been used for page layout since the dark ages of the Web.. the kind of thing you would usually do in a spreadsheet where you need to line-up rows and columns of figures or words. all the styles I've used have been built-into the <body>. we can go back to 'styling'. <link rel="stylesheet" href="printstyles. etc. Step 11 – External Style Sheets So far. When you think about it. you only have to change the 'master' style sheet. like print. you could change the look of table and their cells using the various table properties .css" type="text/css" media="print"> If you are content to use the same style sheet for screen and print. I usually start off with an internal style sheet at the initial design stages. When I'm happy with the look. Instead of putting the style declarations on each and every page of a site. Having added a DocType. That way. It's all together in one place. In earlier times.css'. all we have to do is provide a link like this:<link rel="stylesheet" href="basicsstyles. Then.background colours. A style sheet for a printer needs to make the page narrow enough for a sheet of paper. or abandoned completely.css" type="text/css" media="screen"> This tells the browser to look for the style specifications in a file called 'basicsstyles. it is easy to look at the source code of the page and see what's going on. background images..

you get a table with white cells with 2 pixel black borders around them. you never could. If you set the table background-color to black and the td background-color to white and give the table a cellspacing="2". 1 1 1 2 2 2 3 3 3 4 4 4 Table 2. but for most purposes. but not all. If you tried to use a table background image in Netscape 4 and earlier.. dashed or whatever. 1 1 1 2 2 2 3 3 3 4 4 4 Table 1. You can use this to advantage. th. and display:table-cell. If you make a small image file of sufficient height to fill the cell and make it very narrow. arial. etc – is the easier way. You can build your own table structure with CSS using display:table. there is a hierarchy of importance. td is a table row division. Row 1 Row 1 Row 1 2 2 2 3 3 3 4 4 4 . making the whole exercise frustratingly useless. If the body of your page has a font-family: verdana. Any specification for a td will overrule the style for the tr. Styling tables with CSS can be a bit tricky and not all that predictable. Tables inherit some styles from the divs they are within. like looking through some multiple image lens. tr is a table row. tr.have now been deprecated and are no longer valid – even though they might still work. td. Here. It used to be okay to specify a table height in pixels or as a percentage of the window height but now you can't. default HTML table borders. you also have access to all the CSS border styles too so you are not lumbered with the nasty. it can be made to repeat horizontally with background-repeat: repeat-x – more subtle and stylish than borders. just providing style definitions for HTML table elements – table. Also. it would be repeated in each and every cell. Of course. a raised 3D effect is produced by altering the border colours. dotted. You might think of it as a column but it doesn't behave like a column and you can't set a column background colour or type style. The table header th is given a darker background colour. say 8 pixels. Another trick you might like to try is to give the trs gradating background images. which overrules any general style set for table. you can no longer count on them. Depending on the data you might want to give more emphasis to the horizontal rows or vertical columns like this. In fact. sans-serif style and a color: #009. This tiny image (227 bytes) can be repeated horizontally. a horizontal row of cells. where each cell is a separate div.. Tables make their own height depending on the content. the table will inherit those but not the font-size or text alignment. You can also play with the border colours and patterns to give you only vertical lines or horizontal lines that can be solid. Heading 1 1 1 2 2 Heading 2 3 3 Heading 3 4 4 Heading 4 Table 3. This more subtle table has the table background set to transparent and a light tint of the background colour appled to the tds.

Basically. Form styling support in the various browsers isn't all that good. 3. Why do they need to know my date of birth? Looking complicated is a matter of layout. Then they ask questions that seem irrelevant or intrusive. So where do the form 'designers' go wrong? The first big turn off is when a form 'looks' complicated. but if you view the page source. Let's examine these statements a bit more closely. I detest form filling and I'm know that others feel the same way. If you want to style individual cells differently from the overall table. Okay. There are lots of possibilities that will occur to you when you start styling tables. Yet there are still a lot of badly designed forms out there. The size and position of any captions or explanatory text also needs to be considered. The conventions used for forms by default work pretty well as they are. I've used a slightly darker gradient for the row headers and introduced a pale grey left border to separate the columns. I haven't put all the style declarations on the page. It is best to put these above or below the input boxes.. both in print and on the web. use align: right. <td style="background-color: #f00">cell 1</td> 1 1 1 2 2 2 2 3 3 3 3 4 4 4 Table 5.' Maybe. readers could be confused. Who said that tables have to be boring? Step 13 – Styling Forms Styling Web page forms is not a great priority for many designers. 'The conventions used for forms by default work pretty well as they are. there are too many of them. Letting text sizes go uncontrolled and breaking the layout is probably the first thing to watch for.. it is effectively hard-coded into the page but it's okay for one-offs. If a form doesn't look as expected. If you do want to put captions on the left. You can make a form look simple by presenting it in a clean and orderly way. } That way. you can do that using inline style definitions attached to the appropriate <td> tags. This intimidates the user and immediately puts them into 'defensive mode’. But forms are a useful way of collecting information and do so in a way that makes compilation of that information relatively easy. The forms are usually left 'as is' – and for several good reasons. } #col2 td { . 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. or to the right. to avoid huge gaps that visually disconnect the caption from the box and . A better way to style rows or columns is to put them inside their own divs and refer to them as.. #col1 td { . 2.Row 1 2 3 4 Table 4. so I'm a Mondrian fan but I'm just making the point that you can style individual cells if you really want to! Using this approach does have the disadvantage that you can't do it from an external style sheet.. 1... you will see what's going on.

thankfully. Unlike a printed form. you can't 'blow your mind' with form design.increase the visual complexity of the layout. It is better to break long forms across a multiplicity of pages . A text input box does have to communicate its function. Keep them tidy and uncluttered. It has two vertical axes and eye movement is disrupted by having to jump vertically and horizontally to find the next box. If a zip code box is shorter than the other address boxes. you don't need to save space. 'If a form doesn't look as expected. This form looks complicated. . as does a pop-up or submit button. Line them up vertically. try not to have too many different sizes of input boxes and don't fill spaces just for the sake of it. readers could be confused. it has to be differentiated and still communicate its purpose. that's okay but don't put other different size boxes on the same horizontal line just to save space. a Web form masks what is not immediately visible in the browser window so it doesn't overwhelm the viewer. Rationalise input box sizes. A simpler design has just one vertical axis.as long as you make provisions for people to go back if they need to change something. a very long form on one page that requires lots of scrolling can be even worse.' Yes. Yet. 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. That is not to say that it absolutely has to be a black text on a white. Also. right down the middle so eye movement is unimpeded. On a Web page.

Which one though? Each browser has its own built-in default style sheet. It's amazing that they are so similar but the differences are not insignificant. the built-in style sheets are all different. you will quickly find out that 'similar' does not mean 'the same' and can mean 'quite different' in some circumstances . The crucial point is that we are not trying to 'pretty-up' the forms. padding: 3px. check boxes and the 'Submit' and 'Clear' buttons. Mozilla.' This is best demonstrated with some screenshots.even with the same valid CSS style sheet. They come from different companies and work differently on the various computer platforms.. Step 14 – Browsers Great. Usually. The background-color is a little more contentious. border: double 3px orange } If you want to make a textarea look like a text input box. That's what you get when you don't provide your own. font-size: 10px.. To get round this. it's a case of .The elements that you can style are input. you have to 'wrap' the text box in a div of its own and style just #typein input like this. padding: 3px. Setting a font-family and size is about all that is worth doing. font-size: 10px. Where would we be without them? How many times have I heard people say that they wish there was just one. Making it a paler tint of the page colour is acceptable and can make the form look less aggressive. border: double 3px orange } Select (popups) change in look from one browser and platform to another. 'Form styling support in the various browsers isn't all that good. #typein textarea { color: #633. background-color: #ebebd9. I will point out a few of the ones that bother me most. More about browser rendering differences coming up. Changing the border of a text input box also changes the border on the submit button so it could look like just another text box if you are not careful. background-color: #ebebd9. It’s reasonably safe to style the font-family and font-size.. Safari (Mac) and Opera show the variance you can get.. The same styles rendered in Explorer (Win). How they look when actually clicked is usually beyond your control anyway. #typein { } #typein input { color: #633. then you can do this. textarea and select but you have to be aware that styling the input element affects not only the input text field but also the other input devices like radio boxes. The text-color can be different if you like. We are trying to make them easier to use and less intimidating with thoughtful visual presentation. Naturally. I can't go into an exhaustive cross-browser comparison here and there are plenty of them published elsewhere. #typein input. If you just assume that other browsers are going to give 'similar' renditions of your carefully crafted Web page. Improving the user-experience even further with helpful form validation scripts is another story completely and I won't go into those just now.

IE (Mac version) closes up that vacated space thereby shifting everything under it up or down. what IE (Mac) does and can break a layout if you don't expect it. it accounts for something like 85% of all browsers used. it is a law onto itself and doesn't conform to the same standards as other browsers. What is 'Relative' 'Relative' placement of CSS boxes seems a fairly simple concept. seems reasonable to me. Browsers are supposed to totally ignore the formatting of the HTML markup. the box will have a different width in IE and other browsers – and can break a tight layout. Most of them are free or can be test-driven at no cost. On the right. A list of links to current browsers is always available on the WPDFD News page. In its various guises. Unfortunately. Watch out! If you move a box out of its 'natural flow' by giving it a top or bottom value. It shouldn't matter if you type the whole thing in one long horizontal line or put double spacing between each line. On the left is what is supposed to happen when you move a relative CSS box. the implementation of padding is different from all other browsers. The CSS Box Model In all versions of IE. the vacated space effectively becomes an invisible box. Each box takes a place relative to the one immediately above it. thereby reducing the text width – which I must admit. 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. Which is the more logical can be argued ad nauseum but we are still left with this fundamental difference that can catch you out if you don't check your pages. It conforms to most of them but it is where this conformity diverges that the problems occur. The effect of this is that if you specify a CSS box width in pixels and it has left or right padding. W3C standards call for padding to be added outside the box width keeping the text width consistent.Explorer Vs. here's the one that really 'bugs' me because it IS most definitely a bug and not a misinterpretation of standards. A bug in IE (Mac) means that if you float boxes left in a . Microsoft Internet Explorer is the most ubiquitous browser there is. IE assumes that padding is inside the box. Markup formatting shouldn't affect styling Now. The Rest – but not always.

Expect more! Companies are falling over themselves trying to identify ways to build 'communication hub' functionality into their products – telephones. cars. televisions. We are already seeing Web pages on devices that are not computers and Web-delivered content that is not viewed in browsers. You have to put the markup on one line to get the results you expect. You will get to know about the basic CSS model and which codes are necessary to use CSS in an HTML document. the many differences in implementation that we have at present will be reduced if not eliminated but then there are other factors at play. you have to keep up. if you are used to use HTML for layout.horizontal line and have the corresponding markup on separate lines. Ultimately. The concept of viewing Web pages on a computer screen is going to change. it gets totally confused. it won't matter too much what device is being used to display the content. old Macs die hard. The upshot of all this is that you can't rest on your laurels. Now. Thus. Hopefully. believe me. refrigerators. I hope it has whetted your appetite for more – and there’s a lot more. The basic CSS syntax Let's say we want a nice red color as the background of a webpage: Using HTML we could have done it like this: <body bgcolor="#FF0000"> With CSS the same result can be achieved like this: . or give up. microwave ovens are all prime targets. but development of IE (Mac) is effectively dead in the water and there are now so many better browsers to choose from – but like habits. It can already accommodate a diversity of media types even though we mostly use only two – 'screen' and 'print'. It is an ongoing and ever-changing process overseen by the folk at the W3C (World Wide Web Consortium). Lesson 2: How does CSS work? In this lesson you will learn how to make your first style sheet. Many of the properties used in Cascading Style Sheets (CSS) are similar to those of HTML. Step 15 – The future Cascading Style Sheet specifications and abilities are continually being updated and browsers being updated to reflect the new possibilities. you will most likely recognize many of the codes. Let us look at a concrete example. As I wind up this short Cascading Style Sheets from the Ground Up series. it would be no big deal to fix this bug. the Web-enabled brain implant will hook us all together and bring the human race up to the same level of communicative sophistication as ants! With CSS.

For example like this: <html> <head> <title>Example</title> <style type="text/css"> body {background-color: #FF0000. An external style sheet is simply a text file with the extension . it can be applied like this: <html> <head> <title>Example</title> </head> <body style="background-color: #FF0000. Like any other file.} As you will note. The above example also shows you the fundamental CSS model: But where do you put the CSS code? This is exactly what we will go over now. We recommend that you focus on the third method i. Building on the above example with the red background color. you can place the style sheet on your web server or hard disk. . external. Throughout this tutorial we will use this method in all our examples. Applying CSS to an HTML document There are three ways you can apply CSS to an HTML document.e. These methods are all outlined below."> <p>This is a red page</p> </body> </html> Method 2: Internal (the tag style) Another way is to include the CSS codes using the HTML tag <style>. the codes are more or less identical for HTML and CSS.body {background-color: #FF0000.} </style> </head> <body> <p>This is a red page</p> </body> </html> Method 3: External (link to a style sheet) The recommended method is to link to a so-called external style sheet. Method 1: In-line (the attribute style) One way to apply CSS to HTML is by using the HTML attribute style.css.

. This technique can save you a lot of work. The line of code must be inserted in the header section of the HTML code i. Try it yourself .css and is located in a folder named style.css" /> </head> <body> . In other words. The situation can be illustrated like this: The trick is to create a link from the HTML document (default. This link tells the browser that it should use the layout from the CSS file when displaying the HTML file.css" /> Notice how the path to our style sheet is indicated using the attribute href. Like this: <html> <head> <title>My document</title> <link rel="stylesheet" type="text/css" href="style/style. a style sheet can save you from having to manually change all 100 HTML documents. one CSS file can be used to control the layout of many HTML documents. Let's put what we just learned into practice. let's say that your style sheet is named style.. The really smart thing is that several HTML documents can be linked to the same style sheet. Such link can be created with one line of HTML code: <link rel="stylesheet" type="text/css" href="style/style. the change can be made in a few seconds just by changing one code in the central style sheet.For example. Using CSS. would like to change the background color of a website with 100 pages. for example. If you. between the <head> and </head> tags.css).htm) to the style sheet (style.e.

htm">Riesling</a></li> <li><a href="ch.htm">Pinot Noir</a></li> </ul> . Lesson 7: Identification and grouping of elements (class and id) Sometimes you want to apply a special style to a particular element or a particular group of elements.css" /> </head> <body> <h1>My first stylesheet</h1> </body> </html> style.css") Open default.htm">Chardonnay</a></li> <li><a href="pb.Open Notepad (or whatever text editor you use) and create two files .htm">Merlot</a></li> <li><a href="pn.htm with your browser and see how the page has a red background.an HTML file and a CSS file . In this lesson. 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.htm <html> <head> <title>My document</title> <link rel="stylesheet" type="text/css" href="style.htm">Cabernet Sauvignon</a></li> <li><a href="me.with the following contents: default. Remember to save the files with the right extensions (respectively ". Congratulations! You have made your first style sheet! Hurry on to the next lesson where we will take a look at some of the properties in CSS. The HTML code could look like this: <p>Grapes for white wine:</p> <ul> <li><a href="ri.htm">Pinot Blanc</a></li> </ul> <p>Grapes for red wine:</p> <ul> <li><a href="cs. } Now place the two files in the same folder.htm" and ". Grouping elements with class Let's say that we have two lists of links of different grapes used for white wine and red wine.css body { background-color: #FF0000. we will take a closer look at how you can use class and id to specify properties for selected elements.

respectively.Then we want the white wine links to be yellow. a.. let us take a look at an example of a possible usage of id: <h1>Chapter .htm" class="redwine">Pinot Noir</a></li> </ul> We can hereafter define special properties for links belonging to whitewine and redwine.2</h3> .. a { } color: blue.. Let us try to specify some classes in the example above: <p>Grapes for white wine:</p> <ul> <li><a href="ri. } a. To achieve this..redwine { color: #800000. In other cases. What is special about the attribute id is that there cannot be two elements in the same document with the same id.1</h2> 2.1. Identification of element using id In addition to grouping elements. you should use the class attribute instead. <h2>Chapter .htm" class="redwine">Cabernet Sauvignon</a></li> <li><a href="me. <h1>Chapter . <h3>Chapter 1</h1> 1.. we divide the links into two categories. This is done by assigning a class to each link using the attribute class. the red wine links to be red and the rest of the existing links on the webpage to stay blue. you might need to identify one unique element. } As shown in the example you can define the properties for elements which belong to a certain class by using .htm" class="whitewine">Chardonnay</a></li> <li><a href="pb. Now.1</h2> 1. Each id has to be unique..htm" class="redwine">Merlot</a></li> <li><a href="pn. <h2>Chapter .2</h2> 2</h1> 2.htm" class="whitewine">Riesling</a></li> <li><a href="ch.classname in the style sheet of the document..htm" class="whitewine">Pinot Blanc</a></li> </ul> <p>Grapes for red wine:</p> <ul> <li><a href="cs... This is done by using the attribute id.whitewine { color: #FFBB00. <h2>Chapter ..

1.. we will take a closer look at two HTML-elements which is widely used in connection with CSS: <span> and <div>. you are able to specify properties for specific elements. <h2 .. This can be done accordingly with CSS: #c1-2 { } color: red. <h3 . id="c1">Chapter 1</h1> id="c1-1">Chapter 1. The diagram below shows how the box model is constructed: The box model in CSS . class and id....2 must be in red.. The above could be headings of any document split into chapters or paragraphs. It would be natural to assign an id to each chapter as follows: <h1 . border. In the next lesson..... padding and content for each element.... <h1 ..1</h2> id="c1-2">Chapter 1.1</h2> id="c2-1-2">Chapter 2. Lesson 9: The box model The box model in CSS describes the boxes which are being generated for HTML-elements. <h2 .2</h3> Let us say that the headline for chapter 1.2</h2> id="c2">Chapter 2</h1> id="c2-1">Chapter 2. The box model also contains detailed options regarding adjusting margin.. Summary In this lesson we have learned that through the use of the selectors. <h2 .

The HTML for our example is (from the Universal Declaration of Human Rights): <h1>Article 1:</h1> <p>All human beings are born free and equal in dignity and rights.The illustration above might seem pretty theoretical to look at. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood</p> By adding some color and font-information the example could be presented as follows: The example contains two elements: <h1> and <p>. so let's try to use the model in an actual case with a headline and some text. The box model for the two elements can be illustrated as follows: .

we will look at how you define margins for the document itself i. . As the first example. In the following three lesson we will take a closer look at how to create and control elements in the box model. we will look at how you can change the presentation of elements by setting the margin and padding properties. The next two lessons deal with exactly these three properties: ' ' • • Lesson 10: The box model .border ' ' When you have finished these two lessons. The margin is the distance from each side to the neighboring element (or the borders of the document). margin and border. In this lesson. the illustration shows how each HTML-element is surrounded by boxes. Boxes which we can adjust using CSS.e. • • Set the margin in an element Set the padding in an element Set the margin in an element An element has four sides: right. The illustration below shows how we want the margins in our pages to be. Lesson 10: Margin and padding In the previous lesson you were introduced to the box model.Even though it may look a bit complicated. you will master the box model and be able to layout your documents much finer and more precise than in the old fashion using tables in HTML. <% ' The properties which regulate the different boxes are: padding. See also the diagram in lesson 9 for an illustration. top and bottom. for the element <body>. left.margin & padding ' Lesson 11: The box model . %> Summary In this lesson you have been introduced to the box model.

Set padding in an element Padding can also be understood as "filling". margin-bottom: 10px. } Or you could choose a more elegant compilation: body { } margin: 100px 40px 10px 70px. margin: 100px 40px 10px 70px. This makes sense as padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element. .The CSS code for this would look as follow: body { margin-top: 100px. margin-right: 40px. You can set the margins in the same way on almost every element. margin-left: 70px. we can choose to define margins for all of our text paragraphs marked with <p>: body { } p { } margin: 5px 50px 5px 50px. For example.

In the next lesson. • • • • border-width border-color border-style border The width of borders [border-width] The width of borders is defined by the property border-width. you change how much filling there will be around the text in each headline: h1 { background: yellow. padding: 20px 20px 20px 80px. Lesson 11: Borders Borders can be used for many things. indicated in pixels. which can obtain the values thin. CSS gives you endless options when using borders in your pages. } h2 { } background: orange. By defining padding for the headlines. background: yellow. and thick. for example as a decorative element or to underline a separation of two things. we will take a closer look at how to set borders in different colors and how to shape your elements. medium.The usage of padding can be illustrated by looking at a simple example where all headlines have background colors: h1 { } h2 { } background: orange. or a numeric value. Summary You are now on your way to master the box model in CSS. padding-left:120px. The figure below illustrates the system: .

The result may not be that pretty but it illustrates some of the many possibilities: h1 { border-width: thick. Examples of defining borders The three properties described above can be put together by each element and thereby produce different borders.123. <ul> and <p>. Below are shown 8 different types of borders as Internet Explorer 5. border-style: dotted. } h2 { border-width: 20px. The values are the normal colorvalues for example "#123456". "rgb(123. border-color: gold.5 interprets them. border-style: outset. To illustrate this. The values none or hidden can be used if you do not want any border. <h2>.The color of borders [border-color] The property border-color defines which color the border has. Types of borders [border-style] There are different types of borders to choose from. All examples are shown with the color "gold" and the thickness "thick" but can naturally be shown in other colors and thicknesses.123)" or "yellow" . we will take a look at a document where we define different borders for <h1>. border-color: red. } .

border-left-color: orange. } Can be compiled into: p { } border: 1px solid blue. } ul { border-width: thin. } • Show example It is also possible to state special properties for top-. border-color: orange. border-left-style: solid. } • Show example Compilation [border] As it is also the case for many other properties. The following example shows you how: h1 { border-top-width: thick. border-top-color: red. border-style: solid. you can compile many properties into one using border. Summary . border-color: blue. border-right-style: solid.or left borders. border-color: blue.p { border-width: 1px. right. border-right-width: thick. border-left-width: thick. border-style: dashed. border-top-style: solid. border-bottom-color: blue. bottom-. Let us take a look at an example: p { border-width: 1px. border-bottom-style: solid. border-right-color: green. border-bottom-width: thick. border-style: solid.

Lesson 12: Height and width Up until now. In this lesson. 11 and 12 have given you an introduction to the box model in CSS. width: 200px. we will look at how you define the dimensions in the box model . Lesson 13: Floating elements (floats) . background: orange. In the next lesson. As you can probably see.In this lesson you have learned about the endless options CSS gives you when using borders in your pages. but with CSS and the box model you should now be able to achieve elegant layouts more precisely and in accordance with the recommendations of W3C. } Setting the height [height] In the example above notice how the height of the box is set by the content of the box. border: 1px solid black.box { width: 200px. } Summary Lesson 9. we have not cared much about the dimensions of the elements we have worked with. As an example let us try to make the box in the example 500px high: div. • • width height Setting the width [width] With the width-property. the box model gives you many new options. The simple example below provides us with a box wherein text can be typed: div. 10.box { height: 500px.height and width. border: 1px solid black. background: orange. You might have been using tables in HTML to create your layouts until now. you can define a certain width of an element. You can affect the height of an element with the property height. we will take a look at how you easily can define the height and width of an element.

.An element can be floated to the right or to left by using the property float..jpg" alt="Bill Gates"> </div> <p>causas naturales et antecedentes.. That is to say that the box with its contents either floats to the right or to the left in a document (or the containing box) (see lesson 9 for a description of the Box model). The following figure illustrates the principle: If we for example would like to have a text wrapping around a picture. the result would be like this: How is it done? The HTML code for the example above.</p> To get the picture floating to the left and the text to surround it. width: 100px. you only have to define the width of the box which surrounds the picture and thereafter set the property float to left: #picture { float:left. look as follows: <div id="picture"> <img src="bill. idciro etiam nostrarum voluntatum.

By default. is set to both for a box.. The property clear The clear property is used to control how the subsequent elements of floated elements in a document shall behave. width: 33%... idciro etiam nostrarum voluntatum. both or none. width: 33%. The property clear can assume the values left. The principle is. . } #column3 { float:left.</p> </div> <div id="column3"> <p>nam nihil esset in nostra potestate si res ita se haberet.</p> </div> <div id="column2"> <p>causas naturales et antecedentes. for example. and then you simply float each column to the left by defining the property float: #column1 { float:left.</p> </div> Now the desired width of the columns is set to e. } #column2 { float:left.. To create the columns.g. you simply have to structure the desired columns in the HTML-code with <div> as follows: <div id="column1"> <p>Haec disserens qua de re agatur et in quo causa consistat non videt. the subsequent elements are moved up to fill the available space which will be freed when a box is floated to a side. width: 33%. } • float Show example can be set as either left.. 33%. if clear. Look at the example above wherein the text is automatically moved up beside the picture of Bill Gates. right. right or none..} • Show example Another example: columns Floats can also be used for columns in a document. the top margin border of this box will always be under the lower margin border for possible floating boxes coming from above.

} . Together with floats (see lesson 13).floatstop { clear:both. you can place an element exactly where you want it on your page.jpg" alt="Bill Gates"> </div> <h1>Bill Gates</h1> <p class="floatstop">causas naturales et antecedentes. In the next lesson we will take a closer look at how to position a box.. Lesson 14: Positioning of elements With CSS positioning. width: 100px. we can add the following to our CSS: #picture { float:left. either relative or absolute. } • Show example Summary Floats are useful in many situations and will often be used together with positioning.<div id="picture"> <img src="bill.</p> To avoid the text from floating up next to the picture. The following will be discussed in this lesson: • • • The principle behind CSS positioning Absolute positioning Relative positioning The principle behind CSS positioning Imagine a browser window as a system of coordinates: .. idciro etiam nostrarum voluntatum. positioning gives you many possibilities to create an advanced and precise layout.

we could type the following in our CSS: h1 { position:absolute. By using the box model (see lesson 9) the headline will appear as follows: If we want this headline positioned 100px from the top of the document and 200px from the left of the document. left: 200px. } The result will be as follows: . Let's say we want to position a headline.The principle behind CSS positioning is that you can position any box anywhere in the system of coordinates. top: 100px.

Absolute positioning An element which is positioned absolute does not obtain any space in the document. top: 50px. right. top: 50px. we choose to place 4 boxes in each corner of the document: #box1 { position:absolute. This means that it does not leave an empty space after being positioned. positioning with CSS is a very precise technique to place elements. bottom: 50px. bottom: 50px. To position an element absolutely. the position property is set as absolute. top. You can subsequently use the properties left. right: 50px. right: 50px. and bottom to place the box. transparent images or anything else. It is much easier than trying to use tables. } . left: 50px. } #box2 { position:absolute. left: 50px. } #box4 { position:absolute. } #box3 { position:absolute. As an example of absolute positioning.As you can see.

} #dog2 { } #dog3 { } position:relative. Our hand can be presented in a way where each card has got a z-index: . That means that you move the element to the right. gives you more advantages. In this lesson. up or down. the element still obtains a space in the document after it is positioned. bottom: 700px. bottom: 500px. For that purpose. you learned how to float and position elements. These two methods give you many opportunities to construct your pages without having to use some of the oldfashioned methods with tables and transparent images in HTML. we will learn how to let different elements become layers. The position for an element which is relatively positioned is calculated from the original position in the document. The system is that an element with a higher number overlaps an element with a lower number. In short.height. to the left. Use CSS instead. left: 150px. left: 350px. width and depth. As an example of relative positioning. Lesson 15: Layer on layer with z-index (Layers) CSS operates in three dimensions . we can try to position three pictures relatively to their original position on the page. you can assign each element a number (z-index). We have seen the first two dimensions in previous lessons. left: 50px. • Show example Summary In the previous two lessons. Notice how the pictures leave empty spaces at their original positions in the document: #dog1 { position:relative. this means the order of which the elements overlap one another. Let us say we are playing poker and have a royal flush. It is more precise. the property position is set as relative. position:relative.• Show example Relative positioning To position an element relatively. and it is also far easier to maintain. bottom: 150px. The difference between absolute and relative positioning is how the position is being calculated. This way.

} #queen_of_diamonds { position: absolute. The important thing is the chronological sequence of the numbers (the order). left: 160px. top: 160px. left: 130px. top: 130px. z-index: 5. The code in the card example could look like this: #ten_of_diamonds { position: absolute. z-index: 1. top: 145px. } • Show example The method is relatively simple but the possibilities are several. left: 145px. } #king_of_diamonds { position: absolute. the numbers follow on another (1-5) but the same result can be obtained by using 5 different numbers. Summary . left: 115px.In this case. z-index: 2. } #jack_of_diamonds { position: absolute. You can place images on text or text above text etc. z-index: 3. z-index: 4. left: 100px. top: 100px. top: 115px. } #ace_of_diamonds { position: absolute.

which you can put on your website to illustrate that you are using validated coding: The validator can also be found at this link: http://jigsaw. a webdeveloper has a certainty that what he or she does will work in a more appropriate manner across different platforms. We will also look at advanced methods to position and control background images. To make it easier for you to validate your stylesheet. It can be very frustrating and time-consuming to create a webpage which can be viewed in Mozilla. The idea of having standards is to agree upon a common denominator on how to use web technologies. Lesson 16: Web-standards and validation W3C is the World Wide Web Consortium. you probably know that there can be a big differences in how a webpage is presented across different browsers. Internet Explorer.ht Bottom of Form If the validator does not find any errors. Top of Form http://w w w . if your CSS does not validate. The Mozilla Foundation and many others are a part of W3C and agree upon the future developments of the standards. this picture will be shown. CSS. which is an independent organization that manages code standards on the web (e. it provides a potentially better ranking in search engines. Opera and all the rest of the existing browsers. try to use z-index to create effects in headlines instead of creating these as graphics. The following CSS properties will be explained: • • color background-color . If you have been working just a bit with web design.Layers can be used in many situations. it is faster to load text and for another. You will then be informed by the W3C site if there are any errors found. HTML.org/css-validator/ Lesson 3: Colors and backgrounds In this lesson you will learn how to apply colors and background colors to your websites. W3C has made a so-called validator which reads your stylesheet and returns a status listing errors and warnings.g.w3. XML and others). you can do it directly from this webpage. Simply replace the URL with the URL of your stylesheet below and click to validate. Microsoft. For example. We therefore recommend that you back up the work carried out by the W3C and validate your CSS in order to observe the standard. CSS validator To make it easier to observe the CSS standard. This means that by observing the standards. For one thing.

the background-color property should be applied to the <body> element. Thus. The 'background-color' property The background-color property describes the background color of elements. or you can use another image as you see fit. For example. The headlines are all marked with the HTML element <h1>. to change the background color of an entire page.0. different background colors are applied to <body> and <h1> elements.• • • • • background-image background-repeat background-attachment background-position background Foreground color: the 'color' property The color property describes the foreground color of an element. • Show example Colors can be entered as hexadecimal values as in the example above (#ff0000). h1 { } color: #ff0000. imagine that we want all headlines in a document to be dark red. As an example of a background image. Background images [background-image] The CSS property background-image is used to insert a background image. we use the butterfly below. . body { } h1 { color: #990000. The element <body> contains all the content of an HTML document. background-color: #FC9804. or you can use the names of the colors ("red") or rgb-values (rgb(255. The code below sets the color of <h1> elements to red. } background-color: #FFCC66. You can download the image so you can use it on your own computer (right click the image and choose "save image as"). You can also apply background colors to other elements including headlines and text. In the example below. • Show example Notice that we applied two properties to <h1> by dividing them by a semicolon.0)).

. body { background-color: #FFCC66. Repeat background image [background-repeat] In the example above. to avoid repetition of a background image the code should look like this: body { background-color: #FFCC66.gif"). simply apply the background-image property to <body> and specify the location of the image. You can also refer to images in other folders using url(".net/butterfly.html. . This means that the image is located in the same folder as the style sheet./images/butterfly. background-image: url("butterfly.gif") or even on the Internet indicating the full address of the file: url("http://www.To insert the image of the butterfly as a background image for a web page. did you notice that by default the butterfly was repeated both horizontally and vertically to cover the entire screen? The property background-repeat controls this behaviour. Value background-repeat: repeatx background-repeat: repeaty background-repeat: repeat background-repeat: norepeat Description The image is repeated horizontally The image is repeated vertically The image is repeated both horizontally and vertically The image is not repeated Example Show example Show example Show example Show example For example. • Show example NB: Notice how we specified the location of the image as url("butterfly.gif"). The table below outlines the four different values for background-repeat. background-color: #FC9804.gif"). } h1 { } color: #990000.

whereas an unlocked background image will scroll along with the text of the web page. Description Example The image scrolls with the page . body { background-color: #FFCC66.gif"). A fixed background image will not move with the text when a reader is scrolling the page.unlocked Show example Background-attachment: fixed The image is locked Show example Background-attachment: scroll Value For example. the value '100px 200px' positions the background image 100px from the left side and 200px from the top of the browser window. The property background-position allows you to change this default and position the background image anywhere you like on the screen. The table below outlines the two different values for background-attachment.) or you can use the words top. background-repeat: no-repeat. For example. There are numerous ways to set the values of background-position. } h1 { } color: #990000. the code below will fix the background image. • Show example Lock background image [background-attachment] The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element. Click on the examples to see the difference between scroll and fixed. The model below illustrates the system: . center.background-image: url("butterfly. fixed units (pixels. a background image will be positioned in the top left corner of the screen. The coordinates can be indicated as percentages of the browser window. etc. centimeters. background-repeat: no-repeat. left and right. } h1 { color: #990000. background-color: #FC9804.gif"). However. } • Show example Place background image [background-position] By default. all of them are formatted as a set of coordinates. background-attachment: fixed. background-image: url("butterfly. bottom. background-color: #FC9804.

background-repeat: no-repeat. background-position: right bottom. background-image: url("butterfly. look at these five lines: . For example. } h1 { color: #990000. background-color: #FC9804. } • Show example Compiling [background] The property background is a short hand for all the background properties listed in this lesson. Description background-position: 2cm The image is positioned 2 cm from the left and 2 2cm cm down the page background-position: 50% The image is centrally positioned and one fourth 25% down the page background-position: top The image is positioned in the top-right corner of right the page Value Example Show example Show example Show example The code example below positions the background image in the bottom right corner: body { background-color: #FFCC66.gif"). background-attachment: fixed.The table below gives some examples. With background you can compress several properties and thereby write your style sheet in a shorter way which makes it easier to read.

background-repeat: no-repeat. background-attachment: fixed. Lesson 5: Text Formatting and adding style to text is a key issue for any web designer.gif") no-repeat fixed right bottom. The list of order is as follows: [background-color] | [background-image] | [background-repeat] | [backgroundattachment] | [background-position] If a property is left out. background-position: right bottom. it will automatically be set to its default value. In this lesson you will be introduced to the amazing opportunities CSS gives you to add layout to text. The fun continues in the next lesson which examines the broad range of possibilities when using CSS to describe fonts. Using background the same result can be achieved in just one line of code: background: #FFCC66 url("butterfly.gif") no-repeat.background-color: #FFCC66. background-image: url("butterfly. you have already learned new techniques that would not be possible using HTML. if background-attachment and background-position are taken out of the example: background: #FFCC66 url("butterfly. The following properties will be described: • • • • • text-indent text-align text-decoration letter-spacing text-transform Text indention [text-indent] The property text-indent allows you to add an elegant touch to text paragraphs by applying an indent to the first line of the paragraph.gif"). In the example below a 30px is applied to all text paragraphs marked with <p>: p { . Summary In this lesson. For example. These two properties that are not specified would merely be set to their default values which as you know are scroll and top left.

<h2> are headlines with a line above the text and <h3> are headlines with a line though the text. normal text paragraphs are justified: th { } td { } p { } text-align: justify. h1 { } h2 { } h3 { } text-decoration: line-through. In addition. The value of the property is simply the desired width. text-decoration: overline. text-align: center. have a line through or above the text. Text can either be aligned to the left. you can underline the text. . • Show example Text decoration [text-decoration] The property text-decoration makes it is possible to add different "decorations" or "effects" to text. to the right or centred. For example. • Show example Letter space [letter-spacing] The spacing between text characters can be specified using the property letter-spacing.} text-indent: 30px. etc. • Show example Text alignment [text-align] The CSS property text-align corresponds to the attribute align used in old versions of HTML. text-decoration: underline. text-align: right. if you want a spacing of 3px between the letters in a text paragraph <p> and 6px between letters in headlines <h1> the code below could be used. <h1> are underlined headlines. For example. In addition to this. You know this layout from for example newspapers and magazines. the value justify will stretch each line so that both the right and left margins are straight. In the following example. In the example below the text in table headings <th> is aligned to the right while the table data <td> are centred.

we will use a list of names. fonts. For example: "john doe" will be "John Doe". What is a pseudo-class? A pseudo-class allows you to take into account different conditions or events when defining a property for an HTML tag.the text is presented as it appears in the HTML code. or whether the cursor is on the link.e. letter-spacing: 3px. etc). As an example. links are specified in HTML with <a> tags. You can choose to capitalize. For example: "john doe" will be "JOHN DOE". lowercase Converts all letters to lowercase. Let's say that we want names to be capitalized and headlines to be presented in uppercase letters. text-transform: uppercase. For example: "JOHN DOE" will be "john doe". active. visited. The new thing is that CSS allows you to define these properties differently depending on whether the link is unvisited. change colors. Let's look at an example. Top of Form Bottom of Form Lesson 6: Links You can apply what you already learned in the previous lessons to links (i. We can therefore use a as a selector in CSS: . This makes it possible to add fancy and useful effects to your website. As you know. The names are all marked with <li> (list-item). none No transformations . An example could be the word "headline" which can be presented to the user as "HEADLINE" or "Headline". Try to take a look at the HTML code for this example and you will see that the text actually is in lowercase.h1 { } p { } letter-spacing: 6px. use uppercase or lowercase regardless of how the original text is looks in the HTML code. uppercase Converts all letters to uppercase. • Show example Text transformation [text-transform] The text-transform property controls the capitalization of a text. To control these effects you use so-called pseudo-classes. There are four possible values for text-transform: capitalize Capitalizes the first letter of each word. underline. h1 { } li { } text-transform: capitalize.

our CSS should look like this: . the code below would make all visited links dark purple: a:visited { color: #660099.a { } color: blue. A link can have different states. if we want our links to be orange and be italicized when the cursor is pointed at them. This example gives active links a yellow background color: a:active { background-color: #FFFF00. } a:visited { color: red. Links that are active have the pseudo-class a:active and a:hover is when the cursor is on the link. Pseudo-class: link The pseudo-class :link is used for links leading to pages that the user has not visited. For example. For example. This can be used to create interesting effects. a:link { color: blue. We will now go through each of the four pseudo-classes with examples and further explanation. a:link { color: #6699CC. } Pseudo-class: hover The pseudo-class :hover is used when the mouse pointer hovers over a link. You can use pseudo-classes to assign different styles to visited and unvisited links. unvisited links will be light blue. } Pseudo-class: visited The pseudo-class :visited is used for links leading to pages that the user has visited. } Pseudo-class: active The pseudo-class :active is used for links that are active. In the code example below. it can be visited or not visited. } Use a:link and a:visited for unvisited and visited links respectively. For example.

} • Show example Example 1b: UPPERCASE and lowercase In lesson 5 we looked at the property text-transform. . This can be applied to links for a special effect: a:hover { letter-spacing: 10px. simply set the value of text-decoration to none. To remove underlining. the property text-decoration can be used to determine whether text is underlined or not.and lowercase letters. it is very simple to remove the underlining of links. a { } text-decoration:none.a:hover { color: orange. As you will recall from lesson 5. background-color:yellow. } Example 1: Effect when the cursor is over a link It is particular popular to create different effects when the cursor is over a link. We will therefore look at a few extra examples related to the pseudo-class :hover. font-weight:bold. the spacing between letters can be adjusted using the property letter-spacing. People are used to blue underlined links on web pages and know that they can click on them. } The two examples gives you an idea about the almost endless possibilities for combining different properties. font-weight:bold. color:blue. This can also be used to create an effect for links: a:hover { text-transform: uppercase. font-style: italic. You can create your own effects . which can switch between upper.give it a try! Example 2: Remove underline of links A frequently asked question is how to remove the underlining of links? You should consider carefully whether it is necessary to remove the underlining as it might decrease usability of your website significantly. color:red. Example 1a: Spacing between letters As you will remember from lesson 5. Even my mum knows that! If you change the underlining and color of links there is a good chance that users will get confused and therefore not get the full benefit of the content on your website. That said.

For that purpose.Alternatively. text-decoration:none.</p> Lets us say we want what Mr. • • Grouping with <span> Grouping with <div> Grouping with <span> The element <span> is what you could call a neutral element which does not add anything to the document itself. you can set text-decoration along with other properties for all four pseudoclasses. . we will take a closer look at the use of <span> and <div> as exactly these two HTML elements are of central importance with regards to CSS. } a:hover { color:red. text-decoration:none. } a:visited { color: purple. we can mark the benefits with <span>. wealthy and wise. In this lesson. } a:active { background-color: yellow. text-decoration:none. Franklin sees as the benefits of not sleeping your day away emphasized in red. a:link { color: blue. An example of this could be this Benjamin Franklin quotation: <p>Early to bed and early to rise makes a man healthy. } Lesson 8: Grouping of elements (span and div) The elements <span> and <div> are used to group and structure a document and will often be used together with the attributes class and id. Each span is then added a class. text-decoration:none. which we can define in our style sheet: <p>Early to bed and early to rise makes a man <span class="benefit">healthy</span>. <span> can be used to add visual features to specific parts of text in your documents. But with CSS.

Just as long as you remember. Eisenhower</li> <li>Richard Nixon</li> <li>Gerald Ford</li> <li>Ronald Reagan</li> <li>George Bush</li> <li>George W. We will look into these later in this tutorial. Kennedy</li> <li>Lyndon B. Truman</li> <li>John F. Both elements have the potential to do much more advanced things. Roosevelt</li> <li>Harry S. Grouping with <div> Whereas <span> is used within a block-level element as seen in the previous example. Johnson</li> <li>Jimmy Carter</li> <li>Bill Clinton</li> </ul> </div> <div id="republicans"> <ul> <li>Dwight D. Bush</li> </ul> </div> And in our style sheet. Let us take a look at an example with two lists of U.<span class="benefit">wealthy</span> and <span class="benefit">wise</span>. Aside from this difference. <div> is used to group one or more block-level elements. we have only used <div> and <span> on very simple things such as text and background colors. that you'll have to apply a unique id to each of the three <span>-elements. } #republicans { background:red. } In the examples above.benefit { color:red. } Of course you may also use id to add style to the <span>-elements. presidents divided into their political affiliations: <div id="democrats"> <ul> <li>Franklin D. we can utilize the grouping in the exact same way as above: #democrats { background:blue.S. . as you learned in the previous lesson.</p> The CSS belonging to it: span. However this will not be introduced in this lesson. the grouping with <div> works in more or less the same way.

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. we will take a closer look at how you can use class and id to specify properties for selected elements. you have learned about the selectors id and class and the elements span and div.htm" class="whitewine">Riesling</a></li> <li><a href="ch. This is done by assigning a class to each link using the attribute class. we divide the links into two categories. The HTML code could look like this: <p>Grapes for white wine:</p> <ul> <li><a href="ri. Let us try to specify some classes in the example above: <p>Grapes for white wine:</p> <ul> <li><a href="ri. You should now be able to group and identify. In this lesson.htm">Merlot</a></li> <li><a href="pn. more or less.Summary In lesson 7 and 8.htm">Cabernet Sauvignon</a></li> <li><a href="me.htm">Chardonnay</a></li> <li><a href="pb. which is a big step in the direction of mastering CSS.htm" class="whitewine">Chardonnay</a></li> . In lesson 9 we will introduce you to the box model. Lesson 7: Identification and grouping of elements (class and id) Sometimes you want to apply a special style to a particular element or a particular group of elements.htm">Pinot Noir</a></li> </ul> • Show example Then we want the white wine links to be yellow. the red wine links to be red and the rest of the existing links on the webpage to stay blue.htm">Riesling</a></li> <li><a href="ch.htm">Pinot Blanc</a></li> </ul> <p>Grapes for red wine:</p> <ul> <li><a href="cs. Grouping elements with class Let's say that we have two lists of links of different grapes used for white wine and red wine. To achieve this. all parts of a document.

<h2>Chapter .<li><a href="pb. respectively..1</h2> 2. a { } a. you might need to identify one unique element. Each id has to be unique.classname in the style sheet of the document. <h2>Chapter . <h2 id="c1-1">Chapter 1.. It would be natural to assign an id to each chapter as follows: <h1 id="c1">Chapter 1</h1> ..1.1</h2> ..htm" class="redwine">Cabernet Sauvignon</a></li> <li><a href="me. 1</h1> 1. <h2>Chapter . <h3>Chapter . What is special about the attribute id is that there can not be two elements in the same document with the same id. In other cases. } color: blue.2</h3> The above could be headings of any document split into chapters or paragraphs. Now... you should use the class attribute instead.2</h2> 2</h1> 2.whitewine { color: #FFBB00..redwine { color: #800000. This is done by using the attribute id. <h1>Chapter ..htm" class="whitewine">Pinot Blanc</a></li> </ul> <p>Grapes for red wine:</p> <ul> <li><a href="cs...htm" class="redwine">Merlot</a></li> <li><a href="pn. Identification of element using id In addition to grouping elements.. let us take a look at an example of a possible usage of id: <h1>Chapter .1</h2> 1.htm" class="redwine">Pinot Noir</a></li> </ul> We can hereafter define special properties for links belonging to whitewine and redwine.. } a... • Show example As shown in the example you can define the properties for elements which belong to a certain class by using .

. Summary In this lesson we have learned that through the use of the selectors.1. <h2 .2</h2> id="c2">Chapter 2</h1> id="c2-1">Chapter 2.1</h2> id="c2-1-2">Chapter 2. we will take a closer look at two HTML-elements which is widely used in connection with CSS: <span> and <div>. . In the next lesson.. <h2 .. • Show example As shown in the example above you can define the properties in a specific element by using #id in the stylesheet of the document.2 must be in red. you are able to specify properties for specific elements. class and id. id="c1-2">Chapter 1..2</h3> Let us say that the headline for chapter 1.. <h1 ..... This can be done accordingly with CSS: #c1-2 { } color: red... <h3 .

Sign up to vote on this title
UsefulNot useful