HTML without Tables Using CSS
I’ve been around the Web for a while now—some might say I’ve been here from the beginning. And one thing that always bothered me about the Web was its inherent inability to disentangle content from presentation. The interconnected-ness of it all meant that, to produce a web site, you needed not only to have something to say, and some graphical design skills to make the presentation of that message look good, but you also needed to be a bit of a programmer. Initially, this “programming” was a pretty lightweight task: HTML markup, when all is said and done, isn’t really programming. Still, it’s more than just writing words and using a word processor to format them, or conceptualizing a display for a page—digitally or otherwise.
It’s no surprise, then, that designers who had clear ideas about how they wanted their web pages to look were frustrated by the need to create complex sets of deeply nested tables even to approximate their visions. As designers created increasingly complex ideas, and web browsers diverged further and further from even the merest semblance of compatibility, the Web threatened to collapse under its own weight. Serious designers began lobbying for a complete break from HTML to some new approach to the Web. Chaos reigned.
[ad code=1 align=center]
The Holy Grail of the Web, back then, was the notion that authors should write, designers should design (and code HTML), and programmers should … well … program. Those boundaries had not been clear in the first few years of the Web.
Then, along came Cascading Style Sheets (CSS), the subject of this book. The governing forces of the Web, through the World Wide Web Consortium, better known as the W3C,1 addressed the problem with the proposal that we divide presentation instructions and the structural markup of content into two separate kinds of files.
Things haven’t been the same since, thank goodness! Now we can (mostly) separate what we say from the way it’s presented to the user in a browser. I wager that most of today’s web developers are fairly comfortable with CSS, and would be no more likely to think of embedding presentational instructions in their HTML than they would to consider mixing 23 fonts on the same web or print page.
[ad code=3 align=center]
Since CSS emerged, dozens of books have been written about it. So when Site-Point approached me to write a CSS book, my first thought was, “Who needs another CSS book?” But as they began to reveal their vision to me, it made sense. It was indeed time for a book that took a different tack, based on the extensive experience of the web design community.
This book is different from the rest in two fundamental ways.
First, it focuses on the question of how to use CSS to accomplish some of the successes that web designers have spent significant amounts of time and energy to create using nested tables. In other words, this book doesn’t try to start from scratch and become a CSS tutorial. Instead, it’s a sort of introductory CSS design guide.
Second, it starts at the outside and works its way in. Most, if not all, other CSS books focus first on the little pieces: the attributes, values, and tags that comprise the syntax of CSS. They then explain how to put those pieces together into a web site.
This book begins by looking at how CSS should influence the overall design of a site, and how to put the CSS framework in place before you begin to deal with individual HTML elements and their styling.
Who Should Read this Book?
As I wrote this book, I had in mind web designers with at least a little experience building sites, who are curious about how CSS can help them become more effective designers. It’s aimed at the beginner to intermediate designer. I’ll assume a strong grasp of HTML, but that’s about it.
What’s in this Book?
Chapter 1: Getting the Lay of the Land
This first chapter serves as a brief introduction to CSS and the main concepts that we’ll discuss throughout the rest of the book. If you haven’t used CSS at all before, or you want to ensure that you understand the concepts fully before you get started, this chapter is a great place to start.
What’s in this Book?
Chapter 2: Putting CSS into Perspective In this chapter, we begin to use CSS in practical ways, and to discuss why we might want to use CSS rather than old-style methods like font tags for text styling, and tables for layout.
Chapter 3: Digging Below the Surface Picking up the pace, we start to look in some depth at how CSS works. Here, we consider the different ways in which we can add CSS to our documents, we discuss CSS selectors and rules, and we investigate the various shorthand properties that will help us streamline our CSS files. We’ll also come to grips with the concept of inheritance. This chapter ensures that you understand the terminology and syntax we’ll be using, which will make it easier for you to follow examples in this book and elsewhere.
Chapter 4: Validation and Backward Compatibility In this chapter, we discuss how we can validate our documents and style sheets to ensure that they comply with the published specifications. We also find out a bit about the practicalities of ensuring our sites’ backward compatibility with older browsers or devices.
Chapter 5: Splashing Around a Bit of Color This chapter looks closely at the ways in which colors can be applied to text and other objects, as well as to page backgrounds. It will discuss how to describe colors, where to use them, and how to make them work together to achieve specific effects.
Chapter 6: Working with Fonts This chapter examines the question of how fonts can be used properly in CSS-based web design. After an explanation of how CSS deals with fonts at the most abstract level, we’ll look at the use of standard and nonstandard fonts in web pages. Finally, we’ll discuss some guidelines for the selection of font families and sizes for your page designs.
Chapter 7: Text Effects and the Cascade This chapter builds on Chapter 6, where we looked at text in terms of fonts and their related style properties. Here, we’ll explore a range of other ways in which we can style text, and spend time looking at links and lists, in particular.
Chapter 8: Simple CSS Layout We start this chapter by creating a simple two-column layout. Along the way, we discover how to use absolute and relative positioning techniques in CSS layouts; how margins, padding, and borders work together; and how we can put all of these techniques into practice by creating a fully functional two-column layout.
Chapter 9: Three-column Layouts Out first task in this chapter is to add a third column to the layout we created in Chapter 8. We then discuss the issues that arise when we want to add a footer that runs along the bottom of a multiple-column layout like ours. Along the way, we’ll find out how to use the float property to create multi-column layouts, and how to create full-length columns using CSS. We’ll also consider some of the issues that surround these types of layouts.
Chapter 10: Fixed-width Layouts In this last chapter, we’ll create a fixed-width layout that’s centered in the user’s browser window. As we progress, we’ll look at techniques for styling data tables effectively, and discuss one method by which you can enable your users to choose a different layout if they find your fixed-width layout difficult to read.
Appendix A: CSS Miscellany This appendix provides a brief description of some of the more obscure parts of CSS that weren’t covered in detail earlier in the book, including the “atrules” and aural style sheets. It also introduces the concept of DHTML as a launching point for further reading.
Appendix B: CSS Color Reference This appendix provides a comprehensive list of all (official and unofficial) color names in CSS, along with their hexadecimal and RGB equivalent values.
Appendix C: CSS Property Reference This sizeable appendix contains a complete reference to all CSS properties at the time of writing. It includes a practical example for each property (when appropriate) and gives an indication of the level of support browsers provide for that property.
Bibliography The Recommended Resources listed here include books and web sites. The bibliography is by no means exhaustive; it’s more of a list of our own favorite references—resources that we, personally, have found helpful over the years—than a reference to every resource on the topic.
Related posts:
- Create Stunning HTML Email that Just Works free Ebook
- Photoshop to HTML free ebook and tips
- WEB applications: Introduction to DEVELOPMENT free ebook
- Smashing eBook Series: #1 Professional Web Design
- PHP The Good Parts : Delivering the Best of PHP| free ebook and tips
- Php/Mysql Programming for the Absolute Beginner -Php/Mysql free ebook
- Adobe Dreamweaver CS5 on Demand free ebook
Pingback: laser tag equipment