Mantex

Tutorials, Study Guides & More

>> Home / Archives for HTML-XML-CSS

Cascading Style Sheets

by

explanation – by the guys who invented them

What are cascading style sheets (CSS)? Answer – “a simple mechanism for adding style (fonts, colors, spacing) to Web documents”. If you have spent any time at all wrestling with HTML code, trying to control the layout and appearance of text on a page, you will know one thing. It’s an almost hopeless task. What looks good in Netscape might be a dog’s breakfast in Internet Explorer, and it will probably look even worse in Opera. The same would be true of more recent browsers such as FireFox and Google Chrome.

Cascading Style SheetsAs Lie and Bos explain: “HTML doesn’t pay much attention to the document’s appearance” – so CSS offers “a simple language that can be read by humans”. It’s basically another system of coding which can be added to .htm pages which allows the author more control over the physical appearance of what’s on the page. It also begins the process of separating appearance from content. They start with an introduction to basic HTML (which they claim can be learned in less than a day!) before describing CSS in all its detail. This is where any normal user will encounter the first difficulty – because the code is defined in a relentlessly arbitrary jargon – of ‘selectors’, ‘declarations’, ‘properties’, and ‘values’.

Then they go on to describe the variety of ways in with a style sheet can be ‘glued’ to a document. This fortunately offers the user more than one way to achieve a particular effect. But there’s no escape from the abstract style:

Recall from Chapter 1 that an attribute is a characteristic quality, other than the type or content of an element. In that chapter we discussed the attributes HREF, SRC, and ALT. In this chapter we will discuss two new attributes that have been added to all HTML elements to support style sheets

But what it lacks in accessibility, it makes up for in thoroughness, and fortunately, the book is very well illustrated. They cover all the features of this mini-technology which Web designers are likely to require – fonts, spacing, layers, colours, and the tricky issue of forward compatibility. They describe the issues of cascading and inheritance which advanced users might wish to exploit. I would have liked to see the page code for some of the wonderful examples they reproduce in full colour, but at least they show what CSS can do.

Style sheets may well become more popular as the early generations of browsers which didn’t support them fade into the ancient history of the Web [that is, anything more than five years old]. If you’re interested in exploring the possibilities of CSS, then you might as well get the story from the guys who invented the idea – and make sure you buy the latest (third) edition, which contains a useful comparison of browser-support. As the HTML standard is developed to keep pace with browsers in their latest versions, this is a book with a bright future.

© Roy Johnson 2005

Buy the book at Amazon UK

Buy the book at Amazon US

Hakon Lie and Bert Bos, Cascading Style Sheets: Designing for the Web, New York/London: Addison-Wesley, (third edition) 2005, pp.416, ISBN 0321193121

More on technology
More on digital media
More on online learning
More on computers

Cascading Style Sheets

by

complete explanation of style sheets for web designers

This is the second edition of Eric Meyer’s best-selling guide to cascading style sheets. It covers CSS1 in impressive depth, and cautions readers quite frankly about some the problems of the still immature CSS2. Style sheets are the solution to the one big limitation of HTML. They allow authors to control the appearance of what’s on the page, leaving the HTML code to describe the content and its structure – which was its purpose in the first place.

Cascading Style Sheets The original guide to CSS, Cascading Style Sheets, produced by its inventors Hakon Lie and Bert Bos, is thorough and well illustrated, but it’s written in a very dry manner. Eric Meyer manages to make his account more readable, and more easily digestible for those who will need it. His ‘definitive guide’ is organised in logical sections which discuss what can be done with fonts, colour, the appearance of text, and layers – which is the introduction of a third dimension to what appears on screen.

He explains the many ways of creating colour – with a humane description of the mind-bending hexadecimal system. Then he deals with the complications of length units, the arrangement of text on the page (using spacing, justification, decoration, and alignment) and the way in which fonts and the appearance of text can be controlled.

He goes into a lot of detail on the manner in which fonts are rendered – their family, size, weight, attributes. The same is true on backgrounds. It’s a pity that O’Reilly have decided to limit the book illustrations to white, grey and black – because the topic is crying out for colour illustration.

Sometimes there are extended descriptions of what CSS tags will do, when an illustration would have been more useful, but he explains which elements are ‘deprecated’ – that is, ‘in the process of being phased out’ from the HTML Specification.

CSS also allows authors to get ready for the eventual move from HTML to extensible markup language (XML) so it’s worth learning about style sheets if the current enthusiasm for XML is going to last. There are some amazingly complex effects described which involve background images and negative positioning – pushing graphics off the screen.

You have to be prepared to embrace another set of jargon – declarations, elements, selectors, properties, pseudo-elements, values, specificity, and inheritance – but no doubt these terms will become familiar.

