Mantex

Tutorials, Study Guides & More

>> Home / Archives for 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

Designing with Web Standards

by

XHTML + style sheets = creating ‘timeless code’

Jeffrey Zeldman is an evangelist for designing with web standards and browser compatibility. He suggests that we should embrace the latest technologies to design pages that everyone can view. And he shows how it can be done. The standards in this case are methods of what he calls ‘creating timeless code’. What he means by this is using HTML, XHTML, and style sheets to create pages which can be viewed in almost all current browsers. There are two possibilities – both of which combine XHTML and style sheets.

Designing with Web Standards The first is ‘transitional’ and allows light use of tables for positioning page elements. The second is ‘strict’ and requires you to use CSS for all matters of appearance. There’s a lot about browser development and why Netscape and Internet Explorer from versions 1.0 to 6.0 caused the problems for which Web standards are a solution. Then he launches into an enthusiastic account of how XML will be the technology to finally end the browser wars.

After the theory and argument, the second part of the book shows you how to work in XHTML. This will be relatively easy for anyone used to dealing with HTML. The harder part is controlling the layout and appearance of pages using style sheets.

Zeldman adopts a realistic and tolerant line, knowing that most designers will take the transitional route from HTML to XHTML. He designs a sample site using a combination of XHTML, tables, and style sheets, showing how they can be combined and yet still pass the requirements of W3C validation.

His mission all the while is to reduce the amount of code required to render a page, to eliminate ‘bloat’, and make pages available in all browsers. The secret here seems to be that pages can’t be made to look the same, but they can be made to look acceptable.

As a website designer, I would much rather have my users say my web pages ‘look funny’ rather than saying they ‘don’t work’.

He explains style sheets in a simple and clear manner, then shows them in use as he designs an attractive-looking web site one step at a time.

En passant, he reveals an amazingly clever trick for dealing with older browsers which don’t fully support style sheets. It’s to create a second, simpler set of styles, and force old browsers to use them, leaving more recent browsers to pick up the first more sophisticated set.

He also has lots of useful advice about dealing with multiple browser support, though by the time he has explained all the potential difficulties, you begin to wonder how any web page ever gets published at all.

The latter part of the book deals with accessibility issues, and he ends by showing how the interface of his personal site at zeldman.com was re-designed using style sheets. All the code and the style sheets are available as free downloads at his site.

I was surprised that there was no bibliography, and I think the publishers should have treated him to full colour reproduction. This is intermediate to advanced level guidance, but Zeldman does everything he can to make it entertaining and accessible.

Buy the book at Amazon UK

Buy the book at Amazon US

© Roy Johnson 2005

Jeffrey Zeldman, Designing with Web Standards, Indianapolis:IN, New Riders, 2003, pp.435, ISBN: 0735712018

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

Free style sheet tutorials

by

style sheet tutorials

XML School

This is a comprehensive introduction to the basic issues of style sheets. The tutorials deal with a single issue on each page, and the site includes interactive examples, a quiz test, plus book reviews. It’s also a model of site design in terms of clarity and usability.
http://www.w3schools.com/css/

 

style sheet tutorials Webmonkey
This is everything you need to know about style sheet basics, written by Steve Mulder for Webmonkey.
http://www.webmonkey.com/tutorial/Mulders_Stylesheets_Tutorial

 

style sheet tutorials www.w3.org
The home of Web standards. This is a collection of resources and technical specifications from the World Wide Web Consortium. This body looks after the protocols and standards, so the site is always up to date. It also has online validators, so you can check your work.
http://www.w3.org/Style/CSS/

 

style sheet tutorials Dave Raggett’s Introduction to CSS
A thorough explanation of style sheet basics – written by somebody who is a member of the W3 organisation which defines style sheet protocols. The tutorial includes useful tips on browser-safe colours.
http://www.w3.org/MarkUp/Guide/Style

 

redbtn Jacob Nielsen’s ‘Effective Use of Style Sheets’
This article is now a little dated – but Nielsen is always worth reading. His emphasis here is on the advantages of style sheets, and how to avoid the most common mistakes.
http://www.useit.com/alertbox/9707a.html

 

redbtn Page Resource.com
Straightforward explanation of how style sheets work written by John Pollock. A bit dated in appearance now, but suitable for beginners.
http://www.pageresource.com/dhtml/indexcss.htm

 

redbtn Web Design Group
Another text-based primer on CSS basics, written by John Pozadzides and Liam Quinn. This too is bit dated in appearance now, but suitable for beginners.
http://htmlhelp.com/reference/css/

© Roy Johnson 2009

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

HTML with CSS and XHTML

by

web design using style sheets and the latest standards

This is an unusual guide to HTML and web design, because it teaches via chat and fun, not boring routines. It’s aimed at beginners who want to get web pages up on to a site, but who don’t want to be bored rigid with long lists of ‘elements’, ‘attributes’, and ‘selectors’. The authors use instead just about every printable device for getting their lessons across: explanations, diagrams, screenshots, cartoons, bulleted lists, quizzes, dialogues, crosswords, tests, and downloadable templates. They also teach predominantly via pictures, which is one reason the book is so long (658 pages). The other reason is that it’s so comprehensive.

HTML CSS XHTMLThey cover basic HTML, then XHTML, interactivity, and style sheets. In fact they take the unusual step of introducing style sheets right at the start. This approach of multiple instruction produces quite a lot of repetition and redundancy – but I’ve no quibble with that. It’s based on the sound pedagogic principle the when you are learning, several approaches are better than one.

Geared towards both Mac and Windows users, they show you how to design pages, how to insert graphics, how to validate your pages to check for problems and make the pages compliant with W3C standards.

