CSS Mastery: Advanced Web Standards Solutions (Black & White)
Andy Budd
Language: English
Pages: 362
ISBN: 1430223979
Format: PDF / Kindle (mobi) / ePub
Building on what made the first edition a bestseller, CSS Mastery: Advanced Web Standards Solutions, Second Edition unites the disparate information on CSS-based design spread throughout the internet into one definitive, modern guide. Revised to cover CSS3, the book can be read from front to back, with each chapter building on the previous one. However, it can also be used as a reference book, dipping into each chapter or technique to help solve specific problems. In short, this is the one book on CSS that you need to have.
This second edition contains:
- New examples and updated browser support information
- New case studies from Simon Collison and Cameron Moll
- CSS3 examples, showing new CSS3 features, and CSS3 equivalents to tried and tested CSS2 techniques
What you’ll learn
- The best practice concepts in CSS design.
- The most important (and tricky) parts of CSS
- Identify and fix the most common CSS problems
- How to deal with the most common bugs
- Completely up to date browser support information
- Covers CSS3 as well as CSS2 showing you the future of CSS
Who this book is for
This book is aimed towards intermediate web designers/developers, although the examples are simple enough for novice designers/developers with a basic understanding of CSS to grasp.
The CSS 2/3 content of the book is delivered in a way that enables you to learn CSS2 techniques that you can implement now in professional work, and then gem up on CSS3 techniques to start looking towards the future.
Table of Contents
- Setting the Foundations
- Getting Your Styles to Hit the Target
- Visual Formatting Model Overview
- Using Backgrounds for Effect
- Styling Links
- Styling Lists and Creating Nav Bars
- Styling Forms and Data Tables
- Layout
- Bugs and Bug Fixing
- Case Study: Roma Italia
- Case Study: Climb the Mountains
Web Design: Best Portfolios (Icons)
Using Joomla: Building Powerful and Efficient Web Sites
jQuery for Designers: Beginner's Guide
REST in Practice: Hypermedia and Systems Architecture
mode and quirks mode. In standards mode, the browser renders a page according to the specifications, and in quirks mode pages are displayed in a looser, more backward-compatible fashion. Quirks mode typically emulates the behavior of older browsers such as Microsoft Internet Explorer 4 and Netscape Navigator 4 to prevent older sites from breaking. The most obvious example of the difference between these modes revolves around the Internet Explorer (IE) on Windows proprietary box model. When
to every descendant of an element. If the property you are trying to set is an inherited property, you may as well apply it to the parent element. After all, what is the point of writing this: p, div, h1, h2, h3, ul, ol, dl, li {color: black;} when you can just write this: body {color: black;} Just as sensible use of the cascade can help simplify your CSS, good use of inheritance can help to reduce the number and complexity of the selectors in your code. It you have lots of elements inheriting
appear: a box with an arrow (see Figure 5-4). Figure 5-4. External link icon The easiest way to include an external link icon on your page is to add a class to any external links and apply the icon as a background image. In this example, I have created space for the icon by giving the link a small amount of right padding and then applied the icon as a background image at the top right of the link (see Figure 5-5). .external { background: url(/img/externalLink.gif) no-repeat right top;
6-2. Styled vertical nav bar 135 CHAPTER 6 As always, you need to start with good, semantic mark-up:
The first things you want to do are remove the default bullets and zero down the margin and padding: ul.nav { margin: 0;
bottom: -3em; width: 7em; padding: 0.2em 0.5em; background-color:#ffc; text-align: center; left: 25px; margin-left: -4em; } With the notes now centered, it’s time to work on their interactivity. The notes should be hidden by default and only displayed when the hotspot is hovered over. To do this, you could set the display property to none and then change it to block when the anchor link is hovered over. However, this would prevent some screen readers from accessing the contents of the note.