There are also three useful appendices – an annotated list of resources, a complete list of CSS1 and CCS2.0 properties, a sample style sheet, and a list of browser support. O’Reilly have occasionally been criticised for calling so many of their manuals ‘the definitive guide’ – but in this case there’s a good case to say the title is fully justified.

© Roy Johnson 2006

Buy the book at Amazon UK

Buy the book at Amazon US

Eric A. Meyer, Cascading Style Sheets: The Definitive Guide, Sebastopol, CA: O’Reilly, third edition, 2006, pp.518, ISBN 0596527330

More on technology
More on digital media
More on web design
More on computers

CSS Cookbook

by

quick solutions to common style sheet problems

Style sheets take all the slog out of designing the appearance of your web pages. No more fiddling with the code in a multitude of pages: just fix the font size, the line spacing, the page width or the size of headings in one file, the style sheet, and that will apply across your whole site. This is a guide to what is possible using the latest specification (2.1) of style sheets, written by Christopher Schmitt – one of the endless number of expert authors O’Reilly manage to locate.

CSS CookbookIt’s aimed at people who want to make a start with style sheets, or who are grappling with their problems and need quick fix solutions. It assumes you know the basics of web design using standard HTML markup, but he does keep the relationship between the two clearly in mind:

As a design language, CSS is focused on presentation, which includes helping web developers control the layout of their pages. HTML tables and other elements, on the other hand, are tools you use to mark up content. The ideal is to have HTML represent the structure of the content as an intellectual abstract level and CSS say how to present it for a particular device.

The presentation couldn’t be simpler. First a problem is specified (You want to indent the first line of a paragraph) and then he shows the CSS code to achieve it, followed by an illustrative screen shot. There’s an explanation of how and why it works as it does, and there are web links to online tutorials and official specifications directly related to that topic.

Each chapter considers one element of a web page that style sheets can control – the font, the page, links, lists, forms, tables, and how to create print-friendly pages.

He shows some of the new effects possible with the latest CSS version 2.1 – creating collapsible menus and tabbed folders, designing forms without using tables, controlling the appearance of content held within table cells, and creating multi-column pages holding the content in place with the very useful float property.

One of the hardest parts of learning about style sheets so far as I am concerned is the language in which it is expressed. It’s a pity there’s so much abstract terminology. Even at intermediate level it’s difficult to grasp immediately statements such as this:

Because these properties aren’t passed to child block-level elements, you don’t have to write additional rules to counter the visual effects that would occur if they were passed.

He finishes with some nifty tips, tricks, and workarounds. How to create a print-friendly style sheet for instance. This removes all the decoration and navigational graphics from a web page to produce something that is comfortably readable when printed out. All this without changing one bit of the page markup.

There’s also a useful appendix listing discussion groups, web resources, downloadable software, and ready-made CSS templates. Like everything else in this book, these take you quickly to solve problems of design.

The latest edition of this book is a hugely enlarged resource – more than double the size of the first. It’s been expanded to include much more information for CSS learners, explaining topics that range from basic web typography and page layout to techniques for formatting lists, forms, and tables. For more advanced users it has also been updated to take into account the behaviour of CSS in the latest versions of web browsers, including Internet Explorer 7, plus Firefox and Opera. You can’t get much more up to date than this.

© Roy Johnson 2009

Buy the book at Amazon UK

Buy the book at Amazon US

Christopher Schmitt, CSS Cookbook, Sebastopol, CA: O’Reilly, third edition, 2009, pp.736, ISBN: 059615593X

More on technology
More on digital media
More on web design
More on computers

CSS The Missing Manual

by

easy guide to styling web pages

We all know that cascading style sheets (CSS) is the way to go for web designers. It helps to separate style from content, and you can change the appearance, font, or layout of an entire website with just one tweak of style sheet code. But how d’you do it, and what’s the best way of controlling the appearance of your web pages? David McFarland’s new book CSS – The Missing Manual starts out by listing all the reasons you should wean yourself away from those old HTML habits and explaining why XHTML and the use of style sheets is more efficient. He explains inline and external stylesheets then very gradually shows you how to create one.

CSS The Missing ManualI still find it difficult to get my head round the abstract language of styles (declaration, selector, property, and value) but he spells it out as clearly as possible. But the best part about his approach is that he is systematic, detailed, and very straightforward. Each stage in the process is illustrated with a screenshot – though I think the use of colour printing would have helped. Then it’s on to class selectors, plus divs and spans for creating special effects

After that he moves on to discuss basic formatting – how to adjust the appearance of text on the screen. And i couldn’t help thinking that this should have come earlier. Almost any beginner I can imagine would first of all want to learn how to affect the appearance of text on the page, beforedealing with more complex issues such as ‘cascade inheritance’. So if you’re just starting out, jump straight to chapter six.