I still find the language of stylesheets over-abstract and hard to grasp, but they explain it all very carefully, and most importantly they show you both what to type into your text editor and how it will look in a browser.

There are a couple of easier chapters on styling with fonts and colours, then it’s back to the harder stuff with CSS elements and the box mode – which is similar to HTML tables. Here there are some very useful detail on how browsers deal with the information coded into your pages, some of which explains why you can’t always get things to appear on screen how you want them to look.

They end with chapters on tables and forms – still urging readers not to fall back on old HTML 4.0 tricks for layout and appearance, but to stick with style sheets all the way.

So – truth be told, it’s a book which starts off quite easily, but then gradually becomes more advanced. But if you do all the exercises and tests along the way, this gradual acceleration should be hardly noticeable.

© Roy Johnson 2005

Buy the book at Amazon UK

Buy the book at Amazon US

Elisabeth Freeman and Eric Freeman, Head First: HTML with CSS and XHTML, Sebastopol: CA, 2005, pp.658, ISBN 059610197X

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

Learning Web Design

by

Illustrated and comprehensive introduction to HTML

Jennifer Niederst is a specialist trainer in web design. Her last book, Web Design in a Nutshell, is a best-selling reference guide to the subject. Learning Web Design is her latest – a manual that covers all the basis of HTML design – from a detailed explanation of coding to the principles of good navigation and information design. So what makes this introductory guide any different to the dozens of others that are available?

Learning Web DesignWell, it’s a very handsome production, with every point well illustrated by screenshots and the appropriate code. She also shows how to achieve each major effect using three popular editors – Dreamweaver, GoLive, and FrontPage. But the main strength here is the attractive balance she has struck between tuition and visual presentation.

Her pages are surrounded by indented notes, sidebars, and pull-out boxes offering tips and special workarounds. This form of presentation makes learning lighter and easier. And she’s especially strong on explaining graphics.

I particularly like her approach of explaining details which don’t get mentioned in more official guides. For instance, if you wish to colour a link, the font colour tag must be placed inside the link, otherwise it won’t work.

She also reveals lots of tips, tricks, and workarounds for overcoming some of the frustrating limitations of HTML. I was very glad to pick up a neat trick for creating pop-up windows using a small JavaScript – which answered a current problem on quiz answers I have been designing.

The book ends with a very brief glimpse at advanced techniques using style sheets, and streaming audio and video files. This is one which will appeal to beginners and trainers. Work your way through the tutorials, and you could have a reasonable site up on the Web within a few days.

© Roy Johnson 2002

Buy the book at Amazon UK

Buy the book at Amazon US

Jennifer Niederst, Learning Web Design: A Beginner’s Guide to HTML, Graphics, and Beyond, Sebastopol (CA): O’Reilly, 2001, pp.388 ISBN: 0596000367

More on web design
More on digital media
More on technology

Web Design in a Nutshell

by

comprehensive manual, plus tips and explanations

Web site design manuals are often all screen shots and little substance. These can be quite useful for beginners, who might be intimidated by too many technicalities. At the other extreme there are the dense catalogues of coding definitions issued by the standards authorities which only an expert would ever need to consult. In between are all the rest, which need to present something original or at least interesting to distinguish themselves from the mass. Web Design in a Nutshell manages to combine the best of the intermediate and advanced worlds.

Web Design in a NutshellThey feature a compressed mixture of instruction and reference which cuts out all dross, and offer their usual excellent value. Jennifer Niederst explains that she felt the urge to produce yet another book on Web design for the simplest of motives – her own use.

I was becoming frustrated with the time I was spending on the Web tracking down the answers to little questions: ‘Which tag does that attribute go in?’, ‘Does this browser support that technology?’, ‘What’s the best way to put audio on the Web?’ And I’m not ashamed to admit that I’ve been reduced to tears after hours of battling a table that mysteriously refused to behave, despite my meticulous and earnest efforts. You just can’t keep all this stuff in your head any more.

Niederst is one of their former staff writers and designers [see her recent Learning Web Design]. She explains HTML in a clear and sensible manner, starting with what she calls ‘the web environment’ – how it all works, why you should keep different browsers in mind, and what ‘screen resolution’ really means.

Then there is a very thorough coverage of all the basic elements: HTML coding, text formatting, links and images, tables, frames, and forms; then graphics in .gif, .jpg and .png formats; colours, audio, video, and javascript. The latter part of the book is devoted to what she calls ‘the emergent technologies – cascading style sheets, dynamic HTML, XML, and font embedding.

All the way through, she throws out tips, hints, and warnings which give you confidence that she knows whereof she speaks, and as you would expect in a work of this kind, there are a full range of reference tables – the complete HTML 4.0 specification, ‘deprecated’ and proprietary tags, a glossary of terms, and even an extended table of the latest support for style sheets in a wide range of browsers.

The latest edition has been substantially revamped and extended. Additions include more on printing pages from the Web, using Flash and Shockwave, using SMIL for multimedia presentations, and designing for the wireless web using WML.

At the risk of sounding like an O’Reilly groupie, I have to say that their productions are almost always a bibliographic joy to behold. They are well written, elegantly designed, meticulously edited, and flawlessly printed. This one is no exception.

© Roy Johnson 2001

Buy the book at Amazon UK

Buy the book at Amazon US

Jennifer Niederst, Web Design in a Nutshell: A Desktop Quick Reference, 2nd edition, Sebastopol: O’Reilly & Associates, 2001, pp.640, ISBN: 0596001967

More on web design
More on digital media
More on technology

Get in touch

info@mantex.co.uk

Content © Mantex 2016