The good thing is that he shows you every step of the way: what to type in as CSS code; how to create the effect you need; refresh the browser – and, hey presto! – there it is on screen.

Another thing I like about this series is that all along the learning route they list software which is available as free download to perform the tasks that you need.

© Roy Johnson 2009

Buy the book at Amazon UK

Buy the book at Amazon US

David McFarland, CSS: the Missing Manual, Sebastopol, CA: O’Reilly, 2009, pp. 560, ISBN: 0596802447

More on technology
More on digital media
More on web design
More on computers

Dreamweaver The Missing Manual

by

complete manual and guide to popular web editor

The ‘Missing Manual’ series is the brainchild of best-selling author David Pogue. These guides provide printed instructions for software normally issued without them. Dreamweaver seems to be the web design tool of choice for both serious amateurs and professionals. It offers lots of powerful tools which allow you to control everything from the details of page design to larger issues of style sheets, JavaScript interactivity, and Web management. Dreamweaver is to web pages as a word processor is to normal documents. That is, it has multiple commands which format the page in any way you wish. And the good thing is, you don’t have to learn any of the underlying code.

Dreamweaver 8 The Missing Manual You can preview the results in multiple browsers – whichever you have installed. This manual covers all the conventional topics of web design – tables, frames, links, text formatting, and layout – but without once discussing the hieroglyphics of coding which must deter so many people wishing to design their own pages. It also deals with the more advanced features of web design, using style sheets, forms, layers, and multimedia such as Flash and Shockwave.

I think this is what has made Dreamweaver so popular – it caters for the amateur who doesn’t need to learn code; the semi-pro who needs power tools on a reasonable budget; and even the pro who wants site maintenance and management. It handles all these levels of task with ease.

Dreamweaver has lots of terrific features – such as a tool which will convert tags from upper to lower case – that is from from <B> to <b>. Why is this important? Because XML – to which we’re all heading – requires lower case tags. This makes it a powerful conversion tool, amongst other things.

There’s even a feature for re-organising existing sites which will automatically update all your links and folders. In addition, you can run a site past the program and it will show you any orphaned pages and broken links. These are excellent features for both amateur and professional users.

David McFarland’s explanations are painstaking and thorough, and these Missing Manuals are produced at O’Reilly Associates – which guarantees high quality production values.

© Roy Johnson 2006

Buy the book at Amazon UK

Buy the book at Amazon US

David McFarland, Dreamweaver: The Missing Manual, Sebastopol (CA): Pogue Press/O’Reilly, 2006, pp.960, ISBN: 0596100566

More on web design
More on digital media
More on technology

Eric Meyer on CSS

by

web design using cascading style sheets

This is essentially a series of practical tutorials on using style sheets. Eric Meyer on CSS talks you through a series of web page makeovers in fine detail, illustrating the tips and tricks of a professional designer. It’s a book for people who already know HTML, but who want to move on into using style sheets. In fact that’s the point from which he starts – showing you how to convert an existing HTML page. The advantages of using CSS are threefold. Your web pages will be smaller and will download more quickly; you gain fine control over the layout of the page; and if you change the appearance of your site, it can be done with no more than one or two lines of code in the style sheet.

Eric Meyer on CSSHe goes through one makeover project in each chapter, showing how each additional line of coding affects the layout of the page. The changes are illustrated with screenshots each step of the way. For those who are really keen to learn, the book has its own web site where you can download all the pages and style sheets used in the tutorials. The idea is you can read his advice and work through the pages in a text editor at the same time.

His examples include styling a press release and an events calendar; bringing hyperlinks to life; controlling and styling navigation menus; and dealing with forms and background images using layers.

One of the most interesting chapters for me was creating style sheets for producing print versions of Web pages – something we have been asked to do a lot recently.

He also covers how to float and position page elements, how to create multi-column pages, and even how to combine sliced graphics with style sheet positioning to make non-rectangular pages.

It all becomes quite technically advanced, but he sticks to his one step at a time approach and explains every change of code and what effect it will have.

This will appeal to those people who want to get hands-on experience of style sheets, and I imagine it will also be useful as a reference for checking the effect of using any coding element – including the often unforeseen side effects.

© Roy Johnson 2003

Buy the book at Amazon UK

Buy the book at Amazon US

Eric A. Mayer, Eric Mayer on CSS: Mastering the Language of Web Design, Indianapolis: IN, New Riders, 2003, pp.322, ISBN 073571245X

More on technology
More on digital media
More on web design
More on computers

How to fail at web design

by

classic guidelines which mean you can’t go wrong

Web design fail- guarantee disaster

Web design failure is fairly easy. Just follow any of the following guidelines. And if possible, try to combine at least two or three.

1. Have your whole site in one page, then you won’t have to bother with navigation buttons.

2. Put a huge graphic on the entry page, before the content of your site. It’s not your fault if visitors have a slow connection.

3. Nobody minds the odd broken link.

4. Use animated GIFs liberally. These are very amusing.   web design fail

5. Have the site in at least three frames.

6. Web sites without background wallpaper are dull.

7. Use lots of different fonts. Everyone has the same fonts installed these days.

8. Red text on a coloured background looks really good – as you can see.

9. Use plenty of underlining. This will draw people’s attention to the important parts of your message.

10. Better still, show people you mean business by highlighting lots of your text. This can be done at random, but it’s best used on special offers. It also looks really COOL!!!!!

11. Combine these features wherever possible, centre your text, add colour, and make sure your punters customers get the message. Get Ready For More Backlinks,

More Traffic And Higher Search Engine Rankings Almost Instantly!

12. Decorate pages with page counters, clip art, and and plenty of horizontal rules.

13. This is the Internet, so you don’t have to worry about speling and punctuatio

14. If some pages are unfinished, just paste in an “Under Construction” sign.

15. HAVE ALL YOUR TEXT IN CAPITALS – AS IT MAKES IT MUCH EASIER TO READ. JUST LOOK AT THIS REALLY GOOD EXAMPLE.

16. Once you’ve got your site, make sure that you publicise it as widely as possible. If you are not certain which groups to post to, you should post to as many as possible.

17. Ensure your message gets through by posting it at least three times. Repeat these postings on a daily basis.

18. If in any doubt, copy other people’s great ideas.

© Roy Johnson 2004

More on How-To
More on literary studies
More on writing skills

HTML and XHTML

by

the encyclopaedia of HTML coding – and the latest XHTML

The problem with HTML is that just when you thought you had grasped the basics of web page design, something new emerges. Here comes the latest development – XHTML – which stands for ‘extensible hypertext markup language’. Musciano and Kennedy aim to keep you up to date with these latest developments. So – what are they? XHTML is an extension to the HTML code – at 4.01 in its present version. It is in fact a part of the XML code – and XML is itself a subset of the general Standard General Markup Language (SGML). Still confused? The authors have already guessed that, and in HTML and XHTML they do their best to explain.

HTML and XHTMLWhat they do in this excellent manual is cover every element of HTML/XHTML in detail, explaining how each element works and how it interacts with other elements. Many hints about HTML/XHTML style help you write documents ranging from simple online documentation to complex presentations. With hundreds of examples, the book gives you models for writing your own effective web pages and for mastering advanced features like style sheets and frames.

When HTML was originally conceived, no one had any idea it would be so successful or be asked to handle so many kinds of documents, browsers, and media. While it has borne up admirably under the demands of web users, HTML 4.0 has stretched as far as it can to accommodate new technology. While HTML 4.0 is petering out, XHTML 1.0 stands ready to step in, designed to handle almost anything web authors can dream up.

There are in fact three possibilities for XHTML – the ‘strict’ version which is limited but future-proof; the ‘transitional’ version which allows authors to write with current browsers in mind; and a third version which deals with frames. The reassuring news they offer is that “learning HTML is still the way to go for most authors and Web developers” – but they do remind readers that “content is paramount; appearance is secondary”.

They also warn that “writing XHTML documents requires much more discipline and attention to detail than even the most fastidious HTML author ever dreamed necessary.” This sounds a bit frightening – but really, it just means being extra careful with coding. It means that all tags must be opened, then closed. No more leaving out those </P> paragraph tags.

And the beauty of this book is that all the basic HTML coding is covered in the great detail which has been generated over its earlier editions. They deal with forms, frames, tables, and even Java scripts, and all the tutorial material is fully illustrated, with plenty of screenshots and understandable code.

All the really useful appendices are there too – HTML grammar, Cascading Style Sheets, the HTML and XHTML document definitions, character entities, color names and values, and of course a complete list of XHTML tags with browser compatibility notes.

If you want the very best reference manual to HTML and its latest developments – this is it. I guarantee that no matter which other web page design books you might have on your shelves, this is the one to which you will keep coming back – again and again.

© Roy Johnson 2006

Buy the book at Amazon UK

Buy the book at Amazon US

Chuck Musciano & Bill Kennedy, HTML& XHTML: The Definitive Guide 6th edition, Sebastopol (CA): O’Reilly, 2006, pp.654, ISBN: 0596527322

More on technology
More on digital media
More on web design
More on computers

Get in touch

info@mantex.co.uk

Content © Mantex 2016